From 330381817594380c9fb4f7657bccbeb0eecccf43 Mon Sep 17 00:00:00 2001
From: Christian Badura <christian.badura@capgemini.com>
Date: Thu, 8 Aug 2024 12:00:36 +0200
Subject: [PATCH] feat: add new row functionality

---
 .../app-detail/add-row.directive.ts           | 22 +++++++
 .../app-detail/app-detail.component.html      | 65 +++++++++++--------
 .../app-detail/app-detail.component.ts        | 16 +++--
 src/app/product-store/product-store.module.ts |  4 +-
 src/assets/i18n/en.json                       |  4 +-
 5 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 src/app/product-store/app-detail/add-row.directive.ts

diff --git a/src/app/product-store/app-detail/add-row.directive.ts b/src/app/product-store/app-detail/add-row.directive.ts
new file mode 100644
index 0000000..8fb22e3
--- /dev/null
+++ b/src/app/product-store/app-detail/add-row.directive.ts
@@ -0,0 +1,22 @@
+import { Directive, Input, HostListener } from '@angular/core'
+import { Table } from 'primeng/table'
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[pAddRow]'
+})
+export class AddRowDirective {
+  @Input() table!: Table
+  @Input() newRow: any
+
+  @HostListener('click', ['$event'])
+  onClick(event: Event) {
+    // Insert a new row
+    this.table.value.push(this.newRow)
+
+    // Set the new row in edit mode
+    this.table.initRowEdit(this.newRow)
+
+    event.preventDefault()
+  }
+}
diff --git a/src/app/product-store/app-detail/app-detail.component.html b/src/app/product-store/app-detail/app-detail.component.html
index 686e84a..2673692 100644
--- a/src/app/product-store/app-detail/app-detail.component.html
+++ b/src/app/product-store/app-detail/app-detail.component.html
@@ -435,7 +435,7 @@
       [header]="'DIALOG.TABS.ENDPOINTS' | translate"
       [tooltip]="'DIALOG.TABS.TOOLTIPS.ENDPOINTS' | translate"
     >
-      <p-table [value]="endpoints" [tableStyle]="{ 'min-width': '50rem' }">
+      <p-table #epTable [value]="endpoints" [tableStyle]="{ 'min-width': '50rem' }">
         <ng-template pTemplate="header">
           <tr>
             <th [pTooltip]="'APP.TOOLTIPS.ENDPOINTS.NAME' | translate" tooltipPosition="top" tooltipEvent="hover">
@@ -464,40 +464,53 @@
                 <ng-template pTemplate="output"> {{ endpoint.path }} </ng-template>
               </p-cellEditor>
             </td>
-            <td [pEditableColumn]="newEndpoint.name" pEditableColumnField="name">
+            <!-- <td [pEditableColumn]="newEndpoint.name" pEditableColumnField="name">
               <p-cellEditor>
                 <ng-template pTemplate="input">
                   <input pInputText type="text" [(ngModel)]="newEndpoint.name" />
                 </ng-template>
                 <ng-template pTemplate="output">{{ newEndpoint.name }}</ng-template>
               </p-cellEditor>
-            </td>
+            </td> -->
           </tr>
         </ng-template>
-        <!-- <ng-template pTemplate="body">
-          <tr>
-            <td [pEditableColumn]="newEndpoint.name" pEditableColumnField="name">
-              <p-cellEditor>
-                <ng-template pTemplate="input">
-                  <input pInputText type="text" [(ngModel)]="newEndpoint.name" />
-                </ng-template>
-                <ng-template pTemplate="output">{{ newEndpoint.name }}</ng-template>
-              </p-cellEditor>
-            </td>
-            <td [pEditableColumn]="newEndpoint.path" pEditableColumnField="path">
-              <p-cellEditor>
-                <ng-template pTemplate="input">
-                  <input pInputText type="text" [(ngModel)]="newEndpoint.path" />
-                </ng-template>
-                <ng-template pTemplate="output">{{ newEndpoint.path }}</ng-template>
-              </p-cellEditor>
-            </td>
-            <td>
-              <button pButton type="button" icon="pi pi-check" (click)="addNewEndpoint()"></button>
-            </td>
-          </tr>
-        </ng-template> -->
       </p-table>
