@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/iam/user-list.component.ts.ejs

@@ -0,0 +1,446 @@
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSortModule, Sort } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, RouterLink } from '@angular/router';
+import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import { AccessCtrlPipe } from '@/app/core/auth';
+import { KeycloakAdminService, UserRepresentation } from '@/app/core/auth';
+import { ConfirmWithInputDialogComponent } from '@/app/domains/admin/modules/apps/shared/components/confirm-with-input-dialog.component';
+import { ChangePasswordComponent } from '@/app/core/user-management/users/change-password/change-password.component';
+import { UserDetailComponent } from '@/app/core/user-management/users/user-detail/user-detail.component';
+import { UserFormComponent } from '@/app/core/user-management/users/user-form/user-form.component';
+
+type RowFlagOption = { key: string; label: string; iconClass: string };
+type ColumnPref = { key: string; label: string; alwaysVisible?: boolean };
+
+@Component({
+  selector: 'app-user-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CdkScrollable,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
+    RouterLink,
+    AccessCtrlPipe,
+    UserDetailComponent,
+    UserFormComponent,
+  ],
+  host: { class: 'relative flex h-full min-h-0 w-full min-w-0 flex-auto flex-col' },
+  templateUrl: './user-list.component.html',
+  styleUrl: './user-list.component.scss',
+})
+export class UserListComponent implements OnInit, OnDestroy {
+  readonly SCREEN = 'user-management';
+  @ViewChild('drawer') drawer?: MatSidenav;
+
+  private readonly keycloak = inject(KeycloakAdminService);
+  private readonly dialog = inject(MatDialog);
+  private readonly router = inject(Router);
+  private readonly destroy$ = new Subject<void>();
+
+  private readonly columnPreferencesKey = 'cforge-user-list-column-preferences';
+  private readonly viewModeStorageKey = 'cforge-user-management-view-mode';
+  private readonly pinnedStorageKey = 'cforge-user-management-row-state-pinned';
+  private readonly flagsStorageKey = 'cforge-user-management-row-state-flags';
+
+  readonly searchControl = new FormControl('', { nonNullable: true });
+  readonly pageSizeOptions = [10, 25, 50, 100];
+  readonly skeletonRows = Array.from({ length: 8 }, (_, i) => i);
+  readonly rowFlagOptions: RowFlagOption[] = [
+    { key: 'slate', label: 'Slate', iconClass: 'text-slate-400' },
+    { key: 'blue', label: 'Blue', iconClass: 'text-blue-500' },
+    { key: 'emerald', label: 'Primary', iconClass: 'text-primary-500' },
+    { key: 'amber', label: 'Amber', iconClass: 'text-amber-400' },
+    { key: 'rose', label: 'Rose', iconClass: 'text-rose-500' },
+    { key: 'violet', label: 'Violet', iconClass: 'text-violet-500' },
+  ];
+  readonly allColumns: ColumnPref[] = [
+    { key: 'state', label: 'State' },
+    { key: 'username', label: 'Username', alwaysVisible: true },
+    { key: 'email', label: 'Email' },
+    { key: 'firstName', label: 'First Name' },
+    { key: 'lastName', label: 'Last Name' },
+    { key: 'enabled', label: 'Enabled' },
+    { key: 'actions', label: 'Actions', alwaysVisible: true },
+  ];
+
+  users: UserRepresentation[] = [];
+  displayedColumns: string[] = this.allColumns.map((c) => c.key);
+  viewMode: 'table' | 'card' = 'table';
+  drawerMode: 'create' | 'edit' | 'view' = 'create';
+  selectedUser: UserRepresentation | null = null;
+  totalItems = 0;
+  pageIndex = 0;
+  pageSize = 10;
+  isSearching = false;
+  isTogglingEnabled: Record<string, boolean> = {};
+  pinnedUserIds = new Set<string>();
+  activeFlagUserId: string | null = null;
+  rowFlagColors: Record<string, string> = {};
+  private sortState: Sort = { active: '', direction: '' };
+
+  get tableRows(): UserRepresentation[] {
+    if (this.isSearching) {
+      return Array.from({ length: this.skeletonRows.length }, (_, i) => ({ id: `skeleton-${i}` }) as UserRepresentation);
+    }
+    return this.sortedUsers();
+  }
+
+  ngOnInit(): void {
+    this.restorePreferences();
+    this.searchControl.valueChanges
+      .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.pageIndex = 0;
+        this.load();
+      });
+    this.load();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onPage(event: PageEvent): void {
+    this.pageIndex = event.pageIndex;
+    this.pageSize = event.pageSize;
+    this.load();
+  }
+
+  onSortChange(sort: Sort): void {
+    this.sortState = sort;
+  }
+
+  setViewMode(mode: 'table' | 'card'): void {
+    this.viewMode = mode;
+    try {
+      localStorage.setItem(this.viewModeStorageKey, mode);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  load(): void {
+    this.isSearching = true;
+    const term = (this.searchControl.value || '').trim();
+    this.keycloak.searchUsers(term, this.pageIndex, this.pageSize).subscribe({
+      next: (page) => {
+        this.users = page.users;
+        this.totalItems = page.totalCount;
+        this.isSearching = false;
+      },
+      error: () => {
+        this.users = [];
+        this.totalItems = 0;
+        this.isSearching = false;
+      },
+    });
+  }
+
+  openDrawer(mode: 'create' | 'edit' | 'view', user: UserRepresentation | null = null): void {
+    this.drawerMode = mode;
+    this.selectedUser = user;
+    this.drawer?.open();
+  }
+
+  closeDrawer(): void {
+    this.drawer?.close();
+    this.selectedUser = null;
+  }
+
+  onFormSaved(): void {
+    this.closeDrawer();
+    this.load();
+  }
+
+  changePassword(user: UserRepresentation): void {
+    if (!user.id) {
+      return;
+    }
+    this.dialog.open(ChangePasswordComponent, { data: user.id, width: '28rem' });
+  }
+
+  /** Assign Role Matrix — realm roles for this user (PMB: user-access-matrix/:id). */
+  assignRoleMatrix(user: UserRepresentation): void {
+    if (!user.id) {
+      return;
+    }
+    this.router.navigate(['/admin/user-management/user-access-matrix', user.id]);
+  }
+
+  /** Assign User Matrix — direct screen grants (PMB: :id/user-permissions). */
+  assignUserMatrix(user: UserRepresentation): void {
+    if (!user.id) {
+      return;
+    }
+    this.router.navigate(['/admin/user-management', user.id, 'user-permissions']);
+  }
+
+  onToggleUserEnabled(user: UserRepresentation, enabled: boolean, event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!user.id || this.isTogglingEnabled[user.id]) {
+      return;
+    }
+    this.isTogglingEnabled[user.id] = true;
+    this.keycloak.updateUser({ id: user.id, enabled }).subscribe({
+      next: () => {
+        user.enabled = enabled;
+        delete this.isTogglingEnabled[user.id!];
+      },
+      error: () => {
+        delete this.isTogglingEnabled[user.id!];
+      },
+    });
+  }
+
+  remove(user: UserRepresentation): void {
+    if (!user.id) {
+      return;
+    }
+    const confirmText = user.username || user.id;
+    this.dialog
+      .open(ConfirmWithInputDialogComponent, {
+        width: '100%',
+        maxWidth: '32rem',
+        panelClass: 'tw-confirmation-dialog-panel',
+        data: {
+          title: 'Delete user',
+          message: `Type ${confirmText} to delete this user. This cannot be undone.`,
+          confirmText,
+          color: 'rose',
+          inputLabel: 'Username',
+        },
+      })
+      .afterClosed()
+      .subscribe((confirmed) => {
+        if (confirmed && user.id) {
+          this.keycloak.deleteUser(user.id).subscribe(() => this.load());
+        }
+      });
+  }
+
+  displayName(user: UserRepresentation): string {
+    return [user.firstName, user.lastName].filter(Boolean).join(' ').trim() || user.username || 'User';
+  }
+
+  formatUsername(username?: string): string {
+    return username || '';
+  }
+
+  copyText(value?: string): void {
+    if (value && navigator.clipboard) {
+      navigator.clipboard.writeText(value);
+    }
+  }
+
+  highlightText(text: unknown, query: string | null): string {
+    if (text === null || text === undefined) {
+      return '';
+    }
+    const escaped = String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+    if (!query) {
+      return escaped;
+    }
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return escaped.replace(
+      regex,
+      '<span class="bg-yellow-100 font-semibold text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">$1</span>'
+    );
+  }
+
+  isColumnVisible(key: string): boolean {
+    return this.displayedColumns.includes(key);
+  }
+
+  toggleColumn(columnKey: string): void {
+    const column = this.allColumns.find((item) => item.key === columnKey);
+    if (!column || column.alwaysVisible) {
+      return;
+    }
+    if (this.isColumnVisible(columnKey)) {
+      this.displayedColumns = this.displayedColumns.filter((item) => item !== columnKey);
+    } else {
+      const visible = new Set([...this.displayedColumns, columnKey]);
+      this.displayedColumns = this.allColumns.filter((item) => visible.has(item.key)).map((item) => item.key);
+    }
+    this.persistColumnPreferences();
+  }
+
+  togglePin(element: UserRepresentation): void {
+    if (!element.id) {
+      return;
+    }
+    if (this.pinnedUserIds.has(element.id)) {
+      this.pinnedUserIds.delete(element.id);
+    } else {
+      this.pinnedUserIds.add(element.id);
+    }
+    try {
+      localStorage.setItem(this.pinnedStorageKey, JSON.stringify(Array.from(this.pinnedUserIds)));
+    } catch {
+      /* ignore */
+    }
+  }
+
+  isPinned(id?: string): boolean {
+    return !!id && this.pinnedUserIds.has(id);
+  }
+
+  setFlagMenuRow(element: UserRepresentation): void {
+    this.activeFlagUserId = element.id ?? null;
+  }
+
+  setFlagColor(colorKey: string | null): void {
+    if (!this.activeFlagUserId) {
+      return;
+    }
+    if (colorKey) {
+      this.rowFlagColors[this.activeFlagUserId] = colorKey;
+    } else {
+      delete this.rowFlagColors[this.activeFlagUserId];
+    }
+    try {
+      localStorage.setItem(this.flagsStorageKey, JSON.stringify(this.rowFlagColors));
+    } catch {
+      /* ignore */
+    }
+    this.activeFlagUserId = null;
+  }
+
+  getFlagClass(id?: string): string {
+    if (!id) {
+      return 'text-neutral-300';
+    }
+    const colorKey = this.rowFlagColors[id];
+    if (!colorKey) {
+      return 'text-neutral-300';
+    }
+    return this.rowFlagOptions.find((option) => option.key === colorKey)?.iconClass ?? 'text-neutral-300';
+  }
+
+  getRowClass(element: UserRepresentation): string {
+    if (!element.id) {
+      return '';
+    }
+    const colorKey = this.rowFlagColors[element.id];
+    if (!colorKey) {
+      return this.isPinned(element.id) ? 'font-medium' : '';
+    }
+    const map: Record<string, string> = {
+      slate: 'has-flag bg-slate-50/80 dark:bg-slate-900/20',
+      blue: 'has-flag bg-blue-50/80 dark:bg-blue-900/20',
+      emerald: 'has-flag bg-primary-50/80 dark:bg-primary-900/20',
+      amber: 'has-flag bg-amber-50/80 dark:bg-amber-900/20',
+      rose: 'has-flag bg-rose-50/80 dark:bg-rose-900/20',
+      violet: 'has-flag bg-violet-50/80 dark:bg-violet-900/20',
+    };
+    return map[colorKey] || '';
+  }
+
+  private sortedUsers(): UserRepresentation[] {
+    const rows = [...this.users].sort((left, right) => {
+      const leftPinned = this.isPinned(left.id);
+      const rightPinned = this.isPinned(right.id);
+      if (leftPinned !== rightPinned) {
+        return leftPinned ? -1 : 1;
+      }
+      const active = this.sortState.active;
+      const direction = this.sortState.direction === 'desc' ? -1 : 1;
+      if (!active || !this.sortState.direction) {
+        return 0;
+      }
+      const leftValue = String((left as any)[active] ?? '').toLowerCase();
+      const rightValue = String((right as any)[active] ?? '').toLowerCase();
+      return leftValue.localeCompare(rightValue) * direction;
+    });
+    return rows;
+  }
+
+  private restorePreferences(): void {
+    try {
+      const mode = localStorage.getItem(this.viewModeStorageKey);
+      if (mode === 'table' || mode === 'card') {
+        this.viewMode = mode;
+      }
+    } catch {
+      /* ignore */
+    }
+
+    try {
+      const pinned = localStorage.getItem(this.pinnedStorageKey);
+      if (pinned) {
+        this.pinnedUserIds = new Set(JSON.parse(pinned).filter((v: unknown) => typeof v === 'string'));
+      }
+    } catch {
+      this.pinnedUserIds = new Set();
+    }
+
+    try {
+      const flags = localStorage.getItem(this.flagsStorageKey);
+      if (flags) {
+        const parsed = JSON.parse(flags);
+        this.rowFlagColors = parsed && typeof parsed === 'object' ? parsed : {};
+      }
+    } catch {
+      this.rowFlagColors = {};
+    }
+
+    try {
+      const saved = localStorage.getItem(this.columnPreferencesKey);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed)) {
+          const visible = new Set(parsed.filter((v: unknown) => typeof v === 'string'));
+          this.displayedColumns = this.allColumns
+            .filter((col) => col.alwaysVisible || visible.has(col.key))
+            .map((col) => col.key);
+        }
+      }
+    } catch {
+      /* keep defaults */
+    }
+  }
+
+  private persistColumnPreferences(): void {
+    try {
+      const optional = this.allColumns
+        .filter((col) => !col.alwaysVisible && this.displayedColumns.includes(col.key))
+        .map((col) => col.key);
+      localStorage.setItem(this.columnPreferencesKey, JSON.stringify(optional));
+    } catch {
+      /* ignore */
+    }
+  }
+}

