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

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

@@ -0,0 +1,516 @@
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { forkJoin, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { RolePermissionSkeletonComponent } from '@/app/core/user-management/shared/role-permission-skeleton.component';
+import {
+  buildScreenComponentClusters,
+  filterMatrixClusters,
+  getCleanScreenId,
+  getCleanScreenName,
+  GroupedScreenCluster,
+  highlightMatrixText,
+  parseCsvComponentToScreenMap,
+  parseCsvRegistry,
+} from '@/app/core/user-management/shared/screen-matrix.util';
+import {
+  playPermissionGrantSound,
+  playPermissionRevokeSound,
+} from '@/app/core/user-management/shared/permission-matrix-sound';
+import {
+  AccessCtrlPipe,
+  KeycloakAdminService,
+  UserRepresentation,
+  UserAttributes,
+  isScreenPermissionGranted,
+  isComponentPermissionGranted,
+  normalizeUserAttributes,
+  screenIdsMatch,
+  getScreenBaseId,
+  PROTECTED_USER_ATTRIBUTE_KEYS,
+} from '@/app/core/auth';
+
+export type GroupedScreen = GroupedScreenCluster;
+
+@Component({
+    selector: 'app-user-permission-matrix',
+    standalone: true,
+    host: {
+        class: 'flex flex-col flex-1 min-h-0 w-full overflow-hidden'
+    },
+    imports: [
+        AccessCtrlPipe,
+        CommonModule,
+        RouterLink,
+        MatButtonModule,
+        MatIconModule,
+        MatSnackBarModule,
+        MatProgressSpinnerModule,
+        MatPaginatorModule,
+        RolePermissionSkeletonComponent
+    ],
+    templateUrl: './user-permission-matrix.component.html',
+    styleUrl: './user-permission-matrix.component.scss'
+})
+export class UserPermissionMatrixComponent implements OnInit {
+    readonly SCREEN = 'user-permission-matrix';
+    private keycloakAdminService = inject(KeycloakAdminService);
+    private snackBar = inject(MatSnackBar);
+    private http = inject(HttpClient);
+    private route = inject(ActivatedRoute);
+
+    private readonly collapsedStorageKey = 'user-permission-matrix-collapsed-screens';
+    private readonly paginationStorageKey = 'user-permission-matrix-pagination';
+    private readonly searchScopeStorageKey = 'user-permission-matrix-search-scope';
+
+    user = signal<UserRepresentation | null>(null);
+    userId = signal<string>('');
+
+    screensData = signal<GroupedScreen[]>([]);
+    collapsedScreens = signal<Record<string, boolean>>({});
+    
+    // Search & Pagination Signals
+    searchTerm = signal<string>('');
+    searchScope = signal<'ALL' | 'SCREEN'>('SCREEN');
+    pageSize = signal<number>(100);
+    currentPage = signal<number>(0);
+    /** Floating filter: when true, table shows only screens already enabled for this user. */
+    showEnabledOnly = signal<boolean>(false);
+    
+    isLoading = signal<boolean>(true);
+    isSaving = signal<boolean>(false);
+    isProcessingToggle = signal<Record<string, boolean>>({});
+
+    isAnyToggleProcessing = computed(() => {
+        const map = this.isProcessingToggle();
+        return Object.values(map).some(Boolean);
+    });
+
+    isUiLocked = computed(() => {
+        return this.isLoading() || this.isSaving() || this.isAnyToggleProcessing();
+    });
+
+    getScreenToggleKey(group: GroupedScreen): string {
+        return `user_screen_${String(group.screen.screenId || '')}`;
+    }
+
+    getComponentToggleKey(componentId: String | string): string {
+        return `user_comp_${String(componentId)}`;
+    }
+
+    isToggleProcessing(toggleKey: string): boolean {
+        return Boolean(this.isProcessingToggle()[toggleKey]);
+    }
+
+    isScreenToggleDisabled(group: GroupedScreen): boolean {
+        return this.isUiLocked() || this.isToggleProcessing(this.getScreenToggleKey(group));
+    }
+
+    isComponentToggleDisabled(group: GroupedScreen, componentId: String | string): boolean {
+        return this.isUiLocked()
+            || !this.isClusterPermissionMapped(group)
+            || this.isToggleProcessing(this.getComponentToggleKey(componentId));
+    }
+
+    getCleanScreenName = getCleanScreenName;
+    getCleanScreenId = getCleanScreenId;
+
+    filteredScreensData = computed(() => {
+        const searched = filterMatrixClusters(this.screensData(), this.searchTerm(), this.searchScope());
+        if (!this.showEnabledOnly()) {
+            return searched;
+        }
+        return searched.filter((group) => this.isClusterPermissionMapped(group));
+    });
+
+    enabledScreenCount = computed(() => {
+        const groups = filterMatrixClusters(this.screensData(), '', 'SCREEN');
+        return groups.filter((group) => this.isClusterPermissionMapped(group)).length;
+    });
+
+    paginatedScreensData = computed(() => {
+        const data = this.filteredScreensData();
+        const size = this.pageSize();
+        const page = this.currentPage();
+        const start = page * size;
+        return data.slice(start, start + size);
+    });
+
+    toggleShowEnabledOnly(): void {
+        this.showEnabledOnly.update((v) => !v);
+        this.currentPage.set(0);
+    }
+
+    ngOnInit(): void {
+        this.loadPaginationPreferences();
+        this.loadSearchScopePreferences();
+        const id = this.route.snapshot.paramMap.get('id');
+        if (id) {
+            this.userId.set(id);
+            this.loadData();
+        } else {
+            this.snackBar.open('No User ID provided.', 'Close', { duration: 3000 });
+            this.isLoading.set(false);
+        }
+    }
+
+    private loadSearchScopePreferences(): void {
+        if (typeof localStorage !== 'undefined') {
+            const savedScope = localStorage.getItem(this.searchScopeStorageKey);
+            if (savedScope === 'ALL' || savedScope === 'SCREEN') {
+                this.searchScope.set(savedScope);
+            }
+        }
+    }
+
+    private loadPaginationPreferences(): void {
+        if (typeof localStorage !== 'undefined') {
+            try {
+                const raw = localStorage.getItem(this.paginationStorageKey);
+                if (raw) {
+                    const parsed = JSON.parse(raw);
+                    if (parsed && typeof parsed.pageSize === 'number') {
+                        this.pageSize.set(parsed.pageSize);
+                    }
+                    if (parsed && typeof parsed.currentPage === 'number') {
+                        this.currentPage.set(parsed.currentPage);
+                    }
+                }
+            } catch (e) {
+                console.error('Failed to load pagination preferences', e);
+            }
+        }
+    }
+
+    onSearchTermChange(event: Event) {
+        const input = event.target as HTMLInputElement;
+        this.searchTerm.set(input.value);
+        this.currentPage.set(0);
+    }
+
+    clearSearch(): void {
+        this.searchTerm.set('');
+        this.currentPage.set(0);
+    }
+
+    onSearchScopeChange(event: Event) {
+        const select = event.target as HTMLSelectElement;
+        const scope = select.value as 'ALL' | 'SCREEN';
+        this.searchScope.set(scope);
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(this.searchScopeStorageKey, scope);
+        }
+    }
+
+    onPageChange(event: PageEvent): void {
+        this.currentPage.set(event.pageIndex);
+        this.pageSize.set(event.pageSize);
+        this.savePaginationPreferences(event.pageSize, event.pageIndex);
+    }
+
+    private savePaginationPreferences(pageSize: number, currentPage: number): void {
+        if (typeof localStorage !== 'undefined') {
+            try {
+                localStorage.setItem(this.paginationStorageKey, JSON.stringify({ pageSize, currentPage }));
+            } catch (e) {
+                console.error('Failed to save pagination preferences', e);
+            }
+        }
+    }
+
+    highlightText(text: String | null | undefined): string {
+        return highlightMatrixText(text, this.searchTerm());
+    }
+
+    toggleScreenCollapse(screenId: String | null | undefined): void {
+        const id = screenId ? String(screenId) : '';
+        if (!id) return;
+        const current = this.collapsedScreens();
+        const nextState = !this.isScreenCollapsed(id);
+        const updated = {
+            ...current,
+            [id]: nextState
+        };
+        this.collapsedScreens.set(updated);
+        
+        if (typeof localStorage !== 'undefined') {
+            try {
+                localStorage.setItem(this.collapsedStorageKey, JSON.stringify(updated));
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    }
+
+    isScreenCollapsed(screenId: String | null | undefined): boolean {
+        const id = screenId ? String(screenId) : '';
+        if (this.searchTerm().trim()) {
+            return false;
+        }
+        const current = this.collapsedScreens();
+        return current[id] !== false;
+    }
+
+    loadData(): void {
+        this.isLoading.set(true);
+        forkJoin({
+            user: this.keycloakAdminService.getUserById(this.userId()),
+            csv: this.http.get('assets/screen-components.csv', { responseType: 'text' }).pipe(catchError(() => of('')))
+        }).subscribe({
+            next: (res) => {
+                const normalizedUser = res.user
+                    ? { ...res.user, attributes: normalizeUserAttributes(res.user.attributes) }
+                    : null;
+                this.user.set(normalizedUser);
+                const screens: never[] = [];
+                const components: never[] = [];
+                const csvRows = parseCsvRegistry(res.csv);
+                const csvComponentToScreenMap = parseCsvComponentToScreenMap(res.csv);
+
+                if (typeof localStorage !== 'undefined') {
+                    try {
+                        localStorage.removeItem(this.collapsedStorageKey);
+                    } catch (e) { }
+                }
+
+                this.collapsedScreens.set({});
+                this.screensData.set(
+                    buildScreenComponentClusters(screens, components, csvComponentToScreenMap, csvRows)
+                );
+                this.currentPage.set(0);
+
+                this.isLoading.set(false);
+            },
+            error: (err) => {
+                console.error(err);
+                this.snackBar.open('Failed to load user permissions.', 'Close', { duration: 3000 });
+                this.isLoading.set(false);
+            }
+        });
+    }
+
+    isClusterPermissionMapped(group: GroupedScreen | null | undefined): boolean {
+        const user = this.user();
+        if (!user?.attributes || !group) {
+            return false;
+        }
+
+        const attributes = normalizeUserAttributes(user.attributes);
+        if (group.cleanScreenId && isScreenPermissionGranted(attributes, group.cleanScreenId)) {
+            return true;
+        }
+
+        return (group.screenIds || []).some((screenId) =>
+            isScreenPermissionGranted(attributes, screenId)
+        );
+    }
+
+    isScreenPermissionMapped(screenId: String | null | undefined): boolean {
+        const user = this.user();
+        if (!user?.attributes) {
+            return false;
+        }
+
+        return isScreenPermissionGranted(
+            normalizeUserAttributes(user.attributes),
+            screenId ? String(screenId) : ''
+        );
+    }
+
+    isPermissionMapped(componentId: String | null | undefined, screenId: String | null | undefined): boolean {
+        const user = this.user();
+        if (!user?.attributes) {
+            return false;
+        }
+
+        const attributes = normalizeUserAttributes(user.attributes);
+        return isComponentPermissionGranted(
+            attributes,
+            componentId ? String(componentId) : '',
+            screenId ? String(screenId) : ''
+        );
+    }
+
+    isClusterComponentPermissionMapped(group: GroupedScreen | null | undefined, componentId: String | null | undefined): boolean {
+        const user = this.user();
+        if (!user?.attributes || !group) {
+            return false;
+        }
+
+        const attributes = normalizeUserAttributes(user.attributes);
+        const cId = componentId ? String(componentId) : '';
+
+        if (group.cleanScreenId && isComponentPermissionGranted(attributes, cId, group.cleanScreenId)) {
+            return true;
+        }
+
+        return (group.screenIds || []).some((screenId) => isComponentPermissionGranted(attributes, cId, screenId));
+    }
+
+    toggleScreenPermission(group: GroupedScreen): void {
+        try {
+            const user = this.user();
+            if (!user || !user.id || !group || this.isUiLocked()) return;
+
+            const canonicalScreenId = String(group.screen.screenId || '');
+            const clusterBaseId = group.cleanScreenId || getScreenBaseId(canonicalScreenId);
+            if (!canonicalScreenId) return;
+
+            const isMapped = this.isClusterPermissionMapped(group);
+            const action = isMapped ? 'delete' : 'add';
+            const previousAttributes = normalizeUserAttributes(user.attributes || {});
+
+            const toggleKey = this.getScreenToggleKey(group);
+            this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: true }));
+
+            const attributes = JSON.parse(JSON.stringify(previousAttributes));
+
+            if (action === 'add') {
+                const compIds = (group.components || []).map((c) => String(c.componentId || '')).filter(Boolean);
+                attributes[canonicalScreenId] = Array.from(
+                    new Set([...(attributes[canonicalScreenId] || []), 'true', ...compIds])
+                );
+                attributes['screens'] = Array.from(new Set([...(attributes['screens'] || []), canonicalScreenId]));
+                compIds.forEach((compId) => {
+                    attributes[compId] = ['true'];
+                });
+            } else {
+                Object.keys(attributes).forEach((key) => {
+                    if (PROTECTED_USER_ATTRIBUTE_KEYS.has(key) || key === 'screens') {
+                        return;
+                    }
+
+                    const values = attributes[key] || [];
+                    const isDirectScreenGrant = values.includes('true') &&
+                        (screenIdsMatch(key, clusterBaseId) ||
+                            (group.screenIds || []).some((screenId) => screenIdsMatch(key, screenId)));
+
+                    if (isDirectScreenGrant) {
+                        delete attributes[key];
+                    }
+                });
+
+                attributes['screens'] = (attributes['screens'] || []).filter(
+                    (screenEntry: string) =>
+                        !screenIdsMatch(screenEntry, clusterBaseId) &&
+                        !(group.screenIds || []).some((screenId) => screenIdsMatch(screenEntry, screenId))
+                );
+                if (attributes['screens'].length === 0) {
+                    delete attributes['screens'];
+                }
+
+                (group.components || []).forEach((component) => {
+                    const compId = String(component.componentId || '');
+                    delete attributes[compId];
+                });
+            }
+
+            const removedKeys: string[] = [];
+            if (action === 'delete') {
+                Object.keys(previousAttributes).forEach((key) => {
+                    if (!attributes[key] && !PROTECTED_USER_ATTRIBUTE_KEYS.has(key)) {
+                        removedKeys.push(key);
+                    }
+                });
+            }
+
+            this.keycloakAdminService.addUserAttributes(user.id, attributes, removedKeys).subscribe({
+                next: () => {
+                    // Keep the matrix state unchanged until Keycloak confirms the update.
+                    this.user.update((currentUser) => currentUser ? ({ ...currentUser, attributes }) : null);
+                    this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: false }));
+                    if (action === 'add') {
+                        this.snackBar.open(`Screen access granted to user.`, 'Close', { duration: 2000 });
+                        try { playPermissionGrantSound(); } catch {}
+                    } else {
+                        this.snackBar.open(`Screen access revoked from user.`, 'Close', { duration: 2000 });
+                        try { playPermissionRevokeSound(); } catch {}
+                    }
+                },
+                error: (err) => {
+                    console.error('[UserPermissionMapping] Toggle screen permission error:', err);
+                    this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: false }));
+                    this.snackBar.open('Failed to update user screen permission.', 'Close', { duration: 3000 });
+                }
+            });
+        } catch (err) {
+            console.error('[UserPermissionMapping] Unexpected error in toggleScreenPermission:', err);
+        }
+    }
+
+    togglePermission(componentId: String | null | undefined, screenId: String | null | undefined): void {
+        try {
+            const user = this.user();
+            if (!user || !user.id || this.isUiLocked()) return;
+            const cId = componentId ? String(componentId) : '';
+            const sId = screenId ? String(screenId) : '';
+            if (!cId) return;
+
+            const isMapped = this.isPermissionMapped(cId, sId);
+            const action = isMapped ? 'delete' : 'add';
+
+            const toggleKey = this.getComponentToggleKey(cId);
+            this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: true }));
+
+            const previousAttributes = normalizeUserAttributes(user.attributes || {});
+            const attributes = JSON.parse(JSON.stringify(previousAttributes));
+
+            if (action === 'add') {
+                if (!this.isScreenPermissionMapped(sId)) {
+                    this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: false }));
+                    this.snackBar.open('Cannot grant component access. Please enable screen access first.', 'Close', { duration: 3000 });
+                    return;
+                }
+                attributes[cId] = ['true'];
+                if (sId) {
+                    attributes[sId] = Array.from(new Set([...(attributes[sId] || []), cId]));
+                }
+            } else {
+                delete attributes[cId];
+                if (sId && attributes[sId]) {
+                    attributes[sId] = (attributes[sId] || []).filter((c: string) => c !== cId);
+                    if (attributes[sId].length === 0) delete attributes[sId];
+                }
+            }
+
+            const removedKeys: string[] = [];
+            if (action === 'delete') {
+                Object.keys(previousAttributes).forEach((key) => {
+                    if (!attributes[key] && !PROTECTED_USER_ATTRIBUTE_KEYS.has(key)) {
+                        removedKeys.push(key);
+                    }
+                });
+            }
+
+            this.keycloakAdminService.addUserAttributes(user.id, attributes, removedKeys).subscribe({
+                next: () => {
+                    // Keep the matrix state unchanged until Keycloak confirms the update.
+                    this.user.update((currentUser) => currentUser ? ({ ...currentUser, attributes }) : null);
+                    this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: false }));
+                    if (action === 'add') {
+                        this.snackBar.open(`Access granted to user.`, 'Close', { duration: 2000 });
+                        try { playPermissionGrantSound(); } catch {}
+                    } else {
+                        this.snackBar.open(`Access revoked from user.`, 'Close', { duration: 2000 });
+                        try { playPermissionRevokeSound(); } catch {}
+                    }
+                },
+                error: (err) => {
+                    console.error('[UserPermissionMapping] Toggle component permission error:', err);
+                    this.isProcessingToggle.update((v) => ({ ...v, [toggleKey]: false }));
+                    this.snackBar.open('Failed to update user component permission.', 'Close', { duration: 3000 });
+                }
+            });
+        } catch (err) {
+            console.error('[UserPermissionMapping] Unexpected error in togglePermission:', err);
+        }
+    }
+
+}

