You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
6.0 KiB
HTML
79 lines
6.0 KiB
HTML
<div [perfectScrollbar] fxLayout="column" fxFlex="100" id="head">
|
|
<form fxLayout="column" fxLayoutAlign="start stretch" class="settings-container page-sub-title-container mt-1" #form="ngForm">
|
|
<div fxLayout="row">
|
|
<fa-icon [icon]="faPenRuler" class="page-title-img mr-1"></fa-icon>
|
|
<span class="page-title">Grid Settings</span>
|
|
</div>
|
|
<ng-container *ngIf="errorMessage && errorMessage.page === 'unknown'" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
|
|
<mat-accordion displayMode="flat" multi="false">
|
|
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" [ngClass]="{'error-border': errorMessage?.page === page.pageId}" expanded="false" *ngFor="let page of pageSettings">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>{{page.pageId | camelcaseWithReplace:'_'}}</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables" class="padding-gap-x-large table-setting-row">
|
|
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center">
|
|
<span fxFlex="10">{{table.tableId | camelcaseWithReplace:'_'}}:</span>
|
|
<mat-form-field fxFlex="10">
|
|
<mat-select [disabled]="nodePageDefs[page.pageId][table.tableId].disablePageSize" [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{page.pageId}}{{table.tableId}}-page-size-options" tabindex="2" required>
|
|
<mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
|
|
{{pageSizeOption}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="10">
|
|
<mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{page.pageId}}{{table.tableId}}-sort-by" tabindex="3" required>
|
|
<mat-option *ngFor="let field of table.columnSelection" [value]="field">
|
|
{{selNode.lnImplementation === 'ECL' ? (field | camelCaseWithSpaces) : (field | camelcaseWithReplace:'_')}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="10">
|
|
<mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{page.pageId}}{{table.tableId}}-sort-order" tabindex="4" required>
|
|
<mat-option *ngFor="let so of sortOrders" [value]="so">
|
|
{{so === 'desc' ? 'Descending' : 'Ascending'}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="35" *ngIf="screenSize !== screenSizeEnum.XS" matTooltip="Select a minimum of 2 columns">
|
|
<mat-select [(ngModel)]="table.columnSelection" (selectionChange)="oncolumnSelectionChange(table)" placeholder="Column selection (Desktop Resolution)" name="{{page.pageId}}{{table.tableId}}-columns-selection" tabindex="6" multiple required>
|
|
<mat-option *ngFor="let field of nodePageDefs[page.pageId][table.tableId].allowedColumns" [value]="field.column" [disabled]="(table.columnSelection.length <= 2 && table.columnSelection.includes(field.column))">
|
|
{{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="15" matTooltip="Select between 1 and 3 columns">
|
|
<mat-select [(ngModel)]="table.columnSelectionSM" placeholder="Column Selection (Mobile Resolution)" name="{{page.pageId}}{{table.tableId}}-columns-selection-sm" tabindex="5" multiple required>
|
|
<mat-option *ngFor="let field of nodePageDefs[page.pageId][table.tableId].allowedColumns" [value]="field.column" [disabled]="(table.columnSelectionSM.length <= 1 && table.columnSelectionSM.includes(field.column)) || (table.columnSelectionSM.length >= 3 && !table.columnSelectionSM.includes(field.column))">
|
|
{{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<button mat-icon-button color="primary" type="button" tabindex="7" (click)="onTableReset(page.pageId, table)" matTooltip="Reset to Default"><mat-icon [ngClass]="{'ml-minus-1': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">restore</mat-icon></button>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</form>
|
|
<div fxLayout="row" class="mt-1">
|
|
<button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings('current')" tabindex="8">Reset</button>
|
|
<button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings('default')" tabindex="9">Reset to Default</button>
|
|
<button mat-flat-button color="primary" (click)="onUpdatePageSettings()" tabindex="10">Save</button>
|
|
</div>
|
|
</div>
|
|
<ng-template #errorObjectBlock let-error="error">
|
|
<div [ngClass]="{'error-border p-2': errorMessage.page === 'unknown'}">
|
|
<mat-panel-title *ngIf="errorMessage.page === 'unknown'">Page {{error.page | titlecase}}</mat-panel-title>
|
|
<mat-list role="list">
|
|
<mat-list-item *ngIf="error.message">
|
|
<mat-icon class="ml-1 icon-small red">close</mat-icon>
|
|
<span>{{error.message}}</span>
|
|
</mat-list-item>
|
|
<mat-list-item *ngFor="let table of error.tables">
|
|
<mat-icon class="ml-1 icon-small red">close</mat-icon>
|
|
<span>Table {{table.table | titlecase}} {{table.message}}</span>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</ng-template>
|