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

@@ -21,9 +21,21 @@
   .content {
     padding: 0.5em;
   }
+  .dashboard-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: stretch;
+  }
   .dashboard-column {
     display: flex;
     flex-direction: column;
+    
+    /* make all columns equal width - flex-basis:0 to make all resizing start from the same size*/
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    
   }
 
   .editable-hovered {
@@ -34,7 +46,6 @@
     visibility: visible;
   }
 
-
   .handle {
     display: block;
     height: 1.5em;
@@ -68,16 +79,16 @@
     <p>{{dashboard.description}}</p>
   </div>
 
-  <div cdkDropListGroup>
+  <div cdkDropListGroup class="dashboard-area">
     <div 
       cdkDropList
       class="dashboard-column"
-      *ngFor="let column of dashboard.arrangement"
+      *ngFor="let i of [0,1]"
-      [cdkDropListData]="column"
+      [cdkDropListData]="i"
       (cdkDropListDropped)="drop($event)">
       <div 
         cdkDrag 
-        *ngFor="let id of column" 
+        *ngFor="let id of dashboard.arrangement[i]" 
         [attr.widget-id]="id">
         <div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
         <app-text-widget 

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

@@ -89,8 +89,8 @@ export class DashboardComponent implements OnInit {
 
   private repairArrangement(){
     const arrangement = this.dashboard!.arrangement || [];
-    if (arrangement.length == 0){
+    for (let i = 0; i < 2; i++){
-      arrangement[0] = [];
+      arrangement[i] = arrangement[i] ?? [] ;
     }
     this.dashboard?.texts.forEach(t => {
       if (!this.arrangmentContainsId(arrangement, t.id)){
@@ -102,6 +102,7 @@ export class DashboardComponent implements OnInit {
         arrangement[0].push(t.id);
       }
     });
+
     this.dashboard!.arrangement = arrangement;
   }
 
@@ -118,7 +119,7 @@ export class DashboardComponent implements OnInit {
   addText() {
     this.dialog.open(AddTextDialogComponent,{
       data: {text:""},
-      width: '600px'
+      width: '800px'
     }).afterClosed().subscribe((text: string) => {
       const widget = new TextWidget((<any>window).randomId(),'MEDIUM', text);
       this.dashboard!.texts.push(widget); 
@@ -213,13 +214,14 @@ export class DashboardComponent implements OnInit {
     return this.plotWidgetRenderData.find( x => x.widget.id == id);
   }
 
-  drop(event: CdkDragDrop<string[]>) {
+  drop(event: CdkDragDrop<number>) {
     if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+      moveItemInArray(this.dashboard!.arrangement[event.container.data], event.previousIndex, event.currentIndex);
     } else {
+      window.console.log("from ",event.previousContainer.data, " to ", event.container.data);
       transferArrayItem(
-        event.previousContainer.data,
+        this.dashboard!.arrangement[event.previousContainer.data],
-        event.container.data,
+        this.dashboard!.arrangement[event.container.data],
         event.previousIndex,
         event.currentIndex,
       );