You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
8.0 KiB
127 lines
8.0 KiB
5 months ago
|
<mat-sidenav-container hasBackdrop="true">
|
||
|
|
<mat-sidenav #$filter mode="over" position="end" autoFocus="false">
|
||
|
|
<form autocomplete="off" [formGroup]="filter.form">
|
||
|
|
<ng-container *ngFor="let item of filter.controls | sort: 'order'">
|
||
|
|
<ng-template [ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{ $implicit: filter.form, form: filter.form, field: item }" *ngIf="item.template;else $control"></ng-template>
|
||
|
|
<ng-template #$control [ngSwitch]="item.type">
|
||
|
|
<mat-form-field *ngSwitchCase="'text'">
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<input matInput [formControlName]="item.id">
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field *ngSwitchCase="'number'">
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<input type="number" matInput [formControlName]="item.id" [min]="item.range && item.range[0]" [max]="item.range && item.range[1]">
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field *ngSwitchCase="'select'">
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<mat-select [formControlName]="item.id">
|
||
|
|
<mat-option *ngFor="let i of item.range" [value]="i.id">{{i.name}}</mat-option>
|
||
|
|
</mat-select>
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field *ngSwitchCase="'multi-select'">
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<mat-select [formControlName]="item.id" multiple>
|
||
|
|
<mat-option *ngFor="let i of item.range" [value]="i.id">{{i.name}}</mat-option>
|
||
|
|
</mat-select>
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field *ngSwitchCase="'date-range'">
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<mat-date-range-input [rangePicker]="$picker">
|
||
|
|
<input matStartDate readonly [formControlName]="item.id + 'From'" (focus)="$picker.open()">
|
||
|
|
<input matEndDate readonly [formControlName]="item.id + 'To'" (focus)="$picker.open()">
|
||
|
|
</mat-date-range-input>
|
||
|
|
<mat-datepicker-toggle matSuffix [for]="$picker"></mat-datepicker-toggle>
|
||
|
|
<mat-date-range-picker #$picker></mat-date-range-picker>
|
||
|
|
</mat-form-field>
|
||
|
|
<mat-form-field *ngSwitchDefault>
|
||
|
|
<mat-label>{{ item.label | translate }}</mat-label>
|
||
|
|
<input matInput [formControlName]="item.id">
|
||
|
|
</mat-form-field>
|
||
|
|
</ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</form>
|
||
|
|
<button mat-flat-button color="primary" (click)="search();$filter.toggle()">{{ 'shared.operation.filter' | translate | uppercase }}</button>
|
||
|
|
<button mat-stroked-button (click)="reset();$filter.toggle()">{{ 'shared.operation.reset' | translate | uppercase }}</button>
|
||
|
|
</mat-sidenav>
|
||
|
|
<mat-sidenav-content [loading]="loading">
|
||
|
|
<div class="row-auto">
|
||
|
|
<mat-toolbar *ngIf="selection.hasValue();else $toolbar" class="app-background-primary-lighter">
|
||
|
|
<span class="spacer app-foreground-primary">{{ 'shared.data.selected' | translate : { len : selection.selected.length } }}</span>
|
||
|
|
<ng-template *ngIf="toolbarSelectionTemplate" [ngTemplateOutlet]="toolbarSelectionTemplate" [ngTemplateOutletContext]="{ $implicit: selection.selected, selected: selection.selected }"></ng-template>
|
||
|
|
<button mat-icon-button *ngIf="deletable" matTooltip="{{ 'shared.operation.deletes' | translate }}" (click)="delete()">
|
||
|
|
<mat-icon>delete</mat-icon>
|
||
|
|
</button>
|
||
|
|
</mat-toolbar>
|
||
|
|
<ng-template #$toolbar>
|
||
|
|
<mat-toolbar class="app-background-card">
|
||
|
|
<ng-template *ngIf="toolbarTemplate;else $buttons" [ngTemplateOutlet]="toolbarTemplate"></ng-template>
|
||
|
|
<ng-template #$buttons>
|
||
|
|
<button mat-button *ngIf="addable" color="primary" (click)="edit()">{{ 'shared.operation.add' | translate | uppercase }}</button>
|
||
|
|
<ng-template *ngIf="toolbarButtonsTemplate" [ngTemplateOutlet]="toolbarButtonsTemplate"></ng-template>
|
||
|
|
<button mat-button color="primary" (click)="refresh({ action: 'reload' })">{{ 'shared.operation.reload' | translate | uppercase }}</button>
|
||
|
|
<span class="spacer"></span>
|
||
|
|
</ng-template>
|
||
|
|
<ng-template *ngIf="toolbarIconsTemplate" [ngTemplateOutlet]="toolbarIconsTemplate"></ng-template>
|
||
|
|
<button mat-icon-button *ngIf="!fixed" matTooltip="{{ 'shared.operation.personalize' | translate }}" [matMenuTriggerFor]="$columns">
|
||
|
|
<mat-icon>flip</mat-icon>
|
||
|
|
<mat-menu #$columns>
|
||
|
|
<table-column-pattern [columns]="columns"></table-column-pattern>
|
||
|
|
</mat-menu>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button *ngIf="filter.enabled" matTooltip="{{ 'shared.operation.filter' | translate }}" (click)="$filter.toggle()">
|
||
|
|
<mat-icon>filter_list</mat-icon>
|
||
|
|
</button>
|
||
|
|
</mat-toolbar>
|
||
|
|
<mat-divider></mat-divider>
|
||
|
|
</ng-template>
|
||
|
|
</div>
|
||
|
|
<div class="row-fill">
|
||
|
|
<table mat-table [multiTemplateDataRows]="rowExpandingTemplate" [dataSource]="rows" matSort (matSortChange)="refresh($event)">
|
||
|
|
<ng-container [matColumnDef]="item.id" [ngSwitch]="item.id" *ngFor="let item of columns" [sticky]="item.sticky=='start'" [stickyEnd]="item.sticky=='end'">
|
||
|
|
<ng-container *ngSwitchCase="'@selection'">
|
||
|
|
<th mat-header-cell *matHeaderCellDef style="width: 22px; padding-right: 24px;">
|
||
|
|
<table-row-selection [model]="selection" [data]="rows" *ngIf="selectable=='multiple'"></table-row-selection>
|
||
|
|
</th>
|
||
|
|
<td mat-cell *matCellDef="let row" style="padding-right: 24px;">
|
||
|
|
<table-row-selection [model]="selection" [data]="row"></table-row-selection>
|
||
|
|
</td>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngSwitchCase="'@operation'">
|
||
|
|
<th mat-header-cell *matHeaderCellDef style="width: 40px; padding-right: 16px;"></th>
|
||
|
|
<td mat-cell *matCellDef="let row" style="padding-right: 16px; text-align: right;">
|
||
|
|
<ng-template *ngIf="rowOperationTemplate" [ngTemplateOutlet]="rowOperationTemplate" [ngTemplateOutletContext]="{ $implicit: row, field: item, data: row }"></ng-template>
|
||
|
|
<button mat-icon-button *ngIf="editable" matTooltip="{{ 'shared.operation.edit' | translate }}" (click)="edit(row)">
|
||
|
|
<mat-icon>edit</mat-icon>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container *ngSwitchDefault>
|
||
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]="item.style" [disabled]="item.sortable===false">{{ item.header | translate }}</th>
|
||
|
|
<td mat-cell *matCellDef="let row" [ngStyle]="item.style">
|
||
|
|
<ng-template *ngIf="item.template; else $text" [ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{ $implicit: row, field: item, data: row }"></ng-template>
|
||
|
|
<ng-template #$text>{{ item.convertor ? item.convertor(row[item.id]) : row[item.id] }}</ng-template>
|
||
|
|
</td>
|
||
|
|
</ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-container matColumnDef="@expanding">
|
||
|
|
<td mat-cell *matCellDef="let row" [attr.colspan]="columns?.length">
|
||
|
|
<ng-template [ngTemplateOutlet]="rowExpandingTemplate" [ngTemplateOutletContext]="{ $implicit: row, data: row }"></ng-template>
|
||
|
|
</td>
|
||
|
|
</ng-container>
|
||
|
|
<tr mat-header-row *matHeaderRowDef="columns?.display; sticky: true"></tr>
|
||
|
|
<tr mat-row *matRowDef="let row; columns: columns?.display;" [ngClass]="rowClass && rowClass(row)"></tr>
|
||
|
|
<ng-container *ngIf="rowExpandingTemplate">
|
||
|
|
<tr mat-row class="expanding" *matRowDef="let row; columns: ['@expanding']"></tr>
|
||
|
|
</ng-container>
|
||
|
|
<tr class="mat-row" [hidden]="loading" *matNoDataRow>
|
||
|
|
<td class="mat-cell no-data" [attr.colspan]="columns?.length">{{'shared.data.empty' | translate}}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="row-auto" *ngIf="pageable">
|
||
|
|
<mat-divider></mat-divider>
|
||
|
|
<mat-paginator [length]="total" [pageIndex]="pageIndex" [pageSize]="pageSize" (page)="refresh($event)"></mat-paginator>
|
||
|
|
</div>
|
||
|
|
</mat-sidenav-content>
|
||
|
|
</mat-sidenav-container>
|