Add edit functionality for user roles and improve role selection UI

jambotron-ui/src/app/modules/admin-module/users.component/users.component.ts

@@ -30,8 +30,9 @@ import {
 import {MatIcon} from '@angular/material/icon';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {MatFormField} from '@angular/material/input';
-import {MatSelect, MatSelectTrigger} from '@angular/material/select';
 import {AdminModuleService} from '../admin-module.service';
+import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-users.component',
@@ -56,7 +57,11 @@ import {AdminModuleService} from '../admin-module.service';
     MatAutocomplete,
     MatOption,
     MatFormField,
-    MatChipsModule
+    MatChipsModule,
+    MatButtonToggleGroup,
+
+    MatButtonToggle,
+    MatButton
   ],
   templateUrl: './users.component.html',
   styleUrl: './users.component.scss',
@@ -64,18 +69,12 @@ import {AdminModuleService} from '../admin-module.service';
 })
 export class UsersComponent {
 
-  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
   allRoles:Role[] = [];
   users: User[] = [];
 
   displayedColumns: string[] = UserColumns.map((col) => col.key)
   columnsSchema: any = UserColumns
 
-  readonly currentRole = model('');
-
-  rolesControl = new FormControl([]);
-  protected ac = new FormControl('');
-
   constructor(private userService: UserService,
               private roleService: RolesService,
               private adminService:AdminModuleService) {
@@ -107,58 +106,36 @@ export class UsersComponent {
     );
   }
 
-  filteredRoles(roles : Role[]):any {
-    return  this.allRoles.filter(
-      (r:Role) => !roles.some((item) => item.id === r.id),
-    );
-  }
-
-  change($event: Event,  roles: Role[]) {
-    roles.filter(
-      (r:Role) => !roles.some((item) => item.name?.toLowerCase() === r.name?.toLowerCase()),
-    )
-  }
-
-  selected(user: User, $event: MatAutocompleteSelectedEvent) {
-    user.roles.push($event.option.value);
-    this.saveUserRoles(user);
-    this.currentRole.set('');
-    $event.option.deselect();
-  }
-
-  add($event: MatChipInputEvent, user:User) {
-    /*const value = ($event.value || '').trim();
-
-    const role = this.allRoles.find(value1 => value1.name === value);
-    if(role){
-      user.roles.push(value);
-      this.saveUserRoles(user);
-    }*/
-        // Clear the input value
-    this.currentRole.set('');
-  }
-
-  remove(role: any, user: User) {
-    const updatedRoles: Role[] = user.roles.filter(
-      (r: Role) => r.id !== role.id  // Simple comparison with the role to remove
-    );
-
-    if (updatedRoles && updatedRoles.length >= 1) {
-      user.roles = updatedRoles;
-      this.saveUserRoles(user);
-    }
-  }
-
    saveUserRoles(user:User){
     this.adminService.updateUserRoles(user.id, user).subscribe(
       (data:any) => {
         console.log(data);
+        user.isEdit = false
       },
       (err:any) => {
         console.log(err);
       }
     )
    }
+
+  isChecked(element: User, role: Role) {
+    let userRoles: Role[] = element.roles;
+    return element.roles.some((r:Role) => r.id === role.id);
+  }
+
+  onValChange(element:User, role: Role) {
+    let userRoles: Role[] = element.roles;
+    if (this.isChecked(element, role)) {
+      userRoles = userRoles.filter((r:Role) => r.id !== role.id);
+    }else {
+      userRoles.push(role);
+    }
+    element.roles = userRoles;
+  }
+
+  isDisabled(element:User, role: Role) {
+    return role.name?.includes(<string>element.username?.toUpperCase());
+  }
 }
 
 export const UserColumns = [
@@ -178,5 +155,10 @@ export const UserColumns = [
     type: 'list',
     label: 'Roles',
     required: true,
-  }
+  },
+  {
+    key: 'isEdit',
+    type: 'isEdit',
+    label: '',
+  },
 ];