init order

This commit is contained in:
_Bastler 2021-12-15 13:25:10 +01:00
parent 71f6a352f1
commit 572a1c8a45
3 changed files with 54 additions and 57 deletions

View File

@ -1,25 +1,26 @@
<table mat-table matSort [dataSource]="permissions" (matSortChange)="sortData($event)"> <table mat-table matSort [dataSource]="permissions" (matSortChange)="sortData($event)" matSortActive="name"
<ng-container matColumnDef="name"> matSortDirection="asc">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'permissions.name' | i18n}} </th> <ng-container matColumnDef="name">
<td mat-cell *matCellDef="let permission"> <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'permissions.name' | i18n}} </th>
<mat-icon inline=true>{{'services.' + permission.name + '.icon' | i18n}}</mat-icon> <td mat-cell *matCellDef="let permission">
{{'services.' + permission.name + '.title' | i18n}} <mat-icon inline=true>{{'services.' + permission.name + '.icon' | i18n}}</mat-icon>
<mat-icon inline=true *ngIf="permission.addon">add_circle</mat-icon> {{'services.' + permission.name + '.title' | i18n}}
<br> <mat-icon inline=true *ngIf="permission.addon">add_circle</mat-icon>
<small>{{'services.' + permission.name + '.subtitle' | i18n}}</small> <br>
</td> <small>{{'services.' + permission.name + '.subtitle' | i18n}}</small>
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="starts"> <ng-container matColumnDef="starts">
<th mat-header-cell *matHeaderCellDef mat-sort-header="starts"> {{'permissions.starts' | i18n}} </th> <th mat-header-cell *matHeaderCellDef mat-sort-header="starts"> {{'permissions.starts' | i18n}} </th>
<td mat-cell *matCellDef="let permission">{{permission.starts | datef:datetimeformat}}</td> <td mat-cell *matCellDef="let permission">{{permission.starts | datef:datetimeformat}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="expires"> <ng-container matColumnDef="expires">
<th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'permissions.expires' | i18n}} </th> <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'permissions.expires' | i18n}} </th>
<td mat-cell *matCellDef="let permission">{{permission.expires | datef:datetimeformat}}</td> <td mat-cell *matCellDef="let permission">{{permission.expires | datef:datetimeformat}}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="permissionColumns"></tr> <tr mat-header-row *matHeaderRowDef="permissionColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: permissionColumns"></tr> <tr mat-row *matRowDef="let myRowData; columns: permissionColumns"></tr>
</table> </table>

View File

@ -1,4 +1,4 @@
import {Component, OnInit, Input, SimpleChanges, OnChanges} from '@angular/core'; import {Component, OnInit, Input} from '@angular/core';
import {Sort} from '@angular/material/sort'; import {Sort} from '@angular/material/sort';
import {I18nService} from './../../services/i18n.service'; import {I18nService} from './../../services/i18n.service';
@ -7,7 +7,7 @@ import {I18nService} from './../../services/i18n.service';
templateUrl: './permissions.component.html', templateUrl: './permissions.component.html',
styleUrls: ['./permissions.component.scss'] styleUrls: ['./permissions.component.scss']
}) })
export class PermissionsComponent implements OnInit, OnChanges { export class PermissionsComponent implements OnInit {
datetimeformat: String; datetimeformat: String;
@Input() permissions; @Input() permissions;
@ -20,10 +20,6 @@ export class PermissionsComponent implements OnInit, OnChanges {
this.datetimeformat = this.i18n.get('format.datetime', []); this.datetimeformat = this.i18n.get('format.datetime', []);
} }
ngOnChanges(changes: SimpleChanges): void {
this.sortData({ "active": "name", "direction": "asc" });
}
sortData(sort: Sort) { sortData(sort: Sort) {
const data = this.permissions.slice(); const data = this.permissions.slice();
if(!sort.active || sort.direction === '') { if(!sort.active || sort.direction === '') {

View File

@ -1,33 +1,33 @@
<table mat-table matSort [dataSource]="quotas" (matSortChange)="sortData($event)"> <table mat-table matSort [dataSource]="quotas" (matSortChange)="sortData($event)" matSortActive="name"
matSortDirection="asc">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'quotas.name' | i18n}} </th>
<td mat-cell *matCellDef="let quota">
<mat-icon inline=true>{{'services.' + quota.name + '.icon' | i18n}}</mat-icon>
{{'services.' + quota.name + '.title' | i18n}}
</td>
</ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'quotas.name' | i18n}} </th> <th mat-header-cell *matHeaderCellDef mat-sort-header="value"> {{'quotas.value' | i18n}} </th>
<td mat-cell *matCellDef="let quota"> <td mat-cell *matCellDef="let quota"><span *ngIf="quota.disposable">{{quota.value}}</span> </td>
<mat-icon inline=true>{{'services.' + quota.name + '.icon' | i18n}}</mat-icon> </ng-container>
{{'services.' + quota.name + '.title' | i18n}}
</td>
</ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="fixed_value">
<th mat-header-cell *matHeaderCellDef mat-sort-header="value"> {{'quotas.value' | i18n}} </th> <th mat-header-cell *matHeaderCellDef> {{'quotas.fixed_value' | i18n}} <mat-icon #primaryHint="matTooltip" inline
<td mat-cell *matCellDef="let quota"><span *ngIf="quota.disposable">{{quota.value}}</span> </td> matTooltip="{{'quotas.fixed_value.hint' | i18n}}">info</mat-icon>
</ng-container> </th>
<td mat-cell *matCellDef="let quota"><span *ngIf="!quota.disposable">{{quota.value}}</span> </td>
</ng-container>
<ng-container matColumnDef="fixed_value"> <ng-container matColumnDef="quotaUnit">
<th mat-header-cell *matHeaderCellDef> {{'quotas.fixed_value' | i18n}} <mat-icon <th mat-header-cell *matHeaderCellDef> {{'quotas.unit' | i18n}} </th>
#primaryHint="matTooltip" inline matTooltip="{{'quotas.fixed_value.hint' | i18n}}">info</mat-icon> <td mat-cell *matCellDef="let quota">
</th> <span *ngIf="quota.unit">{{'quotas.unit.' + quota.unit | i18n}}</span>
<td mat-cell *matCellDef="let quota"><span *ngIf="!quota.disposable">{{quota.value}}</span> </td> <span *ngIf="!quota.unit">#</span>
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="quotaUnit"> <tr mat-header-row *matHeaderRowDef="quotaColumns"></tr>
<th mat-header-cell *matHeaderCellDef> {{'quotas.unit' | i18n}} </th> <tr mat-row *matRowDef="let myRowData; columns: quotaColumns"></tr>
<td mat-cell *matCellDef="let quota"> </table>
<span *ngIf="quota.unit">{{'quotas.unit.' + quota.unit | i18n}}</span>
<span *ngIf="!quota.unit">#</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="quotaColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: quotaColumns"></tr>
</table>