Add new components for AI and tutorials, update routing, and enhance file upload functionality

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

@@ -0,0 +1,182 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, model} from '@angular/core';
+import {UserService} from '../../../services/user.service';
+import {RolesService} from '../../../services/roles.service';
+import {Role} from '../../../models/role';
+import {User} from '../../../models/user.model';
+import {
+  MatCell,
+  MatCellDef, MatColumnDef,
+  MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef, MatTable
+} from '@angular/material/table';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatAutocomplete,
+  MatAutocompleteSelectedEvent,
+  MatAutocompleteTrigger,
+  MatOption
+} from '@angular/material/autocomplete';
+import {
+  MatChip,
+  MatChipGrid,
+  MatChipInput,
+  MatChipInputEvent,
+  MatChipRow,
+  MatChipsModule
+} from '@angular/material/chips';
+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';
+
+@Component({
+  selector: 'app-users.component',
+  imports: [
+    MatCell,
+    MatCellDef,
+    MatHeaderCell,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    FormsModule,
+    ReactiveFormsModule,
+    MatChipGrid,
+    MatChipRow,
+    MatIcon,
+    MatAutocompleteTrigger,
+    MatChipInput,
+    MatAutocomplete,
+    MatOption,
+    MatFormField,
+    MatChipsModule
+  ],
+  templateUrl: './users.component.html',
+  styleUrl: './users.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+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) {
+    this.getAllRoles();
+    this.getUsers();
+  }
+
+  getAllRoles():any{
+    this.roleService.getAllRoles().subscribe(
+      (data : any) => {
+        this.allRoles = data;
+        console.log(data);
+      },
+      (err : any)=> {
+        this.allRoles = JSON.parse(err.error).message;
+      }
+    );
+  }
+
+  getUsers(){
+    this.userService.getAdminBoard().subscribe(
+      (data : any) => {
+        this.users = data;
+        console.log(data);
+      },
+      (err : any)=> {
+        console.log(JSON.parse(err.error).message);
+      }
+    );
+  }
+
+  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);
+      },
+      (err:any) => {
+        console.log(err);
+      }
+    )
+   }
+}
+
+export const UserColumns = [
+  {
+    key: 'username',
+    type: 'text',
+    label: 'Name',
+    required: true,
+  },
+  {
+    key: 'email',
+    type: 'text',
+    label: 'Email',
+  },
+  {
+    key: 'roles',
+    type: 'list',
+    label: 'Roles',
+    required: true,
+  }
+];