@devmed555/angular-clean-architecture-cli 0.0.1 → 0.0.3

package/src/generators/feature/files/ui/__singularName__.component.html.template

@@ -0,0 +1,109 @@
+<div class="<%= singularName %>-container">
+  <!-- Use @let for computed template values -->
+  @let isLoading = store.loading();
+  @let hasError = store.error();
+  @let items = store.filteredAndSortedItems();
+  @let isEmpty = items.length === 0;
+  
+  <!-- Header -->
+  <div class="header">
+    <h1><%= pascalName %> Management</h1>
+    <button 
+      mat-raised-button 
+      color="primary" 
+      (click)="openCreateDialog()"
+      [disabled]="isLoading">
+      <mat-icon>add</mat-icon>
+      Create <%= pascalName %>
+    </button>
+  </div>
+  
+  <!-- Filter -->
+  <mat-form-field class="filter-field">
+    <mat-label>Filter</mat-label>
+    <input 
+      matInput 
+      [ngModel]="store.filter()"
+      (ngModelChange)="onFilterChange($event)"
+      placeholder="Search..." />
+    <mat-icon matSuffix>search</mat-icon>
+  </mat-form-field>
+  
+  <!-- Loading Spinner -->
+  @if (isLoading) {
+    <div class="loading-container">
+      <mat-spinner diameter="50"></mat-spinner>
+    </div>
+  }
+  
+  <!-- Error Message -->
+  @if (hasError) {
+    <div class="error-message">
+      <mat-icon>error</mat-icon>
+      <span>{{ hasError }}</span>
+    </div>
+  }
+  
+  <!-- Data Table -->
+  @if (!isLoading && !hasError) {
+    <div class="table-container">
+      <table mat-table [dataSource]="items" class="mat-elevation-z2">
+        <% attributes.forEach(function(attr) { %>
+        <!-- <%= attr.name.charAt(0).toUpperCase() + attr.name.slice(1) %> Column -->
+        <ng-container matColumnDef="<%= attr.name %>">
+          <th mat-header-cell *matHeaderCellDef><%= attr.name.charAt(0).toUpperCase() + attr.name.slice(1) %></th>
+          <td mat-cell *matCellDef="let item">
+            <% if (attr.type === 'boolean') { %>
+            <mat-icon [class.active]="item.<%= attr.name %>">
+              {{ item.<%= attr.name %> ? 'check_circle' : 'cancel' }}
+            </mat-icon>
+            <% } else if (attr.type === 'number') { %>
+            {{ item.<%= attr.name %> | number }}
+            <% } else if (attr.type === 'Date') { %>
+            {{ item.<%= attr.name %> | date:'short' }}
+            <% } else { %>
+            {{ item.<%= attr.name %> }}
+            <% } %>
+          </td>
+        </ng-container>
+        <% }); %>
+        
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let item">
+            <button 
+              mat-icon-button 
+              color="primary"
+              (click)="openEditDialog(item)"
+              matTooltip="Edit">
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button 
+              mat-icon-button 
+              color="warn"
+              (click)="confirmDelete(item)"
+              matTooltip="Delete">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+        
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        
+        <!-- No Data Row -->
+        @if (isEmpty) {
+          <tr class="mat-row no-data-row">
+            <td class="mat-cell" [attr.colspan]="displayedColumns.length">
+              <div class="no-data">
+                <mat-icon>inbox</mat-icon>
+                <p>No <%= singularName %>s found</p>
+              </div>
+            </td>
+          </tr>
+        }
+      </table>
+    </div>
+  }
+</div>

package/src/generators/feature/files/ui/__singularName__.component.scss.template

@@ -0,0 +1,162 @@
+@use './_theme' as theme;
+
+.<%= singularName %>-container {
+  padding: theme.$spacing-lg;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: theme.$spacing-xl;
+  padding-bottom: theme.$spacing-sm;
+  border-bottom: 1px solid var(--color-border);
+  
+  h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    
+    // Gradient text effect
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  button {
+    height: 48px;
+    padding: 0 24px;
+    font-weight: 600;
+    border-radius: 24px; // Pill shape
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-lg);
+    }
+
+    mat-icon {
+      margin-right: theme.$spacing-sm;
+    }
+  }
+}
+
+.filter-field {
+  width: 100%;
+  margin-bottom: theme.$spacing-md;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: theme.$spacing-xl;
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: theme.$spacing-sm;
+  padding: theme.$spacing-md;
+  background-color: theme.$error-background;
+  color: theme.$error-color;
+  border-radius: theme.$border-radius;
+  margin-bottom: theme.$spacing-md;
+  
+  mat-icon {
+    color: theme.$error-color;
+  }
+}
+
+.table-container {
+  overflow-x: auto;
+  border-radius: theme.$border-radius;
+  
+  table {
+    width: 100%;
+    background-color: theme.$card-background;
+    
+    th {
+      background-color: theme.$table-header-background;
+      color: theme.$text-primary;
+      font-weight: 600;
+      padding: theme.$spacing-md;
+    }
+    
+    td {
+      padding: theme.$spacing-md;
+      color: theme.$text-secondary;
+      
+      mat-icon {
+        &.active {
+          color: theme.$success-color;
+        }
+        
+        &:not(.active) {
+          color: theme.$text-disabled;
+        }
+      }
+    }
+    
+    tr {
+      &:hover {
+        background-color: theme.$table-row-hover;
+      }
+    }
+  }
+}
+
+.no-data-row {
+  height: 200px;
+  
+  .no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: theme.$spacing-sm;
+    color: theme.$text-disabled;
+    
+    mat-icon {
+      font-size: 48px;
+      width: 48px;
+      height: 48px;
+    }
+    
+    p {
+      margin: 0;
+      font-size: 1rem;
+    }
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .<%= singularName %>-container {
+    padding: theme.$spacing-md;
+  }
+  
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: theme.$spacing-md;
+    
+    button {
+      width: 100%;
+    }
+  }
+  
+  .table-container {
+    table {
+      th, td {
+        padding: theme.$spacing-sm;
+        font-size: 0.875rem;
+      }
+    }
+  }
+}

