SNRGY-3555 Improve "New Widget" Dialog

SENERGY-Platform · Oct 24, 2024 · 76e9d3e · 76e9d3e
1 parent 67a82f2
commit 76e9d3e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.css b/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.css
@@ -15,9 +15,9 @@
  */
 
 .form {
-    min-width: 150px;
-    max-width: 500px;
-    width: 100%;
+    /*min-width: 150px;*/
+    /*max-width: 500px;*/
+    width: 430px;
 }
 
 .full-width {

diff --git a/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.html b/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.html
@@ -29,9 +29,9 @@ <h2 mat-dialog-title>Add Widget</h2>
             </mat-select>
         </mat-form-field>
 
-        <mat-form-field class="full-width" appearance="outline" color="accent">
+        <mat-form-field [class.cdk-visually-hidden]="categoryDisabled" class="full-width" appearance="outline" color="accent">
             <mat-label>Category</mat-label>
-            <mat-select [disabled]="categoryDisabled" placeholder="Category" [(ngModel)]="selectedCategory"
+            <mat-select placeholder="Category" [(ngModel)]="selectedCategory"
                         name="category">
                 <mat-option *ngFor="let category of categories" [value]="category" [disabled]="category.disabled">
                     <span fxFlex>{{category.viewValue}}</span>

diff --git a/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.ts b/src/app/modules/dashboard/dialogs/dashboard-new-widget-dialog.component.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { WidgetModel } from '../shared/dashboard-widget.model';
 import { DashboardTypesEnum } from '../shared/dashboard-types.enum';
@@ -38,7 +38,7 @@ export interface SwitchCategories extends Types {
     templateUrl: './dashboard-new-widget-dialog.component.html',
     styleUrls: ['./dashboard-new-widget-dialog.component.css'],
 })
-export class DashboardNewWidgetDialogComponent {
+export class DashboardNewWidgetDialogComponent implements OnInit{
     selectedType: Types = { value: '', viewValue: '', tooltip: '', disabled: false };
     selectedCategory: any = null;
     categories: Types[] | SwitchCategories[] = [];
@@ -198,4 +198,22 @@ export class DashboardNewWidgetDialogComponent {
             });
         }
     }
+
+    private sortByViewValue(a: any, b: any) {
+        let nameA = a.viewValue.toUpperCase(); // ignore upper and lowercase
+        let nameB = b.viewValue.toUpperCase(); // ignore upper and lowercase
+        if (nameA < nameB) {
+            return -1;
+        }
+        if (nameA > nameB) {
+            return 1;
+        }
+
+        // names must be equal
+        return 0;
+    }
+
+    ngOnInit(): void {
+        this.types = this.types.sort(this.sortByViewValue)
+    }
 }