@shivay_18/ng-crud 0.1.0

package/dist/crud/files/module/services/__name@dasherize__.service.ts.template

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { <%= classify(name) %> } from '../models/<%= dasherize(name) %>.model';
+
+@Injectable({ providedIn: 'root' })
+export class <%= classify(name) %>Service {
+  private apiUrl = '<%= apiUrl %>/<%= dasherize(name) %>s';
+
+  constructor(private http: HttpClient) {}
+
+  getAll(): Observable<<%= classify(name) %>[]> {
+    return this.http.get<<%= classify(name) %>[]>(this.apiUrl)
+      .pipe(catchError(this.handleError));
+  }
+
+  getById(id: number): Observable<<%= classify(name) %>> {
+    return this.http.get<<%= classify(name) %>>(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+
+  create(item: <%= classify(name) %>): Observable<<%= classify(name) %>> {
+    return this.http.post<<%= classify(name) %>>(this.apiUrl, item)
+      .pipe(catchError(this.handleError));
+  }
+
+  update(id: number, item: <%= classify(name) %>): Observable<<%= classify(name) %>> {
+    return this.http.put<<%= classify(name) %>>(`${this.apiUrl}/${id}`, item)
+      .pipe(catchError(this.handleError));
+  }
+
+  delete(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+
+  private handleError(error: HttpErrorResponse): Observable<never> {
+    console.error('HTTP Error:', error);
+    return throwError(() => error);
+  }
+}

package/dist/crud/files/standalone/components/__name@dasherize__-form/__name@dasherize__-form.component.html.template

@@ -0,0 +1,48 @@
+<div class="page-container">
+
+  <div class="page-header">
+    <button mat-icon-button (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <h2>{{ isEditMode ? 'Edit' : 'Add' }} <%= classify(name) %></h2>
+  </div>
+
+  <div *ngIf="isLoading" class="spinner-wrap">
+    <mat-spinner diameter="40"></mat-spinner>
+  </div>
+
+  <mat-card *ngIf="!isLoading">
+    <mat-card-content>
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+
+<% fields.forEach(function(field) { %>
+<% if (field.control === 'checkbox') { %>
+        <div class="field-row">
+          <mat-checkbox formControlName="<%= field.name %>"><%= field.label %></mat-checkbox>
+        </div>
+<% } else { %>
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label><%= field.label %></mat-label>
+          <input matInput type="<%= field.control %>" formControlName="<%= field.name %>" />
+          <mat-error *ngIf="form.get('<%= field.name %>')?.invalid && form.get('<%= field.name %>')?.touched">
+<% if (field.required) { %>            <span *ngIf="form.get('<%= field.name %>')?.hasError('required')">
+              <%= field.label %> is required.
+            </span>
+<% } %>          </mat-error>
+        </mat-form-field>
+<% } %>
+<% }); %>
+
+        <div class="form-actions">
+          <button mat-button type="button" (click)="goBack()" [disabled]="isSaving">Cancel</button>
+          <button mat-raised-button color="primary" type="submit" [disabled]="isSaving || form.invalid">
+            <mat-spinner *ngIf="isSaving" diameter="18" class="inline-spinner"></mat-spinner>
+            {{ isSaving ? 'Saving...' : (isEditMode ? 'Update' : 'Save') }}
+          </button>
+        </div>
+
+      </form>
+    </mat-card-content>
+  </mat-card>
+
+</div>

package/dist/crud/files/standalone/components/__name@dasherize__-form/__name@dasherize__-form.component.scss.template

@@ -0,0 +1,46 @@
+.page-container {
+  padding: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+  }
+}
+
+.spinner-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.field-row {
+  margin-bottom: 16px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.inline-spinner {
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}

package/dist/crud/files/standalone/components/__name@dasherize__-form/__name@dasherize__-form.component.ts.template

@@ -0,0 +1,142 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatIconModule } from '@angular/material/icon';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+import { <%= classify(name) %>Service } from '../../services/<%= dasherize(name) %>.service';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    MatSnackBarModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatIconModule,
+  ],
+  templateUrl: './<%= dasherize(name) %>-form.component.html',
+  styleUrls: ['./<%= dasherize(name) %>-form.component.scss'],
+})
+export class <%= classify(name) %>FormComponent implements OnInit {
+  form!: FormGroup;
+  isEditMode = false;
+  isLoading = false;
+  isSaving = false;
+  itemId: number | null = null;
+
+  constructor(
+    private fb: FormBuilder,
+    private service: <%= classify(name) %>Service,
+    private router: Router,
+    private route: ActivatedRoute,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.buildForm();
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.isEditMode = true;
+      this.itemId = +id;
+      this.loadItem(this.itemId);
+    }
+  }
+
+  buildForm(): void {
+    this.form = this.fb.group({<% fields.forEach(function(field, i) { %>
+      <%= field.name %>: [<%= field.type === 'boolean' ? 'false' : field.type === 'number' ? 'null' : "''" %><% if (field.required) { %>, [Validators.required]<% } %>]<% if (i < fields.length - 1) { %>,<% } %><% }); %>
+    });
+  }
+
+  loadItem(id: number): void {
+    this.isLoading = true;
+    this.service.getById(id).subscribe({
+      next: (item) => {
+        this.form.patchValue(item);
+        this.isLoading = false;
+      },
+      error: (error) => {
+        let errorMessage = 'Failed to load item.';
+        if (error.status === 404) {
+          errorMessage = '<%= classify(name) %> not found.';
+          this.router.navigate(['/<%= dasherize(name) %>']);
+        } else if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+        this.isLoading = false;
+      },
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      this.showValidationErrors();
+      return;
+    }
+    this.isSaving = true;
+    const value: <%= classify(name) %> = this.form.value;
+    const request = this.isEditMode
+      ? this.service.update(this.itemId!, value)
+      : this.service.create(value);
+
+    request.subscribe({
+      next: () => {
+        this.snackBar.open(
+          `<%= classify(name) %> ${this.isEditMode ? 'updated' : 'created'} successfully.`,
+          'Close',
+          { duration: 3000 }
+        );
+        this.isSaving = false;
+        this.goBack();
+      },
+      error: (error) => {
+        let errorMessage = 'Save failed. Please try again.';
+        if (error.status === 400 && error.error?.message) {
+          errorMessage = error.error.message;
+        } else if (error.status === 404) {
+          errorMessage = '<%= classify(name) %> not found.';
+        } else if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
+        this.isSaving = false;
+      },
+    });
+  }
+
+  private showValidationErrors(): void {
+    const errors: string[] = [];
+    Object.keys(this.form.controls).forEach(key => {
+      const control = this.form.get(key);
+      if (control?.invalid && control.errors) {
+        if (control.errors['required']) {
+          const fieldName = key.charAt(0).toUpperCase() + key.slice(1);
+          errors.push(`${fieldName} is required`);
+        }
+      }
+    });
+    if (errors.length > 0) {
+      this.snackBar.open(errors.join(', '), 'Close', { duration: 4000 });
+    }
+  }
+
+  goBack(): void {
+    this.router.navigate(['..'], { relativeTo: this.route });
+  }
+}

