Implement admin and user sidebars with routing and styling updates

2025-07-19 17:23:11 +03:00
parent 70338eae0b
commit 88f0cf307e
26 changed files with 540 additions and 120 deletions
@@ -0,0 +1,56 @@
+<table mat-table [dataSource]="users">
+  @for (column of columnsSchema; track column){
+    <ng-container [matColumnDef]="column.key">
+      <th mat-header-cell *matHeaderCellDef>
+        {{column.label}}
+      </th>
+      <td mat-cell *matCellDef="let element">
+        @switch (column.type) {
+          @case ('list') {
+            <mat-form-field class="example-chip-list">
+                <mat-chip-grid #chipGrid aria-label="Role selection">
+                  @for (role of element.roles; track $index) {
+                    <mat-chip-row (removed)="remove(role,element)">
+                      {{role.name}}
+
+                        <mat-icon
+                          matChipRemove
+                          [attr.aria-label]="'remove ' + role.name"
+                        >
+                          cancel
+                        </mat-icon>
+
+                    </mat-chip-row>
+                  }
+                </mat-chip-grid>
+                <input
+                  name="currentRole"
+                  placeholder="Add role..."
+                  [matChipInputFor]="chipGrid"
+                  [matAutocomplete]="auto"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                  [formControl]="rolesControl"
+                  [matChipInputAddOnBlur]="true"
+                  (matChipInputTokenEnd)="add($event,element)"
+                  (input)="change($event,filteredRoles(element.roles))"
+                />
+                <mat-autocomplete [formControl]="ac"
+                                  autoActiveFirstOption
+                                  #auto
+                                  (optionSelected)="selected(element,$event); ">
+                  @for (role of filteredRoles(element.roles); track role) {
+                    <mat-option  [value]="role">{{role.name}}</mat-option>
+                  }
+                </mat-autocomplete>
+              </mat-form-field>
+          }
+          @default {
+            {{ element[column.key] }}
+          }
+        }
+      </td>
+    </ng-container>
+  }
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>