added services grid view

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

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

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

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

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