add back to list component

Author: maxime-urbanski

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,

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>

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;
+}

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

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)
   }
 }

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 {
 

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 {
 

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>

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,

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>

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,

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

@@ -5,18 +5,19 @@ 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";
 
 @Component({
   selector: 'app-form-{{lc}}',
   standalone: true,
   imports: [
-    ReactiveFormsModule,
     AsyncPipe,
+    DeleteComponent,
+    FormsModule,
     NgIf,
-    DeleteComponent
+    ReactiveFormsModule,
   ],
   templateUrl: './form.component.html',
 })

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)"
       />

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)
 

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"
@@ -42,18 +39,19 @@ <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ i
         </th>
         <td class="px-6 py-4 whitespace-nowrap text-sm">
           {{#if isReferences}}
-          \{{ item()['name'] }}
+          \{{ 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>

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

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

@@ -9,7 +9,7 @@
              name="selectedAll"
              (change)="selected()"
       >
-    </th >
+    </th>
     {{#each fields}}
     <th class="text-sm font-medium px-6 py-4 text-left capitalize">{{name}}</th>
     {{/each}}
@@ -31,9 +31,9 @@
     <td class="px-6 py-4 text-sm">
       {{#if isReferences}}
       \{{ {{lowercase reference.title}} }}
-        'coucou"
+      'coucou"
       {{else if (compare type "==" "dateTime") }}
-      \{{ formatDateTime(item['{{name}}') }}
+      \{{ formatDateTime(item['{{name}}']) }}
       {{else}}
       \{{ item['{{name}}'] }}
       {{/if}}
@@ -42,13 +42,13 @@
     <td class="w-8">
       <a [routerLink]="[item['@id']]" class="text-cyan-500">
         Show
-        <app-show-svg></app-show-svg>
+        <app-show-svg/>
       </a>
     </td>
     <td class="w-8">
-      <a [routerLink]="[item['id'], 'edit']" class="text-cyan-500">
+      <a [routerLink]="[item['@id'], 'edit']" class="text-cyan-500">
         Edit
-        <app-edit-svg></app-edit-svg>
+        <app-edit-svg/>
       </a>
     </td>
   </tr>

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)

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