package/src/templates/angular/iam/user-management.routes.ts.ejs

@@ -0,0 +1,47 @@
+import { Routes } from '@angular/router';
+import { UserListComponent } from './users/user-list/user-list.component';
+
+export default [
+  { path: '', pathMatch: 'full', component: UserListComponent },
+<% if (iam.roles !== false) { %>
+  {
+    path: 'roles',
+    loadComponent: () =>
+      import('./roles/role-list/role-list.component').then((m) => m.RoleListComponent),
+  },
+<% } %>
+<% if (iam.rolePermissions !== false) { %>
+  {
+    path: 'role-permissions',
+    loadComponent: () =>
+      import('./matrices/role-permission-matrix/role-permission-matrix.component').then(
+        (m) => m.RolePermissionMatrixComponent
+      ),
+  },
+<% } %>
+<% if (iam.userAccess !== false) { %>
+  {
+    // PMB path: Assign Role Matrix (shield) → user-access-matrix/:id
+    path: 'user-access-matrix/:id',
+    loadComponent: () =>
+      import('./matrices/user-access-matrix/user-access-matrix.component').then(
+        (m) => m.UserAccessMatrixComponent
+      ),
+  },
+<% } %>
+<% if (iam.userPermissions !== false) { %>
+  {
+    // PMB path: Assign User Matrix (lock) → :id/user-permissions
+    path: ':id/user-permissions',
+    loadComponent: () =>
+      import('./matrices/user-permission-matrix/user-permission-matrix.component').then(
+        (m) => m.UserPermissionMatrixComponent
+      ),
+  },
+<% } %>
+  {
+    path: ':id/view',
+    loadComponent: () =>
+      import('./users/user-detail/user-detail.component').then((m) => m.UserDetailComponent),
+  },
+] as Routes;