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

package/src/templates/angular/entity/components/forms/form/_entity_-form.component.ts.ejs

@@ -0,0 +1,175 @@
+import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Component, OnChanges, OnInit, SimpleChanges, inject, ChangeDetectionStrategy } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Observable } from 'rxjs';
+import { HttpResponse } from '@angular/common/http';
+
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, New<%= entity.name %> } from '../../../<%= toKebabCase(entity.name) %>.model';
+import { <%= entity.name %>Service } from '../../../service/<%= toKebabCase(entity.name) %>.service';
+import { <%= entity.name %>FormGroup, <%= entity.name %>FormService } from '../update/<%= toKebabCase(entity.name) %>-form.service';
+import { <%= toCamelCase(entity.name) %>Settings } from '../../../settings/settings.config';
+
+<%
+const fuseShared = !!preferences.fuse?.enabled;
+const importsBase = fuseShared
+  ? `import { BaseFormComponent, BaseFormDialogData } from '@/app/domains/admin/modules/apps/shared/base/base-form.component';`
+  : preferences.architecture?.centralizedSharedFolder
+    ? `import { BaseFormComponent, BaseFormDialogData } from '../../../../../shared/base/base-form.component';`
+    : `import { BaseFormComponent, BaseFormDialogData } from '../../../shared/base/base-form.component';`;
+%>
+<%- importsBase %>
+
+<%
+const uniqueRelImports = new Map();
+relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => {
+  if (rel.to.name !== entity.name && !uniqueRelImports.has(rel.to.name)) {
+    const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+    const folder = toKebabCase(rel.to.name);
+    uniqueRelImports.set(rel.to.name, {
+      service: `import { ${rel.to.name}Service } from '../../../${entityImportPath(rel.to.name)}/service/${folder}.service';`,
+      model: `import { ${prefix}${rel.to.name} } from '../../../${entityImportPath(rel.to.name)}/${folder}.model';`
+    });
+  }
+});
+%>
+<%- Array.from(uniqueRelImports.values()).map(x => x.model).join('\n') %>
+<%- Array.from(uniqueRelImports.values()).map(x => x.service).join('\n') %>
+
+<% 
+const enumImports = new Map();
+entity.fields.forEach(field => {
+  if (field.fieldTypeIsEnum && !enumImports.has(field.fieldType)) {
+    enumImports.set(field.fieldType, `import { ${field.fieldType} } from '${preferences.fuse?.enabled ? '../../../../../enum/' : '../../../../../enums/'}${toKebabCase(field.fieldType)}.model';`);
+  }
+});
+%>
+<%- Array.from(enumImports.values()).join('\n') %>
+
+import { InputFormatDirective } from '<%= preferences.fuse?.enabled ? '@/app/domains/admin/modules/apps/shared/base' : preferences.architecture?.centralizedSharedFolder ? '../../../../../shared/base' : '../../../shared/base' %>/input-format.directive';
+
+@Component({
+  selector: 'app-<%= toKebabCase(entity.name) %>-form',
+  standalone: true,
+  host: {
+    class: 'block h-full w-full min-w-0 flex-1',
+  },
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    InputFormatDirective,
+    MatInputModule,
+    MatNativeDateModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+    MatSnackBarModule,
+  ],
+  templateUrl: './<%= toKebabCase(entity.name) %>-form.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>FormComponent extends BaseFormComponent<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> implements OnInit, OnChanges {
+  readonly fieldSettings = <%= toCamelCase(entity.name) %>Settings.fields;
+  preferences: any = <%- JSON.stringify(preferences) %>;
+  private readonly <%= toCamelCase(entity.name) %>Service = inject(<%= entity.name %>Service);
+  private readonly formService = inject(<%= entity.name %>FormService);
+  <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { %>
+  private readonly <%= toCamelCase(rel.to.name) %>Service = inject(<%= rel.to.name %>Service);
+  <% }); %>
+  private readonly dialogRef = inject(MatDialogRef<<%= entity.name %>FormComponent>, { optional: true });
+  private readonly dialogData = inject(MAT_DIALOG_DATA, { optional: true }) as BaseFormDialogData<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> | null;
+
+  override form: <%= entity.name %>FormGroup = this.formService.create<%= entity.name %>FormGroup();
+  override entityName = '<%= entity.name %>';
+  override snackbarPositionTop = <%= toCamelCase(entity.name) %>Settings.snackbarPositionTop;
+
+  <% entity.fields.forEach(field => { if (field.fieldTypeIsEnum) { %>
+  readonly <%= toCamelCase(field.fieldType) %>Options = Object.keys(<%= field.fieldType %>);
+  <% }}); %>
+
+  <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+       const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+  %>
+  <%= toCamelCase(rel.to.name) %>sSharedCollection: <%= prefix %><%= rel.to.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.initializeFormFromInputs();
+    this.loadRelationshipsOptions();
+    this.isInitialized = true;
+  }
+
+  private loadRelationshipsOptions(): void {
+    <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { %>
+    this.<%= toCamelCase(rel.to.name) %>Service.query({ page: 0, size: 50 }).pipe(takeUntilDestroyed(this.formDestroyRef)).subscribe(res => {
+      this.<%= toCamelCase(rel.to.name) %>sSharedCollection = res.body || [];
+      this.cdr.markForCheck();
+    });
+    <% }); %>
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.isInitialized) {
+      return;
+    }
+    if (changes['entity']) {
+      this.errorMessage = null;
+      if (changes['entity'].currentValue) {
+        this.formService.resetForm(this.form, { ...changes['entity'].currentValue });
+      } else {
+        this.resetToDefaults();
+      }
+    }
+  }
+
+  protected override save(payload: any): Observable<HttpResponse<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>>> {
+    const isUpdate = payload.id != null;
+    return isUpdate
+      ? this.<%= toCamelCase(entity.name) %>Service.update(payload as <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>)
+      : this.<%= toCamelCase(entity.name) %>Service.create(payload as New<%= entity.name %>);
+  }
+
+  protected override getPayload(): any {
+    return this.formService.get<%= entity.name %>(this.form);
+  }
+
+  protected override resetForm(entity: Partial<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>>): void {
+    this.formService.resetForm(this.form, entity);
+  }
+
+  protected override getDialogData(): BaseFormDialogData<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>> | null {
+    return this.dialogData;
+  }
+
+  protected override getDialogRef(): MatDialogRef<any> | null {
+    return this.dialogRef;
+  }
+
+  <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+       const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+  %>
+  compare<%= rel.to.name %>(o1: <%= prefix %><%= rel.to.name %> | null, o2: <%= prefix %><%= rel.to.name %> | null): boolean {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  }
+  <% }); %>
+}

