added service categories
This commit is contained in:
_Bastler
parent
93db2b9acb
commit
6e50390924
@ -24,6 +24,7 @@ import { TokensComponent } from './pages/tokens/tokens.component';
|
||||
import { InvitesComponent } from './pages/invites/invites.component';
|
||||
import { PermissionsComponent } from './ui/permissions/permissions.component';
|
||||
import { ProfileFieldDialog, ProfileFieldsComponent, ProfileFieldBlob } from './ui/profilefields/profilefields.component';
|
||||
import { ServicesTableComponent } from './ui/servicestable/servicestable.component';
|
||||
import { ProfileFieldPgpBlob } from './ui/profilefields/binary/pgp/profilefield.pgp-blob';
|
||||
import { QuotasComponent } from './ui/quotas/quotas.component';
|
||||
import { SecurityComponent, SecurityTotpDialog } from './pages/account/security/security.component';
|
||||
@ -81,6 +82,7 @@ export class XhrInterceptor implements HttpInterceptor {
|
||||
ServicesComponent,
|
||||
PermissionsComponent,
|
||||
ProfileFieldsComponent, ProfileFieldDialog, ProfileFieldBlob, ProfileFieldPgpBlob,
|
||||
ServicesTableComponent,
|
||||
QuotasComponent,
|
||||
SecurityComponent,
|
||||
SecurityTotpDialog,
|
||||
|
||||
@ -1,39 +1,13 @@
|
||||
<h3>{{'services' | i18n}}</h3>
|
||||
|
||||
<mat-progress-bar *ngIf="!services" mode="indeterminate"></mat-progress-bar>
|
||||
<mat-progress-bar *ngIf="!baseServices" mode="indeterminate"></mat-progress-bar>
|
||||
|
||||
<p *ngIf="services && services.length == 0">{{'services.empty' | i18n}}</p>
|
||||
<p *ngIf="baseServices && baseServices.length == 0">{{'services.empty' | i18n}}</p>
|
||||
|
||||
<table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">
|
||||
<app-services-table *ngIf="baseServices" [services]="baseServices"></app-services-table>
|
||||
|
||||
<ng-container matColumnDef="icon">
|
||||
<th mat-header-cell *matHeaderCellDef> </th>
|
||||
<td mat-cell *matCellDef="let service">
|
||||
<mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
|
||||
</td>
|
||||
</ng-container>
|
||||
<div *ngFor="let item of serviceCategory | keyvalue">
|
||||
<h4>{{'services.category.' + item.key | i18n}}</h4>
|
||||
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
|
||||
<td mat-cell *matCellDef="let service" class="text-center">
|
||||
<a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
|
||||
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
|
||||
<mat-icon *ngIf="!service.sameSite" inline="true">
|
||||
open_in_new</mat-icon>
|
||||
</a>
|
||||
<a *ngIf="!service.url" mat-button disabled>
|
||||
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
|
||||
</a>
|
||||
<div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="text">
|
||||
<th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
|
||||
<td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
|
||||
<tr mat-row *matRowDef="let myRowData; columns: serviceColumns"></tr>
|
||||
</table>
|
||||
<app-services-table [services]="item.value"></app-services-table>
|
||||
</div>
|
||||
@ -1,44 +1,35 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Sort} from '@angular/material/sort';
|
||||
import {ServiceService} from '../../services/service.service';
|
||||
import {I18nService} from '../../services/i18n.service';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Sort } from '@angular/material/sort';
|
||||
import { ServiceService } from '../../services/service.service';
|
||||
import { I18nService } from '../../services/i18n.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-services',
|
||||
templateUrl: './services.component.html',
|
||||
styleUrls: ['./services.component.scss']
|
||||
styleUrls: [ './services.component.scss' ]
|
||||
})
|
||||
export class ServicesComponent implements OnInit {
|
||||
|
||||
services;
|
||||
serviceColumns = ["icon", "name", "text"];
|
||||
baseServices: Array<any>;
|
||||
serviceCategory: any = {};
|
||||
|
||||
constructor(private serviceService: ServiceService, private i18n: I18nService) {}
|
||||
constructor(private serviceService: ServiceService, private i18n: I18nService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.serviceService.services().subscribe((data: any) => {
|
||||
this.services = data;
|
||||
this.sortData({"active": "name", "direction": "asc"});
|
||||
this.serviceService.services().subscribe((data: Array<any>) => {
|
||||
let that = this;
|
||||
that.baseServices = [];
|
||||
data.forEach(function (service) {
|
||||
if (!service.category || service.category == "") {
|
||||
that.baseServices.push(service);
|
||||
} else {
|
||||
if (!that.serviceCategory[ service.category ]) {
|
||||
that.serviceCategory[ service.category ] = [];
|
||||
}
|
||||
that.serviceCategory[ service.category ].push(service);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
sortData(sort: Sort) {
|
||||
const data = this.services.slice();
|
||||
if(!sort.active || sort.direction === '') {
|
||||
this.services = data;
|
||||
return;
|
||||
}
|
||||
|
||||
this.services = data.sort((a, b) => {
|
||||
const isAsc = sort.direction === 'asc';
|
||||
switch(sort.active) {
|
||||
case 'name': return this.compare(this.i18n.get('services.' + a.name + '.title', []), this.i18n.get('services.' + b.name + '.title', []), isAsc);
|
||||
default: return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
|
||||
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
||||
}
|
||||
}
|
||||
|
||||
34
src/app/ui/servicestable/servicestable.component.html
Normal file
34
src/app/ui/servicestable/servicestable.component.html
Normal file
@ -0,0 +1,34 @@
|
||||
<table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services"
|
||||
(matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">
|
||||
|
||||
<ng-container matColumnDef="icon">
|
||||
<th mat-header-cell *matHeaderCellDef> </th>
|
||||
<td mat-cell *matCellDef="let service">
|
||||
<mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
|
||||
<td mat-cell *matCellDef="let service" class="text-center">
|
||||
<a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button
|
||||
color="accent">
|
||||
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
|
||||
<mat-icon *ngIf="!service.sameSite" inline="true">
|
||||
open_in_new</mat-icon>
|
||||
</a>
|
||||
<a *ngIf="!service.url" mat-button disabled>
|
||||
<strong>{{'services.' + service.name + '.title' | i18n}}</strong>
|
||||
</a>
|
||||
<div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="text">
|
||||
<th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
|
||||
<td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
|
||||
<tr mat-row *matRowDef="let myRowData; columns: serviceColumns"></tr>
|
||||
</table>
|
||||
10
src/app/ui/servicestable/servicestable.component.scss
Normal file
10
src/app/ui/servicestable/servicestable.component.scss
Normal file
@ -0,0 +1,10 @@
|
||||
mat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
40
src/app/ui/servicestable/servicestable.component.ts
Normal file
40
src/app/ui/servicestable/servicestable.component.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Sort } from '@angular/material/sort';
|
||||
import { I18nService } from '../../services/i18n.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-services-table',
|
||||
templateUrl: './servicestable.component.html',
|
||||
styleUrls: [ './servicestable.component.scss' ]
|
||||
})
|
||||
export class ServicesTableComponent implements OnInit {
|
||||
|
||||
@Input() services;
|
||||
serviceColumns = [ "icon", "name", "text" ];
|
||||
|
||||
constructor(private i18n: I18nService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.sortData({ "active": "name", "direction": "asc" });
|
||||
}
|
||||
|
||||
sortData(sort: Sort) {
|
||||
const data = this.services.slice();
|
||||
if (!sort.active || sort.direction === '') {
|
||||
this.services = data;
|
||||
return;
|
||||
}
|
||||
|
||||
this.services = data.sort((a, b) => {
|
||||
const isAsc = sort.direction === 'asc';
|
||||
switch (sort.active) {
|
||||
case 'name': return this.compare(this.i18n.get('services.' + a.name + '.title', []), this.i18n.get('services.' + b.name + '.title', []), isAsc);
|
||||
default: return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
|
||||
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user