@devstroupe/devkit-cli 1.0.0

package/dist/templates/angular/form.template.d.ts

@@ -0,0 +1,3 @@
+import { IDevkitEntityConfig, IDevkitEntityProperty } from '@devstroupe/devkit-core';
+export declare function angularFormHtmlTemplate(name: string, properties: IDevkitEntityProperty[], entities?: IDevkitEntityConfig[]): string;
+export declare function angularFormTsTemplate(name: string, properties: IDevkitEntityProperty[], entities?: IDevkitEntityConfig[]): string;

package/dist/templates/angular/form.template.js

@@ -0,0 +1,453 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.angularFormHtmlTemplate = angularFormHtmlTemplate;
+exports.angularFormTsTemplate = angularFormTsTemplate;
+const names_1 = require("../shared/names");
+const relationships_1 = require("../shared/relationships");
+function relationStateName(relationship) {
+    return (0, names_1.kebabToCamel)(relationship.property.name);
+}
+function formControlName(property) {
+    if (property.type !== 'relationship')
+        return property.name;
+    const relationship = (0, relationships_1.getRelationships)([property])[0];
+    return relationship.kind === 'many-to-many'
+        ? relationship.relationName
+        : relationship.foreignKey ?? property.name;
+}
+function relationshipColumns(relationship, entities) {
+    const target = (0, relationships_1.getTargetEntity)(relationship, entities);
+    if (relationship.columns.length > 0) {
+        return relationship.columns.map((column) => ({
+            key: column.key,
+            label: column.label
+                ?? target?.properties.find((property) => property.name === column.key)?.label
+                ?? column.key,
+        }));
+    }
+    return (target?.properties ?? [])
+        .filter((property) => property.type !== 'relationship')
+        .slice(0, 4)
+        .map((property) => ({ key: property.name, label: property.label }));
+}
+function angularFormHtmlTemplate(name, properties, entities = []) {
+    const pascalName = (0, names_1.kebabToPascal)(name);
+    const relationships = (0, relationships_1.getRelationships)(properties);
+    const dependentRelationships = relationships.filter((relationship) => relationship.kind === 'one-to-many' && relationship.embedded);
+    const fields = properties
+        .filter((property) => property.type !== 'relationship' || (0, relationships_1.getRelationships)([property])[0].kind !== 'one-to-many')
+        .map((property) => {
+        const controlName = formControlName(property);
+        if (property.type === 'boolean') {
+            return `    <div *ngIf="!isFieldHidden('${controlName}')" class="flex items-center space-x-2 pt-2">
+      <input type="checkbox" formControlName="${controlName}" id="${controlName}" class="h-4 w-4 rounded border-input bg-background text-primary focus:ring-ring">
+      <label for="${controlName}" class="text-sm font-medium text-foreground">${property.label}</label>
+    </div>`;
+        }
+        if (property.type === 'relationship') {
+            const relationship = (0, relationships_1.getRelationships)([property])[0];
+            const stateName = relationStateName(relationship);
+            return `    <devkit-select
+      *ngIf="!isFieldHidden('${controlName}')"
+      formControlName="${controlName}"
+      label="${property.label}"
+      placeholder="Selecione ${property.label.toLowerCase()}"
+      [options]="${stateName}Lookup.options"
+      [multiple]="${relationship.kind === 'many-to-many'}"
+      [searchable]="${relationship.lookupMode === 'remote'}"
+      [loading]="${stateName}Lookup.loading"
+      [hasMore]="${stateName}Lookup.hasMore"
+      (searchChange)="${stateName}Lookup.setSearch($event)"
+      (loadMore)="${stateName}Lookup.loadMore()"
+      [required]="${Boolean(property.required)}">
+    </devkit-select>`;
+        }
+        const isNumber = property.type === 'number';
+        return `    <devkit-input
+      *ngIf="!isFieldHidden('${controlName}')"
+      ${isNumber ? 'type="number"' : ''}
+      formControlName="${controlName}"
+      label="${property.label}"
+      placeholder="Digite ${property.label.toLowerCase()}"
+      [required]="${Boolean(property.required)}">
+    </devkit-input>`;
+    })
+        .join('\n\n');
+    const dependentSections = dependentRelationships.map((relationship) => {
+        const stateName = relationStateName(relationship);
+        const relationPascal = (0, names_1.kebabToPascal)(stateName);
+        const component = relationship.control === 'card'
+            ? 'devkit-card-list'
+            : relationship.control === 'list'
+                ? 'devkit-simple-list'
+                : 'devkit-table';
+        return `
+    <section *ngIf="isEdit" class="border-t border-border pt-4 space-y-3">
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="text-base font-semibold text-foreground">${relationship.property.label}</h2>
+        <devkit-button type="button" (btnClick)="openNew${relationPascal}()">Criar</devkit-button>
+      </div>
+      <${component}
+        [columns]="${stateName}Columns"
+        [items]="${stateName}Items"
+        (rowClick)="open${relationPascal}($event.id)"
+      ></${component}>
+      <div *ngIf="${stateName}TotalPages > 1" class="flex items-center justify-end gap-2">
+        <devkit-button variant="secondary" type="button" [disabled]="${stateName}Page <= 1 || ${stateName}Loading" (btnClick)="previous${relationPascal}Page()">Anterior</devkit-button>
+        <span class="text-sm text-muted-foreground">Página {{ ${stateName}Page }} de {{ ${stateName}TotalPages }}</span>
+        <devkit-button variant="secondary" type="button" [disabled]="${stateName}Page >= ${stateName}TotalPages || ${stateName}Loading" (btnClick)="next${relationPascal}Page()">Próxima</devkit-button>
+      </div>
+    </section>
+
+    <devkit-dialog size="xl" [isOpen]="${stateName}DialogOpen" (close)="close${relationPascal}Dialog()">
+      <app-${relationship.target}-form
+        [isDialog]="true"
+        [itemId]="${stateName}SelectedId"
+        [initialValues]="${stateName}InitialValues"
+        [hiddenFields]="['${relationship.foreignKey}']"
+        (saved)="on${relationPascal}Saved()"
+        (cancelled)="close${relationPascal}Dialog()"
+      ></app-${relationship.target}-form>
+    </devkit-dialog>`;
+    }).join('\n');
+    return `<div [class.${dependentRelationships.length > 0 ? 'max-w-5xl' : 'max-w-xl'}]="!isDialog" [class.mx-auto]="!isDialog" class="flex flex-col space-y-4 text-foreground">
+  <div>
+    <h1 class="text-2xl font-bold tracking-tight text-foreground">
+      {{ isEdit ? 'Editar' : 'Criar Novo' }} ${pascalName}
+    </h1>
+  </div>
+
+  <ng-container *ngIf="!isDialog; else formOrSkeleton">
+    <div hlmCard class="p-4">
+      <ng-container *ngTemplateOutlet="formOrSkeleton"></ng-container>
+    </div>
+  </ng-container>
+
+  <ng-template #formOrSkeleton>
+    <ng-container *ngIf="isFetching; else formTemplate">
+      <div class="space-y-4">
+        <div *ngFor="let item of [1, 2, 3]" class="space-y-2">
+          <hlm-skeleton class="h-4 w-1/4 rounded"></hlm-skeleton>
+          <hlm-skeleton class="h-10 w-full rounded-md"></hlm-skeleton>
+        </div>
+      </div>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #formTemplate>
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="flex flex-col space-y-4">
+${fields}
+
+      <div class="flex justify-end space-x-2 pt-4">
+        <devkit-button *ngIf="isEdit" variant="danger" type="button" [disabled]="loading" (btnClick)="deleteItem()">Excluir</devkit-button>
+        <span class="flex-1"></span>
+        <devkit-button variant="secondary" type="button" [disabled]="loading" (btnClick)="onCancel()">Cancelar</devkit-button>
+        <devkit-button type="submit" [disabled]="form.invalid || loading" [loading]="loading">Salvar</devkit-button>
+      </div>
+    </form>
+${dependentSections}
+  </ng-template>
+</div>
+`;
+}
+function angularFormTsTemplate(name, properties, entities = []) {
+    const pascalName = (0, names_1.kebabToPascal)(name);
+    const relationships = (0, relationships_1.getRelationships)(properties);
+    const optionRelationships = relationships.filter((relationship) => relationship.kind !== 'one-to-many');
+    const dependents = relationships.filter((relationship) => relationship.kind === 'one-to-many' && relationship.embedded);
+    const usesInput = properties.some((property) => property.type === 'string' || property.type === 'number' || property.type === 'datepicker');
+    const usesSelect = optionRelationships.length > 0;
+    const formGroupProps = properties
+        .filter((property) => property.type !== 'relationship' || (0, relationships_1.getRelationships)([property])[0].kind !== 'one-to-many')
+        .map((property) => {
+        const relationship = property.type === 'relationship' ? (0, relationships_1.getRelationships)([property])[0] : undefined;
+        const defaultValue = relationship?.kind === 'many-to-many'
+            ? '[]'
+            : property.type === 'boolean'
+                ? String(property.default ?? false)
+                : property.default !== undefined
+                    ? JSON.stringify(property.default)
+                    : "''";
+        const validators = property.required ? '[Validators.required]' : '[]';
+        return `      ${JSON.stringify(formControlName(property))}: [${defaultValue}, ${validators}]`;
+    })
+        .join(',\n');
+    const relatedTargets = [...new Set(relationships.map((relationship) => relationship.target))];
+    const serviceImports = relatedTargets
+        .map((target) => `import { ${(0, names_1.kebabToPascal)(target)}Service } from '../../../services/${target}.service';`)
+        .join('\n');
+    const dependentFormImports = [...new Set(dependents.map((relationship) => relationship.target))]
+        .map((target) => `import { ${(0, names_1.kebabToPascal)(target)}FormComponent } from '../../${target}/form/${target}-form.component';`)
+        .join('\n');
+    const relationServiceInjections = relationships.map((relationship) => {
+        const stateName = relationStateName(relationship);
+        return `  private ${stateName}Service = inject(${(0, names_1.kebabToPascal)(relationship.target)}Service);`;
+    }).join('\n');
+    const optionState = optionRelationships.map((relationship) => {
+        const stateName = relationStateName(relationship);
+        const filters = JSON.stringify(relationship.filters);
+        const limitOverride = relationship.lookupMode === 'all' ? `, limit: 'all'` : '';
+        return `  readonly ${stateName}Lookup = new RelationshipLookup<any>({
+    loader: (filter) => this.${stateName}Service.list({
+      ...filter${limitOverride},
+      filter: { ...(filter.filter ?? {}), ...${filters} }
+    }),
+    valueField: '${relationship.valueField}',
+    displayField: '${relationship.displayField}',
+    pageSize: ${relationship.pageSize},
+    minSearchLength: ${relationship.minSearchLength}
+  });`;
+    }).join('\n');
+    const dependentState = dependents.map((relationship) => {
+        const stateName = relationStateName(relationship);
+        const columns = relationshipColumns(relationship, entities);
+        return `  ${stateName}Items: any[] = [];
+  ${stateName}Columns: ITableColumn[] = ${JSON.stringify(columns)};
+  ${stateName}Page = 1;
+  ${stateName}TotalPages = 1;
+  ${stateName}Loading = false;
+  ${stateName}DialogOpen = false;
+  ${stateName}SelectedId?: number | string;`;
+    }).join('\n');
+    const optionLoadCalls = optionRelationships
+        .map((relationship) => `    this.${relationStateName(relationship)}Lookup.load();`)
+        .join('\n');
+    const dependentLoadCalls = dependents
+        .map((relationship) => `          this.load${(0, names_1.kebabToPascal)(relationStateName(relationship))}Items();`)
+        .join('\n');
+    const dependentMethods = dependents.map((relationship) => {
+        const stateName = relationStateName(relationship);
+        const methodName = (0, names_1.kebabToPascal)(stateName);
+        const configuredFilters = JSON.stringify(relationship.filters);
+        return `  private load${methodName}Items(): void {
+    if (!this.itemId) return;
+    this.${stateName}Loading = true;
+    this.${stateName}Service.list({
+      page: this.${stateName}Page,
+      limit: ${relationship.pageSize},
+      filter: { ...${configuredFilters}, ${relationship.foreignKey}: this.itemId }
+    }).subscribe({
+      next: (data: any) => {
+        this.${stateName}Items = data?.items ?? data?.data ?? data ?? [];
+        this.${stateName}TotalPages = Number(data?.meta?.totalPage ?? data?.meta?.totalPages ?? 1);
+        this.${stateName}Loading = false;
+      },
+      error: (err: any) => {
+        console.error('Erro ao carregar ${relationship.target}:', err);
+        this.${stateName}Loading = false;
+      }
+    });
+  }
+
+  previous${methodName}Page(): void {
+    if (this.${stateName}Page <= 1) return;
+    this.${stateName}Page--;
+    this.load${methodName}Items();
+  }
+
+  next${methodName}Page(): void {
+    if (this.${stateName}Page >= this.${stateName}TotalPages) return;
+    this.${stateName}Page++;
+    this.load${methodName}Items();
+  }
+
+  get ${stateName}InitialValues(): Record<string, any> {
+    return { ${relationship.foreignKey}: this.itemId };
+  }
+
+  openNew${methodName}(): void {
+    this.${stateName}SelectedId = undefined;
+    this.${stateName}DialogOpen = true;
+  }
+
+  open${methodName}(id: number | string): void {
+    this.${stateName}SelectedId = id;
+    this.${stateName}DialogOpen = true;
+  }
+
+  close${methodName}Dialog(): void {
+    this.${stateName}DialogOpen = false;
+    this.${stateName}SelectedId = undefined;
+  }
+
+  on${methodName}Saved(): void {
+    this.close${methodName}Dialog();
+    this.load${methodName}Items();
+  }`;
+    }).join('\n\n');
+    const relationPatchCode = optionRelationships
+        .map((relationship) => relationship.kind === 'many-to-many' ? `
+        if (Array.isArray(item.${relationship.relationName})) {
+          item.${relationship.relationName}.forEach((related: any) => this.${relationStateName(relationship)}Lookup.include(related));
+          item.${relationship.relationName} = item.${relationship.relationName}.map((related: any) =>
+            typeof related === 'object' ? related.${relationship.valueField} : related
+          );
+        }` : `
+        this.${relationStateName(relationship)}Lookup.include(item.${relationship.relationName});`)
+        .join('');
+    const optionDestroyCalls = optionRelationships
+        .map((relationship) => `    this.${relationStateName(relationship)}Lookup.destroy();`)
+        .join('\n');
+    const dependentImports = dependents.length > 0
+        ? `\nimport { DevkitDialogComponent } from '@devstroupe/ui/dialog/dialog.component';\nimport { ITableColumn } from '@devstroupe/ui/table/table.component';`
+        : '';
+    const listImports = [
+        dependents.some((relationship) => relationship.control !== 'list' && relationship.control !== 'card')
+            ? `import { DevkitTableComponent } from '@devstroupe/ui/table/table.component';`
+            : '',
+        dependents.some((relationship) => relationship.control === 'list')
+            ? `import { DevkitSimpleListComponent } from '@devstroupe/ui/simple-list/simple-list.component';`
+            : '',
+        dependents.some((relationship) => relationship.control === 'card')
+            ? `import { DevkitCardListComponent } from '@devstroupe/ui/card-list/card-list.component';`
+            : '',
+    ].filter(Boolean).join('\n');
+    const componentImports = [
+        ...dependents.map((relationship) => `${(0, names_1.kebabToPascal)(relationship.target)}FormComponent`),
+        ...(dependents.length > 0 ? ['DevkitDialogComponent'] : []),
+        ...(dependents.some((relationship) => relationship.control !== 'list' && relationship.control !== 'card') ? ['DevkitTableComponent'] : []),
+        ...(dependents.some((relationship) => relationship.control === 'list') ? ['DevkitSimpleListComponent'] : []),
+        ...(dependents.some((relationship) => relationship.control === 'card') ? ['DevkitCardListComponent'] : []),
+    ];
+    return `import { ChangeDetectorRef, Component, OnInit${optionRelationships.length > 0 ? ', OnDestroy' : ''}, inject, Input, Output, EventEmitter } from '@angular/core';
+import { finalize } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+${usesInput ? "import { DevkitInputComponent } from '@devstroupe/ui/input/input.component';" : ''}
+${usesSelect ? "import { DevkitSelectComponent } from '@devstroupe/ui/select/select.component';" : ''}
+import { DevkitButtonComponent } from '@devstroupe/ui/button/button.component';
+import { HlmCardImports } from '@spartan-ng/helm/card';
+import { HlmSkeletonImports } from '@spartan-ng/helm/skeleton';${dependentImports}
+${optionRelationships.length > 0 ? "import { RelationshipLookup } from '@devstroupe/devkit-angular';" : ''}
+${listImports}
+${serviceImports}
+${dependentFormImports}
+import { ${pascalName}Service } from '../../../services/${name}.service';
+
+@Component({
+  selector: 'app-${name}-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule${usesInput ? ', DevkitInputComponent' : ''}${usesSelect ? ', DevkitSelectComponent' : ''}, DevkitButtonComponent, HlmCardImports, HlmSkeletonImports${componentImports.map((item) => `, ${item}`).join('')}],
+  templateUrl: './${name}-form.component.html'
+})
+export class ${pascalName}FormComponent implements OnInit${optionRelationships.length > 0 ? ', OnDestroy' : ''} {
+  private fb = inject(FormBuilder);
+  private service = inject(${pascalName}Service);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private changeDetector = inject(ChangeDetectorRef);
+${relationServiceInjections}
+
+  @Input() isDialog = false;
+  @Input() itemId?: number | string;
+  @Input() initialValues: Record<string, any> = {};
+  @Input() hiddenFields: string[] = [];
+
+  @Output() saved = new EventEmitter<void>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  form!: FormGroup;
+  isEdit = false;
+  isFetching = false;
+  loading = false;
+${optionState}
+${dependentState}
+
+  ngOnInit(): void {
+    this.initForm();
+    this.form.patchValue(this.initialValues);
+    this.checkEditMode();
+${optionLoadCalls}
+  }
+
+${optionRelationships.length > 0 ? `  ngOnDestroy(): void {
+${optionDestroyCalls}
+  }
+` : ''}
+
+  isFieldHidden(field: string): boolean {
+    return this.hiddenFields.includes(field);
+  }
+
+  private initForm(): void {
+    this.form = this.fb.group({
+${formGroupProps}
+    });
+  }
+
+  private checkEditMode(): void {
+    const id = this.isDialog ? this.itemId : this.route.snapshot.paramMap.get('id');
+    if (!id) return;
+
+    this.isEdit = true;
+    this.itemId = id;
+    this.isFetching = true;
+    this.service.findOne(id).pipe(
+      finalize(() => {
+        this.isFetching = false;
+        this.changeDetector.markForCheck();
+      })
+    ).subscribe({
+      next: (data: any) => {
+        const item = { ...(data?.data ?? data?.item ?? data) };${relationPatchCode}
+        this.form.patchValue({ ...item, ...this.initialValues });
+${dependentLoadCalls}
+      },
+      error: (err: any) => {
+        console.error('Erro ao buscar dados:', err);
+      }
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+
+    this.loading = true;
+    const payload = { ...this.form.getRawValue(), ...this.initialValues };
+    const request = this.isEdit
+      ? this.service.update(this.itemId!, payload)
+      : this.service.create(payload);
+
+    request.subscribe({
+      next: () => {
+        this.loading = false;
+        if (this.isDialog) this.saved.emit();
+        else this.navigateBack();
+      },
+      error: (err: any) => {
+        console.error('Erro ao salvar:', err);
+        this.loading = false;
+      }
+    });
+  }
+
+  onCancel(): void {
+    if (this.isDialog) this.cancelled.emit();
+    else this.navigateBack();
+  }
+
+  deleteItem(): void {
+    if (!this.itemId || !confirm('Tem certeza que deseja excluir este item?')) return;
+    this.loading = true;
+    this.service.delete(this.itemId).subscribe({
+      next: () => {
+        this.loading = false;
+        if (this.isDialog) this.saved.emit();
+        else this.navigateBack();
+      },
+      error: (err: any) => {
+        console.error('Erro ao excluir:', err);
+        this.loading = false;
+      }
+    });
+  }
+
+  private navigateBack(): void {
+    this.router.navigate(['../'], { relativeTo: this.route });
+  }
+
+${dependentMethods}
+}
+`;
+}

package/dist/templates/angular/index.d.ts

@@ -0,0 +1,4 @@
+export * from './service.template';
+export * from './list.template';
+export * from './form.template';
+export * from './dialog-handler.template';

package/dist/templates/angular/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./service.template"), exports);
+__exportStar(require("./list.template"), exports);
+__exportStar(require("./form.template"), exports);
+__exportStar(require("./dialog-handler.template"), exports);

package/dist/templates/angular/list.template.d.ts

@@ -0,0 +1,3 @@
+import { IDevkitEntityProperty } from '@devstroupe/devkit-core';
+export declare function angularListHtmlTemplate(name: string, properties: IDevkitEntityProperty[], listType?: string, formType?: string, filterType?: string): string;
+export declare function angularListTsTemplate(name: string, properties: IDevkitEntityProperty[], listType?: string, formType?: string): string;