Merge pull request #1551 from josehernandezfintecheandomx/fix/datatable_mandatory_indicator

Fix datatable mandatory column

src/app/system/manage-data-tables/column-dialog/column-dialog.component.ts

@@ -37,7 +37,7 @@ export class ColumnDialogComponent implements OnInit {
     this.columnForm = this.formBuilder.group({
       'name': [this.data ? this.data.columnName : '', Validators.required],
       'type': [{ value: this.data ? (this.data.columnDisplayType === '' ? '' : this.getColumnType(this.data.columnDisplayType)) : '', disabled: this.data.type === 'existing' }, Validators.required],
-      'mandatory': [{ value: this.data ? this.data.isColumnPrimaryKey : false, disabled: this.data.type === 'existing' }],
+      'mandatory': [{ value: this.data.isColumnNullable, disabled: this.data.type === 'existing' }],
       'length': [{ value: this.data ? +this.data.columnLength : '', disabled: this.getColumnType(this.data.columnDisplayType) !== 'String' || this.data.type === 'existing' }, Validators.required],
       'code': [{ value: this.data ? this.data.columnCode : '', disabled: this.getColumnType(this.data.columnDisplayType) !== 'Dropdown' || this.data.type === 'existing' }, Validators.required]
     });

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

@@ -61,27 +61,35 @@
 
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-            <td mat-cell *matCellDef="let column"> {{ column.name }} </td>
+            <td mat-cell *matCellDef="let column"> {{ column.columnName }}
+              <fa-icon *ngIf="column.isColumnPrimaryKey" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Primary Key" matTooltipPosition="right"></fa-icon>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="type">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
-            <td mat-cell *matCellDef="let column"> {{ column.type }} </td>
+            <td mat-cell *matCellDef="let column"> {{ column.columnDisplayType }} </td>
           </ng-container>
 
           <ng-container matColumnDef="mandatory">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Mandatory </th>
-            <td mat-cell *matCellDef="let column"> {{ column.mandatory }} </td>
+            <td mat-cell *matCellDef="let column" class="left">
+              <fa-icon *ngIf="!column.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="column.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" matTooltipPosition="right"></fa-icon>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="length">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
-            <td mat-cell *matCellDef="let column"> {{ column.length }} </td>
+            <td mat-cell *matCellDef="let column"> {{ column.columnLength }} </td>
           </ng-container>
 
           <ng-container matColumnDef="code">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
-            <td mat-cell *matCellDef="let column"> {{ column.code }} </td>
+            <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">

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

@@ -21,6 +21,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 
 /** Custom Dialog Component */
 import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
+import { DatatableColumn } from '../datatable-column.model';
 
 /**
  * Create Data Table Component.
@@ -39,20 +40,12 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
   entitySubTypeData = entitySubTypeData;
   showEntitySubType: boolean;
   /** Column Data */
-  columnData: any[] = [];
+  columnData: DatatableColumn[] = [];
   /** Data passed to dialog. */
-  dataForDialog: {
+  dataForDialog: DatatableColumn = {
-    columnName: string,
-    columnDisplayType: string,
-    isColumnPrimaryKey: boolean,
-    columnLength: string,
-    columnCode: string,
-    columnCodes: any,
-    type: string
-  } = {
       columnName: undefined,
       columnDisplayType: undefined,
-      isColumnPrimaryKey: undefined,
+      isColumnNullable: undefined,
       columnLength: undefined,
       columnCode: undefined,
       columnCodes: undefined,
@@ -132,7 +125,6 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
   addColumn() {
     this.dataForDialog.columnName = undefined;
     this.dataForDialog.columnDisplayType = undefined;
-    this.dataForDialog.isColumnPrimaryKey = false;
     this.dataForDialog.columnLength = undefined;
     this.dataForDialog.columnCode = undefined;
     this.dataForDialog.type = 'new';
@@ -142,11 +134,12 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
     addColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
         this.columnData.push({
-          name: response.name,
+          columnName: response.name,
-          type: response.type,
+          columnDisplayType: response.type,
-          mandatory: response.mandatory,
+          isColumnNullable: !response.mandatory,
-          length: response.length,
+          columnLength: response.length,
-          code: response.code
+          columnCode: response.code,
+          type: 'new'
         });
         this.dataSource.connect().next(this.columnData);
       }
@@ -160,7 +153,6 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
   editColumn(column: any) {
     this.dataForDialog.columnName = column.name;
     this.dataForDialog.columnDisplayType = column.type;
-    this.dataForDialog.isColumnPrimaryKey = column.mandatory;
     this.dataForDialog.columnLength = column.length;
     this.dataForDialog.columnCode = column.code;
     this.dataForDialog.type = 'new';
@@ -169,12 +161,13 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
     });
     editColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
-        this.columnData[this.columnData.findIndex(newColumn => newColumn.name === column.name)] = {
+        this.columnData[this.columnData.findIndex(newColumn => newColumn.columnName === column.name)] = {
-          name: response.name,
+          columnName: response.name,
-          type: response.type,
+          columnDisplayType: response.type,
-          mandatory: response.mandatory,
+          isColumnNullable: !response.mandatory,
-          length: response.length,
+          columnLength: response.length,
-          code: response.code
+          columnCode: response.code,
+          type: 'existing'
         };
         this.dataSource.connect().next(this.columnData);
       }
@@ -202,7 +195,17 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
    * if successful redirects to view created data table.
    */
   submit() {
-    this.dataTableForm.value.columns = this.columnData;
+    const columns: any = [];
+    this.columnData.forEach((column: DatatableColumn) => {
+      columns.push({
+        name: column.columnName,
+        type: column.columnDisplayType,
+        code: column.columnCode,
+        length: column.columnLength,
+        mandatory: !column.isColumnNullable,
+      });
+    });
+    this.dataTableForm.value.columns = columns;
     this.systemService.createDataTable(this.dataTableForm.value).subscribe((response: any) => {
       if (this.configurationWizardService.showDatatablesForm === true) {
           this.configurationWizardService.showDatatablesForm = false;
@@ -279,5 +282,3 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
     });
   }
 }
-
-

src/app/system/manage-data-tables/datatable-column.model.ts

@@ -0,0 +1,12 @@
+
+export interface DatatableColumn {
+
+  columnName: string;
+  columnDisplayType: string;
+  isColumnNullable: boolean;
+  columnLength: string;
+  columnCode: string;
+  columnCodes?: any;
+  type: string;
+
+}

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

@@ -54,7 +54,7 @@
 
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-            <td mat-cell *matCellDef="let column"> {{ column.columnName }} </td>
+            <td mat-cell *matCellDef="let column"> {{ column.columnName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="type">
@@ -64,7 +64,12 @@
 
           <ng-container matColumnDef="mandatory">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Mandatory </th>
-            <td mat-cell *matCellDef="let column"> {{ column.isColumnPrimaryKey }} </td>
+            <td mat-cell *matCellDef="let column" class="left">
+              <fa-icon *ngIf="!column.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="column.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" matTooltipPosition="right"></fa-icon>
+            </td>
           </ng-container>
 
           <ng-container matColumnDef="length">
@@ -100,8 +105,8 @@
 
       <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"
+        <button mat-raised-button color="primary" [disabled]="!isFormEdited"
-          [disabled]="!isFormEdited" *mifosxHasPermission="'UPDATE_DATATABLE'">Submit</button>
+          *mifosxHasPermission="'UPDATE_DATATABLE'">Submit</button>
       </mat-card-actions>
 
     </form>

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

@@ -16,6 +16,7 @@ import { appTableData, entitySubTypeData } from '../app-table-data';
 /** Custom Components */
 import { ColumnDialogComponent } from '../column-dialog/column-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { DatatableColumn } from '../datatable-column.model';
 
 /**
  * Edit Data Table Component.
@@ -34,7 +35,7 @@ export class EditDataTableComponent implements OnInit {
   entitySubTypeData = entitySubTypeData;
   showEntitySubType: boolean;
   /** Column Data. */
-  columnData: any[];
+  columnData: DatatableColumn[];
   /** Application Table Data. */
   appTableData = appTableData;
   /** Boolean to check if form is edited or not. */
@@ -51,18 +52,10 @@ export class EditDataTableComponent implements OnInit {
     entitySubType: ''
   };
   /** Data passed to dialog. */
-  dataForDialog: {
+  dataForDialog: DatatableColumn = {
-    columnName: string,
-    columnDisplayType: string,
-    isColumnPrimaryKey: boolean,
-    columnLength: string,
-    columnCode: string,
-    columnCodes: any,
-    type: string
-  } = {
       columnName: undefined,
       columnDisplayType: undefined,
-      isColumnPrimaryKey: undefined,
+      isColumnNullable: undefined,
       columnLength: undefined,
       columnCode: undefined,
       columnCodes: undefined,
@@ -152,7 +145,7 @@ export class EditDataTableComponent implements OnInit {
   addColumn() {
     this.dataForDialog.columnName = undefined;
     this.dataForDialog.columnDisplayType = undefined;
-    this.dataForDialog.isColumnPrimaryKey = false;
+    this.dataForDialog.isColumnNullable = false;
     this.dataForDialog.columnLength = undefined;
     this.dataForDialog.columnCode = undefined;
     this.dataForDialog.type = 'new';
@@ -162,22 +155,33 @@ export class EditDataTableComponent implements OnInit {
     addColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
         this.isFormEdited = true;
-        this.dataTableChangesData.addColumns.push({
+        const newColumn: DatatableColumn = {
-          name: response.name,
-          type: response.type,
-          mandatory: response.mandatory,
-          length: response.length,
-          code: response.code
-        });
-        this.columnData.push({
           columnName: response.name,
           columnDisplayType: response.type,
-          isColumnPrimaryKey: response.mandatory,
+          isColumnNullable: !response.mandatory,
           columnLength: response.length,
           columnCode: response.code,
           type: 'new'
+        };
+        let alreadyExist = false;
+        this.columnData.forEach((column: DatatableColumn) => {
+          if ((newColumn.columnName === column.columnName) || (newColumn.columnName === column.columnName
+            && newColumn.columnDisplayType === column.columnDisplayType
+            && newColumn.isColumnNullable === column.isColumnNullable)) {
+              alreadyExist = true;
+            }
         });
-        this.dataSource.connect().next(this.columnData);
+        if (!alreadyExist) {
+          this.dataTableChangesData.addColumns.push({
+            name: response.name,
+            type: response.type,
+            mandatory: response.mandatory,
+            length: response.length,
+            code: response.code
+          });
+          this.columnData.push(newColumn);
+          this.dataSource.connect().next(this.columnData);
+        }
       }
     });
   }
@@ -189,7 +193,7 @@ export class EditDataTableComponent implements OnInit {
   editColumn(column: any) {
     this.dataForDialog.columnName = column.columnName;
     this.dataForDialog.columnDisplayType = column.columnDisplayType;
-    this.dataForDialog.isColumnPrimaryKey = column.isColumnPrimaryKey;
+    this.dataForDialog.isColumnNullable = !column.isColumnNullable;
     this.dataForDialog.columnLength = column.columnLength;
     this.dataForDialog.columnCode = column.columnCode;
     this.dataForDialog.type = column.type;
@@ -203,7 +207,7 @@ export class EditDataTableComponent implements OnInit {
           this.dataTableChangesData.addColumns[this.dataTableChangesData.addColumns
             .findIndex(newColumn => newColumn.name === column.columnName
                                     && newColumn.type === column.columnDisplayType
-                                    && newColumn.mandatory === column.isColumnPrimaryKey)] = {
+                                    && newColumn.mandatory === column.isColumnNullable)] = {
             name: response.name,
             type: response.type,
             code: response.code,
@@ -213,7 +217,7 @@ export class EditDataTableComponent implements OnInit {
           this.columnData[this.columnData.indexOf(column)] = {
             columnName: response.name,
             columnDisplayType: response.type,
-            isColumnPrimaryKey: response.mandatory,
+            isColumnNullable: !response.mandatory,
             columnLength: response.length,
             columnCode: response.code,
             type: 'new'
@@ -222,7 +226,7 @@ export class EditDataTableComponent implements OnInit {
           this.columnData[this.columnData.indexOf(column)] = {
             columnName: response.name,
             columnDisplayType: column.columnDisplayType,
-            isColumnPrimaryKey: column.isColumnPrimaryKey,
+            isColumnNullable: column.isColumnNullable,
             columnLength: column.columnLength,
             columnCode: column.columnCode,
             type: 'existing'
@@ -275,7 +279,7 @@ export class EditDataTableComponent implements OnInit {
           this.dataTableChangesData.addColumns.splice(this.dataTableChangesData.addColumns
             .findIndex(newColumn => newColumn.name === column.columnName
                                     && newColumn.type === column.columnDisplayType
-                                    && newColumn.mandatory === column.isColumnPrimaryKey), 1);
+                                    && newColumn.mandatory === column.isColumnNullable), 1);
         }
       }
     });

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

@@ -40,7 +40,7 @@
 
         <ng-container matColumnDef="columnName">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Field Name </th>
-            <td mat-cell *matCellDef="let dataTableColumn"> {{ dataTableColumn.columnName }} </td>
+            <td mat-cell *matCellDef="let dataTableColumn"> {{ dataTableColumn.columnName }}</td>
         </ng-container>
 
         <ng-container matColumnDef="columnDisplayType">
@@ -58,13 +58,13 @@
             <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnCode }} </td>
         </ng-container>
 
-        <ng-container matColumnDef="isColumnPrimaryKey">
+        <ng-container matColumnDef="isColumnNullable">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Mandatory </th>
-            <td mat-cell *matCellDef="let dataTable">
+            <td mat-cell *matCellDef="let dataTable" class="left">
-                <fa-icon *ngIf="dataTable.isColumnPrimaryKey" icon="check-circle" size="lg" class="column-primary-key"
+                <fa-icon *ngIf="!dataTable.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
                     matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-                <fa-icon *ngIf="!dataTable.isColumnPrimaryKey" icon="times-circle" size="lg"
+                <fa-icon *ngIf="dataTable.isColumnNullable" icon="times-circle" size="lg"
-                    class="not-column-primary-key" matTooltip="No" matTooltipPosition="right"></fa-icon>
+                    class="not-column-mandatory" matTooltip="No" matTooltipPosition="right"></fa-icon>
             </td>
         </ng-container>
 

src/app/system/manage-data-tables/view-data-table/view-data-table.component.scss

@@ -2,11 +2,3 @@ table {
     width: 100%;
 }
 
-// TODO: CONFIGURE THESE CLASSES GLOBALLY
-.column-primary-key {
-    color: #32cd32;
-}
-  
-.not-column-primary-key {
-    color: #f44366;
-}

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

@@ -27,7 +27,7 @@ export class ViewDataTableComponent implements OnInit {
   /** Column Data */
   columnsData: any;
   /** Columns to be displayed in columns table. */
-  displayedColumns: string[] = ['columnName', 'columnDisplayType', 'columnLength', 'columnCode', 'isColumnPrimaryKey'];
+  displayedColumns: string[] = ['columnName', 'columnDisplayType', 'columnLength', 'columnCode', 'isColumnNullable'];
   /** Data source for columns table. */
   dataSource: MatTableDataSource<any>;
 

src/assets/styles/_colours.scss

@@ -74,3 +74,13 @@ $status-matured: #ff4000;
 $state-done: #00ce00;
 $status-transfer-progress:#FF4000;
 $status-transfer-hold:#DF0101;
+
+.column-mandatory {
+  color: $status-active;
+  text-align: center;
+}
+
+.not-column-mandatory {
+  color: $status-inactive;
+  text-align: center;
+}