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

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

@@ -0,0 +1,102 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } 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 { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+<%
+const fuseShared = !!preferences.fuse?.enabled;
+const importsBase = fuseShared
+  ? `import { BaseFilterComponent } from '@/app/domains/admin/modules/apps/shared/base/base-filter.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '@/app/domains/admin/modules/apps/shared/base/filter-types';`
+  : preferences.architecture?.centralizedSharedFolder
+    ? `import { BaseFilterComponent } from '../../../../../shared/base/base-filter.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '../../../../../shared/base/filter-types';`
+    : `import { BaseFilterComponent } from '../../../shared/base/base-filter.component';\nimport { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType } from '../../../shared/base/filter-types';`;
+%>
+<%- importsBase %>
+
+<%
+const uniqueEnumImports = new Map();
+entity.fields.filter(field => !isHiddenFromUi(field.fieldName, 'filters')).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`;
+}
+%>
+<%- Array.from(uniqueEnumImports.values()).join('\n') %>
+
+@Component({
+  selector: 'app-<%= toKebabCase(entity.name) %>-filter',
+  templateUrl: './<%= toKebabCase(entity.name) %>-filter.component.html',
+  host: {
+    class: 'flex flex-col h-full w-full',
+  },
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>FilterComponent extends BaseFilterComponent implements OnInit {
+
+  <% entity.fields.filter(field => !isHiddenFromUi(field.fieldName, 'filters')).forEach(field => { if (field.fieldTypeIsEnum) { %>
+  readonly <%= toCamelCase(field.fieldType) %>Options = Object.keys(<%= field.fieldType %>);
+  <% }}); %>
+
+  override 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: '<%= field.fieldName.replace(/([A-Z])/g, " $1").trim().replace(/^./, c => c.toUpperCase()) %>',
+      valueType: '<%= valueType %>' as FilterValueType,
+      operators: FILTER_OPERATOR_LIBRARY['<%= valueType %>'],
+      rawFieldType: '<%= field.fieldType %>'<% if (enumOptionsKey) { %>,
+      enumOptionsKey: '<%= enumOptionsKey %>'<% } %>
+    },
+    <% }); %>
+    <% relationships.filter(rel => ['ManyToOne', 'OneToOne'].includes(rel.type)).forEach(rel => { 
+         const key = relationshipFilterKey(rel);
+         const label = rel.from.fieldName ? rel.from.fieldName.replace(/([A-Z])/g, " $1").trim().replace(/^./, c => c.toUpperCase()) : rel.otherEntityNamePascalCase;
+    %>
+    {
+      key: '<%= key %>',
+      label: '<%= label %>',
+      valueType: 'number' as FilterValueType,
+      operators: FILTER_OPERATOR_LIBRARY['number'],
+      rawFieldType: 'Long'
+    },
+    <% }); %>
+  ];
+}

package/src/templates/angular/entity/components/presentation/card/_entity_-card.component.css.ejs

@@ -0,0 +1,33 @@
+.card {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0.5rem 0;
+  box-shadow: 0 2px 4px rgba(0,0,0,.05);
+}
+
+.card-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.card-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.card-pin {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #2563eb;
+}

package/src/templates/angular/entity/components/presentation/card/_entity_-card.component.html.ejs

@@ -0,0 +1,29 @@
+<div class="card {{item?.id}}-card bg-white dark:bg-neutral-900 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100">
+  <div class="card-status">
+    <mat-icon svgIcon="flag" class="card-flag" [ngClass]="flagClass"></mat-icon>
+    @if (pinned) {
+      <span class="card-pin">
+        <mat-icon svgIcon="heroicons_mini:paper-clip" class="text-red-500"></mat-icon>
+        <span>Pinned</span>
+      </span>
+    }
+  </div>
+  <h3 class="card-title">{{item?.id}}</h3>
+  <p class="card-body">
+    <% entity.fields.filter(function (field) { return !isHiddenFromUi(field.fieldName, 'cards'); }).forEach(function (field) { %>
+      <strong><%= field.fieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %>:</strong> 
+      <% if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>
+        {{item?.<%= field.fieldName %>?.toDate() | date}}<br/>
+      <% } else if (['createdBy', 'lastModifiedBy'].includes(field.fieldName)) { %>
+        <span>{{ item?.<%= field.fieldName %> | auditUserName | async }}</span><br/>
+      <% } else { %>
+        <span [innerHTML]="highlightText(item?.<%= field.fieldName %>, (searchMode === 'global' || searchBy === '<%= field.fieldName %>') ? searchTerm : '')"></span><br/>
+      <% } %>
+    <% }) %>
+  </p>
+  <% if (iamAcl) { %>@if (SCREEN | accessCtrl: 'edit') {<% } %>
+  <button mat-button color="primary" (click)="openFormDrawer('edit')" data-screen-id="<%= folderName || 'micro-functions' %>/<%= toKebabCase(entity.name) %>" data-component-id="edit">
+    Edit
+  </button>
+  <% if (iamAcl) { %>}<% } %>
+</div>

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

@@ -0,0 +1,93 @@
+<% 
+  const hasDateFields = entity.fields.some(f => ['LocalDate', 'Instant', 'ZonedDateTime'].includes(f.fieldType));
+%>
+import { Component, Input, Output, EventEmitter, OnInit, inject, ChangeDetectionStrategy, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule<%= hasDateFields ? ', DatePipe' : '' %> } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> } from '../../../<%= toKebabCase(entity.name) %>.model';
+import { <%= entity.name %>Service } from '../../../service/<%= toKebabCase(entity.name) %>.service';
+import { <%= toCamelCase(entity.name) %>Settings } from '../../../settings/settings.config';
+<% if (iamAcl) { %>
+import { AccessCtrlPipe } from '@/app/core/auth';
+<% } %>
+
+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) %>-card',
+  templateUrl: './<%= toKebabCase(entity.name) %>-card.component.html',
+  styleUrls: ['./<%= toKebabCase(entity.name) %>-card.component.css'],
+  standalone: true,
+  imports: [CommonModule, AuditUserNamePipe<%= hasDateFields ? ', DatePipe' : '' %>, MatButtonModule, MatIconModule<% if (iamAcl) { %>, AccessCtrlPipe<% } %>],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>CardComponent implements OnInit {
+  readonly SCREEN = '<%= toKebabCase(entity.name) %>';
+  private readonly componentDestroyRef = inject(DestroyRef);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly service = inject(<%= entity.name %>Service);
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  @Input() item?: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>;
+  @Input() searchTerm: string = '';
+  @Input() searchBy: string = '';
+  @Input() searchMode: 'field' | 'global' = 'field';
+  @Input() pinned = false;
+  @Input() flagClass = 'text-neutral-300';
+
+  ngOnInit(): void {
+    if (!this.item) {
+      const id = this.route.snapshot.paramMap.get('id');
+      if (id) {
+        this.service.find(Number(id)).pipe(takeUntilDestroyed(this.componentDestroyRef)).subscribe({
+          next: (res) => {
+            if (res.body) {
+              this.item = res.body;
+              this.cdr.markForCheck();
+            }
+          }
+        });
+      }
+    }
+  }
+
+  @Output() editClick = new EventEmitter<number>();
+
+  openFormDrawer(mode: string): void {
+    if (!this.item || this.item.id === undefined) {
+      return;
+    }
+    if (this.editClick.observed) {
+      this.editClick.emit(this.item.id);
+      return;
+    }
+    if (<%= toCamelCase(entity.name) %>Settings.formMode === 'page') {
+      this.router.navigate(['../../', this.item.id, 'edit'], { relativeTo: this.route });
+      return;
+    }
+    this.router.navigate(['../../'], {
+      relativeTo: this.route,
+      queryParams: { form: 'edit', id: this.item.id },
+    });
+  }
+
+  highlightText(text: any, query: string): string {
+    if (!query || text === null || text === undefined) return text ? String(text) : '';
+    const escaped = String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+    const regex = new RegExp(`(${this.escapeRegExp(query)})`, '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>');
+  }
+
+  private escapeRegExp(string: string): string {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+}

package/src/templates/angular/entity/components/presentation/detail/_entity_-detail.component.css.ejs

@@ -0,0 +1,54 @@
+.detail-page {
+  min-height: 100%;
+}
+
+.detail-container {
+  background: var(--fuse-bg-card, #ffffff);
+  border-radius: 1rem;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+}
+
+.detail-header {
+  margin-bottom: 1.5rem;
+}
+
+.detail-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.field-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 0.875rem;
+  padding: 1rem;
+  background: rgba(248, 250, 252, 0.7);
+}
+
+.field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgb(100 116 139);
+}
+
+.field-value {
+  min-width: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: rgb(15 23 42);
+  overflow-wrap: anywhere;
+}
+
+@media (min-width: 768px) {
+  .detail-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/src/templates/angular/entity/components/presentation/detail/_entity_-detail.component.html.ejs

@@ -0,0 +1,58 @@
+<%
+function toSpacedLabel(str) {
+  return str.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase());
+}
+%>
+<!-- Detail component for <%= entity.name %> -->
+<div class="detail-page p-6 sm:p-10">
+  <div class="detail-container">
+    <div class="detail-header flex items-center justify-between">
+      <h2 class="text-2xl font-bold tracking-tight sm:text-3xl"><%= toSpacedLabel(entity.name) %> Details</h2>
+      <button (click)="goBack()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-semibold transition-colors duration-150">Back</button>
+    </div>
+
+    @if (element) {
+      <div class="detail-grid mt-6">
+        <% entity.fields.filter(function(field){ return !isHiddenFromUi(field.fieldName, 'detail'); }).forEach(function(field){ %>
+          <div class="field-block">
+            <strong class="field-label"><%= toSpacedLabel(field.fieldName) %></strong>
+            <% if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>
+            <span class="field-value">{{ element.<%= field.fieldName %>?.toDate() | date: '<%= preferences.fields?.formatting?.dateMediumFormat || "medium" %>' }}</span>
+            <% } else { %>
+            <span class="field-value">{{ element.<%= field.fieldName %><% if (['createdBy', 'lastModifiedBy'].includes(field.fieldName)) { %> | auditUserName | async<% } %> }}</span>
+            <% } %>
+          </div>
+        <% }); %>
+        <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(function(rel){ 
+             const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+             const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+        %>
+          <div class="field-block">
+            <strong class="field-label"><%= relFieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %></strong>
+            <% if (isCollection) { %>
+            <span class="field-value">
+              @for (item of element.<%= relFieldName %>; track item.id; let last = $last) {
+                <a [routerLink]="['/<%= toKebabCase(rel.to.name) %>', item.id, 'view']" class="text-sky-600 hover:underline">
+                  {{ ($any(item)).name || ($any(item)).title || item.id }}
+                </a>@if (!last) {<span>, </span>}
+              } @empty {
+                <span class="text-neutral-400">None</span>
+              }
+            </span>
+            <% } else { %>
+            <span class="field-value">
+              @if (element.<%= relFieldName %>) {
+                <a [routerLink]="['/<%= toKebabCase(rel.to.name) %>', element.<%= relFieldName %>.id, 'view']" class="text-sky-600 hover:underline">
+                  {{ ($any(element.<%= relFieldName %>)).name || ($any(element.<%= relFieldName %>)).title || element.<%= relFieldName %>.id }}
+                </a>
+              } @else {
+                <span class="text-neutral-400">None</span>
+              }
+            </span>
+            <% } %>
+          </div>
+        <% }); %>
+      </div>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,47 @@
+<% 
+  const hasRelationships = relationships.some(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name);
+%>
+import { Component, OnInit, inject, ChangeDetectionStrategy, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { ActivatedRoute, Router<%= hasRelationships ? ', RouterLink' : '' %> } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> } from '../../../<%= toKebabCase(entity.name) %>.model';
+import { <%= entity.name %>Service } from '../../../service/<%= toKebabCase(entity.name) %>.service';
+
+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) %>-detail',
+  templateUrl: './<%= toKebabCase(entity.name) %>-detail.component.html',
+  styleUrls: ['./<%= toKebabCase(entity.name) %>-detail.component.css'],
+  standalone: true,
+  imports: [CommonModule, AuditUserNamePipe<%= hasRelationships ? ', RouterLink' : '' %>],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= entity.name %>DetailComponent 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 cdr = inject(ChangeDetectorRef);
+
+  element!: <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>;
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.service.find(Number(id)).pipe(takeUntilDestroyed(this.componentDestroyRef)).subscribe({
+        next: (res) => {
+          if (res.body) {
+            this.element = res.body;
+            this.cdr.markForCheck();
+          }
+        }
+      });
+    }
+  }
+
+  goBack(): void {
+    this.router.navigate(['../../'], { relativeTo: this.route });
+  }
+}