+      <!-- <ng-template pTemplate="body">
+        <input pInputText type="text" [(ngModel)]="newEndpoint.name" />
+        <input pInputText type="text" [(ngModel)]="newEndpoint.path" />
+
+        <tr>
+          <td [pEditableColumn]="newEndpoint.name" pEditableColumnField="name">
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <input pInputText type="text" [(ngModel)]="newEndpoint.name" />
+              </ng-template>
+              <ng-template pTemplate="output">{{ newEndpoint.name }}</ng-template>
+            </p-cellEditor>
+          </td>
+          <td [pEditableColumn]="newEndpoint.path" pEditableColumnField="path">
+            <p-cellEditor>
+              <ng-template pTemplate="input">
+                <input pInputText type="text" [(ngModel)]="newEndpoint.path" />
+              </ng-template>
+              <ng-template pTemplate="output">{{ newEndpoint.path }}</ng-template>
+            </p-cellEditor>
+          </td>
+          <td>
+            <button pButton type="button" icon="pi pi-check" (click)="addNewEndpoint()"></button>
+          </td>
+        </tr>
+      </ng-template> -->
+      <button
+        pButton
+        type="button"
+        icon="pi pi-plus"
+        class="ui-button-info"
+        [label]="'Add'"
+        pAddRow
+        [table]="epTable"
+        [newRow]="addNewRow()"
+      ></button>
     </p-tabPanel>
   </p-tabView>
 
diff --git a/src/app/product-store/app-detail/app-detail.component.ts b/src/app/product-store/app-detail/app-detail.component.ts
index 22501c6..a5be8df 100644
--- a/src/app/product-store/app-detail/app-detail.component.ts
+++ b/src/app/product-store/app-detail/app-detail.component.ts
@@ -261,7 +261,7 @@ export class AppDetailComponent implements OnInit, OnChanges {
       this.mfe = { ...this.formGroupMfe.value, id: this.mfe?.id }
       if (this.mfe) {
         this.mfe.classifications = this.convertToUniqueStringArray(this.formGroupMfe.controls['classifications'].value)
-        this.mfe.endpoints = this.endpoints
+        this.mfe.endpoints = this.endpoints.filter((endpoint) => !(endpoint.name === '' && endpoint.path === ''))
       }
       this.changeMode === 'CREATE' ? this.createMfe() : this.updateMfe()
     }
@@ -361,10 +361,14 @@ export class AppDetailComponent implements OnInit, OnChanges {
     })
   }
 
-  public addNewEndpoint() {
-    if (this.newEndpoint.name || this.newEndpoint.path) {
-      this.endpoints.push(this.newEndpoint)
-      this.newEndpoint = { name: '', path: '' }
-    }
+  // public addNewEndpoint() {
+  //   if (this.newEndpoint.name || this.newEndpoint.path) {
+  //     this.endpoints.push(this.newEndpoint)
+  //     this.newEndpoint = { name: '', path: '' }
+  //   }
+  // }
+
+  public addNewRow() {
+    return { name: '', path: '' }
   }
 }
diff --git a/src/app/product-store/product-store.module.ts b/src/app/product-store/product-store.module.ts
index 3619331..6c91c05 100644
--- a/src/app/product-store/product-store.module.ts
+++ b/src/app/product-store/product-store.module.ts
@@ -23,6 +23,7 @@ import { ProductInternComponent } from './product-detail/product-intern/product-
 import { ProductAppsComponent } from './product-detail/product-apps/product-apps.component'
 import { SlotSearchComponent } from './slot-search/slot-search.component'
 import { SlotDeleteComponent } from './slot-delete/slot-delete.component'
+import { AddRowDirective } from './app-detail/add-row.directive'
 
 const routes: Routes = [
   {
@@ -67,7 +68,8 @@ const routes: Routes = [
     ProductInternComponent,
     ProductAppsComponent,
     SlotSearchComponent,
-    SlotDeleteComponent
+    SlotDeleteComponent,
+    AddRowDirective
   ],
   imports: [
     CommonModule,
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 293a7ad..5959f85 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -67,8 +67,8 @@
       "MS.HEADER": "Edit Microservice",
       "APP": {
         "TOOLTIP": "Edit App properties",
-        "OK": "Das App wurde erfolgreich geändert",
-        "NOK": "Ein Fehler ist aufgetreten. Das App wurde nicht geändert."
+        "OK": "The Application was changed successfully",
+        "NOK": "An error has occurred. The Application was not changed."
       },
       "PRODUCT": {
         "HEADER": "Edit Application",