move dashboard elements and store the order

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -22,6 +22,10 @@
   .content {
     padding: 0.5em;
   }
+  .dashboard-column {
+    display: flex;
+    flex-direction: column;
+  }
 </style>
 
 <div *ngIf="dashboard === undefined && !error" class="center">
@@ -40,6 +44,25 @@
   <h1>{{dashboard.name}}</h1>
   <p>{{dashboard.description}}</p>
 
-  <app-text-widget *ngFor="let textWidget of dashboard.texts" [text]="textWidget.text"></app-text-widget>
-  <app-plot-widget *ngFor="let p of plotWidgetRenderData" [data]="p"></app-plot-widget>
+  <div cdkDropListGroup>
+    <!-- All lists in here will be connected. -->
+    <div 
+      cdkDropList
+      class="dashboard-column"
+      *ngFor="let column of dashboard.arrangement"
+      [cdkDropListData]="column"
+      (cdkDropListDropped)="drop($event)">
+      <div 
+      cdkDrag 
+        *ngFor="let id of column" 
+        [attr.widget-id]="id">
+        <app-text-widget 
+          *ngIf="isTextWidget(id)"
+          [text]="getTextWidget(id)!.text"></app-text-widget>
+        <app-plot-widget
+          *ngIf="isPlotWidget(id)" 
+          [data]="getPlotWidget(id)!"></app-plot-widget>
+      </div>
+    </div>
+  </div>
 </div>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -1,9 +1,10 @@
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute } from '@angular/router';
-import { Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
+import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
 import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
@@ -25,29 +26,31 @@ export class DashboardComponent implements OnInit {
     private service: DashboardService, 
     private dialog: MatDialog, 
     private snackBar: MatSnackBar, 
-    private plotService: PlotService) {}
+    private plotService: PlotService,
+    private element: ElementRef) {}
 
   ngOnInit(): void {
       this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe({
         'next':(dashboard: Dashboard) => {
-        this.dashboard = dashboard;
+          this.dashboard = dashboard;
+          this.repairArrangement();
 
-        dashboard.plots.forEach(p => {
-          this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
-        });
+          dashboard.plots.forEach(p => {
+            this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
+          });
 
-        this.loadImages(0, this.plotWidgetRenderData);
-      },
-      'error': (error: HttpErrorResponse) =>{
-        if (error.status == 404) {
-          this.error = "Not Found";
-        }else if (error.status == 504) { // gateway timeout
-          this.error = "Server Unreachable";
-        }else{
-          this.error = "Failed to load dashboard";
+          this.loadImages(0, this.plotWidgetRenderData);
+        },
+        'error': (error: HttpErrorResponse) =>{
+          if (error.status == 404) {
+            this.error = "Not Found";
+          }else if (error.status == 504) { // gateway timeout
+            this.error = "Server Unreachable";
+          }else{
+            this.error = "Failed to load dashboard";
+          }
         }
-      }
-    });
+      });
   }
 
   loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {
@@ -84,35 +87,63 @@ export class DashboardComponent implements OnInit {
         'fullScreen': new RenderOptions(fullHeight,fullWidth, false, true)
       }
     );
-   return request;
- }
+    return request;
+  }
 
- height(size: PlotSize): number{
-  switch (size) {
-    case 'SMALL':
-      return 300;
-    case 'MEDIUM':
-      return 400;
-    case 'LARGE':
-      return 600;
+  height(size: PlotSize): number{
+    switch (size) {
+      case 'SMALL':
+        return 300;
+      case 'MEDIUM':
+        return 400;
+      case 'LARGE':
+        return 600;
+    }
   }
- }
- width(size: PlotSize): number{
-  switch (size) {
-    case 'SMALL':
-      return 400;
-    case 'MEDIUM':
-      return 600;
-    case 'LARGE':
-      return 900;
+  width(size: PlotSize): number{
+    switch (size) {
+      case 'SMALL':
+        return 400;
+      case 'MEDIUM':
+        return 600;
+      case 'LARGE':
+        return 900;
+    }
+  }
+
+  private repairArrangement(){
+    const arrangement = this.dashboard!.arrangement || [];
+    if (arrangement.length == 0){
+      arrangement[0] = [];
+    }
+    this.dashboard?.texts.forEach(t => {
+      if (!this.arrangmentContainsId(arrangement, t.id)){
+        arrangement[0].push(t.id);
+      }
+    });
+    this.dashboard?.plots.forEach(t => {
+      if (!this.arrangmentContainsId(arrangement, t.id)){
+        arrangement[0].push(t.id);
+      }
+    });
+    this.dashboard!.arrangement = arrangement;
+  }
+
+  private arrangmentContainsId(arrangement: string[][], id: string): boolean{
+
+    for ( let i = 0; i < arrangement.length; i++){
+      if (arrangement[i].includes(id)) {
+        return true;
+      }
+    }
+    return false;
   }
- }
 
   addText() {
     this.dialog.open(AddTextDialogComponent,{
       width: '600px'
     }).afterClosed().subscribe((text: string) => {
-      this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
+      this.dashboard!.texts.push(new TextWidget(crypto.randomUUID(),'MEDIUM', text)); 
     });
   }
 
@@ -121,11 +152,28 @@ export class DashboardComponent implements OnInit {
       width: 'calc(100% - 1em)',
       height: 'calc(100% - 1em)'
     }).afterClosed().subscribe((config: PlotConfig) => {
-      this.dashboard!.plots.push(new PlotWidget('MEDIUM', config));
+      this.dashboard!.plots.push(new PlotWidget(crypto.randomUUID(), 'MEDIUM', config));
     });
   }
 
   save() {
+    const arrangement = <string[][]>[];
+    const dashboardColumns = (<HTMLElement>this.element.nativeElement).querySelectorAll('.dashboard-column');
+    for(let i =0; i < dashboardColumns.length; i++){
+      const ids = [];
+      const column = <HTMLDivElement>dashboardColumns.item(i);
+      for(let c = 0; c <column.children.length; c++) {
+        const element = <Element>column.children.item(c)
+        const id = element!.getAttribute("widget-id");
+        if (id !== null) {
+          ids.push(id);
+        }
+      }
+      arrangement.push(ids);
+    }
+
+    this.dashboard!.arrangement = arrangement;
+
     this.service.saveDashboard(this.dashboard!).subscribe({
       'complete': () => {
         this.snackBar.open("saved dashboard","", {
@@ -135,4 +183,37 @@ export class DashboardComponent implements OnInit {
       }
     });
   }
+
+  isTextWidget(id: string): boolean {
+    return this.getTextWidget(id) !== undefined;
+  }
+
+  isPlotWidget(id: string): boolean {
+    return this.dashboard?.plots.find( x => x.id == id) !== undefined;
+  }
+
+  getTextWidget(id: string): TextWidget | undefined {
+    return this.dashboard?.texts.find( x => x.id == id);
+  }
+
+  getPlotWidget(id: string): PlotWidgetRenderData | undefined {
+    return this.plotWidgetRenderData.find( x => x.widget.id == id);
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(
+        event.previousContainer.data,
+        event.container.data,
+        event.previousIndex,
+        event.currentIndex,
+      );
+    }
+  }
+
+  s(a: any){
+    return JSON.stringify(a);
+  }
 }

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html

@@ -2,6 +2,7 @@
   :host {
     display: block;
     margin-top: 1em;
+    background-color: aliceblue;
   }
 </style>
 <p *ngFor="let line of lines()">{{line}}</p>