Refactoring templates

api-platform · Jun 21, 2024 · 2aa4811 · 2aa4811
1 parent 0658abc
commit 2aa4811
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 88 deletions.
diff --git a/src/generators/AngularGenerator.js b/src/generators/AngularGenerator.js
@@ -12,14 +12,14 @@ export default class extends BaseGenerator {
       // COMMON COMPONENTS
       "app/components/common/delete/delete.component.html",
       "app/components/common/delete/delete.component.ts",
+      "app/components/common/header/header.component.css",
       "app/components/common/header/header.component.html",
       "app/components/common/header/header.component.ts",
       "app/components/common/layout/layout.component.html",
       "app/components/common/layout/layout.component.ts",
+      "app/components/common/sidebar/sidebar.component.css",
       "app/components/common/sidebar/sidebar.component.html",
       "app/components/common/sidebar/sidebar.component.ts",
-      "app/components/common/table/table.component.html",
-      "app/components/common/table/table.component.ts",
 
       // COMPONENTS
       "app/components/foo/create/create.component.html",
@@ -32,6 +32,8 @@ export default class extends BaseGenerator {
       "app/components/foo/list/list.component.ts",
       "app/components/foo/show/show.component.html",
       "app/components/foo/show/show.component.ts",
+      "app/components/foo/table/table.component.html",
+      "app/components/foo/table/table.component.ts",
       "app/app.component.html",
       "app/app.component.ts",
 
@@ -107,19 +109,19 @@ export default class extends BaseGenerator {
       apiResource: this.apiResource(api),
     };
 
+    console.log(fields);
+
     //CREATE DIRECTORIES - These directories may already exist
     [
-      `${dir}/assets`,
-      `${dir}/utils`,
       `${dir}/app/components/${lc}/create`,
       `${dir}/app/components/${lc}/edit`,
       `${dir}/app/components/${lc}/form`,
       `${dir}/app/components/${lc}/list`,
       `${dir}/app/components/${lc}/show`,
+      `${dir}/app/components/${lc}/table`,
       `${dir}/app/components/common/delete`,
       `${dir}/app/components/common/header`,
       `${dir}/app/components/common/sidebar`,
-      `${dir}/app/components/common/table`,
       `${dir}/app/components/svg/list-svg`,
       `${dir}/app/components/svg/show-svg`,
       `${dir}/app/components/svg/edit-svg`,
@@ -141,14 +143,14 @@ export default class extends BaseGenerator {
       "app/components/svg/menu/menu.component.ts",
       "app/components/common/delete/delete.component.html",
       "app/components/common/delete/delete.component.ts",
+      "app/components/common/header/header.component.css",
       "app/components/common/header/header.component.html",
       "app/components/common/header/header.component.ts",
       "app/components/common/sidebar/sidebar.component.css",
       "app/components/common/sidebar/sidebar.component.html",
       "app/components/common/sidebar/sidebar.component.ts",
-      "app/components/common/table/table.component.html",
-      "app/components/common/table/table.component.ts",
       "app/interface/api.ts",
+      "app/service/api.service.ts",
       "app/app.component.html",
       "app/app.component.ts",
       "app/app.routes.ts",
@@ -169,6 +171,8 @@ export default class extends BaseGenerator {
       "app/components/%s/show/show.component.html",
       "app/components/%s/show/show.component.ts",
       "app/components/%s/show/show.component.html",
+      "app/components/%s/table/table.component.html",
+      "app/components/%s/table/table.component.ts",
     ].forEach((file) =>
       this.createFileFromPattern(file, dir, [lc, formFields], context)
     );

diff --git a/templates/angular/app/app.routes.ts b/templates/angular/app/app.routes.ts
@@ -4,28 +4,13 @@ import {ShowComponent} from "@components/foo/show/show.component";
 import {EditComponent} from "@components/foo/edit/edit.component";
 import {CreateComponent} from "@components/foo/create/create.component";
 import {LayoutComponent} from "@components/common/layout/layout.component";
+import {allRoutes} from '@router'
+
 
 export const routes: Routes = [
   {
     path: '',
     component: LayoutComponent,
-    children: [
-      {
-        path: '{{lc}}',
-        component: ListComponent
-      },
-      {
-        path: '{{lc}}/add',
-        component: CreateComponent
-      },
-      {
-        path: '{{lc}}/:id',
-        component: ShowComponent,
-      },
-      {
-        path: '{{lc}}/:id/edit',
-        component: EditComponent
-      },
-    ]
+    children: allRoutes
   }
 ];
diff --git a/templates/angular/app/components/foo/create/create.component.html b/templates/angular/app/components/foo/create/create.component.html
@@ -9,6 +9,6 @@
   <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>
-  <app-form [fields]="formType" (submit)="onSubmit($event)"/>
+  <app-form [item]="item()" (submit)="onSubmit($event)"/>
   }
 </div>
diff --git a/templates/angular/app/components/foo/create/create.component.ts b/templates/angular/app/components/foo/create/create.component.ts
@@ -4,6 +4,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {RouterLink} from "@angular/router";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {FormComponent} from "@components/{{lc}}/form/form.component";
+import {ApiItem} from "@interface/api";
 import {ApiService} from "@service/api.service";
 
 @Component({
@@ -22,20 +23,12 @@ export class CreateComponent {
   private apiService: ApiService = inject(ApiService)
   private location: Location = inject(Location)
   public isLoading: WritableSignal<boolean> = signal(false)
-
-  public formType: Array<{ name: string; type: string }> = [
-    {
-      name: 'name',
-      type: 'string',
-    }
-  ]
+  public item: WritableSignal<ApiItem> = signal({} as ApiItem)
 
   onSubmit(data: any) {
     return this.apiService
       .add('/{{lc}}',
-        {
-          ...data
-        }
+        this.item()
       ).subscribe(
         (item) => {
           this.isLoading.set(true)

diff --git a/templates/angular/app/components/foo/edit/edit.component.html b/templates/angular/app/components/foo/edit/edit.component.html
@@ -12,7 +12,7 @@
   } @else {
 
   <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ item()["@id"] }} </span></h1>
-  <app-form [fields]="formType"
+  <app-form [fields]="{{fields}}"
             [itemToUpdate]="item()"
             (submit)="onSubmit($event)"
             (delete)="delete()"

diff --git a/templates/angular/app/components/foo/edit/edit.component.ts b/templates/angular/app/components/foo/edit/edit.component.ts
@@ -1,5 +1,6 @@
 import {CommonModule, Location} from "@angular/common";
-import {Component, OnInit, signal,WritableSignal} from '@angular/core';
+import {Component, DestroyRef, inject, OnInit, signal, WritableSignal} from '@angular/core';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Router, RouterLink} from "@angular/router";
 import {DeleteComponent} from "@components/common/delete/delete.component";
@@ -25,24 +26,19 @@ export class EditComponent implements OnInit {
   public item: WritableSignal<ApiItem> = signal({} as ApiItem);
   public isLoading: WritableSignal<Boolean> = signal(false)
   public error: WritableSignal<string> = signal('')
-  public formType: Array<{ name: string; type: string }> = [
-    {
-      name: 'name',
-      type: 'string',
-    }
-  ]
+  public formType: Array<{ name: string; type: string }> = []
+
+  private destroy: DestroyRef = inject(DestroyRef)
+  private apiService: ApiService = inject(ApiService)
+  private router: Router = inject(Router)
+  private location: Location = inject(Location)
 
-  constructor(
-    private apiService: ApiService,
-    private router: Router,
-    private location: Location,
-  ) {
-  }
 
   ngOnInit() {
     const uri = this.router.url.split('/edit')[0]
     this.isLoading.set(true)
     this.apiService.fetchData(uri)
+      .pipe(takeUntilDestroyed(this.destroy))
       .subscribe(value => {
         this.item.set(value)
         this.isLoading.set(false)

diff --git a/templates/angular/app/components/foo/form/form.component.html b/templates/angular/app/components/foo/form/form.component.html
@@ -1,16 +1,29 @@
-<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
-  @for (field of fields; track field.name) {
+<form (ngSubmit)="handleSubmit()">
   <div class="bg-white px-6 py-8">
-    <div class="mb-3">
-      <label [for]="field.name">{{ field.name }}</label>
-      <input [id]="field.name"
-             [type]="field.type"
-             [formControlName]="field.name"
+    {{#each formFields}}
+    <div class="mb-2">
+      <label for="{{name}}" class="text-gray-700 block text-sm font-bold capitalize">{{ name }}</label>
+      <input id="{{name}}"
+             name="{{name}}"
              class="mt-1 w-full px-3 py-2 border rounded"
-      >
+             [(ngModel)]="item.{{name}}"
+             {{#compare type "==" "dateTime" }}
+              type="date"
+              {{/compare}}
+              {{#compare type "!=" "dateTime" }}
+              type="{{type}}"
+              {{/compare}}
+              {{#if step}}
+              step="{{step}}"
+              {{/if}}
+              {{#if required}}
+              required
+              {{/if}}
+              placeholder="{{description}}"
+      />
     </div>
+    {{/each}}
   </div>
-  }
   <div class="bg-neutral-100 px-4 py-6 flex justify-between">
     <button
       type="submit"

diff --git a/templates/angular/app/components/foo/form/form.component.ts b/templates/angular/app/components/foo/form/form.component.ts
@@ -1,13 +1,13 @@
+import {AsyncPipe, NgIf} from "@angular/common";
 import {
   Component,
   EventEmitter,
   Input,
-  Output, SimpleChange,
+  Output
 } from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
-import {ApiItem} from "@interface/api";
-import {AsyncPipe, NgIf} from "@angular/common";
+import {ReactiveFormsModule} from "@angular/forms";
 import {DeleteComponent} from "@components/common/delete/delete.component";
+import {ApiItem} from "@interface/api";
 
 @Component({
   selector: 'app-form',
@@ -21,33 +21,15 @@ import {DeleteComponent} from "@components/common/delete/delete.component";
   templateUrl: './form.component.html',
 })
 export class FormComponent {
-  @Input() fields: Array<{ name: string; type: string }> = [];
-  @Input() itemToUpdate!: ApiItem;
+  @Input() item!: ApiItem;
   @Output() submit = new EventEmitter
   @Output() delete = new EventEmitter
-  public formGroup: FormGroup = new FormGroup<any>({})
-
-  ngOnChanges(changes: SimpleChange) {
-    this.formGroup = this.createFormGroup()
-  }
-
-  createFormGroup() {
-    const group: { [key: string]: FormControl<string | null | undefined> } = {}
-    this.fields.forEach(field => {
-      let value;
-      if (this.itemToUpdate) {
-        value = this.itemToUpdate[field?.name as keyof ApiItem]
-      }
-      group[field.name] = new FormControl(value)
-    })
-    return new FormGroup(group)
-  }
 
   handleSubmit() {
-    this.submit.emit(this.formGroup.value)
+    this.submit.emit()
   }
 
   handleDelete() {
-    this.delete.emit(this.itemToUpdate?.["@id"])
+    this.delete.emit(this.item?.["@id"])
   }
 }
diff --git a/templates/angular/app/components/foo/show/show.component.html b/templates/angular/app/components/foo/show/show.component.html
@@ -31,20 +31,29 @@ <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ i
       </tr>
       </thead>
       <tbody>
+      {{#each fields}}
       <tr class="border-b">
         @if (item()) {
         <th
           class="text-sm font-medium px-6 py-4 text-left capitalize"
           scope="row"
         >
-          name
+          {{name}}
         </th>
         <td class="px-6 py-4 whitespace-nowrap text-sm">
+          {{#if isReferences}}
           \{{ item()['name'] }}
         </td>
+        {{else if (compare type "==" "dateTime") }}
+        \{{ formatDateTime(item.{{name}}) }}
+        {{else}}
+        \{{ item.{{name}} }}
+        {{/if}}
         } @else {
         <td>Rien</td>
         }
+      </tr>
+      {{/each}}
       </tbody>
     </table>
   </div>

diff --git a/templates/angular/app/components/foo/show/show.component.ts b/templates/angular/app/components/foo/show/show.component.ts
@@ -1,5 +1,6 @@
 import {CommonModule, Location} from "@angular/common";
-import {Component, inject, OnInit, signal, WritableSignal} from '@angular/core';
+import {Component, DestroyRef,inject, OnInit, signal, WritableSignal} from '@angular/core';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {Router, RouterLink} from "@angular/router";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {ApiService} from "@service/api.service";
@@ -19,6 +20,7 @@ export class ShowComponent implements OnInit {
   private apiService: ApiService = inject(ApiService)
   private router: Router = inject(Router)
   private location: Location = inject(Location)
+  private destroy: DestroyRef = inject(DestroyRef)
 
   public item: WritableSignal<ApiItem> = signal({} as ApiItem)
   public isLoading: WritableSignal<boolean> = signal(false)
@@ -29,6 +31,7 @@ export class ShowComponent implements OnInit {
     const id = this.router.url
     this.apiService
       .fetchData(id)
+      .pipe(takeUntilDestroyed(this.destroy))
       .subscribe(item => this.item.set(item))
     this.toggleIsLoading()
   }

diff --git a/...ponents/common/table/table.component.html → ...components/foo/table/table.component.html b/...ponents/common/table/table.component.html → ...components/foo/table/table.component.html
@@ -27,8 +27,19 @@
              (change)="addToBulk(item['@id']!)"
       >
     </td>
-    <td>\{{ item['id'] }}</td>
-    <td>\{{ item['name'] }}</td>
+    {{#each fields}}
+
+    <td class="px-6 py-4 text-sm">
+      {{#if isReferences}}
+      \{{ {{lowercase reference.title}} }}
+        'coucou"
+      {{else if (compare type "==" "dateTime") }}
+      \{{ formatDateTime(item['{{name}}') }}
+      {{else}}
+      \{{ item['{{name}}'] }}
+      {{/if}}
+    </td>
+    {{/each}}
     <td class="w-8">
       <a [routerLink]="[item['@id']]" class="text-cyan-500">
         Show

diff --git a/...omponents/common/table/table.component.ts → ...p/components/foo/table/table.component.ts b/...omponents/common/table/table.component.ts → ...p/components/foo/table/table.component.ts