started working on Dashboard UI sorting and naming

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

@@ -2,12 +2,24 @@
 <mat-dialog-content class="mat-typography">
 
     <form class="flex flex-col p-8 pb-0 overflow-hidden">
-        <div class="flex flex-col gt-xs:flex-row">
-            <mat-form-field class="flex-auto gt-xs:pr-3">
+        <div class="flex flex-col mt-5 gt-md:flex-row">
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
+                <mat-label>Display</mat-label>
+                <mat-select [value]="dashboardDisplay">
+                    <mat-option value="name">Name</mat-option>
+                    <mat-option value="serial_id">Serial ID</mat-option>
+                    <mat-option value="uuid">UUID</mat-option>
+                    <mat-option value="label">Label</mat-option>
+                </mat-select>
+            </mat-form-field>
+
+            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
                 <mat-label>Sort By</mat-label>
-                <mat-select [value]="'status'">
-                    <mat-option  value="status">Status</mat-option>
+                <mat-select [value]="dashboardSort">
+                    <mat-option value="status">Status</mat-option>
                     <mat-option value="name" disabled>Name</mat-option>
+                    <mat-option value="serial_id" disabled>Serial ID</mat-option>
+                    <mat-option value="uuid" disabled>UUID</mat-option>
                     <mat-option value="label" disabled>Label</mat-option>
                 </mat-select>
             </mat-form-field>
@@ -73,5 +85,5 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-button matTooltip="not yet implemented" [mat-dialog-close]="true" cdkFocusInitial>Save</button>
+    <button mat-button mat-dialog-close (click)="saveSettings()" cdkFocusInitial>Save</button>
 </mat-dialog-actions>

webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {AppConfig} from 'app/core/config/app.config';
+import { TreoConfigService } from '@treo/services/config';
+import {Subject} from "rxjs";
+import {takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-dashboard-settings',
@@ -7,10 +11,39 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardSettingsComponent implements OnInit {
 
-  constructor() { }
+    dashboardDisplay: string;
+    dashboardSort: string;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    constructor(
+        private _configService: TreoConfigService,
+    ) {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
 
   ngOnInit(): void {
+      // Subscribe to config changes
+      this._configService.config$
+          .pipe(takeUntil(this._unsubscribeAll))
+          .subscribe((config: AppConfig) => {
+
+              // Store the config
+              this.dashboardDisplay = config.dashboardDisplay;
+              this.dashboardSort = config.dashboardSort;
+
+          });
   }
+
+  saveSettings(): void {
+        this._configService.config = {
+            dashboardDisplay: this.dashboardDisplay,
+            dashboardSort: this.dashboardSort
+        }
+  }
+
     formatLabel(value: number) {
         return value;
     }