package/src/templates/angular/entity/components/forms/form-page/_entity_-form-page.component.html.ejs

@@ -0,0 +1,10 @@
+<!-- Form Page component for <%= entity.name %> -->
+<div class="form-page-container p-6">
+  <h2 class="text-2xl font-bold mb-4">{{ isEdit ? 'Edit' : 'Create' }} <%= entity.name %></h2>
+  <app-<%= toKebabCase(entity.name) %>-form
+    [entity]="entity"
+    [heading]="isEdit ? 'Edit <%= entity.name %>' : 'New <%= entity.name %>'"
+    (saved)="onSaved($event)"
+    (cancelled)="onCancelled()"
+  ></app-<%= toKebabCase(entity.name) %>-form>
+</div>

package/src/templates/angular/entity/components/forms/form-page/_entity_-form-page.component.ts.ejs

@@ -0,0 +1,86 @@
+import { Component, OnInit, inject, ChangeDetectionStrategy, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+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 '../form/<%= toKebabCase(entity.name) %>-form.component';
+import { <%= toCamelCase(entity.name) %>Settings } from '../../../settings/settings.config';
+
+@Component({
+  selector: 'app-<%= toKebabCase(entity.name) %>-form-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatSnackBarModule,
+    <%= entity.name %>FormComponent
+  ],
+  templateUrl: './<%= toKebabCase(entity.name) %>-form-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>FormPageComponent implements OnInit {
+  private readonly componentDestroyRef = inject(DestroyRef);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly service = inject(<%= entity.name %>Service);
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  isEdit = false;
+  entity: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | null = null;
+
+  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);
+    }
+    const id = this.route.snapshot.paramMap.get('id');
+    if (<%= toCamelCase(entity.name) %>Settings.formMode !== 'page') {
+      this.router.navigate([id ? '../../' : '../'], {
+        relativeTo: this.route,
+        queryParams: id ? { form: 'edit', id } : { form: 'new' },
+        replaceUrl: true,
+      });
+      return;
+    }
+    if (id) {
+      this.isEdit = true;
+      this.loadEntity(id);
+    }
+  }
+
+  private loadEntity(id: string): void {
+    this.service.find(Number(id)).pipe(takeUntilDestroyed(this.componentDestroyRef)).subscribe({
+      next: (res) => {
+        if (res.body) {
+          this.entity = res.body;
+          this.cdr.markForCheck();
+        }
+      },
+      error: () =>
+        this.snackBar.open('Failed to load <%= entity.name %>', 'Close', {
+          duration: 3000,
+          horizontalPosition: 'center',
+          verticalPosition: <%= toCamelCase(entity.name) %>Settings.snackbarPositionTop ? 'top' : 'bottom',
+          panelClass: ['error-snackbar'],
+        }),
+    });
+  }
+
+  onSaved(savedEntity: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>): 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.router.navigate([this.isEdit ? '../../' : '../'], { relativeTo: this.route });
+  }
+
+  onCancelled(): void {
+    this.router.navigate([this.isEdit ? '../../' : '../'], { relativeTo: this.route });
+  }
+}