package/src/templates/angular/shared/base/audit-user-name.pipe.ts.ejs

@@ -0,0 +1,69 @@
+import { Injectable, Pipe, PipeTransform, inject } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { catchError, map, shareReplay } from 'rxjs/operators';
+<% const canLookup = preferences.fuse?.enabled && preferences.auth?.provider === 'keycloak'; %>
+<% if (canLookup) { %>
+import { KeycloakAdminService } from '@/app/core/auth/services/keycloak-admin.service';
+<% } %>
+
+/** Presentation only: the entity and its write payload retain the original actor ID. */
+@Injectable({ providedIn: 'root' })
+export class AuditUserNameService {
+  <% if (canLookup) { %>private readonly users = inject(KeycloakAdminService);<% } %>
+  private readonly cache = new Map<string, { expires: number; value: Observable<string> }>();
+
+  private displayName(payload: unknown, id: string, depth = 0): string {
+    if (!payload || typeof payload !== 'object' || depth > 6) return '';
+    if (Array.isArray(payload)) {
+      return payload.map(user => this.displayName(user, id, depth + 1)).find(Boolean) || '';
+    }
+    const user = payload as Record<string, unknown>;
+    // PMB's user middleware can wrap the Keycloak representation.
+    for (const key of ['user', 'data', 'content', 'item', 'result', 'body']) {
+      const nested = this.displayName(user[key], id, depth + 1);
+      if (nested) return nested;
+    }
+    if (user['id'] !== id) return '';
+    const attributes = user['attributes'] as Record<string, unknown> | undefined;
+    const readName = (keys: string[]): string => {
+      for (const key of keys) {
+        const value = user[key] ?? attributes?.[key];
+        const text = Array.isArray(value) ? value[0] : value;
+        if (typeof text === 'string' && text.trim()) return text.trim();
+      }
+      return '';
+    };
+    return [readName(['firstName', 'first_name', 'givenName', 'given_name']),
+      readName(['lastName', 'last_name', 'familyName', 'family_name'])].filter(Boolean).join(' ');
+  }
+
+  resolve(actor: string | null | undefined): Observable<string> {
+    const original = actor ?? '';
+    // Existing names and service accounts are already display values. Keycloak uses UUIDs.
+    if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(original)) return of(original);
+    <% if (canLookup) { %>
+    const cached = this.cache.get(original);
+    if (cached && cached.expires > Date.now()) return cached.value;
+    const value = this.users.getUserById(original).pipe(
+      map(user => this.displayName(user, original) || original),
+      catchError(() => of(original)),
+      shareReplay({ bufferSize: 1, refCount: false }),
+    );
+    // Bounded, short-lived memory cache; no user profiles are persisted in browser storage.
+    if (this.cache.size >= 500) this.cache.delete(this.cache.keys().next().value!);
+    this.cache.set(original, { expires: Date.now() + 60_000, value });
+    return value;
+    <% } else { %>
+    // No supported user directory is configured for this application.
+    return of(original);
+    <% } %>
+  }
+}
+
+@Pipe({ name: 'auditUserName', standalone: true })
+export class AuditUserNamePipe implements PipeTransform {
+  private readonly names = inject(AuditUserNameService);
+  transform(actor: string | null | undefined): Observable<string> {
+    return this.names.resolve(actor);
+  }
+}