Set autosize and min two rows in textarea controls (#1604)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -23,16 +23,12 @@
         </mat-select>
       </mat-form-field>
 
-      <div>
-        <mat-checkbox labelPosition="before" formControlName="mandatory">Mandatory</mat-checkbox>
-      </div>
-
-      <mat-form-field>
+      <mat-form-field *ngIf="columnForm.value.type === 'String'">
         <mat-label>Column Length</mat-label>
         <input matInput required type="number" formControlName="length">
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field *ngIf="columnForm.value.type === 'Dropdown'">
         <mat-label>Column Code</mat-label>
         <mat-select required formControlName="code">
           <mat-option *ngFor="let columnCode of data.columnCodes" [value]="columnCode.name">
@@ -41,6 +37,18 @@
         </mat-select>
       </mat-form-field>
 
+      <div>
+        <mat-checkbox labelPosition="after" formControlName="mandatory">Mandatory</mat-checkbox>
+      </div>
+
+      <div>
+        <mat-checkbox labelPosition="after" formControlName="unique">Unique</mat-checkbox>
+      </div>
+
+      <div>
+        <mat-checkbox labelPosition="after" formControlName="indexed">Indexed</mat-checkbox>
+      </div>
+
     </div>
 
   </form>

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

@@ -37,9 +37,11 @@ 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],
+      'length': [{ value: this.data ? + this.data.columnLength : '', disabled: this.getColumnType(this.data.columnDisplayType) !== 'String' || this.data.type === 'existing' }, Validators.required],
       '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]
+      'unique': [{ value: this.data.isColumnUnique, disabled: this.data.isColumnNullable || this.data.type === 'existing' }],
+      'indexed': [{ value: this.data.isColumnIndexed, disabled: this.data.type === 'existing' }],
+      'code': [{ value: this.data ? this.data.columnCode : '', disabled: this.getColumnType(this.data.columnDisplayType) !== 'Dropdown' || this.data.type === 'existing' }, Validators.required],
     });
     this.onColumnTypeChanges();
   }

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

@@ -49,7 +49,9 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
       columnLength: undefined,
       columnCode: undefined,
       columnCodes: undefined,
-      type: undefined
+      type: undefined,
+      isColumnUnique: undefined,
+      isColumnIndexed: undefined
     };
   /** Columns to be displayed in columns table. */
   displayedColumns: string[] = ['name', 'type', 'mandatory', 'length', 'code', 'actions'];
@@ -127,9 +129,13 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
     this.dataForDialog.columnDisplayType = undefined;
     this.dataForDialog.columnLength = undefined;
     this.dataForDialog.columnCode = undefined;
+    this.dataForDialog.isColumnUnique = undefined;
+    this.dataForDialog.isColumnIndexed = undefined;
     this.dataForDialog.type = 'new';
     const addColumnDialogRef = this.dialog.open(ColumnDialogComponent, {
-      data: this.dataForDialog
+      data: this.dataForDialog,
+      height: '450px',
+      width: '400px'
     });
     addColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
@@ -137,6 +143,8 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
           columnName: response.name,
           columnDisplayType: response.type,
           isColumnNullable: !response.mandatory,
+          isColumnUnique: response.unique,
+          isColumnIndexed: response.indexed,
           columnLength: response.length,
           columnCode: response.code,
           type: 'new'
@@ -155,9 +163,13 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
     this.dataForDialog.columnDisplayType = column.type;
     this.dataForDialog.columnLength = column.length;
     this.dataForDialog.columnCode = column.code;
+    this.dataForDialog.isColumnUnique = column.unique;
+    this.dataForDialog.isColumnIndexed = column.indexed;
     this.dataForDialog.type = 'new';
     const editColumnDialogRef = this.dialog.open(ColumnDialogComponent, {
-      data: this.dataForDialog
+      data: this.dataForDialog,
+      height: '450px',
+      width: '400px'
     });
     editColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
@@ -165,6 +177,8 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
           columnName: response.name,
           columnDisplayType: response.type,
           isColumnNullable: !response.mandatory,
+          isColumnUnique: response.unique,
+          isColumnIndexed: response.indexed,
           columnLength: response.length,
           columnCode: response.code,
           type: 'existing'
@@ -203,6 +217,8 @@ export class CreateDataTableComponent implements OnInit, AfterViewInit {
         code: column.columnCode,
         length: column.columnLength,
         mandatory: !column.isColumnNullable,
+        unique: column.isColumnUnique,
+        indexed: column.isColumnIndexed
       });
     });
     this.dataTableForm.value.columns = columns;

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

@@ -8,5 +8,7 @@ export interface DatatableColumn {
   columnCode: string;
   columnCodes?: any;
   type: string;
+  isColumnUnique: boolean;
+  isColumnIndexed: boolean;
 
 }

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

