UI: Added sort breakpoint in layout configuration and fix translation

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -208,6 +208,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       .filter((item) => !this.selectedBreakpointIds.includes(item.id))
       .map(item => item.id);
 
+    this.sortLayoutBreakpoints();
+
     this.subscriptions.push(
       this.layoutsFormGroup.get('sliderPercentage').valueChanges
         .subscribe(
@@ -456,6 +458,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
           this.layoutBreakpoints = this.layoutBreakpoints.filter((item) => item.breakpoint !== breakpointId);
           this.allowBreakpointIds.push(breakpointId);
           this.selectedBreakpointIds = this.selectedBreakpointIds.filter((item) => item !== breakpointId);
+          this.sortLayoutBreakpoints();
           this.layoutsFormGroup.markAsDirty();
         }
       }
@@ -495,6 +498,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.selectedBreakpointIds.push(newBreakpointId);
     this.allowBreakpointIds = this.allowBreakpointIds.filter((item) => item !== newBreakpointId);
     this.addLayoutConfiguration(newBreakpointId);
+    this.sortLayoutBreakpoints();
   }
 
   private addLayoutConfiguration(breakpointId: BreakpointId) {
@@ -508,4 +512,22 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       breakpoint: breakpointId
     });
   }
+
+  private sortLayoutBreakpoints() {
+    this.layoutBreakpoints.sort((a, b) => {
+      const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a.breakpoint)?.maxWidth || Infinity;
+      const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b.breakpoint)?.maxWidth || Infinity;
+      return bMaxWidth - aMaxWidth;
+    });
+    this.selectedBreakpointIds.sort((a, b) => {
+      const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
+      const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.maxWidth || Infinity;
+      return bMaxWidth - aMaxWidth;
+    });
+    this.allowBreakpointIds.sort((a, b) => {
+      const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
+      const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.maxWidth || Infinity;
+      return bMaxWidth - aMaxWidth;
+    });
+  }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts

@@ -43,6 +43,11 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
     this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => {
       if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) {
         this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData);
+        this.breakpointIds.sort((a, b) => {
+          const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
+          const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.maxWidth || Infinity;
+          return bMaxWidth - aMaxWidth;
+        });
         if (this.breakpointIds.indexOf(this.dashboardCtrl.layouts.main.layoutCtx.breakpoint) > -1) {
           this.selectedBreakpoint = this.dashboardCtrl.layouts.main.layoutCtx.breakpoint;
         } else {

ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts

@@ -354,7 +354,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
         {
           name: this.isDefaultBreakpoint
             ? this.translate.instant('widget-config.mobile')
-            : this.translate.instant('widget-config.list-option'),
+            : this.translate.instant('widget-config.layout-option'),
           value: 'mobile'
         }
       );

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5968,7 +5968,7 @@
         "color": "Color",
         "tooltip": "Tooltip",
         "units-required": "Unit is required.",
-        "list-option": "List option"
+        "layout-option": "Layout option"
     },
     "widget-type": {
         "import": "Import widget type",