package/dist/crud/files/standalone/components/__name@dasherize__-list/__name@dasherize__-delete-dialog.component.ts.template

@@ -0,0 +1,30 @@
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-delete-dialog',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+  template: `
+    <h2 mat-dialog-title>Delete <%= classify(name) %></h2>
+    <mat-dialog-content>
+      Are you sure you want to delete this record? This cannot be undone.
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="close(false)">Cancel</button>
+      <button mat-raised-button color="warn" (click)="close(true)">Delete</button>
+    </mat-dialog-actions>
+  `,
+})
+export class <%= classify(name) %>DeleteDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<<%= classify(name) %>DeleteDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: <%= classify(name) %>
+  ) {}
+
+  close(result: boolean): void {
+    this.dialogRef.close(result);
+  }
+}

package/dist/crud/files/standalone/components/__name@dasherize__-list/__name@dasherize__-list.component.html.template

@@ -0,0 +1,75 @@
+<div class="page-container">
+
+  <div class="page-header">
+    <h2><%= classify(name) %> List</h2>
+    <button mat-raised-button color="primary" (click)="onCreate()">
+      <mat-icon>add</mat-icon> Add <%= classify(name) %>
+    </button>
+  </div>
+
+  <mat-card>
+    <mat-card-content>
+
+      <mat-form-field appearance="outline" class="search-box">
+        <mat-label>Search</mat-label>
+        <mat-icon matPrefix>search</mat-icon>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." />
+      </mat-form-field>
+
+      <div *ngIf="isLoading" class="spinner-wrap">
+        <mat-spinner diameter="40"></mat-spinner>
+      </div>
+
+      <div [hidden]="isLoading">
+        <table mat-table [dataSource]="dataSource" matSort>
+
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+            <td mat-cell *matCellDef="let row">{{ row.id }}</td>
+          </ng-container>
+
+<% fields.forEach(function(field) { %>
+          <ng-container matColumnDef="<%= field.name %>">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header><%= field.label %></th>
+            <td mat-cell *matCellDef="let row">
+<% if (field.type === 'boolean') { %>
+              <mat-chip [color]="row.<%= field.name %> ? 'primary' : ''" selected>
+                {{ row.<%= field.name %> ? 'Yes' : 'No' }}
+              </mat-chip>
+<% } else { %>
+              {{ row.<%= field.name %> }}
+<% } %>
+            </td>
+          </ng-container>
+<% }); %>
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef>Actions</th>
+            <td mat-cell *matCellDef="let row">
+              <button mat-icon-button color="primary" (click)="onEdit(row)" matTooltip="Edit">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button color="warn" (click)="onDelete(row)" 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>
+
+          <tr class="mat-row" *matNoDataRow>
+            <td class="mat-cell no-data" [attr.colspan]="displayedColumns.length">
+              No records found.
+            </td>
+          </tr>
+
+        </table>
+
+        <mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
+      </div>
+
+    </mat-card-content>
+  </mat-card>
+
+</div>

package/dist/crud/files/standalone/components/__name@dasherize__-list/__name@dasherize__-list.component.scss.template

@@ -0,0 +1,40 @@
+.page-container {
+  padding: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+  }
+}
+
+.search-box {
+  width: 100%;
+  max-width: 360px;
+  margin-bottom: 16px;
+}
+
+.spinner-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+table {
+  width: 100%;
+}
+
+.no-data {
+  text-align: center;
+  padding: 32px;
+  color: #888;
+}

package/dist/crud/files/standalone/components/__name@dasherize__-list/__name@dasherize__-list.component.ts.template

@@ -0,0 +1,121 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import { MatSortModule, MatSort } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+import { <%= classify(name) %>Service } from '../../services/<%= dasherize(name) %>.service';
+import { <%= classify(name) %>DeleteDialogComponent } from './<%= dasherize(name) %>-delete-dialog.component';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatSnackBarModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    MatChipsModule,
+  ],
+  templateUrl: './<%= dasherize(name) %>-list.component.html',
+  styleUrls: ['./<%= dasherize(name) %>-list.component.scss'],
+})
+export class <%= classify(name) %>ListComponent implements OnInit {
+  displayedColumns: string[] = ['id', <% fields.forEach(function(f, i) { %>'<%= f.name %>'<% if (i < fields.length - 1) { %>, <% } %><% }); %>, 'actions'];
+  dataSource = new MatTableDataSource<<%= classify(name) %>>();
+  isLoading = true;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(
+    private service: <%= classify(name) %>Service,
+    private router: Router,
+    private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  loadData(): void {
+    this.isLoading = true;
+    this.service.getAll().subscribe({
+      next: (data) => {
+        this.dataSource.data = data;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.isLoading = false;
+      },
+      error: (error) => {
+        let errorMessage = 'Failed to load data.';
+        if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        } else if (error.status === 0) {
+          errorMessage = 'Unable to connect to server. Please check your connection.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+        this.isLoading = false;
+      },
+    });
+  }
+
+  applyFilter(event: Event): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) this.dataSource.paginator.firstPage();
+  }
+
+  onCreate(): void {
+    this.router.navigate(['new'], { relativeTo: this.route });
+  }
+
+  onEdit(item: <%= classify(name) %>): void {
+    this.router.navigate([item.id, 'edit'], { relativeTo: this.route });
+  }
+
+  onDelete(item: <%= classify(name) %>): void {
+    const ref = this.dialog.open(<%= classify(name) %>DeleteDialogComponent, { data: item, width: '400px' });
+    ref.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.service.delete(item.id!).subscribe({
+          next: () => {
+            this.snackBar.open('<%= classify(name) %> deleted successfully.', 'Close', { duration: 3000 });
+            this.loadData();
+          },
+          error: (error) => {
+            let errorMessage = 'Delete failed.';
+            if (error.status === 404) {
+              errorMessage = '<%= classify(name) %> not found or already deleted.';
+            } else if (error.status === 500) {
+              errorMessage = 'Server error. Please try again later.';
+            }
+            this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+          },
+        });
+      }
+    });
+  }
+}

package/dist/crud/files/standalone/models/__name@dasherize__.model.ts.template

@@ -0,0 +1,4 @@
+export interface <%= classify(name) %> {
+  id?: number;<% fields.forEach(function(field) { %>
+  <%= field.name %>: <%= field.type %>;<% }); %>
+}

package/dist/crud/files/standalone/services/__name@dasherize__.service.ts.template

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { <%= classify(name) %> } from '../models/<%= dasherize(name) %>.model';
+
+@Injectable({ providedIn: 'root' })
+export class <%= classify(name) %>Service {
+  private apiUrl = '<%= apiUrl %>/<%= dasherize(name) %>s';
+
+  constructor(private http: HttpClient) {}
+
+  getAll(): Observable<<%= classify(name) %>[]> {
+    return this.http.get<<%= classify(name) %>[]>(this.apiUrl)
+      .pipe(catchError(this.handleError));
+  }
+
+  getById(id: number): Observable<<%= classify(name) %>> {
+    return this.http.get<<%= classify(name) %>>(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+
+  create(item: <%= classify(name) %>): Observable<<%= classify(name) %>> {
+    return this.http.post<<%= classify(name) %>>(this.apiUrl, item)
+      .pipe(catchError(this.handleError));
+  }
+
+  update(id: number, item: <%= classify(name) %>): Observable<<%= classify(name) %>> {
+    return this.http.put<<%= classify(name) %>>(`${this.apiUrl}/${id}`, item)
+      .pipe(catchError(this.handleError));
+  }
+
+  delete(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/${id}`)
+      .pipe(catchError(this.handleError));
+  }
+
+  private handleError(error: HttpErrorResponse): Observable<never> {
+    console.error('HTTP Error:', error);
+    return throwError(() => error);
+  }
+}

package/dist/crud/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export declare function crud(options: Schema): Rule;