From b35555d708accd00a89173ceb03ce1a3d47b3a1d Mon Sep 17 00:00:00 2001
From: Maxime Urbanski <maxime@les-tilleuls.coop>
Date: Mon, 24 Jun 2024 14:31:49 +0200
Subject: [PATCH] add back to list component

---
 src/generators/AngularGenerator.js            | 10 ++++++++
 .../back-to-list/back-to-list.component.html  |  4 ++++
 .../back-to-list/back-to-list.component.ts    | 14 +++++++++++
 .../pagination/pagination.component.html      |  8 +++----
 .../common/pagination/pagination.component.ts |  2 +-
 .../common/svg/edit-svg/edit-svg.component.ts |  3 +--
 .../common/svg/show-svg/show-svg.component.ts |  3 +--
 .../foo/create/create.component.html          |  5 +---
 .../components/foo/create/create.component.ts |  2 ++
 .../components/foo/edit/edit.component.html   |  5 +---
 .../app/components/foo/edit/edit.component.ts |  2 ++
 .../app/components/foo/form/form.component.ts |  7 +++---
 .../components/foo/list/list.component.html   |  4 ++--
 .../app/components/foo/list/list.component.ts |  2 +-
 .../components/foo/show/show.component.html   | 24 +++++++++----------
 .../app/components/foo/show/show.component.ts |  9 ++++---
 .../components/foo/table/table.component.html |  2 +-
 .../components/foo/table/table.component.ts   |  3 ++-
 testapp.sh                                    |  2 +-
 19 files changed, 69 insertions(+), 42 deletions(-)
 create mode 100644 templates/angular/app/components/common/back-to-list/back-to-list.component.html
 create mode 100644 templates/angular/app/components/common/back-to-list/back-to-list.component.ts

