mirrors/Ride-The-Lightning-RTL
1
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL.git synced 2024-11-19 09:50:36 +01:00
Code Issues Projects Releases Wiki Activity

Page Layout Accordion

Browse Source
This commit is contained in:
ShahanaFarooqui 2022-11-15 19:35:01 -08:00
parent 7331ba1e50
commit 7c45b044d7
4 changed files with 52 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -13,6 +13,6 @@
<style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.74a7770ce3bccfdd.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.74a7770ce3bccfdd.css"></noscript></head> <style>@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:62.5%}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}</style><link rel="stylesheet" href="styles.74a7770ce3bccfdd.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.74a7770ce3bccfdd.css"></noscript></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.aa2ea472e0db94a2.js" type="module"></script><script src="polyfills.eddc63f1737a019a.js" type="module"></script><script src="main.83a29930fbd43097.js" type="module"></script> <script src="runtime.aa2ea472e0db94a2.js" type="module"></script><script src="polyfills.eddc63f1737a019a.js" type="module"></script><script src="main.a43527725564e63e.js" type="module"></script>
</body></html> </body></html>

1
frontend/main.83a29930fbd43097.js
View File

File diff suppressed because one or more lines are too long

1
frontend/main.a43527725564e63e.js Normal file
View File

File diff suppressed because one or more lines are too long

98
src/app/shared/components/node-config/page-settings/page-settings.component.html
View File

@ -5,55 +5,57 @@
<span class="page-title">Grid Settings</span> <span class="page-title">Grid Settings</span>
</div> </div>
<ng-container *ngIf="errorMessage && errorMessage.page === 'unknown'" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container> <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-accordion displayMode="flat" multi="false">
<mat-expansion-panel-header> <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-panel-title>{{selNode.lnImplementation === 'ECL' ? (page.pageId | camelCaseWithSpaces) : (page.pageId | camelcaseWithReplace:'_')}}</mat-panel-title> <mat-expansion-panel-header>
</mat-expansion-panel-header> <mat-panel-title>{{selNode.lnImplementation === 'ECL' ? (page.pageId | camelCaseWithSpaces) : (page.pageId | camelcaseWithReplace:'_')}}</mat-panel-title>
<div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables" class="padding-gap-x-large table-setting-row"> </mat-expansion-panel-header>
<div fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables" class="padding-gap-x-large table-setting-row">
<span fxFlex="10">{{selNode.lnImplementation === 'ECL' ? (table.tableId | camelCaseWithSpaces) : (table.tableId | camelcaseWithReplace:'_')}}:</span> <div fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field fxFlex="10"> <span fxFlex="10">{{selNode.lnImplementation === 'ECL' ? (table.tableId | camelCaseWithSpaces) : (table.tableId | camelcaseWithReplace:'_')}}:</span>
<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-form-field fxFlex="10">
<mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption"> <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>
{{pageSizeOption}} <mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
</mat-option> {{pageSizeOption}}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
<mat-form-field fxFlex="10"> </mat-form-field>
<mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{page.pageId}}{{table.tableId}}-sort-by" tabindex="3" required> <mat-form-field fxFlex="10">
<mat-option *ngFor="let field of table.columnSelection" [value]="field"> <mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{page.pageId}}{{table.tableId}}-sort-by" tabindex="3" required>
{{selNode.lnImplementation === 'ECL' ? (field | camelCaseWithSpaces) : (field | camelcaseWithReplace:'_')}} <mat-option *ngFor="let field of table.columnSelection" [value]="field">
</mat-option> {{selNode.lnImplementation === 'ECL' ? (field | camelCaseWithSpaces) : (field | camelcaseWithReplace:'_')}}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
<mat-form-field fxFlex="10"> </mat-form-field>
<mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{page.pageId}}{{table.tableId}}-sort-order" tabindex="4" required> <mat-form-field fxFlex="10">
<mat-option *ngFor="let so of sortOrders" [value]="so"> <mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{page.pageId}}{{table.tableId}}-sort-order" tabindex="4" required>
{{so === 'desc' ? 'Descending' : 'Ascending'}} <mat-option *ngFor="let so of sortOrders" [value]="so">
</mat-option> {{so === 'desc' ? 'Descending' : 'Ascending'}}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
<mat-form-field fxFlex="15"> </mat-form-field>
<mat-select [(ngModel)]="table.columnSelectionSM" placeholder="Column selection (Mobile)" name="{{page.pageId}}{{table.tableId}}-columns-selection-sm" tabindex="5" multiple required> <mat-form-field fxFlex="15">
<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))"> <mat-select [(ngModel)]="table.columnSelectionSM" placeholder="Column selection (Mobile)" name="{{page.pageId}}{{table.tableId}}-columns-selection-sm" tabindex="5" multiple required>
{{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}} <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))">
</mat-option> {{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}}
</mat-select> </mat-option>
<mat-hint>Column selected (mobile) should be between 1 and 3</mat-hint> </mat-select>
</mat-form-field> <mat-hint>Column selected (mobile) should be between 1 and 3</mat-hint>
<mat-form-field fxFlex="40"> </mat-form-field>
<mat-select [(ngModel)]="table.columnSelection" (selectionChange)="oncolumnSelectionChange(table)" placeholder="Column selection (Desktop)" name="{{page.pageId}}{{table.tableId}}-columns-selection" tabindex="6" multiple required> <mat-form-field fxFlex="40">
<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))"> <mat-select [(ngModel)]="table.columnSelection" (selectionChange)="oncolumnSelectionChange(table)" placeholder="Column selection (Desktop)" name="{{page.pageId}}{{table.tableId}}-columns-selection" tabindex="6" multiple required>
{{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}} <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))">
</mat-option> {{field.label ? field.label : (selNode.lnImplementation === 'ECL' ? (field.column | camelCaseWithSpaces) : (field.column | camelcaseWithReplace:'_'))}}
</mat-select> </mat-option>
<mat-hint>Number of column selected should be between 2 and {{nodePageDefs[page.pageId][table.tableId].maxColumns}}</mat-hint> </mat-select>
</mat-form-field> <mat-hint>Number of column selected should be between 2 and {{nodePageDefs[page.pageId][table.tableId].maxColumns}}</mat-hint>
<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> </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> </div>
</div> <ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container>
<ng-container *ngIf="errorMessage && errorMessage?.page === page.pageId" [ngTemplateOutlet]="errorObjectBlock" [ngTemplateOutletContext]="{error: errorMessage}"></ng-container> </mat-expansion-panel>
</mat-expansion-panel> </mat-accordion>
</form> </form>
<div fxLayout="row" class="mt-1"> <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('current')" tabindex="8">Reset</button>