package/src/templates/angular/entity/components/forms/update/_entity_-form.service.ts.ejs

@@ -0,0 +1,136 @@
+import { <%= toCamelCase(entity.name) %>Settings } from '../../../settings/settings.config';
+import { Injectable } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import dayjs from 'dayjs/esm';
+import { normalizeInputFields } from '<%= preferences.fuse?.enabled ? '@/app/domains/admin/modules/apps/shared/base' : preferences.architecture?.centralizedSharedFolder ? '../../../../../shared/base' : '../../../shared/base' %>/input-format';
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, New<%= entity.name %> } from '../../../<%= toKebabCase(entity.name) %>.model';
+
+<% 
+const uniqueModelImports = new Map();
+relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => {
+  if (rel.to.name !== entity.name && !uniqueModelImports.has(rel.to.name)) {
+    const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+    uniqueModelImports.set(rel.to.name, `import { ${prefix}${rel.to.name} } from '../../../${entityImportPath(rel.to.name)}/${toKebabCase(rel.to.name)}.model';`);
+  }
+});
+%>
+<%- Array.from(uniqueModelImports.values()).join('\n') %>
+
+<%
+const dateFields = entity.fields.filter(f => ['LocalDate', 'Instant', 'ZonedDateTime'].includes(f.fieldType));
+
+function getControlValidators(field) {
+  const validators = [];
+  field.fieldValidateRules.forEach(rule => {
+    if (rule === 'required') {
+      validators.push('Validators.required');
+    } else if (rule.startsWith('minlength(')) {
+      const match = [Number(rule.slice(rule.indexOf('(') + 1, -1))];
+      if (match) validators.push(`Validators.minLength(${match[0]})`);
+    } else if (rule.startsWith('maxlength(')) {
+      const match = [Number(rule.slice(rule.indexOf('(') + 1, -1))];
+      if (match) validators.push(`Validators.maxLength(${match[0]})`);
+    } else if (rule.startsWith('min(')) {
+      const match = [Number(rule.slice(rule.indexOf('(') + 1, -1))];
+      if (match) validators.push(`Validators.min(${match[0]})`);
+    } else if (rule.startsWith('max(')) {
+      const match = [Number(rule.slice(rule.indexOf('(') + 1, -1))];
+      if (match) validators.push(`Validators.max(${match[0]})`);
+    } else if (rule.startsWith('pattern(')) {
+      const pat = rule.substring(8, rule.length - 1);
+      validators.push(`Validators.pattern(${patternExpression(pat)})`);
+    }
+  });
+  return validators;
+}
+%>
+
+type <%= entity.name %>FormGroupInput = <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | Partial<New<%= entity.name %>>;
+type <%= entity.name %>FormRawValue = Omit<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, <%- dateFields.length ? dateFields.map(f => `'${f.fieldName}'`).join(' | ') : 'never' %>> & {
+  <% dateFields.forEach(field => { %>
+  <%= field.fieldName %>?: Date | null;
+  <% }); %>
+};
+
+export type <%= entity.name %>FormGroup = FormGroup<{
+  id: FormControl<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>['id'] | New<%= entity.name %>['id']>;
+  <% entity.fields.forEach(field => { %>
+  <%= field.fieldName %>: FormControl<<% if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>Date | null<% } else { %><%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>['<%= field.fieldName %>']<% } %>>;
+  <% }); %>
+  <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+       const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+       const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+       const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+       const relTypeStr = prefix + rel.to.name + (isCollection ? '[]' : '');
+  %>
+  <%= relFieldName %>: FormControl<<%= relTypeStr %> | null>;
+  <% }); %>
+}>;
+
+@Injectable({ providedIn: 'root' })
+export class <%= entity.name %>FormService {
+  create<%= entity.name %>FormGroup(entity: <%= entity.name %>FormGroupInput = { id: null }): <%= entity.name %>FormGroup {
+    entity = normalizeInputFields(entity, <%= toCamelCase(entity.name) %>Settings.fields);
+    const form = new FormGroup({
+      id: new FormControl(
+        { value: entity.id, disabled: true },
+        { nonNullable: true, validators: [Validators.required] }
+      ),
+      <% entity.fields.forEach(field => { %>
+      <% 
+        const controlVals = getControlValidators(field);
+        const valString = controlVals.length > 0 ? `, [${controlVals.join(', ')}]` : '';
+      %>
+      <%= field.fieldName %>: new FormControl(<% if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>this.convertDateForForm(entity.<%= field.fieldName %>)<% } else { %>entity.<%= field.fieldName %><% } %><%- valString %>),
+      <% }); %>
+      <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+           const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+           const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+      %>
+      <%= relFieldName %>: new FormControl(entity.<%= relFieldName %> || <%- isCollection ? '[]' : 'null' %>),
+      <% }); %>
+    });
+    return form;
+  }
+
+  get<%= entity.name %>(form: <%= entity.name %>FormGroup): <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | New<%= entity.name %> {
+    const rawValue = normalizeInputFields(form.getRawValue(), <%= toCamelCase(entity.name) %>Settings.fields) as <%= entity.name %>FormRawValue;
+    return {
+      ...rawValue,
+      <% dateFields.forEach(field => { %>
+      <%= field.fieldName %>: rawValue.<%= field.fieldName %> ? dayjs(rawValue.<%= field.fieldName %>) : null,
+      <% }); %>
+    } as <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> | New<%= entity.name %>;
+  }
+
+  resetForm(form: <%= entity.name %>FormGroup, entity: <%= entity.name %>FormGroupInput): void {
+    entity = normalizeInputFields(entity, <%= toCamelCase(entity.name) %>Settings.fields);
+    form.reset({
+      ...entity,
+      <% dateFields.forEach(field => { %>
+      <%= field.fieldName %>: this.convertDateForForm(entity.<%= field.fieldName %>),
+      <% }); %>
+      <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+           const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+           const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+      %>
+      <%= relFieldName %>: entity.<%= relFieldName %> || <%- isCollection ? '[]' : 'null' %>,
+      <% }); %>
+    } as any);
+    form.controls.id.setValue(entity.id ?? null);
+  }
+
+  private convertDateForForm(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+    if (value instanceof Date) {
+      return value;
+    }
+    if (dayjs.isDayjs(value)) {
+      return value.toDate();
+    }
+    const parsed = new Date(value as string);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+}

