Client subtype cannot be selected while editing datatables

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html

@@ -13,7 +13,7 @@
             <input matInput required formControlName="datatableName">
           </mat-form-field>
 
-          <mat-form-field fxFlex="40%">
+          <mat-form-field fxFlex="20%">
             <mat-label>Application Table Name</mat-label>
             <mat-select required formControlName="apptableName">
               <mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
@@ -25,6 +25,14 @@
             </mat-error>
           </mat-form-field>
 
+          <mat-form-field fxFlex="20%" *ngIf="showEntitySubType">
+            <mat-label>Entity SubType</mat-label>
+            <mat-select formControlName="entitySubType">
+              <mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
+                {{ entitySubType.displayValue }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
         </div>
 
         <br>
@@ -72,10 +80,10 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
             <td mat-cell *matCellDef="let column" fxLayoutGap="15%">
-              <button type="button" color="primary" mat-icon-button (click)="editColumn(column)">
+              <button type="button" color="primary" mat-icon-button (click)="editColumn(column)" *ngIf="!column.system">
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)">
+              <button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)" *ngIf="!column.system">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </td>
@@ -86,14 +94,14 @@
 
         </table>
 
-        <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+        <mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
         <button mat-raised-button color="primary"
-          [disabled]="!dataTableForm.valid || dataTableForm.pristine && !isFormEdited" *mifosxHasPermission="'UPDATE_DATATABLE'">Submit</button>
+          [disabled]="!isFormEdited" *mifosxHasPermission="'UPDATE_DATATABLE'">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.ts

@@ -11,7 +11,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { SystemService } from '../../system.service';
 
 /** Data Imports */
-import { appTableData } from '../app-table-data';
+import { appTableData, entitySubTypeData } from '../app-table-data';
 
 /** Custom Components */
 import { ColumnDialogComponent } from '../column-dialog/column-dialog.component';
@@ -31,6 +31,8 @@ export class EditDataTableComponent implements OnInit {
   dataTableForm: FormGroup;
   /** Data Table Data. */
   dataTableData: any;
+  entitySubTypeData = entitySubTypeData;
+  showEntitySubType: boolean;
   /** Column Data. */
   columnData: any[];
   /** Application Table Data. */
@@ -40,10 +42,14 @@ export class EditDataTableComponent implements OnInit {
   /** Data Table Changes Data. */
   dataTableChangesData: {
     apptableName: string,
+    entitySubType: string,
     dropColumns?: { name: string }[],
     changeColumns: { name: string, newName?: string, code?: string, newCode?: string, mandatory: boolean, length?: number }[],
     addColumns?: { name?: string, type?: string, code?: string, mandatory?: boolean, length?: number }[]
-  } = { apptableName: '', changeColumns: [], addColumns: [], dropColumns: [] };
+  } = {
+    apptableName: '', changeColumns: [], addColumns: [], dropColumns: [],
+    entitySubType: ''
+  };
   /** Data passed to dialog. */
   dataForDialog: {
     columnName: string,
@@ -86,6 +92,9 @@ export class EditDataTableComponent implements OnInit {
               private dialog: MatDialog) {
     this.route.data.subscribe((data: { dataTable: any, columnCodes: any }) => {
       this.dataTableData = data.dataTable;
+      this.dataTableData.columnHeaderData.forEach((item: any) => {
+        item.system = ['created_at', 'updated_at'].includes(item.columnName);
+      });
       this.columnData = this.dataTableData.columnHeaderData;
       this.dataForDialog.columnCodes = data.columnCodes;
     });
@@ -98,6 +107,9 @@ export class EditDataTableComponent implements OnInit {
     this.initData();
     this.createDataTableForm();
     this.setColumns();
+    this.dataTableForm.controls.apptableName.valueChanges.subscribe((value: any) => {
+      this.showEntitySubType = (value === 'm_client');
+    });
   }
 
   /**
@@ -115,10 +127,12 @@ export class EditDataTableComponent implements OnInit {
   initData() {
     this.columnData.shift();
     this.dataTableChangesData.apptableName = this.dataTableData.applicationTableName;
+    this.dataTableChangesData.entitySubType = this.dataTableData.entitySubType;
     for (let index = 0; index < this.columnData.length; index++) {
       this.columnData[index].columnDisplayType = this.getColumnType(this.columnData[index].columnDisplayType);
       this.columnData[index].type = 'existing';
     }
+    this.showEntitySubType = (this.dataTableData.applicationTableName === 'm_client');
   }
 
   /**
@@ -127,7 +141,8 @@ export class EditDataTableComponent implements OnInit {
   createDataTableForm() {
     this.dataTableForm = this.formBuilder.group({
       'datatableName': [{ value: this.dataTableData.registeredTableName, disabled: true }, Validators.required],
-      'apptableName': [this.dataTableData.applicationTableName, Validators.required]
+      'apptableName': [{ value: this.dataTableData.applicationTableName, disabled: true }, Validators.required],
+      'entitySubType': [{ value: this.dataTableData.entitySubType, disabled: true }]
     });
   }