diff --git a/src/generators/AngularGenerator.js b/src/generators/AngularGenerator.js
index d5e1bf64..20869cc2 100644
--- a/src/generators/AngularGenerator.js
+++ b/src/generators/AngularGenerator.js
@@ -34,6 +34,8 @@ export default class extends BaseGenerator {
       "app/components/common/svg/edit-svg/edit-svg.component.ts",
       "app/components/common/svg/menu/menu.component.svg",
       "app/components/common/svg/menu/menu.component.ts",
+      "app/components/common/back-to-list/back-to-list.component.html",
+      "app/components/common/back-to-list/back-to-list.component.ts",
 
       // COMPONENTS
       "app/components/foo/create/create.component.html",
@@ -122,6 +124,7 @@ export default class extends BaseGenerator {
       `${dir}/app/components/${lc}/list`,
       `${dir}/app/components/${lc}/show`,
       `${dir}/app/components/${lc}/table`,
+      `${dir}/app/components/common/back-to-list`,
       `${dir}/app/components/common/delete`,
       `${dir}/app/components/common/header`,
       `${dir}/app/components/common/sidebar`,
@@ -153,6 +156,8 @@ export default class extends BaseGenerator {
       "app/components/common/sidebar/sidebar.component.css",
       "app/components/common/sidebar/sidebar.component.html",
       "app/components/common/sidebar/sidebar.component.ts",
+      "app/components/common/back-to-list/back-to-list.component.html",
+      "app/components/common/back-to-list/back-to-list.component.ts",
       "app/interface/api.ts",
       "app/service/api.service.ts",
       "app/app.component.html",
@@ -182,6 +187,11 @@ export default class extends BaseGenerator {
       this.createFileFromPattern(file, dir, [lc, formFields], context)
     );
 
+    //UTILS
+    ["utils/date.ts"].forEach((path) =>
+      this.createFile(path, `${dir}/app/${path}`, context, false)
+    );
+
     // CONFIG
     this.createConfigFile(`${dir}/app/utils/config.ts`, {
       entrypoint: api.entrypoint,
diff --git a/templates/angular/app/components/common/back-to-list/back-to-list.component.html b/templates/angular/app/components/common/back-to-list/back-to-list.component.html
new file mode 100644
index 00000000..06d70143
--- /dev/null
+++ b/templates/angular/app/components/common/back-to-list/back-to-list.component.html
@@ -0,0 +1,4 @@
+<a [routerLink]="url"
+   class="text-blue-600 hover:text-blue-800">
+  Back to list
+</a>
diff --git a/templates/angular/app/components/common/back-to-list/back-to-list.component.ts b/templates/angular/app/components/common/back-to-list/back-to-list.component.ts
new file mode 100644
index 00000000..651a8971
--- /dev/null
+++ b/templates/angular/app/components/common/back-to-list/back-to-list.component.ts
@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {RouterLink} from "@angular/router";
+
+@Component({
+  selector: 'app-back-to-list',
+  standalone: true,
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './back-to-list.component.html'
+})
+export class BackToListComponent {
+  @Input() url!: string;
+}
diff --git a/templates/angular/app/components/common/pagination/pagination.component.html b/templates/angular/app/components/common/pagination/pagination.component.html
index 1e06bab4..d80fe0de 100644
--- a/templates/angular/app/components/common/pagination/pagination.component.html
+++ b/templates/angular/app/components/common/pagination/pagination.component.html
@@ -4,7 +4,7 @@
       <li>
         <a [routerLink]="['/books']"
            [routerLinkActive]="'bg-gray-200 text-gray-500 pointer-events-none'"
-           (click)="changeUri(pagination()['hydra:first'])"
+           (click)="paginationAction(pagination()['hydra:first'])"
            class="bg-gray block py-2 px-3 rounded"
            aria-label="First page">
           <span aria-hidden="true">&lArr;</span>First
@@ -15,7 +15,7 @@
           <a [routerLink]="['/books']"
              [queryParams]="pageParamValue('hydra:previous')"
              [routerLinkActive]="'bg-gray-200 text-gray-500 pointer-events-none'"
-             (click)="changeUri(pagination()['hydra:previous'])"
+             (click)="paginationAction(pagination()['hydra:previous'])"
              class="bg-gray block py-2 px-3 rounded"
              aria-label="Previous page">
             Previous
@@ -27,7 +27,7 @@
         <a [routerLink]="['/books']"
            [queryParams]="pageParamValue('hydra:next')"
            [routerLinkActive]="'bg-gray-200 text-gray-500 pointer-events-none'"
-           (click)="changeUri(pagination()['hydra:next'])"
+           (click)="paginationAction(pagination()['hydra:next'])"
            class="bg-gray block py-2 px-3 rounded"
            aria-label="Next page">
           Next
@@ -38,7 +38,7 @@
         <a [routerLink]="['/books']"
            [queryParams]="pageParamValue('hydra:last')"
            [routerLinkActive]="'bg-gray-200 text-gray-500 pointer-events-none'"
-           (click)="changeUri(pagination()['hydra:last'])"
+           (click)="paginationAction(pagination()['hydra:last'])"
            class="bg-gray block py-2 px-3 rounded"
            aria-label="Last page">
           <span aria-hidden="true">&rAarr;</span> Last
diff --git a/templates/angular/app/components/common/pagination/pagination.component.ts b/templates/angular/app/components/common/pagination/pagination.component.ts
index 46ee810d..1cd7e9b8 100644
--- a/templates/angular/app/components/common/pagination/pagination.component.ts
+++ b/templates/angular/app/components/common/pagination/pagination.component.ts
@@ -23,7 +23,7 @@ export class PaginationComponent {
     }
   }
 
-  changeUri (uri: string) {
+  paginationAction (uri: string) {
     this.handleChangePage.emit(uri)
   }
 }
diff --git a/templates/angular/app/components/common/svg/edit-svg/edit-svg.component.ts b/templates/angular/app/components/common/svg/edit-svg/edit-svg.component.ts
index b2f8ac8d..9e419e2e 100644
--- a/templates/angular/app/components/common/svg/edit-svg/edit-svg.component.ts
+++ b/templates/angular/app/components/common/svg/edit-svg/edit-svg.component.ts
@@ -4,8 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-edit-svg',
   standalone: true,
   imports: [],
-  templateUrl: './edit-svg.component.svg',
-  styleUrl: './edit-svg.component.css'
+  templateUrl: './edit-svg.component.svg'
 })
 export class EditSvgComponent {
 
diff --git a/templates/angular/app/components/common/svg/show-svg/show-svg.component.ts b/templates/angular/app/components/common/svg/show-svg/show-svg.component.ts
index b68a0328..8bdbb828 100644
--- a/templates/angular/app/components/common/svg/show-svg/show-svg.component.ts
+++ b/templates/angular/app/components/common/svg/show-svg/show-svg.component.ts
@@ -4,8 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-show-svg',
   standalone: true,
   imports: [],
-  templateUrl: './show-svg.component.svg',
-  styleUrl: './show-svg.component.css'
+  templateUrl: './show-svg.component.svg'
 })
 export class ShowSvgComponent {
 
diff --git a/templates/angular/app/components/foo/create/create.component.html b/templates/angular/app/components/foo/create/create.component.html
index bb081655..8a15bb41 100644
--- a/templates/angular/app/components/foo/create/create.component.html
+++ b/templates/angular/app/components/foo/create/create.component.html
@@ -1,9 +1,6 @@
 <div class=" w-full px-4 mt-4">
   <div class="flex items-center justify-between">
-    <a [routerLink]="['/{{lc}}']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
+    <app-back-to-list url="/{{lc}}s" />
   </div>
   @if (isLoading()) {
   <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
diff --git a/templates/angular/app/components/foo/create/create.component.ts b/templates/angular/app/components/foo/create/create.component.ts
index 3bccdaf8..d83554ee 100644
--- a/templates/angular/app/components/foo/create/create.component.ts
+++ b/templates/angular/app/components/foo/create/create.component.ts
@@ -2,6 +2,7 @@ import {Location} from "@angular/common";
 import {Component, inject, signal, WritableSignal} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {RouterLink} from "@angular/router";
+import {BackToListComponent} from "@components/common/back-to-list/back-to-list.component";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {FormComponent} from "@components/{{lc}}/form/form.component";
 import {ApiItem} from "@interface/api";
@@ -11,6 +12,7 @@ import {ApiService} from "@service/api.service";
   selector: 'app-create-{{lc}}',
   standalone: true,
   imports: [
+    BackToListComponent,
     DeleteComponent,
     RouterLink,
     FormsModule,
diff --git a/templates/angular/app/components/foo/edit/edit.component.html b/templates/angular/app/components/foo/edit/edit.component.html
index a818cad6..3b205bc5 100644
--- a/templates/angular/app/components/foo/edit/edit.component.html
+++ b/templates/angular/app/components/foo/edit/edit.component.html
@@ -1,9 +1,6 @@
 <div class="px-4 mt-4">
   <div class="flex items-center justify-end">
-    <a [routerLink]="['/{{lc}}']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
+    <app-back-to-list url="/{{lc}}s" />
   </div>
   @if (isLoading()) {
   <div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
diff --git a/templates/angular/app/components/foo/edit/edit.component.ts b/templates/angular/app/components/foo/edit/edit.component.ts
index 3157a683..ff16773e 100644
--- a/templates/angular/app/components/foo/edit/edit.component.ts
+++ b/templates/angular/app/components/foo/edit/edit.component.ts
@@ -10,6 +10,7 @@ import {
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Router, RouterLink} from "@angular/router";
+import {BackToListComponent} from "@components/common/back-to-list/back-to-list.component";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {FormComponent} from "@components/{{lc}}/form/form.component";
 import {ApiItem} from "@interface/api";
@@ -19,6 +20,7 @@ import {ApiService} from "@service/api.service";
   selector: 'app-edit-{{lc}}',
   standalone: true,
   imports: [
+    BackToListComponent,
     CommonModule,
     DeleteComponent,
     RouterLink,
diff --git a/templates/angular/app/components/foo/form/form.component.ts b/templates/angular/app/components/foo/form/form.component.ts
index 42fdae2e..477a92e8 100644
--- a/templates/angular/app/components/foo/form/form.component.ts
+++ b/templates/angular/app/components/foo/form/form.component.ts
@@ -5,7 +5,7 @@ import {
   Input,
   Output
 } from '@angular/core';
-import {ReactiveFormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {ApiItem} from "@interface/api";
 
@@ -13,10 +13,11 @@ import {ApiItem} from "@interface/api";
   selector: 'app-form-{{lc}}',
   standalone: true,
   imports: [
-    ReactiveFormsModule,
     AsyncPipe,
+    DeleteComponent,
+    FormsModule,
     NgIf,
-    DeleteComponent
+    ReactiveFormsModule,
   ],
   templateUrl: './form.component.html',
 })
diff --git a/templates/angular/app/components/foo/list/list.component.html b/templates/angular/app/components/foo/list/list.component.html
index 8e8700d8..b809237b 100644
--- a/templates/angular/app/components/foo/list/list.component.html
+++ b/templates/angular/app/components/foo/list/list.component.html
@@ -2,7 +2,7 @@
   <div class="flex justify-between items-center">
     <h1 class="text-3xl mb-2">{{title}} List</h1>
     <div class="flex">
-      <a routerLink="/{{lc}}/add"
+      <a routerLink="/{{lc}}s/add"
          class="bg-cyan-500 hover:bg-cyan-700 text-white text-sm font-bold py-2 px-4 rounded mr-2"
       >
         Create
@@ -22,7 +22,7 @@ <h1 class="text-3xl mb-2">{{title}} List</h1>
              (selectedAll)="selectedAll()"
   />
     @if (pagination()) {
-      <app-pagination-{{lc}}
+      <app-pagination
         [pagination]="pagination!"
         (handleChangePage)="changePage($event)"
       />
diff --git a/templates/angular/app/components/foo/list/list.component.ts b/templates/angular/app/components/foo/list/list.component.ts
index 57f3b6e1..95290267 100644
--- a/templates/angular/app/components/foo/list/list.component.ts
+++ b/templates/angular/app/components/foo/list/list.component.ts
@@ -39,7 +39,7 @@ export class ListComponent implements OnInit {
   public items: WritableSignal<ApiItem[]> = signal([])
   public error: WritableSignal<String> = signal('')
   public bulk: WritableSignal<Array<string>> = signal([])
-  public uri: WritableSignal<string> = signal('/{{lc}}')
+  public uri: WritableSignal<string> = signal('/{{lc}}s')
   private apiService: ApiService = inject(ApiService)
   private destroy: DestroyRef = inject(DestroyRef)
 
diff --git a/templates/angular/app/components/foo/show/show.component.html b/templates/angular/app/components/foo/show/show.component.html
index 71f31d5d..b7c4f955 100644
--- a/templates/angular/app/components/foo/show/show.component.html
+++ b/templates/angular/app/components/foo/show/show.component.html
@@ -3,10 +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]="['/{{lc}}']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
+    <app-back-to-list url="/{{lc}}s" />
     <div class="flex">
       <a [routerLink]="[item()['@id'], 'edit']"
          class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
@@ -31,9 +28,9 @@ <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ i
       </tr>
       </thead>
       <tbody>
+      @if (item()) {
       {{#each fields}}
       <tr class="border-b">
-        @if (item()) {
         <th
           class="text-sm font-medium px-6 py-4 text-left capitalize"
           scope="row"
@@ -43,17 +40,18 @@ <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ i
         <td class="px-6 py-4 whitespace-nowrap text-sm">
           {{#if isReferences}}
           \{{ item()['name'] }}
+
+          {{else if (compare type "==" "dateTime") }}
+          \{{ formatDateTime(item()['name']) }}
+          {{else}}
+          \{{ item()['name'] }}
+          {{/if}}
         </td>
-        {{else if (compare type "==" "dateTime") }}
-        \{{ formatDateTime(item.{{name}}) }}
-        {{else}}
-        \{{ item.{{name}} }}
-        {{/if}}
-        } @else {
-        <td>Rien</td>
-        }
       </tr>
       {{/each}}
+      } @else {
+      <td>Rien</td>
+      }
       </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
index 1778d472..5cba4612 100644
--- a/templates/angular/app/components/foo/show/show.component.ts
+++ b/templates/angular/app/components/foo/show/show.component.ts
@@ -9,17 +9,20 @@ import {
 } from '@angular/core';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {Router, RouterLink} from "@angular/router";
+import {BackToListComponent} from "@components/common/back-to-list/back-to-list.component";
 import {DeleteComponent} from "@components/common/delete/delete.component";
 import {ApiService} from "@service/api.service";
 import {ApiItem} from "@interface/api";
+import {formatDateTime} from "@utils/date";
 
 @Component({
   selector: 'app-show-{{lc}}',
   standalone: true,
   imports: [
+    BackToListComponent,
     CommonModule,
-    RouterLink,
-    DeleteComponent
+    DeleteComponent,
+    RouterLink
   ],
   templateUrl: './show.component.html',
 })
@@ -32,7 +35,7 @@ export class ShowComponent implements OnInit {
   public item: WritableSignal<ApiItem> = signal({} as ApiItem)
   public isLoading: WritableSignal<boolean> = signal(false)
   public error: WritableSignal<string> = signal('')
-
+  protected readonly formatDateTime = formatDateTime;
   ngOnInit() {
     this.toggleIsLoading()
     const id = this.router.url
diff --git a/templates/angular/app/components/foo/table/table.component.html b/templates/angular/app/components/foo/table/table.component.html
index e0a01958..71b56508 100644
--- a/templates/angular/app/components/foo/table/table.component.html
+++ b/templates/angular/app/components/foo/table/table.component.html
@@ -33,7 +33,7 @@
       \{{ {{lowercase reference.title}} }}
         'coucou"
       {{else if (compare type "==" "dateTime") }}
-      \{{ formatDateTime(item['{{name}}') }}
+      \{{ formatDateTime(item['{{name}}']) }}
       {{else}}
       \{{ item['{{name}}'] }}
       {{/if}}
diff --git a/templates/angular/app/components/foo/table/table.component.ts b/templates/angular/app/components/foo/table/table.component.ts
index 5b359014..a0d3a950 100644
--- a/templates/angular/app/components/foo/table/table.component.ts
+++ b/templates/angular/app/components/foo/table/table.component.ts
@@ -10,6 +10,7 @@ import {RouterLink} from "@angular/router";
 import {ShowSvgComponent} from "@components/common/svg/show-svg/show-svg.component";
 import {EditSvgComponent} from "@components/common/svg/edit-svg/edit-svg.component";
 import {ApiItem} from "@interface/api";
+import {formatDateTime} from "@utils/date";
 
 @Component({
   selector: 'app-table-{{lc}}',
@@ -27,7 +28,7 @@ export class TableComponent {
   @Input() bulk!: Array<string>;
   @Output() addToBulkList = new EventEmitter<string>()
   @Output() selectedAll = new EventEmitter<Function>()
-
+  protected readonly formatDateTime = formatDateTime;
 
   addToBulk(id: string) {
     this.addToBulkList.emit(id)
diff --git a/testapp.sh b/testapp.sh
index 45fd8f7a..0efad5b4 100755
--- a/testapp.sh
+++ b/testapp.sh
@@ -82,7 +82,7 @@ if [ "$1" = "angular" ]; then
 
   ng new angular
   cd ../..
-  yarn --cwd ./tmp/app/angular add tailwindcss postcss autoprefixer
+  yarn --cwd ./tmp/app/angular add tailwindcss postcss autoprefixer dayjs
   yarn --cwd ./tmp/app/angular tailwindcss init -p
 
   cp ./templates/common/tailwind.config.js ./tmp/app/angular