fix(ref): align io8.ref product component with CE V2 logic

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.html

@@ -24,8 +24,10 @@
       <div *ngIf="error; else loadingSpinner">{{error}}</div>
     </clr-dg-placeholder>
 
-    <!-- COLUMN HEADERS -->
-{{LIST_ITEMS}}
+    <!-- DYNAMIC COLUMN HEADERS -->
+    <clr-dg-column *ngFor="let col of getColumns()" [clrDgField]="col">
+      <ng-container *clrDgHideableColumn="{hidden: false}">{{ col | titlecase }}</ng-container>
+    </clr-dg-column>
 
     <clr-dg-column>
       <ng-container *clrDgHideableColumn="{hidden: false}">
@@ -33,11 +35,11 @@
       </ng-container>
     </clr-dg-column>
 
-    <!-- DATA ROWS -->
+    <!-- DYNAMIC DATA ROWS -->
     <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
-      <clr-dg-cell>{{item.name}}</clr-dg-cell>
-      <clr-dg-cell>{{item.description}}</clr-dg-cell>
-      <clr-dg-cell>{{item.active}}</clr-dg-cell>
+      <clr-dg-cell *ngFor="let col of getColumns()">
+        {{ item[col] }}
+      </clr-dg-cell>
 
       <clr-dg-cell>
         <span style="cursor: pointer; margin-right: 10px;" (click)="onEdit(item)" title="Edit">
@@ -67,7 +69,7 @@
 <clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Add Product</h3>
   <div class="modal-body">
-    <form [formGroup]="entryForm">
+    <form #addForm="ngForm">
       <div class="clr-row">
 {{FORM_FIELDS}}
       </div>
@@ -83,7 +85,7 @@
 <clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
   <h3 class="modal-title">Edit Product (ID: {{rowSelected.id}})</h3>
   <div class="modal-body" *ngIf="rowSelected">
-    <form>
+    <form #editForm="ngForm">
       <div class="clr-row">
 {{FORM_FIELDS}}
       </div>

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ProductService } from './Product.service';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
 
 @Component({
   selector: 'app-Product',
@@ -14,27 +14,30 @@ export class ProductComponent implements OnInit {
   modaldelete = false;
   modalEdit = false;
   modalAdd = false;
-  public entryForm: FormGroup;
   loading = false;
   items: any[] = [];
   selected: any[] = [];
   error: string;
+/* {{RELATION_DECLARATIONS}} */
 
   constructor(
     private mainService: ProductService,
+    private apiRequest: ApiRequestService,
     private toastr: ToastrService,
-    private _fb: FormBuilder,
     private router: Router,
     private route: ActivatedRoute
   ) { }
 
   ngOnInit(): void {
     this.getData();
-    this.entryForm = this._fb.group({
-      name: [null],
-      description: [null],
-      active: [true]
-    });
+/* {{RELATION_LOADERS}} */
+  }
+
+  getColumns(): string[] {
+    if (!this.items || this.items.length === 0) {
+      return [];
+    }
+    return Object.keys(this.items[0]).filter(k => k !== 'id');
   }
 
   getData() {
@@ -52,7 +55,7 @@ export class ProductComponent implements OnInit {
   }
 
   goToAdd() {
-    this.entryForm.reset({ active: true });
+    this.rowSelected = {};
     this.modalAdd = true;
   }
 
@@ -78,7 +81,7 @@ export class ProductComponent implements OnInit {
 
   onCreate() {
     this.modalAdd = false;
-    this.mainService.create(this.entryForm.value).subscribe(() => {
+    this.mainService.create(this.rowSelected).subscribe(() => {
       this.toastr.success('Added successfully');
       this.getData();
     }, (error) => {