added services grid view

This commit is contained in:
_Bastler 2021-09-26 13:32:14 +02:00
parent 1c0be5e1ea
commit 44524d0165
8 changed files with 143 additions and 15 deletions

View File

@ -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 { ServicesGridComponent } from './ui/servicesgrid/servicesgrid.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';
@ -85,7 +86,7 @@ export class XhrInterceptor implements HttpInterceptor {
ServicesComponent,
PermissionsComponent,
ProfileFieldsComponent, ProfileFieldDialog, ProfileFieldBlob, ProfileFieldPgpBlob,
ServicesTableComponent,
ServicesGridComponent, ServicesTableComponent,
QuotasComponent,
SecurityComponent,
SecurityTotpDialog,

View File

@ -1,13 +1,39 @@
<h3>{{'services' | i18n}}</h3>
<header>
<h3>{{'services' | i18n}}</h3>
<span class="spacer"></span>
<mat-button-toggle-group [(ngModel)]="view" (change)="updateView()">
<mat-button-toggle value="grid">
<mat-icon>view_module</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="table">
<mat-icon>toc</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</header>
<mat-progress-bar *ngIf="!baseServices" mode="indeterminate"></mat-progress-bar>
<p *ngIf="baseServices && baseServices.length == 0">{{'services.empty' | i18n}}</p>
<app-services-table *ngIf="baseServices" [services]="baseServices"></app-services-table>
<div *ngIf="view=='grid'">
<app-services-grid *ngIf="baseServices" [services]="baseServices"></app-services-grid>
<br>
<div *ngFor="let item of serviceCategory | keyvalue">
<h4>{{'services.category.' + item.key | i18n}}</h4>
<div *ngFor="let item of serviceCategory | keyvalue">
<h4>{{'services.category.' + item.key | i18n}}</h4>
<app-services-grid [services]="item.value"></app-services-grid>
<br>
</div>
</div>
<app-services-table [services]="item.value"></app-services-table>
<div *ngIf="view=='table'">
<app-services-table *ngIf="baseServices" [services]="baseServices"></app-services-table>
<br>
<div *ngFor="let item of serviceCategory | keyvalue">
<h4>{{'services.category.' + item.key | i18n}}</h4>
<app-services-table [services]="item.value"></app-services-table>
<br>
</div>
</div>

View File

@ -1,10 +1,11 @@
mat-card {
header {
display: flex;
flex-direction: column;
height: 100%;
}
mat-card-content {
flex-grow: 1;
overflow: auto;
h3 {
display: inline-block
}
mat-button-toggle-group {
margin: 8px;
}
}

View File

@ -12,10 +12,14 @@ export class ServicesComponent implements OnInit {
baseServices: Array<any>;
serviceCategory: any = {};
view = 'grid';
constructor(private serviceService: ServiceService, private i18n: I18nService) { }
ngOnInit(): void {
this.view = localStorage.getItem("bstly.servicesView") || 'grid';
this.serviceService.services().subscribe((data: Array<any>) => {
let that = this;
that.baseServices = [];
@ -32,4 +36,8 @@ export class ServicesComponent implements OnInit {
})
}
updateView(): void {
localStorage.setItem("bstly.servicesView", this.view);
}
}

View File

@ -0,0 +1,31 @@
<div fxLayout="row wrap" fxLayoutGap="24px grid">
<div fxFlex="33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
<mat-card>
<a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'"
color="accent">
<mat-card-header>
<mat-icon mat-card-avatar>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
<mat-card-title> <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
<mat-icon *ngIf="!service.sameSite" inline="true">
open_in_new</mat-icon>
</mat-card-title>
<mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
</mat-card-header>
</a>
<mat-card-header *ngIf="!service.url">
<mat-icon mat-card-avatar>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
<mat-card-title> <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
</mat-card-title>
<mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{ 'services.' + service.name + '.text' | i18n}}
</p>
</mat-card-content>
<mat-card-actions>
</mat-card-actions>
</mat-card>
</div>
</div>

View File

@ -0,0 +1,22 @@
@import '../../../variables.scss';
mat-card {
display: flex;
flex-direction: column;
height: 100%;
a {
text-decoration: none;
color: inherit;
mat-card-title {
color: $accent;
}
}
mat-card-content {
flex-grow: 1;
overflow: auto;
}
}

View File

@ -0,0 +1,39 @@
import { Component, OnInit, Input } from '@angular/core';
import { Sort } from '@angular/material/sort';
import { I18nService } from '../../services/i18n.service';
@Component({
selector: 'app-services-grid',
templateUrl: './servicesgrid.component.html',
styleUrls: [ './servicesgrid.component.scss' ]
})
export class ServicesGridComponent implements OnInit {
@Input() services;
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);
}
}

View File

@ -4,8 +4,8 @@
export const environment = {
production: false,
// apiUrl : 'http://localhost:9000',
apiUrl : 'https://api.bstly.lh8.de',
apiUrl : 'http://localhost:9000',
//apiUrl : 'https://api.bstly.lh8.de',
};
/*