From 44524d016514f08f964dde8913ae25b563e8a269 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sun, 26 Sep 2021 13:32:14 +0200
Subject: [PATCH] added services grid view
---
src/app/app.module.ts | 3 +-
.../pages/services/services.component.html | 36 ++++++++++++++---
.../pages/services/services.component.scss | 15 +++----
src/app/pages/services/services.component.ts | 8 ++++
.../servicesgrid/servicesgrid.component.html | 31 +++++++++++++++
.../servicesgrid/servicesgrid.component.scss | 22 +++++++++++
.../ui/servicesgrid/servicesgrid.component.ts | 39 +++++++++++++++++++
src/environments/environment.ts | 4 +-
8 files changed, 143 insertions(+), 15 deletions(-)
create mode 100644 src/app/ui/servicesgrid/servicesgrid.component.html
create mode 100644 src/app/ui/servicesgrid/servicesgrid.component.scss
create mode 100644 src/app/ui/servicesgrid/servicesgrid.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1d9799e..afa1bcc 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 { 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,
diff --git a/src/app/pages/services/services.component.html b/src/app/pages/services/services.component.html
index cfe56d5..b3b7dc7 100644
--- a/src/app/pages/services/services.component.html
+++ b/src/app/pages/services/services.component.html
@@ -1,13 +1,39 @@
-
{{'services' | i18n}}
+
+ {{'services' | i18n}}
+
+
+
+ view_module
+
+
+ toc
+
+
+
+
{{'services.empty' | i18n}}
-
+
+
+
+
+
{{'services.category.' + item.key | i18n}}
-
-
{{'services.category.' + item.key | i18n}}
+
+
+
+
-
+
+
+
+
+
{{'services.category.' + item.key | i18n}}
+
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/services/services.component.scss b/src/app/pages/services/services.component.scss
index 6479517..1664270 100644
--- a/src/app/pages/services/services.component.scss
+++ b/src/app/pages/services/services.component.scss
@@ -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;
+ }
}
diff --git a/src/app/pages/services/services.component.ts b/src/app/pages/services/services.component.ts
index d6d1b79..2a6255a 100644
--- a/src/app/pages/services/services.component.ts
+++ b/src/app/pages/services/services.component.ts
@@ -12,10 +12,14 @@ export class ServicesComponent implements OnInit {
baseServices: Array
;
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) => {
let that = this;
that.baseServices = [];
@@ -32,4 +36,8 @@ export class ServicesComponent implements OnInit {
})
}
+ updateView(): void {
+ localStorage.setItem("bstly.servicesView", this.view);
+ }
+
}
diff --git a/src/app/ui/servicesgrid/servicesgrid.component.html b/src/app/ui/servicesgrid/servicesgrid.component.html
new file mode 100644
index 0000000..15ef990
--- /dev/null
+++ b/src/app/ui/servicesgrid/servicesgrid.component.html
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/src/app/ui/servicesgrid/servicesgrid.component.scss b/src/app/ui/servicesgrid/servicesgrid.component.scss
new file mode 100644
index 0000000..7abeef1
--- /dev/null
+++ b/src/app/ui/servicesgrid/servicesgrid.component.scss
@@ -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;
+ }
+
+}
diff --git a/src/app/ui/servicesgrid/servicesgrid.component.ts b/src/app/ui/servicesgrid/servicesgrid.component.ts
new file mode 100644
index 0000000..93d6066
--- /dev/null
+++ b/src/app/ui/servicesgrid/servicesgrid.component.ts
@@ -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);
+ }
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index d263ddc..d3ac5fe 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -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',
};
/*