@@ -53,38 +53,58 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Name </th>
             <td mat-cell *matCellDef="let column"> {{ column.columnName }}</td>
           </ng-container>
 
           <ng-container matColumnDef="type">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Type </th>
             <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" 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>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Length </th>
             <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>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Code </th>
             <td mat-cell *matCellDef="let column"> {{ column.columnCode }} </td>
           </ng-container>
 
+          <ng-container matColumnDef="mandatory">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Mandatory </th>
+            <td mat-cell *matCellDef="let column" class="center">
+              <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="unique">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Unique </th>
+            <td mat-cell *matCellDef="let column" class="center">
+              <fa-icon *ngIf="column.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="!column.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" unique="right"></fa-icon>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="indexed">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Indexed </th>
+            <td mat-cell *matCellDef="let column" class="center">
+              <fa-icon *ngIf="column.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
+                matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+              <fa-icon *ngIf="!column.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
+                matTooltip="No" matTooltipPosition="right"></fa-icon>
+            </td>
+          </ng-container>
+
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
-            <td mat-cell *matCellDef="let column" fxLayoutGap="15%">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Actions </th>
+            <td mat-cell *matCellDef="let column" fxLayoutGap="15%" class="center">
               <button type="button" color="primary" mat-icon-button (click)="editColumn(column)" *ngIf="!column.system">
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>

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

@@ -45,8 +45,8 @@ export class EditDataTableComponent implements OnInit {
     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 }[]
+    changeColumns: { name: string, newName?: string, code?: string, newCode?: string, mandatory: boolean, length?: number, unique?: boolean, indexed?: boolean  }[],
+    addColumns?: { name?: string, type?: string, code?: string, mandatory?: boolean, length?: number, unique?: boolean, indexed?: boolean }[]
   } = {
     apptableName: '', changeColumns: [], addColumns: [], dropColumns: [],
     entitySubType: ''
@@ -59,10 +59,12 @@ export class EditDataTableComponent implements OnInit {
       columnLength: undefined,
       columnCode: undefined,
       columnCodes: undefined,
-      type: undefined
+      type: undefined,
+      isColumnUnique: undefined,
+      isColumnIndexed: undefined
     };
   /** Columns to be displayed in columns table. */
-  displayedColumns: string[] = ['name', 'type', 'mandatory', 'length', 'code', 'actions'];
+  displayedColumns: string[] = ['name', 'type', 'mandatory', 'length', 'code', 'unique', 'indexed', 'actions'];
   /** Data source for columns table. */
   dataSource: MatTableDataSource<any>;
   /** Paginator for columns table. */
@@ -146,11 +148,15 @@ export class EditDataTableComponent implements OnInit {
     this.dataForDialog.columnName = undefined;
     this.dataForDialog.columnDisplayType = undefined;
     this.dataForDialog.isColumnNullable = false;
+    this.dataForDialog.isColumnUnique = false;
+    this.dataForDialog.isColumnIndexed = false;
     this.dataForDialog.columnLength = undefined;
     this.dataForDialog.columnCode = undefined;
     this.dataForDialog.type = 'new';
     const addColumnDialogRef = this.dialog.open(ColumnDialogComponent, {
-      data: this.dataForDialog
+      data: this.dataForDialog,
+      height: '450px',
+      width: '400px'
     });
     addColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
@@ -159,6 +165,8 @@ export class EditDataTableComponent implements OnInit {
           columnName: response.name,
           columnDisplayType: response.type,
           isColumnNullable: !response.mandatory,
+          isColumnUnique: response.unique,
+          isColumnIndexed: response.indexed,
           columnLength: response.length,
           columnCode: response.code,
           type: 'new'
@@ -176,6 +184,8 @@ export class EditDataTableComponent implements OnInit {
             name: response.name,
             type: response.type,
             mandatory: response.mandatory,
+            unique: response.unique,
+            indexed: response.indexed,
             length: response.length,
             code: response.code
           });
@@ -194,11 +204,15 @@ export class EditDataTableComponent implements OnInit {
     this.dataForDialog.columnName = column.columnName;
     this.dataForDialog.columnDisplayType = column.columnDisplayType;
     this.dataForDialog.isColumnNullable = !column.isColumnNullable;
+    this.dataForDialog.isColumnUnique = !column.isColumnUnique;
+    this.dataForDialog.isColumnIndexed = !column.isColumnIndexed;
     this.dataForDialog.columnLength = column.columnLength;
     this.dataForDialog.columnCode = column.columnCode;
     this.dataForDialog.type = column.type;
     const editColumnDialogRef = this.dialog.open(ColumnDialogComponent, {
-      data: this.dataForDialog
+      data: this.dataForDialog,
+      height: '450px',
+      width: '400px'
     });
     editColumnDialogRef.afterClosed().subscribe((response: any) => {
       if (response !== '') {
@@ -218,6 +232,8 @@ export class EditDataTableComponent implements OnInit {
             columnName: response.name,
             columnDisplayType: response.type,
             isColumnNullable: !response.mandatory,
+            isColumnUnique: response.unique,
+            isColumnIndexed: response.indexed,
             columnLength: response.length,
             columnCode: response.code,
             type: 'new'
@@ -227,6 +243,8 @@ export class EditDataTableComponent implements OnInit {
             columnName: response.name,
             columnDisplayType: column.columnDisplayType,
             isColumnNullable: column.isColumnNullable,
+            isColumnUnique: column.unique,
+            isColumnIndexed: column.indexed,
             columnLength: column.columnLength,
             columnCode: column.columnCode,
             type: 'existing'

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

@@ -1,78 +1,97 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
-    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DATATABLE'">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-        Edit
-    </button>
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DATATABLE'">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
 
-    <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
-        Delete
-    </button>
+  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
+  </button>
 
 </div>
 
 <div class="container m-b-15" fxLayoutAlign="start">
 
-    <mat-card>
+  <mat-card>
 
-        <mat-card-content>
+    <mat-card-content>
 
-            <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="12px">
-                <div class="mat-body-strong">
-                    Associated With
-                </div>
-                <div>
-                    {{ dataTableData.applicationTableName }}
-                </div>
+      <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="12px">
+        <div class="mat-body-strong">
+          Associated With
+        </div>
+        <div>
+          {{ dataTableData.applicationTableName }}
+        </div>
 
-            </div>
+      </div>
 
-        </mat-card-content>
+    </mat-card-content>
 
-    </mat-card>
+  </mat-card>
 
 </div>
 
 <div class="container mat-elevation-z8">
 
-    <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort>
 
-        <ng-container matColumnDef="columnName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Field Name </th>
-            <td mat-cell *matCellDef="let dataTableColumn"> {{ dataTableColumn.columnName }}</td>
-        </ng-container>
+    <ng-container matColumnDef="columnName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Field Name </th>
+      <td mat-cell *matCellDef="let dataTableColumn"> {{ dataTableColumn.columnName }}</td>
+    </ng-container>
 
-        <ng-container matColumnDef="columnDisplayType">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
-            <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnDisplayType }} </td>
-        </ng-container>
+    <ng-container matColumnDef="columnDisplayType">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Type </th>
+      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnDisplayType }} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="columnLength">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Length </th>
-            <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnLength }} </td>
-        </ng-container>
+    <ng-container matColumnDef="columnLength">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Length </th>
+      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnLength }} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="columnCode">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>
-            <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnCode }} </td>
-        </ng-container>
+    <ng-container matColumnDef="columnCode">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Code </th>
+      <td mat-cell *matCellDef="let dataTable"> {{ dataTable.columnCode }} </td>
+    </ng-container>
 