package/src/templates/angular/entity/components/interaction/actions/_entity_-actions.component.html.ejs

@@ -0,0 +1,68 @@
+<%
+const screenId = typeof entityScreenId !== 'undefined' && entityScreenId ? entityScreenId : toKebabCase(entity.name);
+const aclAttrs = (componentId) => `data-screen-id="${screenId}" data-component-id="${componentId}"`;
+%>
+<div class="mt-6 grid w-full grid-cols-2 gap-3 md:ml-4 md:mt-0 md:flex md:w-auto md:shrink-0 md:items-center">
+  @if (searchMode === 'field') {
+    <mat-form-field appearance="outline" subscriptSizing="dynamic" class="col-span-2 w-full sm:col-span-1 md:w-40">
+      <mat-select [ngModel]="searchBy" (ngModelChange)="onSearchByChange($event)" aria-label="Search by field">
+        @for (col of searchableColumns; track col) {
+          <mat-option [value]="col">
+            {{ getColumnLabel(col) }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  }
+
+  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="col-span-2 w-full sm:col-span-1 md:w-64">
+    <mat-icon matPrefix svgIcon="search" class="mr-2 text-neutral-500"></mat-icon>
+    <input matInput [placeholder]="searchMode === 'global' ? 'Search all fields…' : 'Search…'" [ngModel]="searchTerm" (ngModelChange)="onSearchTermChange($event)" />
+    @if (searchTerm) {
+      <button mat-icon-button matSuffix type="button" (click)="onSearchTermChange('')" class="flex h-8 w-8 min-w-0 items-center justify-center p-0" aria-label="Clear search">
+        <mat-icon svgIcon="x" class="text-neutral-500"></mat-icon>
+      </button>
+    }
+  </mat-form-field>
+
+  <div class="search-bar col-span-2 flex items-center justify-start gap-3">
+    <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'open-columns') {<% } %>
+    <button mat-stroked-button type="button" [matMenuTriggerFor]="columnMenu" class="h-10 w-12 min-w-0 p-0" matTooltip="Columns" aria-label="Column preferences" <%- aclAttrs('open-columns') %>>
+      <span class="flex items-center justify-center">
+        <mat-icon svgIcon="menu" class="m-0"></mat-icon>
+      </span>
+    </button>
+    <% if (iamAcl) { %>}<% } %>
+
+    <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'toggle-view') {<% } %>
+    <button mat-stroked-button type="button" (click)="toggleViewMode()" [attr.aria-label]="viewMode === 'table' ? 'Switch to Card View' : 'Switch to Table View'" [matTooltip]="viewMode === 'table' ? 'Switch to Card View' : 'Switch to Table View'" class="h-10 w-12 min-w-0 p-0" <%- aclAttrs('toggle-view') %>>
+      <span class="flex items-center justify-center">
+        @if (viewMode === 'table') {
+          <mat-icon svgIcon="credit-card" class="m-0"></mat-icon>
+        } @else {
+          <mat-icon svgIcon="table" class="m-0"></mat-icon>
+        }
+      </span>
+    </button>
+    <% if (iamAcl) { %>}<% } %>
+
+    @if (filterFieldsLength) {
+      <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'open-filter') {<% } %>
+      <button mat-stroked-button type="button" aria-label="Open filters" matTooltip="Filters" class="h-10 w-12 min-w-0 p-0" (click)="filterClick.emit()" <%- aclAttrs('open-filter') %>>
+        <span class="flex items-center justify-center">
+          <mat-icon svgIcon="funnel" class="m-0"></mat-icon>
+        </span>
+      </button>
+      <% if (iamAcl) { %>}<% } %>
+    }
+
+    <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'create') {<% } %>
+    <button mat-flat-button color="primary" type="button" class="h-10" (click)="newClick.emit()" <%- aclAttrs('create') %>>
+      <span class="flex items-center justify-center">
+        <mat-icon svgIcon="plus" class="m-0 mr-2"></mat-icon>
+        <span>New</span>
+      </span>
+    </button>
+    <% if (iamAcl) { %>}<% } %>
+  </div>
+</div>

