wip

api-platform · Jun 12, 2024 · aecd360 · aecd360
1 parent 5795f3c
commit aecd360
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 143 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,8 @@
     "test-react-app": "./testapp.sh react",
     "test-next-app": "./testapp.sh next",
     "test-vue-app": "./testapp.sh vue",
-    "test-nuxt-app": "./testapp.sh nuxt"
+    "test-nuxt-app": "./testapp.sh nuxt",
+    "test-angular-app": "./testapp.sh angular"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"

diff --git a/src/generators/AngularGenerator.js b/src/generators/AngularGenerator.js
@@ -36,6 +36,10 @@ export default class extends BaseGenerator {
       //SVG COMPONENT
       "app/components/svg/list-svg/list-svg.component.svg",
       "app/components/svg/list-svg/list-svg.component.ts",
+      "app/components/svg/show-svg/show-svg.component.svg",
+      "app/components/svg/show-svg/show-svg.component.ts",
+      "app/components/svg/edit-svg/edit-svg.component.svg",
+      "app/components/svg/edit-svg/edit-svg.component.ts",
       "app/components/svg/menu/menu.component.svg",
       "app/components/svg/menu/menu.component.ts",
 
@@ -89,23 +93,23 @@ export default class extends BaseGenerator {
     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);
+    const formFields = this.buildFields(fields);
 
     const context = {
       title: resource.title,
       name: resource.name,
       lc,
       uc: resource.title.toUpperCase(),
       fields,
-      formFields: this.buildFields(fields),
+      formFields,
       hydraPrefix: this.hydraPrefix,
       titleUcFirst,
       hasIsRelation,
       hasIsRelations,
       hasRelations: hasIsRelation || hasIsRelations,
       hasDateField,
     };
+    console.log("api ==>", api);
 
     //CREATE DIRECTORIES - These directories may already exist
     [
@@ -121,6 +125,8 @@ export default class extends BaseGenerator {
       `${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`,
       `${dir}/app/components/svg/menu`,
       `${dir}/app/interface`,
       `${dir}/app/router`,
@@ -131,6 +137,10 @@ export default class extends BaseGenerator {
     [
       "app/components/svg/list-svg/list-svg.component.svg",
       "app/components/svg/list-svg/list-svg.component.ts",
+      "app/components/svg/show-svg/show-svg.component.svg",
+      "app/components/svg/show-svg/show-svg.component.ts",
+      "app/components/svg/edit-svg/edit-svg.component.svg",
+      "app/components/svg/edit-svg/edit-svg.component.ts",
       "app/components/svg/menu/menu.component.svg",
       "app/components/svg/menu/menu.component.ts",
       "app/components/common/delete/delete.component.html",
@@ -150,15 +160,18 @@ export default class extends BaseGenerator {
     );
 
     [
+      "app/router/%s.ts",
+      "app/components/%s/list/list.component.html",
+      "app/components/%s/list/list.component.ts",
       "app/components/%s/create/create.component.html",
       "app/components/%s/create/create.component.ts",
       /*"app/components/%s/edit/edit.component.html",
       "app/components/%s/edit/edit.component.ts",
-      "app/components/%s/list/list.component.html",
-      "app/components/%s/list/list.component.ts",
-      "app/components/%s/show/show.component.html",
+      "app/components/%s/show/show.component.svg",
       "app/components/%s/show/show.component.ts",*/
-    ].forEach((file) => this.createFileFromPattern(file, dir, [lc], context));
+    ].forEach((file) =>
+      this.createFileFromPattern(file, dir, [lc, formFields], context)
+    );
   }
 
   parseFields(resource) {

diff --git a/src/generators/AngularGenerator.test.js b/src/generators/AngularGenerator.test.js
@@ -62,9 +62,14 @@ test("Generate a React app", () => {
   ].forEach((file) => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
 
   [
-    "/components/abc/Form.tsx",
-    "/components/abc/List.tsx",
-    "/components/abc/Show.tsx",
+    "app/components/abc/create/create.component.html",
+    "app/components/abc/create/create.component.ts",
+    "app/components/abc/edit/edit.component.html",
+    "app/components/abc/edit/edit.component.ts",
+    "app/components/abc/list/list.component.html",
+    "app/components/abc/list/list.component.ts",
+    "app/components/abc/show/show.component.html",
+    "app/components/abc/show/show.component.ts",
     "/interfaces/Abc.ts",
   ].forEach((file) => {
     expect(fs.existsSync(tmpobj.name + file)).toBe(true);

diff --git a/templates/angular/app/components/common/table/table.component.html b/templates/angular/app/components/common/table/table.component.html
@@ -16,59 +16,37 @@
   </tr>
   </thead>
   <tbody>
-    @for (item of items; track item) {
-      <tr>
-        <td class="w-2">
-          <input type="checkbox"
-                 name="test"
-                 [id]="item['@id']"
-                 [checked]="bulk.includes(item['@id']!)"
-                 (change)="addToBulk(item['@id']!)"
-          >
-        </td>
-        <td>{{ item['id'] }}</td>
-        <td>{{ item['name'] }}</td>
-        <td class="w-8">
-          <a [routerLink]="[item['@id']]" class="text-cyan-500">
-            Show
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="w-6 h-6"
-            >
-              <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
-              <path
-                fill-rule="evenodd"
-                d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </a>
-        </td>
-        <td class="w-8">
-          <a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
-            Edit
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="w-6 h-6"
-            >
-              <path
-                d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z"/>
-              <path
-                d="M5.25 5.25a3 3 0 00-3 3v10.5a3 3 0 003 3h10.5a3 3 0 003-3V13.5a.75.75 0 00-1.5 0v5.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5V8.25a1.5 1.5 0 011.5-1.5h5.25a.75.75 0 000-1.5H5.25z"/>
-            </svg>
-          </a>
-        </td>
-      </tr>
-    } @empty {
-      <tr>
-        <td colspan="2" class="text-center italic p-6">
-          Pas de données.
-        </td>
-      </tr>
-    }
+  @for (item of items; track item) {
+  <tr>
+    <td class="w-2">
+      <input type="checkbox"
+             name="test"
+             [id]="item['@id']"
+             [checked]="bulk.includes(item['@id']!)"
+             (change)="addToBulk(item['@id']!)"
+      >
+    </td>
+    <td>{{ item['id'] }}</td>
+    <td>{{ item['name'] }}</td>
+    <td class="w-8">
+      <a [routerLink]="[item['@id']]" class="text-cyan-500">
+        Show
+        <app-show-svg />
+      </a>
+    </td>
+    <td class="w-8">
+      <a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
+        Edit
+        <app-edit-svg />
+      </a>
+    </td>
+  </tr>
+  } @empty {
+  <tr>
+    <td colspan="2" class="text-center italic p-6">
+      Pas de données.
+    </td>
+  </tr>
+  }
   </tbody>
 </table>
diff --git a/templates/angular/app/components/common/table/table.component.ts b/templates/angular/app/components/common/table/table.component.ts
@@ -2,13 +2,19 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {Hero} from "../../../interface/hero.model";
 import {FormsModule} from "@angular/forms";
+import {ShowComponent} from "../../svg/show/show.component";
+import {ShowSvgComponent} from "../../svg/show-svg/show-svg.component";
+import {EditSvgComponent} from "../../svg/edit-svg/edit-svg.component";
 
 @Component({
   selector: 'app-table',
   standalone: true,
   imports: [
     RouterLink,
-    FormsModule
+    FormsModule,
+    ShowComponent,
+    ShowSvgComponent,
+    EditSvgComponent
   ],
   templateUrl: './table.component.html',
 })

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 [fields]="formType" (submit)="onSubmit($event)"></app-form>
   }
 </div>
diff --git a/templates/angular/app/components/foo/create/create.component.ts b/templates/angular/app/components/foo/create/create.component.ts
@@ -20,12 +20,7 @@ import {FormComponent} from "../../common/form/form.component";
 })
 export class CreateComponent {
   public isLoading: WritableSignal<boolean> = signal(false)
-  public formType: Array<{ name: string; type: string }> = [
-    {
-      name: 'name',
-      type: 'string',
-    }
-  ]
+  public formType ='{{formFields}}'
 
   constructor(private apiService: ApiService, private location: Location) {
   }

diff --git a/templates/angular/app/components/foo/edit/edit.component.ts b/templates/angular/app/components/foo/edit/edit.component.ts
@@ -1,4 +1,4 @@
-import {Component, computed, OnInit, signal, WritableSignal} from '@angular/core';
+import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {DeleteComponent} from "../../common/delete/delete.component";
 import {Router, RouterLink} from "@angular/router";
 import {ApiService} from "../../../service/api.service";
@@ -25,7 +25,7 @@ export class EditComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private heroService: ApiService,
+    private apiService: ApiService,
     private location: Location
   ) {
   }
@@ -37,7 +37,7 @@ export class EditComponent implements OnInit {
   loadData() {
     this.isLoading.set(true)
     const splitUrl = this.router.url.split('/edit')[0]
-    this.heroService
+    this.apiService
       .getData(splitUrl)
       .subscribe(item => {
         this.item.set(item)
@@ -58,7 +58,7 @@ export class EditComponent implements OnInit {
   }
 
   onSubmit(event: any) {
-    return this.heroService.putHero(
+    return this.apiService.putHero(
       this.item()?.["@id"],
       this.item()
     ).subscribe(() => {
@@ -67,7 +67,7 @@ export class EditComponent implements OnInit {
   }
 
   delete() {
-    return this.heroService.delete(
+    return this.apiService.delete(
       this.item()?.["@id"]
     ).subscribe(
       () => this.location.back()

diff --git a/templates/angular/app/components/foo/list/list.component.html b/templates/angular/app/components/foo/list/list.component.html
@@ -1,8 +1,8 @@
 <div class="p-8 mt-4">
   <div class="flex justify-between items-center">
-    <h1 class="text-3xl mb-2">Heroes List</h1>
+    <h1 class="text-3xl mb-2">{{title}} List</h1>
     <div class="flex">
-      <a routerLink="/heroes/add"
+      <a routerLink="/{{lc}}/add"
          class="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded mr-2"
       >
         Create
@@ -17,7 +17,7 @@ <h1 class="text-3xl mb-2">Heroes List</h1>
   @if (isLoading()) {
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
-    <app-table [items]="heroes()"
+    <app-table [items]="items()"
                [bulk]="bulk()"
                (addToBulkList)="addToBulk($event)"
                (selectedAll)="selectedAll()"

diff --git a/templates/angular/app/components/foo/list/list.component.ts b/templates/angular/app/components/foo/list/list.component.ts
@@ -1,12 +1,10 @@
-import {Component, computed, OnInit, Output, signal, WritableSignal} from '@angular/core';
+import {Component, OnInit, signal, WritableSignal} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {AsyncPipe, Location, NgFor, NgIf} from "@angular/common";
 import {TableComponent} from "../../common/table/table.component";
 import {ApiService} from "../../../service/api.service";
 import {Hero} from "../../../interface/hero.model";
 import {DeleteComponent} from "../../common/delete/delete.component";
-import {log} from "node:util";
-import {Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-list',
@@ -22,24 +20,23 @@ import {Validators} from "@angular/forms";
   templateUrl: './list.component.html',
 })
 export class ListComponent implements OnInit {
-  public heroes: WritableSignal<Hero[] | []> = signal([])
+  public items: WritableSignal<Hero[] | []> = signal([])
   public isLoading = signal(false)
   public error = signal(undefined)
-  @Output() bulk: WritableSignal<Array<string>> = signal([])
+  public bulk: WritableSignal<Array<string>> = signal([])
 
   constructor(
-    private heroService: ApiService,
-    private location: Location
+    private apiService: ApiService
   ) {
   }
 
   ngOnInit() {
     this.isLoading.set(true)
-    this.heroService
-      .getDataes('/heroes')
+    this.apiService
+      .getData('/{{lc}}')
       .subscribe(
         (items) => {
-          this.heroes.set(items['hydra:member'])
+          this.items.set(items['hydra:member'])
           this.isLoading.set(false)
         }
       )
@@ -56,8 +53,8 @@ export class ListComponent implements OnInit {
 
   selectedAll() {
     if (!this.bulk().length) {
-      this.heroes().forEach(hero => {
-        this.bulk().push(<string>hero["@id"])
+      this.items().forEach(item => {
+        this.bulk().push(<string>item["@id"])
       })
     } else {
       this.bulk.set([])
@@ -70,7 +67,7 @@ export class ListComponent implements OnInit {
         items =>
           items.forEach(
             uri =>
-              this.heroService.delete(uri)
+              this.apiService.delete(uri)
                 .subscribe(
                   () => {
                     window.location.reload()

diff --git a/templates/angular/app/components/foo/show/show.component.html b/templates/angular/app/components/foo/show/show.component.html
@@ -3,7 +3,7 @@
     <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
   } @else {
     <div class="flex items-center justify-between">
-      <a [routerLink]="['/heroes']"
+      <a [routerLink]="['/{{lc}}']"
          class="text-blue-600 hover:text-blue-800">
         Back to list
       </a>