Show role parameters in role select component

HSG-Library · Feb 15, 2024 · 26eb1c4 · 26eb1c4
1 parent 88c6428
commit 26eb1c4
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/cloudapp/src/app/components/roleSelect/roleSelect.component.html b/cloudapp/src/app/components/roleSelect/roleSelect.component.html
@@ -22,7 +22,21 @@
 					</mat-checkbox>
 				</mat-list-item>
 				<mat-list-item class="item-role" *ngFor="let role of mappedRoles.get(area)">
-					<mat-checkbox [checked]="roleChecked(role)" (change)="selectRole(role)">{{role.role_type.desc}}<br><span class="scope">[{{role.scope.desc}}]</span></mat-checkbox>
+					<mat-checkbox [checked]="roleChecked(role)" (change)="selectRole(role)">
+						{{role.role_type.desc}}<br>
+						<span class="scope">{{role.scope.desc}}</span>
+						<span class="parameter" *ngIf="role.parameter && role.parameter.length > 0 ">
+							<br>
+							parameter:
+							<ul class="role-parameter">
+								<li *ngFor="let param of role.parameter">
+									<span>Type: {{param.type.value}}</span><br>
+									<span>Value: {{param.value.desc}}</span><br>
+									<span *ngIf="param.scope">Scope: {{param.scope.desc}}</span>
+								</li>
+							</ul>
+						</span>
+					</mat-checkbox>
 				</mat-list-item>
 			</div>
 		</ng-container>

diff --git a/cloudapp/src/app/components/roleSelect/roleSelect.component.scss b/cloudapp/src/app/components/roleSelect/roleSelect.component.scss
@@ -1,8 +1,14 @@
-.scope {
+.scope, .parameter {
 	color: #888;
 	font-size: smaller;
 }
 
+.parameter ul {
+	margin: 0;
+	padding-left: 15px;
+	list-style: circle;
+}
+
 mat-expansion-panel {
 	margin-top: 20px;
 	margin-bottom: 20px;

diff --git a/cloudapp/src/app/components/roleSelect/roleSelect.component.ts b/cloudapp/src/app/components/roleSelect/roleSelect.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { UserRoleAreaService } from '../../services/userRoleAreaService'
 import { UserDetailsChecked } from '../../types/userDetailsChecked'
 import { UserRole } from '../../types/userRole.type'
+import { UserRolesService } from '../../services/userRoles.service'
 
 @Component({
 	selector: 'app-role-select',
@@ -37,19 +38,20 @@ export class RoleSelectComponent {
 
 	constructor(
 		private userRoleAreaService: UserRoleAreaService,
+		private userRoleService: UserRolesService
 	) { }
 
 	mapRoles(): void {
 		if (!this._user) {
 			return
 		}
 		this.userRoleAreaService.getRoleTypeDefinitionMapping().subscribe(mapping => {
-			this._user.user_role.forEach(role => {
+			const roles = this.userRoleService.normalizeRolesList(this._user.user_role)
+			roles.forEach(role => {
 				const area = mapping.get(role.role_type.value)
 				if (area) {
 					if (this.mappedRoles.has(area)) {
 						this.mappedRoles.get(area).push(role)
-						this.mappedRoles.get(area).sort((a, b) => a.role_type.desc.localeCompare(b.role_type.desc))
 					} else {
 						this.mappedRoles.set(area, [role])
 					}

diff --git a/cloudapp/src/app/services/userRoles.service.ts b/cloudapp/src/app/services/userRoles.service.ts
@@ -226,7 +226,7 @@ export class UserRolesService {
 			)
 	}
 
-	private normalizeRolesList(roles: UserRole[]): UserRole[] {
+	normalizeRolesList(roles: UserRole[]): UserRole[] {
 		roles.map(role => {
 			role.parameter = role.parameter.sort((param1, param2) => {
 				const type1 = param1.type.value