package/src/generators/feature/files/ui/__singularName__.component.ts.template

@@ -0,0 +1,131 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+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 { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { <%= pascalName %>Store } from '../application/store';
+import { <%= pascalName %>FormComponent } from './form/form.component';
+import { <%= pascalName %> } from '../domain/model';
+import { ConfirmDialogComponent } from '../../../shared/ui/confirm-dialog/confirm-dialog.component';
+
+/**
+ * <%= pascalName %> feature component - CRUD operations with Angular Material
+ * 
+ * Angular 21 Features Used:
+ * - @let template syntax for local variables
+ * - Signals via NgRx Signal Store
+ * - ChangeDetectionStrategy.OnPush for zoneless compatibility
+ * - inject() function for dependency injection
+ */
+@Component({
+  selector: 'app-<%= singularName %>-feature',
+  imports: [
+    FormsModule,
+    DatePipe,
+    DecimalPipe,
+    MatTableModule,
+    MatSortModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDialogModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    MatTooltipModule
+  ],
+  templateUrl: './<%= singularName %>.component.html',
+  styleUrls: ['./<%= singularName %>.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= pascalName %>Component {
+  // Dependency injection using inject() - Angular 14+ pattern
+  protected readonly store = inject(<%= pascalName %>Store);
+  private readonly dialog = inject(MatDialog);
+  private readonly snackBar = inject(MatSnackBar);
+  
+  // Table columns configuration
+  protected readonly displayedColumns: string[] = [<% attributes.forEach(function(attr, index) { %>'<%= attr.name %>', <% }); %>'actions'];
+  
+  // Load data on component init using constructor for zoneless compatibility
+  constructor() {
+    // Defer loading to allow store initialization
+    queueMicrotask(() => this.store.loadAll());
+  }
+  
+  onFilterChange(value: string): void {
+    this.store.setFilter(value);
+  }
+  
+  onSortChange(field: keyof <%= pascalName %>, direction: 'asc' | 'desc'): void {
+    this.store.setSort(field, direction);
+  }
+  
+  openCreateDialog(): void {
+    const dialogRef = this.dialog.open(<%= pascalName %>FormComponent, {
+      width: '500px',
+      maxWidth: '90vw',
+      data: null,
+      panelClass: 'themed-dialog'
+    });
+    
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.store.create(result);
+        this.showNotification('<%= pascalName %> created successfully');
+      }
+    });
+  }
+  
+  openEditDialog(item: <%= pascalName %>): void {
+    const dialogRef = this.dialog.open(<%= pascalName %>FormComponent, {
+      width: '500px',
+      maxWidth: '90vw',
+      data: item,
+      panelClass: 'themed-dialog'
+    });
+    
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.store.update({ id: item.id, data: result });
+        this.showNotification('<%= pascalName %> updated successfully');
+      }
+    });
+  }
+  
+  confirmDelete(item: <%= pascalName %>): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '400px',
+      maxWidth: '90vw',
+      data: {
+        title: 'Delete <%= singularName %>',
+        message: `Are you sure you want to delete this <%= singularName %>?`
+      },
+      panelClass: 'themed-dialog'
+    });
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.store.delete(item.id);
+        this.showNotification('<%= pascalName %> deleted successfully');
+      }
+    });
+  }
+  
+  // Helper method for snackbar notifications
+  private showNotification(message: string): void {
+    this.snackBar.open(message, 'Close', {
+      duration: 3000,
+      horizontalPosition: 'end',
+      verticalPosition: 'bottom'
+    });
+  }
+}

package/src/generators/feature/files/ui/_theme.scss.template

