move dashboard elements and store the order

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

@@ -1,27 +1,28 @@
 <style>
   :host {
-  /*
-  height: calc(100% - 29px);
-  */
-  width: 100%;
-  position: absolute;
-  padding: 0.5em;
-}
+    /*
+    height: calc(100% - 29px);
+    */
+    width: 100%;
+    position: absolute;
+    padding: 0.5em;
+  }
 
-    .center {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-    .center-content {
-      text-align: center;
-    }
-    .is-error {
-      font-size: 3rem;
-      font-weight: bold;
-      color: #333;
-    }
+
+  .center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .center-content {
+    text-align: center;
+  }
+  .is-error {
+    font-size: 3rem;
+    font-weight: bold;
+    color: #333;
+  }
 </style>
 
 <div *ngIf="loading" class="center">
@@ -39,6 +40,11 @@
   </div>
   <table *ngIf="dataSource.length > 0" mat-table [dataSource]="dataSource" >
 
+    <!-- Icon Column -->
+    <ng-container matColumnDef="icon">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element"><a [routerLink]="['/dashboard', element.id]"><img src="assets/img/dashboard-outline.svg"/></a></td>
+    </ng-container>
     <!-- Name Column -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef> Name </th>