package/src/templates/angular/entity/components/interaction/actions/_entity_-actions.component.ts.ejs

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+<% if (iamAcl) { %>
+import { AccessCtrlPipe } from '@/app/core/auth';
+<% } %>
+
+@Component({
+  selector: 'app-<%= toKebabCase(entity.name) %>-actions',
+  templateUrl: './<%= toKebabCase(entity.name) %>-actions.component.html',
+  host: {
+    class: 'block w-full xl:w-auto',
+  },
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatMenuModule,
+    MatTooltipModule<% if (iamAcl) { %>,
+    AccessCtrlPipe<% } %>
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>ActionsComponent {
+  readonly SCREEN = '<%= typeof entityScreenId !== "undefined" && entityScreenId ? entityScreenId : toKebabCase(entity.name) %>';
+  @Input() searchableColumns: string[] = [];
+  @Input() searchBy: string = '';
+  @Input() searchTerm: string = '';
+  @Input() searchMode: 'field' | 'global' = 'field';
+  @Input() viewMode: 'table' | 'card' = 'table';
+  @Input() filterFieldsLength = 0;
+  @Input() columnMenu!: MatMenu;
+  @Input() allColumnPreferences: { key: string; label: string }[] = [];
+
+  @Output() searchChange = new EventEmitter<{ searchBy: string; searchTerm: string }>();
+  @Output() filterClick = new EventEmitter<void>();
+  @Output() viewModeChange = new EventEmitter<'table' | 'card'>();
+  @Output() newClick = new EventEmitter<void>();
+
+  onSearchByChange(value: string): void {
+    this.searchChange.emit({ searchBy: value, searchTerm: this.searchTerm });
+  }
+
+  onSearchTermChange(value: string): void {
+    this.searchChange.emit({ searchBy: this.searchBy, searchTerm: value });
+  }
+
+  toggleViewMode(): void {
+    const nextMode = this.viewMode === 'table' ? 'card' : 'table';
+    this.viewModeChange.emit(nextMode);
+  }
+
+  getColumnLabel(key: string): string {
+    const col = this.allColumnPreferences.find(item => item.key === key);
+    return col ? col.label : key;
+  }
+}

package/src/templates/angular/entity/components/interaction/filter/_entity_-filter.component.html.ejs

@@ -0,0 +1,111 @@
+<form class="flex h-full w-full min-w-0 flex-col bg-card" [formGroup]="filtersForm" (ngSubmit)="applyFilters()">
+  <div class="border-b px-6 py-5">
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0">
+        <h2 class="text-2xl font-bold tracking-tight">Advanced Filters</h2>
+        @if (getSelectedFilterChips().length) {
+          <div class="mt-3 flex flex-wrap gap-2">
+            @for (chip of getSelectedFilterChips(); track chip.key) {
+              <span class="inline-flex max-w-full items-center rounded-full px-3 py-1 text-xs font-medium ring-1" [class]="chip.colorClass">
+                <span class="truncate">{{ chip.label }}</span>
+              </span>
+            }
+          </div>
+        }
+      </div>
+      <button mat-icon-button type="button" (click)="closeFilterDrawer()">
+        <mat-icon svgIcon="x"></mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <div class="flex-auto overflow-y-auto px-6 py-6">
+    <div class="flex flex-col gap-4">
+      @for (field of filterFields; track field.key) {
+        <div
+          class="w-full rounded-2xl border border-neutral-200 bg-neutral-50/60 p-4"
+          [formGroup]="fieldGroup(field.key)"
+        >
+          <div class="mb-4 flex items-center justify-between gap-3">
+            <div class="min-w-0">
+              <h3 class="truncate text-base font-semibold text-neutral-900">{{ field.label }}</h3>
+              <p class="mt-1 text-xs uppercase tracking-wide text-neutral-500">
+                {{ field.valueType }} filter
+              </p>
+            </div>
+            <button mat-button type="button" (click)="clearField(field.key)">
+              Clear
+            </button>
+          </div>
+
+          <div class="mb-2 text-sm font-medium text-neutral-700">Operator</div>
+          <mat-form-field appearance="outline" class="block w-full" subscriptSizing="dynamic">
+            <mat-select formControlName="operator">
+              <mat-option value="">None</mat-option>
+              @for (operator of field.operators; track operator.key) {
+                <mat-option [value]="operator.key">
+                  {{ operator.label }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          @if (operatorRequiresInput(field)) {
+            @switch (currentOperatorValueType(field)) {
+              @case ('string') {
+                <div class="mt-1 mb-2 text-sm font-medium text-neutral-700">Value</div>
+                <mat-form-field appearance="outline" class="mt-1 block w-full" subscriptSizing="dynamic">
+                  <input matInput formControlName="value" />
+                </mat-form-field>
+              }
+              @case ('number') {
+                <div class="mt-1 mb-2 text-sm font-medium text-neutral-700">Value</div>
+                <mat-form-field appearance="outline" class="mt-1 block w-full" subscriptSizing="dynamic">
+                  <input matInput type="number" formControlName="value" />
+                </mat-form-field>
+              }
+              @case ('date') {
+                <div class="mt-1 mb-2 text-sm font-medium text-neutral-700">Value</div>
+                <mat-form-field appearance="outline" class="mt-1 block w-full" subscriptSizing="dynamic">
+                  <input matInput [matDatepicker]="datePicker" formControlName="value" />
+                  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+                  <mat-datepicker #datePicker></mat-datepicker>
+                </mat-form-field>
+              }
+              @case ('boolean') {
+                <div class="mt-1 mb-2 text-sm font-medium text-neutral-700">Value</div>
+                <mat-form-field appearance="outline" class="mt-1 block w-full" subscriptSizing="dynamic">
+                  <mat-select formControlName="value">
+                    <mat-option [value]="true">True</mat-option>
+                    <mat-option [value]="false">False</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              }
+              @case ('enum') {
+                <div class="mt-1 mb-2 text-sm font-medium text-neutral-700">Value</div>
+                <mat-form-field appearance="outline" class="mt-1 block w-full" subscriptSizing="dynamic">
+                  <mat-select formControlName="value">
+                    @for (option of getEnumOptions(field); track option) {
+                      <mat-option [value]="option">
+                        {{ option }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              }
+            }
+          }
+        </div>
+      } @empty {
+        <div class="rounded-2xl border border-dashed border-outline px-4 py-8 text-center text-sm text-disabled">
+          No filterable fields are available for this entity.
+        </div>
+      }
+    </div>
+  </div>
+
+  <div class="flex flex-col-reverse gap-3 border-t px-6 py-4 sm:flex-row sm:items-center sm:justify-end">
+    <button mat-button type="button" (click)="clearFilters()">Clear All</button>
+    <button mat-flat-button color="primary" type="submit">Apply Filters</button>
+  </div>
+</form>