@@ -0,0 +1,35 @@
+// Theme Variables - Customize these to brand your application
+// Colors
+$primary-color: var(--color-primary) !default;
+$accent-color: var(--color-accent) !default;
+$warn-color: var(--color-error) !default;
+$success-color: var(--color-success) !default;
+$error-color: var(--color-error) !default;
+
+// Backgrounds
+$background-color: var(--color-bg) !default;
+$card-background: var(--color-bg-card) !default;
+$table-header-background: var(--color-bg-elevated) !default;
+$table-row-hover: rgba(0, 0, 0, 0.04) !default;
+$error-background: rgba(244, 67, 54, 0.1) !default;
+
+// Text
+$text-primary: var(--color-text) !default;
+$text-secondary: var(--color-text-secondary) !default;
+$text-disabled: var(--color-text-disabled) !default;
+
+// Spacing
+$spacing-xs: 0.25rem !default;
+$spacing-sm: 0.5rem !default;
+$spacing-md: 1rem !default;
+$spacing-lg: 1.5rem !default;
+$spacing-xl: 2rem !default;
+
+// Border
+$border-radius: 4px !default;
+$border-color: var(--color-border) !default;
+
+// Shadows
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
+$shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15) !default;
+$shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2) !default;

package/src/generators/feature/files/ui/form/form.component.ts.template

@@ -0,0 +1,122 @@
+import { Component, inject, ChangeDetectionStrategy, signal, computed } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { <%= pascalName %> } from '../../domain/model';
+
+@Component({
+  selector: 'app-<%= singularName %>-form',
+  imports: [
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule
+  ],
+  template: `
+    @let isEditMode = !!data;
+    @let title = isEditMode ? 'Edit' : 'Create';
+    
+    <h2 mat-dialog-title>{{ title }} <%= pascalName %></h2>
+    
+    <mat-dialog-content>
+      <form [formGroup]="form" class="form-container">
+        <% attributes.forEach(function(attr) { %>
+        <% if (attr.type === 'boolean') { %>
+        <mat-checkbox formControlName="<%= attr.name %>" class="form-field">
+          <%= attr.name.charAt(0).toUpperCase() + attr.name.slice(1) %>
+        </mat-checkbox>
+        <% } else if (attr.type === 'number') { %>
+        <mat-form-field class="form-field" appearance="outline">
+          <mat-label><%= attr.name.charAt(0).toUpperCase() + attr.name.slice(1) %></mat-label>
+          <input matInput type="number" formControlName="<%= attr.name %>" />
+          @if (form.get('<%= attr.name %>')?.hasError('required')) {
+            <mat-error>This field is required</mat-error>
+          }
+        </mat-form-field>
+        <% } else { %>
+        <mat-form-field class="form-field" appearance="outline">
+          <mat-label><%= attr.name.charAt(0).toUpperCase() + attr.name.slice(1) %></mat-label>
+          <input matInput formControlName="<%= attr.name %>" />
+          @if (form.get('<%= attr.name %>')?.hasError('required')) {
+            <mat-error>This field is required</mat-error>
+          }
+        </mat-form-field>
+        <% } %>
+        <% }); %>
+      </form>
+    </mat-dialog-content>
+    
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button 
+        mat-raised-button 
+        color="primary" 
+        (click)="onSave()"
+        [disabled]="isFormInvalid()">
+        {{ title }}
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: `
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      min-width: 400px;
+      padding: 1rem 0;
+    }
+    
+    .form-field {
+      width: 100%;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= pascalName %>FormComponent {
+  private readonly dialogRef = inject(MatDialogRef<<%= pascalName %>FormComponent>);
+  protected readonly data = inject<Partial<<%= pascalName %>> | null>(MAT_DIALOG_DATA, { optional: true });
+  private readonly fb = inject(FormBuilder);
+  
+  // Signal-based form state tracking
+  private readonly formDirty = signal(false);
+  private readonly formValid = signal(false);
+  
+  readonly form = this.fb.group({
+    <% attributes.forEach(function(attr, index) { %>
+    <%= attr.name %>: [
+      this.data?.<%= attr.name %> ?? <% if (attr.type === 'boolean') { %>false<% } else if (attr.type === 'number') { %>0<% } else { %>''<% } %>,
+      <% if (attr.type === 'number') { %>[Validators.required, Validators.min(0)]<% } else { %>Validators.required<% } %>
+    ]<% if (index < attributes.length - 1) { %>,<% } %>
+    <% }); %>
+  });
+  
+  // Computed signal for form validation state
+  readonly isFormInvalid = computed(() => !this.formValid() || !this.formDirty());
+  
+  constructor() {
+    // Track form state changes with signals for zoneless compatibility
+    this.form.statusChanges.subscribe(() => {
+      this.formValid.set(this.form.valid);
+    });
+    this.form.valueChanges.subscribe(() => {
+      this.formDirty.set(this.form.dirty);
+    });
+    // Initial state
+    this.formValid.set(this.form.valid);
+  }
+  
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+  
+  onSave(): void {
+    if (this.form.valid) {
+      this.dialogRef.close(this.form.value);
+    }
+  }
+}

package/src/generators/feature/generator.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { FeatureGeneratorSchema } from './schema';
+export declare function featureGenerator(tree: Tree, options: FeatureGeneratorSchema): Promise<void>;
+export default featureGenerator;