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>