From 6e503909248ff66a22e3d0727d17632f795f830f Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Fri, 27 Aug 2021 19:13:36 +0200
Subject: [PATCH] added service categories
---
src/app/app.module.ts | 2 +
.../pages/services/services.component.html | 40 +++------------
src/app/pages/services/services.component.ts | 51 ++++++++-----------
.../servicestable.component.html | 34 +++++++++++++
.../servicestable.component.scss | 10 ++++
.../servicestable/servicestable.component.ts | 40 +++++++++++++++
6 files changed, 114 insertions(+), 63 deletions(-)
create mode 100644 src/app/ui/servicestable/servicestable.component.html
create mode 100644 src/app/ui/servicestable/servicestable.component.scss
create mode 100644 src/app/ui/servicestable/servicestable.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d766694..7b921e5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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,
diff --git a/src/app/pages/services/services.component.html b/src/app/pages/services/services.component.html
index 5fee43e..cfe56d5 100644
--- a/src/app/pages/services/services.component.html
+++ b/src/app/pages/services/services.component.html
@@ -1,39 +1,13 @@
{{'services' | i18n}}
-
+
-{{'services.empty' | i18n}}
+{{'services.empty' | i18n}}
- 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">
+
-
- |
-
- {{'services.' + service.name + '.icon' | i18n}}
- |
-
+
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/app/pages/services/services.component.ts b/src/app/pages/services/services.component.ts
index 22cb14a..d6d1b79 100644
--- a/src/app/pages/services/services.component.ts
+++ b/src/app/pages/services/services.component.ts
@@ -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;
+ 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) => {
+ 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);
- }
}
diff --git a/src/app/ui/servicestable/servicestable.component.html b/src/app/ui/servicestable/servicestable.component.html
new file mode 100644
index 0000000..a4684b6
--- /dev/null
+++ b/src/app/ui/servicestable/servicestable.component.html
@@ -0,0 +1,34 @@
+
\ No newline at end of file
diff --git a/src/app/ui/servicestable/servicestable.component.scss b/src/app/ui/servicestable/servicestable.component.scss
new file mode 100644
index 0000000..6479517
--- /dev/null
+++ b/src/app/ui/servicestable/servicestable.component.scss
@@ -0,0 +1,10 @@
+mat-card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+mat-card-content {
+ flex-grow: 1;
+ overflow: auto;
+}
diff --git a/src/app/ui/servicestable/servicestable.component.ts b/src/app/ui/servicestable/servicestable.component.ts
new file mode 100644
index 0000000..7c8ea4d
--- /dev/null
+++ b/src/app/ui/servicestable/servicestable.component.ts
@@ -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);
+ }
+}