new create & form components

Author: maxime-urbanski

src/generators/AngularGenerator.js

@@ -52,7 +52,7 @@ export default class extends BaseGenerator {
       "app/app.routes.ts",
 
       //SERVICE
-      "app/service/hero.service.ts",
+      "app/service/api.service.ts",
     ]);
 
     handlebars.registerHelper("compare", hbhComparison.compare);
@@ -80,17 +80,17 @@ export default class extends BaseGenerator {
     );
   }
 
-
   generate(api, resource, dir) {
     const lc = resource.title.toLowerCase();
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
     const fields = this.parseFields(resource);
+    console.log(fields);
     const hasIsRelation = fields.some((field) => field.isRelation);
     const hasIsRelations = fields.some((field) => field.isRelations);
     const hasDateField = fields.some((field) => field.type === "dateTime");
 
-    console.log(resource)
+    console.log(resource);
 
     const context = {
       title: resource.title,

src/generators/AngularGenerator.test.js

@@ -58,7 +58,7 @@ test("Generate a React app", () => {
     "app/interface/show.model.ts",
     "app/interface/update.model.ts",
     "app/router/foo.ts",
-    "app/service/hero.service.ts",
+    "app/service/api.service.ts",
   ].forEach((file) => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
 
   [

templates/angular/app/components/common/delete/delete.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {HeroService} from "../../../service/hero.service";
+import {ApiService} from "../../../service/api.service";
 import {Location} from "@angular/common";
 
 @Component({
@@ -12,7 +12,7 @@ export class DeleteComponent {
   @Input() disabled!: boolean
   @Output() delete: EventEmitter<Function> = new EventEmitter<Function>()
   constructor(
-    private heroService: HeroService,
+    private heroService: ApiService,
     private location: Location
   ) {
   }

templates/angular/app/components/common/form/form.component.html

@@ -1 +1,18 @@
-<p>form works!</p>
+<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
+  @for (field of fields; track field.name) {
+  <div class="mb-3">
+    <label [for]="field.name">{{ field.name }}</label>
+    <input [id]="field.name"
+           [type]="field.type"
+           [formControlName]="field.name"
+           class="mt-1 w-full px-3 py-2 border rounded"
+    >
+  </div>
+  }
+  <button
+    type="submit"
+    class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
+  >
+    Submit
+  </button>
+</form>

templates/angular/app/components/common/form/form.component.ts

@@ -1,11 +1,33 @@
-import { Component } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
 
 @Component({
   selector: 'app-form',
   standalone: true,
-  imports: [],
+  imports: [
+    ReactiveFormsModule
+  ],
   templateUrl: './form.component.html',
 })
-export class FormComponent {
+export class FormComponent implements OnInit {
+  @Input() fields: Array<{ name: string; type: string }> = [];
+  @Output() submit = new EventEmitter
+  public formGroup: FormGroup = new FormGroup<any>({})
 
+  ngOnInit() {
+    this.formGroup = this.createFormGroup()
+  }
+
+  createFormGroup() {
+    const group: { [key: string]: FormControl<string | null> } = {}
+
+    this.fields.forEach(field => {
+      group[field.name] = new FormControl('')
+    })
+    return new FormGroup(group)
+  }
+
+  handleSubmit() {
+    this.submit.emit(this.formGroup.value)
+  }
 }

templates/angular/app/components/foo/create/create.component.html

@@ -1,30 +1,14 @@
 <div class="container mx-auto px-4 max-w-2xl mt-4">
   <div class="flex items-center justify-between">
-    <a [routerLink]="['/heroes']"
+    <a [routerLink]="['/{{lc}}']"
        class="text-blue-600 hover:text-blue-800">
-      Back to list {{lc}}
+      Back to list
     </a>
   </div>
   @if (isLoading()) {
-    <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
+  <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
-    <h1 class="text-3xl my-4">Create</h1>
-
-    <form (ngSubmit)="onSubmit($event)">
-      <div class="mb-3">
-        <label for="name"> name</label>
-        <input id="name"
-               class="mt-1 w-full px-3 py-2 border rounded"
-               [formControl]="input"
-        >
-      </div>
-
-      <button
-        type="submit"
-        class="px-6 py-2 bg-green-500 text-white font-medium rounded shadow-md hover:bg-green-600"
-      >
-        Submit
-      </button>
-    </form>
+  <h1 class="text-3xl my-4">Create</h1>
+  <app-form [fields]="{{{formType}}}" (submit)="onSubmit($event)"/>
   }
 </div>

templates/angular/app/components/foo/create/create.component.ts

@@ -1,10 +1,10 @@
 import {Component, signal, WritableSignal} from '@angular/core';
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {RouterLink} from "@angular/router";
-import {HeroService} from "../../../service/hero.service";
-import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {Foo} from "../../../interface/foo.model";
+import {ApiService} from "../../../service/api.service";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Location} from "@angular/common";
+import {FormComponent} from "../../common/form/form.component";
 
 @Component({
   selector: 'app-create',
@@ -13,27 +13,27 @@ import {Location} from "@angular/common";
     DeleteComponent,
     RouterLink,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FormComponent
   ],
   templateUrl: './create.component.html',
 })
 export class CreateComponent {
   public isLoading: WritableSignal<boolean> = signal(false)
-  public item: WritableSignal<Foo> = signal({})
-  public input:FormControl<string | null> = new FormControl('')
+  public formType: Array<{ name: string; type: string }> = [
+    {
+      name: 'name',
+      type: 'string',
+    }
+  ]
 
-  constructor(private heroService: HeroService, private location: Location) {
+  constructor(private apiService: ApiService, private location: Location) {
   }
-
-  setItem(event: any) {
-    this.item.set(event)
-  }
-
-  onSubmit(event: any) {
-    return this.heroService
-      .add('/heroes',
+  onSubmit(data: any) {
+    return this.apiService
+      .add('/{{lc}}',
         {
-          name: this.input.value
+          ...data
         }
       ).subscribe(
         (item) => {
@@ -42,5 +42,4 @@ export class CreateComponent {
         }
       )
   }
-
 }

templates/angular/app/components/foo/edit/edit.component.ts

@@ -1,7 +1,7 @@
 import {Component, computed, OnInit, signal, WritableSignal} from '@angular/core';
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {Router, RouterLink} from "@angular/router";
-import {HeroService} from "../../../service/hero.service";
+import {ApiService} from "../../../service/api.service";
 import {CommonModule, Location} from "@angular/common";
 import {ApiShow} from "../../../interface/api";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@@ -25,7 +25,7 @@ export class EditComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private heroService: HeroService,
+    private heroService: ApiService,
     private location: Location
   ) {
   }
@@ -38,7 +38,7 @@ export class EditComponent implements OnInit {
     this.isLoading.set(true)
     const splitUrl = this.router.url.split('/edit')[0]
     this.heroService
-      .getHero(splitUrl)
+      .getData(splitUrl)
       .subscribe(item => {
         this.item.set(item)
         this.isLoading.set(false)

templates/angular/app/components/foo/list/list.component.ts

@@ -2,7 +2,7 @@ import {Component, computed, OnInit, Output, signal, WritableSignal} from '@angu
 import {RouterLink} from "@angular/router";
 import {AsyncPipe, Location, NgFor, NgIf} from "@angular/common";
 import {TableComponent} from "../../common/table/table.component";
-import {HeroService} from "../../../service/hero.service";
+import {ApiService} from "../../../service/api.service";
 import {Hero} from "../../../interface/hero.model";
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {log} from "node:util";
@@ -28,15 +28,15 @@ export class ListComponent implements OnInit {
   @Output() bulk: WritableSignal<Array<string>> = signal([])
 
   constructor(
-    private heroService: HeroService,
+    private heroService: ApiService,
     private location: Location
   ) {
   }
 
   ngOnInit() {
     this.isLoading.set(true)
     this.heroService
-      .getHeroes('/heroes')
+      .getDataes('/heroes')
       .subscribe(
         (items) => {
           this.heroes.set(items['hydra:member'])

templates/angular/app/components/foo/show/show.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {Router, RouterLink} from "@angular/router";
 import {CommonModule, Location} from "@angular/common";
-import {HeroService} from "../../../service/hero.service";
+import {ApiService} from "../../../service/api.service";
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {ApiShow} from "../../../interface/api";
 
@@ -21,7 +21,7 @@ export class ShowComponent implements OnInit {
   public error = signal(undefined)
 
   constructor(
-    private heroService: HeroService,
+    private heroService: ApiService,
     private router: Router,
     private location: Location
   ) {
@@ -31,7 +31,7 @@ export class ShowComponent implements OnInit {
     this.isLoading.set(true)
     const id = this.router.url
     this.heroService
-      .getHero(id)
+      .getData(id)
       .subscribe(item => {
         this.item.set(item)
         this.isLoading.set(false)

templates/angular/app/service/hero.service.ts renamed to templates/angular/app/service/api.service.ts

@@ -5,7 +5,7 @@ import {ApiList, ApiShow} from "../interface/api";
 import {Foo} from "../interface/foo.model";
 
 @Injectable({providedIn: 'root'})
-export class HeroService {
+export class ApiService {
   baseUrl: string = 'https://localhost'
   httpOptions = {
     headers: new HttpHeaders({