-        <ng-container matColumnDef="isColumnNullable">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Mandatory </th>
-            <td mat-cell *matCellDef="let dataTable" class="left">
-                <fa-icon *ngIf="!dataTable.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
-                    matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-                <fa-icon *ngIf="dataTable.isColumnNullable" icon="times-circle" size="lg"
-                    class="not-column-mandatory" matTooltip="No" matTooltipPosition="right"></fa-icon>
-            </td>
-        </ng-container>
+    <ng-container matColumnDef="isColumnNullable">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Mandatory </th>
+      <td mat-cell *matCellDef="let dataTable" class="center">
+        <fa-icon *ngIf="!dataTable.isColumnNullable" icon="check-circle" size="lg" class="column-mandatory"
+          matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+        <fa-icon *ngIf="dataTable.isColumnNullable" icon="times-circle" size="lg" class="not-column-mandatory"
+          matTooltip="No" matTooltipPosition="right"></fa-icon>
+      </td>
+    </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <ng-container matColumnDef="isColumnUnique">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Unique </th>
+      <td mat-cell *matCellDef="let dataTable" class="center">
+        <fa-icon *ngIf="dataTable.isColumnUnique" icon="check-circle" size="lg" class="column-mandatory"
+          matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+        <fa-icon *ngIf="!dataTable.isColumnUnique" icon="times-circle" size="lg" class="not-column-mandatory"
+          matTooltip="No" matTooltipPosition="right"></fa-icon>
+      </td>
+    </ng-container>
 
-    </table>
+    <ng-container matColumnDef="isColumnIndexed">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> Indexed </th>
+      <td mat-cell *matCellDef="let dataTable" class="center">
+        <fa-icon *ngIf="dataTable.isColumnIndexed" icon="check-circle" size="lg" class="column-mandatory"
+          matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+        <fa-icon *ngIf="!dataTable.isColumnIndexed" icon="times-circle" size="lg" class="not-column-mandatory"
+          matTooltip="No" matTooltipPosition="right"></fa-icon>
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
 </div>

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', 'isColumnNullable'];
+  displayedColumns: string[] = ['columnName', 'columnDisplayType', 'columnLength', 'columnCode', 'isColumnNullable', 'isColumnUnique', 'isColumnIndexed'];
   /** Data source for columns table. */
   dataSource: MatTableDataSource<any>;