Set autosize and min two rows in textarea controls (#1604)
Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>
This commit is contained in:
José Alberto Hernández
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
7bbab6423e
commit
475059a974
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -8,5 +8,7 @@ export interface DatatableColumn {
|
||||
columnCode: string;
|
||||
columnCodes?: any;
|
||||
type: string;
|
||||
isColumnUnique: boolean;
|
||||
isColumnIndexed: boolean;
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
Edit
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DATATABLE'">
|
||||
<fa-icon icon="edit"></fa-icon>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
Delete
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
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>
|
||||
|
||||
@@ -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>;
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
Key is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="name">
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div fxFlexFill fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!questionDatas.length">
|
||||
@@ -78,7 +78,7 @@
|
||||
Key is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48">
|
||||
<mat-label>Text</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text">
|
||||
@@ -89,7 +89,7 @@
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
@@ -101,11 +101,11 @@
|
||||
Add Option
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
|
||||
|
||||
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
|
||||
|
||||
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
|
||||
|
||||
<mat-form-field fxFlex="43%">
|
||||
@@ -131,10 +131,10 @@
|
||||
<div class="delete-wrapper">
|
||||
<button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -154,11 +154,11 @@
|
||||
Add Question
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Submit</button>
|
||||
</mat-card-actions>
|
||||
</mat-card-actions>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<div class="container">
|
||||
|
||||
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
|
||||
|
||||
|
||||
<div fxLayout="column" fxLayoutGap="4%">
|
||||
|
||||
|
||||
<mat-card>
|
||||
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Key</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key">
|
||||
@@ -17,7 +17,7 @@
|
||||
Key is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="name">
|
||||
@@ -25,7 +25,7 @@
|
||||
Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Country Code</mat-label>
|
||||
<input matInput maxlength="2" required formControlName="countryCode">
|
||||
@@ -36,26 +36,26 @@
|
||||
Country Code <strong>must consist of 2 alphabetic characters</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
|
||||
</mat-card>
|
||||
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
|
||||
|
||||
|
||||
<mat-card cdkDrag cdkDragLockAxis="y" formArrayName="questionDatas" *ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast">
|
||||
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
|
||||
<div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
|
||||
|
||||
|
||||
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
|
||||
<h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
|
||||
<button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
|
||||
@@ -63,7 +63,7 @@
|
||||
Delete Question
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Key</mat-label>
|
||||
<input matInput maxlength="32" required formControlName="key">
|
||||
@@ -71,7 +71,7 @@
|
||||
Key is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="48">
|
||||
<mat-label>Text</mat-label>
|
||||
<input matInput maxlength="255" required formControlName="text">
|
||||
@@ -79,14 +79,14 @@
|
||||
Text is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput formControlName="description"></textarea>
|
||||
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
|
||||
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mat-h4">Options</h4>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
|
||||
@@ -94,13 +94,13 @@
|
||||
Add Option
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div cdkDropList (cdkDropListDropped)="dropResponse($event, questionIndex)" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%">
|
||||
|
||||
|
||||
<div cdkDrag cdkDragLockAxis="y" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" formArrayName="responseDatas" *ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index;">
|
||||
|
||||
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
|
||||
|
||||
|
||||
<mat-form-field fxFlex="43%">
|
||||
<mat-label>Text</mat-label>
|
||||
<input matInput required formControlName="text">
|
||||
@@ -108,7 +108,7 @@
|
||||
Text is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field fxFlex="43%">
|
||||
<mat-label>Value</mat-label>
|
||||
<input matInput required formControlName="value">
|
||||
@@ -119,27 +119,27 @@
|
||||
Value <strong>must be an integer between -9999 and 9999</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<div fxFlex="8%">
|
||||
<div class="delete-wrapper">
|
||||
<button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</mat-card-content>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
|
||||
<button type="button" mat-raised-button color="primary" (click)="addQuestion()">
|
||||
@@ -147,16 +147,16 @@
|
||||
Add Question
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Edit Survey</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</mat-card-actions>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user