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

package/src/templates/angular/entity/components/presentation/list/_entity_-list.component.ts.ejs

@@ -0,0 +1,592 @@
+import { AfterViewInit, Component, OnInit, inject, ChangeDetectionStrategy, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { merge, of, startWith, Subject, catchError, switchMap, tap, finalize, Observable, map, Subscription } from 'rxjs';
+import dayjs from 'dayjs/esm';
+
+// Angular Material
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+// Application Imports
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> } from '../../../<%= toKebabCase(entity.name) %>.model';
+import { <%= entity.name %>Service } from '../../../service/<%= toKebabCase(entity.name) %>.service';
+import { <%= entity.name %>FormComponent } from '../../forms/form/<%= toKebabCase(entity.name) %>-form.component';
+import { <%= entity.name %>CardComponent } from '../card/<%= toKebabCase(entity.name) %>-card.component';
+import { <%= entity.name %>FilterComponent } from '../../interaction/filter/<%= toKebabCase(entity.name) %>-filter.component';
+import { <%= entity.name %>ActionsComponent } from '../../interaction/actions/<%= toKebabCase(entity.name) %>-actions.component';
+import { <%= toCamelCase(entity.name) %>Settings } from '../../../settings/settings.config';
+
+<%
+const fuseShared = !!preferences.fuse?.enabled;
+const importsBase = fuseShared
+  ? `import { ResizableDirective } from '@/app/domains/admin/modules/apps/shared/directives/resizable.directive';\nimport { BaseListComponent, ParentDialogData, TableColumnPreference } from '@/app/domains/admin/modules/apps/shared/base/base-list.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '@/app/domains/admin/modules/apps/shared/base/filter-types';`
+  : preferences.architecture?.centralizedSharedFolder
+    ? `import { ResizableDirective } from '../../../../../shared/directives/resizable.directive';\nimport { BaseListComponent, ParentDialogData, TableColumnPreference } from '../../../../../shared/base/base-list.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '../../../../../shared/base/filter-types';`
+    : `import { ResizableDirective } from '../../../shared/resizable.directive';\nimport { BaseListComponent, ParentDialogData, TableColumnPreference } from '../../../shared/base/base-list.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '../../../shared/base/filter-types';`;
+%>
+<%- importsBase %>
+<% if (iamAcl) { %>
+import { AccessCtrlPipe } from '@/app/core/auth';
+<% } %>
+
+<%
+const collectionRelationships = preferences.generate?.relationships !== false ? relationships.filter(rel => ['OneToMany', 'ManyToMany'].includes(rel.type)) : [];
+function toSpacedLabel(str) {
+  return str.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase());
+}
+const uniqueEnumImports = new Map();
+entity.fields.forEach(field => {
+  if (field.fieldTypeIsEnum) {
+    if (!uniqueEnumImports.has(field.fieldType)) {
+      uniqueEnumImports.set(field.fieldType, `import { ${field.fieldType} } from '${preferences.fuse?.enabled ? '../../../../../enum/' : '../../../../../enums/'}${toKebabCase(field.fieldType)}.model';`);
+    }
+  }
+});
+
+function getFilterValueType(fieldType, isEnum) {
+  if (isEnum) return 'enum';
+  const numericTypes = ['Integer', 'Long', 'Float', 'Double', 'BigDecimal'];
+  const dateTypes = ['LocalDate', 'Instant', 'ZonedDateTime'];
+  if (fieldType === 'Boolean') return 'boolean';
+  if (numericTypes.includes(fieldType)) return 'number';
+  if (dateTypes.includes(fieldType)) return 'date';
+  return 'string';
+}
+
+function relationshipFilterKey(rel) {
+  const base = rel.from.fieldName ? toCamelCase(rel.from.fieldName) : toCamelCase(rel.otherEntityName);
+  return base.endsWith('Id') ? base : `${base}Id`;
+}
+
+const auditFieldNames = preferences.fields?.audit?.names || ['createdBy', 'createdDate', 'lastModifiedBy', 'lastModifiedDate'];
+const techFieldNames = typeof technicalFieldNames !== 'undefined' ? technicalFieldNames : (preferences.fields?.technical?.enabled === false ? [] : (preferences.fields?.technical?.names || ['debug', 'refType', 'refId']));
+%>
+<%- Array.from(uniqueEnumImports.values()).join('\n') %>
+
+import { AuditUserNamePipe } from '<%= preferences.fuse?.enabled ? '@/app/domains/admin/modules/apps/shared/base' : preferences.architecture?.centralizedSharedFolder ? '../../../../../shared/base' : '../../../shared/base' %>/audit-user-name.pipe';
+
+@Component({
+  selector: 'app-<%= toKebabCase(entity.name) %>-list',
+  standalone: true,
+  imports: [
+    CommonModule, AuditUserNamePipe,
+    ReactiveFormsModule,
+    DragDropModule,
+    CdkScrollable,
+    MatTableModule,
+    MatSortModule,
+    MatSidenavModule,
+    MatProgressSpinnerModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatSlideToggleModule, FormsModule,
+    MatSnackBarModule,
+    <%= entity.name %>FormComponent,
+    <%= entity.name %>CardComponent,
+    <%= entity.name %>FilterComponent,
+    <%= entity.name %>ActionsComponent,
+    ResizableDirective,<% if (iamAcl) { %>
+    AccessCtrlPipe,<% } %>
+  ],
+  templateUrl: './<%= toKebabCase(entity.name) %>-list.component.html',
+  host: {
+    class: 'cforge-entity-list relative flex flex-col flex-auto min-h-0 w-full',
+  },
+  styleUrl: './<%= toKebabCase(entity.name) %>-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class <%= entity.name %>ListComponent extends BaseListComponent<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> implements OnInit, AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly <%= toCamelCase(entity.name) %>Service = inject(<%= entity.name %>Service);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly dialogRef = inject(MatDialogRef<<%= entity.name %>ListComponent>, { optional: true });
+  private readonly dialogData = inject(MAT_DIALOG_DATA, { optional: true }) as ParentDialogData | null;
+
+  entityNameKebab = '<%= toKebabCase(entity.name) %>';
+  readonly SCREEN = '<%= typeof entityScreenId !== "undefined" && entityScreenId ? entityScreenId : toKebabCase(entity.name) %>';
+  override viewMode = <%= toCamelCase(entity.name) %>Settings.viewMode as 'table' | 'card';
+  override formMode = <%= toCamelCase(entity.name) %>Settings.formMode as 'sidebar' | 'page';
+  override searchMode = <%= toCamelCase(entity.name) %>Settings.searchMode as 'field' | 'global';
+  
+  private listRequest?: Subscription;
+  private readonly refreshTrigger = new Subject<void>();
+  selected<%= entity.name %>: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | null = null;
+  drawerMode: 'new' | 'edit' = 'new';
+  formVisible = false;
+  private formRequestVersion = 0;
+  
+  searchableColumns: string[] = [<%-
+    entity.fields.filter(f => {
+      if (isHiddenFromUi(f.fieldName, 'search')) return false;
+      if (f.fieldName === 'isActive') return false;
+      // @Searchable: prefer text/enum columns for field.contains search
+      if (entity.searchable) {
+        return f.fieldTypeIsEnum || ['String', 'TextBlob', 'UUID'].includes(f.fieldType);
+      }
+      return true;
+    }).map(f => `'${f.fieldName}'`).join(', ')
+  %>];
+
+  <% entity.fields.forEach(field => { if (field.fieldTypeIsEnum) { %>
+  readonly <%= toCamelCase(field.fieldType) %>Options = Object.keys(<%= field.fieldType %>);
+  <% }}); %>
+
+  filterFields: FilterField[] = [
+    <% entity.fields.filter(field => !isHiddenFromUi(field.fieldName, 'filters')).forEach(field => {
+         const valueType = getFilterValueType(field.fieldType, field.fieldTypeIsEnum);
+         const enumOptionsKey = field.fieldTypeIsEnum ? `${toCamelCase(field.fieldType)}Options` : null;
+    %>
+    {
+      key: '<%= field.fieldName %>',
+      label: '<%= toSpacedLabel(field.fieldName) %>',
+      valueType: '<%= valueType %>' as FilterValueType,
+      operators: FILTER_OPERATOR_LIBRARY['<%= valueType %>'],
+      rawFieldType: '<%= field.fieldType %>'<% if (enumOptionsKey) { %>,
+      enumOptionsKey: '<%= enumOptionsKey %>'<% } %>
+    },
+    <% }); %>
+    <% relationships.filter(rel => preferences.generate?.relationships !== false && ['ManyToOne', 'OneToOne'].includes(rel.type)).forEach(rel => { 
+         const key = relationshipFilterKey(rel);
+         const label = rel.from.fieldName ? toSpacedLabel(rel.from.fieldName) : rel.otherEntityNamePascalCase;
+    %>
+    {
+      key: '<%= key %>',
+      label: '<%= label %>',
+      valueType: 'number' as FilterValueType,
+      operators: FILTER_OPERATOR_LIBRARY['number'],
+      rawFieldType: 'Long'
+    },
+    <% }); %>
+  ];
+
+  readonly allColumnPreferences: TableColumnPreference[] = [
+    { key: 'state', label: 'State', alwaysVisible: true },
+    { key: 'id', label: 'ID' },
+    <% entity.fields.filter(field => !auditFieldNames.includes(field.fieldName) && !techFieldNames.includes(field.fieldName)).forEach(field => { %>{ key: '<%= field.fieldName %>', label: '<%= toSpacedLabel(field.fieldName) %>' },
+    <% }); %>
+    <% if (entity.fields.some(field => field.fieldName === 'createdBy')) { %>{ key: 'createdBy', label: 'Created By', defaultHidden: <%= preferences.fields?.audit?.hideInLists !== false %> },
+    <% } %>
+    <% if (entity.fields.some(field => field.fieldName === 'createdDate')) { %>{ key: 'createdDate', label: 'Created Date', defaultHidden: <%= preferences.fields?.audit?.hideInLists !== false %> },
+    <% } %>
+    <% if (entity.fields.some(field => field.fieldName === 'lastModifiedBy')) { %>{ key: 'lastModifiedBy', label: 'Last Modified By', defaultHidden: <%= preferences.fields?.audit?.hideInLists !== false %> },
+    <% } %>
+    <% if (entity.fields.some(field => field.fieldName === 'lastModifiedDate')) { %>{ key: 'lastModifiedDate', label: 'Last Modified Date', defaultHidden: <%= preferences.fields?.audit?.hideInLists !== false %> },
+    <% } %>
+
+    <% collectionRelationships.forEach(rel => { %>{ key: 'actions-<%= rel.otherEntityName %>', label: '<%= toSpacedLabel(rel.otherEntityNamePascalCase) %>' },
+    <% }); %>
+    <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name && ['ManyToOne', 'OneToOne'].includes(rel.type)).forEach(rel => { %>{ key: '<%= rel.from.fieldName || toCamelCase(rel.to.name) %>', label: '<%= toSpacedLabel(rel.from.fieldName || rel.to.name) %>' },
+    <% }); %>
+    { key: 'actions', label: 'Actions', alwaysVisible: true },
+  ];
+  
+  dataSource = new MatTableDataSource<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>>();
+  skeletonData = Array.from({ length: 20 }, () => ({} as <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>));
+
+  ngOnInit(): void {
+    if (typeof document !== 'undefined') {
+      document.documentElement.style.setProperty('--cforge-snackbar-success', <%= toCamelCase(entity.name) %>Settings.snackbarSuccessColor);
+      document.documentElement.style.setProperty('--cforge-snackbar-error', <%= toCamelCase(entity.name) %>Settings.snackbarErrorColor);
+    }
+    this.restoreViewMode();
+    this.restoreColumnPreferences();
+    this.loadSearchState();
+    if (typeof localStorage !== 'undefined') {
+      const savedPageSize = localStorage.getItem(this.storageKeyPageSize);
+      if (savedPageSize) {
+        this.itemsPerPage = Number(savedPageSize);
+      }
+    }
+    if (this.dialogData?.parentFilters) {
+      this.baseParentFilters = { ...this.dialogData.parentFilters };
+    }
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      if (this.destroyRef.destroyed) return;
+      this.observeListWidth();
+      const triggers$ = merge(this.paginator.page, this.refreshTrigger).pipe(startWith({}));
+
+      if (this.dialogData?.parentFilters) {
+        triggers$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.loadData());
+      } else {
+        this.route.params
+          .pipe(
+            tap(params => {
+              this.baseParentFilters = {};
+              const parentIdKey = Object.keys(params)[0];
+              if (parentIdKey) {
+                const parentModelName = parentIdKey.replace('Id', '');
+                this.baseParentFilters[`${parentModelName}Id.equals`] = params[parentIdKey];
+              }
+            }),
+            switchMap(() => triggers$),
+            takeUntilDestroyed(this.destroyRef)
+          )
+          .subscribe(() => this.loadData());
+      }
+
+      this.openFormFromQueryParams();
+    }, 0);
+  }
+
+  private openFormFromQueryParams(): void {
+    const form = this.route.snapshot.queryParamMap.get('form');
+    const id = this.route.snapshot.queryParamMap.get('id');
+    if (form !== 'new' && form !== 'edit') {
+      return;
+    }
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { form: null, id: null },
+      queryParamsHandling: 'merge',
+      replaceUrl: true,
+    });
+
+    if (form === 'edit' && id) {
+      this.openFormDrawer(Number(id), { skipConfirm: true });
+      return;
+    }
+
+    this.openFormDrawer(undefined, { skipConfirm: true });
+  }
+
+  loadData(): void {
+    if (!this.paginator) {
+      return;
+    }
+
+    if (typeof localStorage !== 'undefined' && this.paginator.pageSize !== this.itemsPerPage) {
+      this.itemsPerPage = this.paginator.pageSize;
+      localStorage.setItem(this.storageKeyPageSize, String(this.itemsPerPage));
+    }
+
+    this.listRequest?.unsubscribe();
+    this.isLoading = true;
+    const req = {
+      page: this.paginator.pageIndex,
+      size: this.paginator.pageSize,
+      sort: this.getSortParameters(),
+      ...this.baseParentFilters,
+      ...this.activeFilters,
+    };
+
+    this.listRequest = this.<%= toCamelCase(entity.name) %>Service.query(req).pipe(
+      takeUntilDestroyed(this.destroyRef),
+      tap(res => {
+        this.isLoading = false;
+        this.totalItems = Number(res.headers.get('X-Total-Count') ?? 0);
+        this.dataSource.data = this.sortRowsForDisplay(res.body ?? []);
+        this.cdr.detectChanges();
+        setTimeout(() => { if (!this.destroyRef.destroyed) this.onTableScroll(); }, 0);
+      }),
+      catchError(() => {
+        this.isLoading = false;
+        this.cdr.detectChanges();
+        return of(null);
+      })
+    ).subscribe();
+  }
+
+  fetchExportData(filters: { [key: string]: string | number }, sort: string[], size: number): Observable<{ body: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>[] | null }> {
+    return this.<%= toCamelCase(entity.name) %>Service.query({
+      page: 0,
+      size,
+      sort,
+      ...filters,
+    });
+  }
+
+  fetchExportTotal(filters: { [key: string]: string | number }, sort: string[]): Observable<number> {
+    return this.<%= toCamelCase(entity.name) %>Service.query({
+      page: 0,
+      size: 1,
+      sort,
+      ...filters,
+    }).pipe(
+      map((response: any) => Number(response.headers.get('X-Total-Count') ?? 0))
+    );
+  }
+
+  openFormDrawer(id?: number, options?: { skipConfirm?: boolean }): void {
+    const openEditForm = () => {
+      if (this.formMode === 'page') {
+        this.router.navigate([id, 'edit'], { relativeTo: this.route });
+        return;
+      }
+      this.openEdit(id as number);
+    };
+
+    if (id) {
+      if (options?.skipConfirm) {
+        openEditForm();
+        return;
+      }
+      this.openConfirmationDialog({
+        title: 'Edit <%= entity.name %>',
+        message: 'Are you sure you want to edit this <%= toCamelCase(entity.name) %>?',
+        color: 'amber',
+      }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(confirmed => {
+        if (confirmed) {
+          openEditForm();
+        }
+      });
+      return;
+    }
+
+    if (this.formMode === 'page') {
+      this.router.navigate(['new'], { relativeTo: this.route });
+      return;
+    }
+
+    ++this.formRequestVersion;
+    this.mountSidebarForm(null);
+  }
+
+  openEdit(id: number): void {
+    const version = ++this.formRequestVersion;
+    this.<%= toCamelCase(entity.name) %>Service.find(id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+      next: response => {
+        if (version === this.formRequestVersion && response.body) this.mountSidebarForm(response.body);
+      },
+      error: () => {
+        if (version === this.formRequestVersion) this.snackBar.open('Unable to load record. Please try again.', 'Close', { duration: 3000 });
+      },
+    });
+  }
+
+  private mountSidebarForm(entity: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | null): void {
+    this.formVisible = false;
+    this.selected<%= entity.name %> = null;
+    this.cdr.detectChanges();
+    this.selected<%= entity.name %> = entity;
+    this.drawerMode = entity ? 'edit' : 'new';
+    this.formVisible = true;
+    this.cdr.detectChanges();
+    this.formDrawer?.open();
+  }
+
+  clearFormState(): void {
+    ++this.formRequestVersion;
+    this.formVisible = false;
+    this.selected<%= entity.name %> = null;
+    this.drawerMode = 'new';
+    this.cdr.markForCheck();
+  }
+
+  closeFormDrawer(): void {
+    this.clearFormState();
+    this.formDrawer?.close();
+  }
+
+  openFilterDrawer(): void {
+    this.filterDrawer.open();
+  }
+
+  closeFilterDrawer(): void {
+    this.filterDrawer.close();
+  }
+
+  handleFilterDrawerClosed(): void {
+    if (this.exportAfterFilter) {
+      this.exportAfterFilter = false;
+    }
+    this.closeFilterDrawer();
+  }
+
+  handleFormSaved(): void {
+    this.snackBar.open('<%= entity.name %> saved successfully', 'Close', {
+      duration: 2000,
+      horizontalPosition: 'center',
+      verticalPosition: <%= toCamelCase(entity.name) %>Settings.snackbarPositionTop ? 'top' : 'bottom',
+      panelClass: ['success-snackbar'],
+    });
+    this.closeFormDrawer();
+    this.refreshTrigger.next();
+    this.dialogRef?.close(true);
+  }
+
+  delete(id: number): void {
+    <% if (preferences.fuse?.enabled) { %>
+    this.openTypedConfirmationDialog({
+      title: 'Delete <%= entity.name %>',
+      message: 'Type <%= entity.name %> id ' + id + ' to delete this record. This action cannot be undone.',
+      confirmText: String(id),
+      color: 'rose',
+      inputLabel: '<%= entity.name %> id',
+    }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(confirmed => {
+    <% } else { %>
+    this.openConfirmationDialog({
+      title: 'Delete <%= entity.name %>',
+      message: 'Are you sure you want to delete this? This action cannot be undone.',
+      color: 'rose',
+    }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(confirmed => {
+    <% } %>
+      if (!confirmed) {
+        return;
+      }
+      this.<%= toCamelCase(entity.name) %>Service.delete(id).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        this.snackBar.open('<%= entity.name %> deleted successfully', 'Close', {
+          duration: 2000,
+          horizontalPosition: 'center',
+          verticalPosition: <%= toCamelCase(entity.name) %>Settings.snackbarPositionTop ? 'top' : 'bottom',
+          panelClass: ['success-snackbar'],
+        });
+        this.refreshTrigger.next();
+      });
+    });
+  }
+
+  handleFiltersApplied(filters: { [key: string]: string }): void {
+    this.activeFilters = filters;
+    if (this.paginator) {
+      this.paginator.pageIndex = 0;
+    }
+    this.refreshTrigger.next();
+    this.closeFilterDrawer();
+
+    if (this.exportAfterFilter) {
+      this.exportAfterFilter = false;
+      this.exportDataForFilters({
+        ...this.baseParentFilters,
+        ...filters,
+      });
+    }
+  }
+
+  <% collectionRelationships.forEach(rel => { 
+      const parentFilterField = rel.to.fieldName ? toCamelCase(rel.to.fieldName) : toCamelCase(entity.name);
+      const filterKey = `${parentFilterField}Id.equals`;
+      const methodSuffix = rel.otherEntityNamePascalCase;
+  %>
+  async show<%= methodSuffix %>(element: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>): Promise<void> {
+    let component;
+    try { component = (await import('../../../<%= entityImportPath(rel.otherEntityName) %>/components/presentation/list/<%= toKebabCase(rel.otherEntityName) %>-list.component')).<%= rel.otherEntityName %>ListComponent; }
+    catch (error) { console.error('Unable to load related list', error); this.snackBar.open('Unable to load related list. Please retry.', 'Close', {duration:3000}); return; }
+    if (this.destroyRef.destroyed) return;
+    this.dialog.open(component, {
+      width: '960px',
+      maxWidth: '95vw',
+      height: '80vh',
+      panelClass: 'cforge-related-list-dialog',
+      data: {
+        parentFilters: { '<%= filterKey %>': element.id ?? null },
+      },
+    });
+  }
+
+  async add<%= methodSuffix %>(element: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>): Promise<void> {
+    let component;
+    try { component = (await import('../../../<%= entityImportPath(rel.otherEntityName) %>/components/forms/form/<%= toKebabCase(rel.otherEntityName) %>-form.component')).<%= rel.otherEntityName %>FormComponent; }
+    catch (error) { console.error('Unable to load related form', error); this.snackBar.open('Unable to load related form. Please retry.', 'Close', {duration:3000}); return; }
+    if (this.destroyRef.destroyed) return;
+    const dialogRef = this.dialog.open(component, {
+      width: '720px',
+      data: {
+        defaults: { <%= rel.type === 'ManyToMany' ? `${parentFilterField}: (element ? [element] : [])` : `${parentFilterField}: element` %> },
+        heading: 'New <%= rel.otherEntityName %> for <%= entity.name %>',
+      },
+    });
+
+    dialogRef.afterClosed().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(result => {
+      if (result) {
+        this.refreshTrigger.next();
+      }
+    });
+  }
+  <% }); %>
+
+  handleSearchChanged(event: { searchBy: string; searchTerm: string }): void {
+    this.searchBy = event.searchBy;
+    this.searchTerm = event.searchTerm;
+
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.storageKeySearchTerm, this.searchTerm);
+      localStorage.setItem(this.storageKeySearchBy, this.searchBy);
+    }
+
+    this.applySearchFilters();
+
+    if (this.paginator) {
+      this.paginator.pageIndex = 0;
+    }
+    this.refreshTrigger.next();
+  }
+
+  searchHighlight(fieldName: string): string {
+    if (!this.searchTerm) {
+      return '';
+    }
+    if (this.searchMode === 'global' || this.searchBy === fieldName) {
+      return this.searchTerm;
+    }
+    return '';
+  }
+
+  onSearchTermChange(value: string): void {
+    this.handleSearchChanged({ searchBy: this.searchBy, searchTerm: value });
+  }
+
+  <% if (entity.fields.some(f => f.fieldName === 'isActive')) { %>
+  toggleActive(element: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>): void {
+    if (element.id === undefined) return;
+    
+    const newActiveState = !element.isActive;
+    const actionLabel = newActiveState ? 'Activate' : 'Deactivate';
+    
+    this.openConfirmationDialog({
+      title: `${actionLabel} <%= entity.name %>`,
+      message: `Are you sure you want to ${newActiveState ? 'activate' : 'deactivate'} this <%= toCamelCase(entity.name) %>?`,
+      color: newActiveState ? 'emerald' : 'violet',
+    }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(confirmed => {
+      if (confirmed) {
+        const updated = { ...element, isActive: newActiveState };
+        this.<%= toCamelCase(entity.name) %>Service.update(updated).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+          this.snackBar.open('<%= entity.name %> ' + (newActiveState ? 'activated' : 'deactivated') + ' successfully', 'Close', {
+            duration: 2000,
+            horizontalPosition: 'center',
+            verticalPosition: <%= toCamelCase(entity.name) %>Settings.snackbarPositionTop ? 'top' : 'bottom',
+            panelClass: ['success-snackbar'],
+          });
+          this.refreshTrigger.next();
+        });
+      }
+    });
+  }
+  <% } %>
+
+  viewDetails(id: number): void {
+    this.router.navigate([id, 'view'], { relativeTo: this.route });
+  }
+}