added service categories

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,

src/app/pages/services/services.component.html

@@ -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">
+<div *ngFor="let item of serviceCategory | keyvalue">
-        <th mat-header-cell *matHeaderCellDef> </th>
+  <h4>{{'services.category.' + item.key | i18n}}</h4>
-        <td mat-cell *matCellDef="let service">
-            <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
-        </td>
-    </ng-container>
 
-
+  <app-services-table [services]="item.value"></app-services-table>
-    <ng-container matColumnDef="name">
+</div>
-        <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>

src/app/pages/services/services.component.ts

@@ -10,35 +10,26 @@ import {I18nService} from '../../services/i18n.service';
 })
 export class ServicesComponent implements OnInit {
 
-  services;
+  baseServices: Array<any>;
-  serviceColumns = ["icon", "name", "text"];
+  serviceCategory: any = {};
 
   constructor(private serviceService: ServiceService, private i18n: I18nService) { }
 
   ngOnInit(): void {
-    this.serviceService.services().subscribe((data: any) => {
+    this.serviceService.services().subscribe((data: Array<any>) => {
-      this.services = data;
+      let that = this;
-      this.sortData({"active": "name", "direction": "asc"});
+      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);
-  }
 }

src/app/ui/servicestable/servicestable.component.html

@@ -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>

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;
+}

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);
+  }
+}