< 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-expansion-panel fxLayout = "column" class = "flat-expansion-panel mt-1" [ ngClass ] = " { ' error-border ' : errorMessage ? . page = == page . pageId } " expanded = "true" * ngFor = "let page of pageSettings" >
< mat-expansion-panel-header >
< mat-panel-title > {{selNode.lnImplementation === 'ECL' ? (page.pageId | camelCaseWithSpaces) : (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 = "row" fxLayoutAlign = "space-between center" >
< span fxFlex = "10" > {{selNode.lnImplementation === 'ECL' ? (table.tableId | camelCaseWithSpaces) : (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 = "15" >
< mat-select [ ( ngModel ) ] = " table . columnSelectionSM " placeholder = "Column selection (Mobile)" 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-hint > Column selected (mobile) should be between 1 and 3< / mat-hint >
< / mat-form-field >
< mat-form-field fxFlex = "40" >
< mat-select [ ( ngModel ) ] = " table . columnSelection " ( selectionChange ) = " oncolumnSelectionChange ( table ) " placeholder = "Column selection (Desktop)" 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 ) ) | | ( table . columnSelection . length > = nodePageDefs[page.pageId][table.tableId].maxColumns & & !table.columnSelection.includes(field.column))">
{{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}}
< / mat-option >
< / mat-select >
< mat-hint > Number of column selected should be between 2 and {{nodePageDefs[page.pageId][table.tableId].maxColumns}}< / mat-hint >
< / mat-form-field >
< button mat-icon-button color = "primary" type = "button" tabindex = "7" ( click ) = " onTableReset ( page . pageId , table ) " matTooltip = "Reset to Default" > < mat-icon > restore< / mat-icon > < / button >
< / div >
< / div >
< ng-container * ngIf = "errorMessage && errorMessage?.page === page.pageId" [ ngTemplateOutlet ] = " errorObjectBlock " [ ngTemplateOutletContext ] = " { error: errorMessage } " > < / ng-container >
< / mat-expansion-panel >
< / 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 >