< div [ perfectScrollbar ] fxLayout = "column" fxFlex = "100" >
< 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" > Page 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 > {{page.pageId | titlecase}}< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" fxLayoutAlign = "start stretch" * ngFor = "let table of page.tables" class = "padding-gap-x-large" >
< div fxLayout = "row" fxLayoutAlign = "space-between center" class = "mt-1" >
< mat-form-field fxFlex = "10" >
< mat-select [ ( ngModel ) ] = " table . recordsPerPage " placeholder = "Records/Page" name = "{{table.tableId}}-page-size-options" tabindex = "1" 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 = "{{table.tableId}}-sort-by" tabindex = "2" required >
< mat-option * ngFor = "let field of table.showColumns" [ value ] = " field " >
{{field | camelcaseWithReplace:'_'}}
< / mat-option >
< / mat-select >
< / mat-form-field >
< mat-form-field fxFlex = "10" >
< mat-select [ ( ngModel ) ] = " table . sortOrder " placeholder = "Sort Order" name = "{{table.tableId}}-sort-order" tabindex = "3" 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 = "13" >
< mat-select [ ( ngModel ) ] = " table . showColumnsSM " placeholder = "Small Screen Columns" name = "{{table.tableId}}-show-columns-sm" tabindex = "4" multiple required >
< mat-option * ngFor = "let field of table.showColumns" [ value ] = " field " [ disabled ] = " ( table . showColumns . length < = 1 & & table . showColumns . includes ( field ) ) | | ( table . showColumns . length > = 2 & & !table.showColumns.includes(field))">
{{field | camelcaseWithReplace:'_'}}
< / mat-option >
< / mat-select >
< mat-hint > Small screen selected columns should be between 1 and 2< / mat-hint >
< / mat-form-field >
< mat-form-field fxFlex = "55" >
< mat-select [ ( ngModel ) ] = " table . showColumns " ( selectionChange ) = " onShowColumnsChange ( table ) " placeholder = "Show Columns" name = "{{table.tableId}}-show-columns" tabindex = "5" multiple required >
< mat-option * ngFor = "let field of tableFieldsDef[table.tableId].allowedColumns" [ value ] = " field " [ disabled ] = " ( table . showColumns . length < = 2 & & table . showColumns . includes ( field ) ) | | ( table . showColumns . length > = tableFieldsDef[table.tableId].maxColumns & & !table.showColumns.includes(field))">
{{field | camelcaseWithReplace:'_'}}
< / mat-option >
< / mat-select >
< mat-hint > Total selected columns should be between 2 and {{tableFieldsDef[table.tableId].maxColumns}}< / mat-hint >
< / mat-form-field >
< / 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 ( ) " tabindex = "6" > Reset< / button >
< button mat-flat-button color = "primary" ( click ) = " onUpdatePageSettings ( ) " tabindex = "7" > 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 >