Re-routed to make matrix section the homepage + Added excel export option to mapping section

Author: 0x41head

package-lock.json

@@ -25,6 +25,7 @@
     "markdown-it": "^13.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "xlsx": "^0.18.5",
     "yamljs": "^0.3.0",
     "zone.js": "~0.11.4"
   },

package.json

@@ -10,8 +10,8 @@ import { UsageComponent } from './component/usage/usage.component';
 
 
 const routes: Routes = [
-  {path: '',component: MainContentComponent},
-  {path: 'matrix', component: MatrixComponent},
+  {path: 'home',component: MainContentComponent},
+  {path: '', component: MatrixComponent},
   {path: 'circular-heatmap', component: CircularHeatmapComponent},
   {path: 'task-description', component: TaskDescriptionComponent},
   {path: 'mapping', component: MappingComponent},

src/app/app-routing.module.ts

@@ -29,13 +29,27 @@
   font-weight: bold;
 }
 
-.sortSection{
+.sort-section{
   margin: 30px;
   margin-right: 60px;
-  background-color: mediumorchid;
-  float: right;
+  float: right;  
 }
 
 .filterandsort{
   background-color: brown;
+}
+
+.hide{
+  display: none;
+}
+
+.export-button{
+  margin: 30px;
+  margin-top: 35px;
+  float: right;
+}
+
+.right-section{
+  background-color: mediumorchid;
+  float: right;
 }

src/app/component/mapping/mapping.component.css

@@ -27,14 +27,20 @@
       </mat-autocomplete>
     </mat-form-field>
 
-
-    <section class="sortSection">
-      <mat-button-toggle-group [formControl]="SortCtrl" aria-label="Sort By">
-        <mat-button-toggle value="sortByTask" (click)="changeTableBasedOnCurrentSort()">Activity</mat-button-toggle>
-        <mat-button-toggle value="sortBySAMM" (click)="changeTableBasedOnCurrentSort()">SAMM</mat-button-toggle>
-        <mat-button-toggle value="sortByISO" (click)="changeTableBasedOnCurrentSort()">ISO</mat-button-toggle>
-      </mat-button-toggle-group>
-    </section>
+    <div class="right-section">
+      <section class="export-button">
+        <button mat-raised-button color="primary" (click)="exportToExcel()">
+          <mat-icon>file_download</mat-icon>
+        </button>
+      </section>
+      <section class="sort-section">
+        <mat-button-toggle-group [formControl]="SortCtrl" aria-label="Sort By">
+          <mat-button-toggle value="sortByTask" (click)="changeTableBasedOnCurrentSort()">Activity</mat-button-toggle>
+          <mat-button-toggle value="sortBySAMM" (click)="changeTableBasedOnCurrentSort()">SAMM</mat-button-toggle>
+          <mat-button-toggle value="sortByISO" (click)="changeTableBasedOnCurrentSort()">ISO</mat-button-toggle>
+        </mat-button-toggle-group>
+      </section>
+    </div>
   </div>
 
 
@@ -94,5 +100,22 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+
+  <table id="excel-table" class="hide">
+    <tr>
+      <th>Dimension</th>
+      <th>Sub Dimension</th>
+      <th>Activity</th>
+      <th>SAMM</th>
+      <th>ISO</th>
+    </tr>
+    <tr *ngFor="let item of performedMappingDataSortedByISO">
+      <td>{{item.dimension}}</td>
+      <td>{{item.subDimension}}</td>
+      <td>{{item.taskName}}</td>
+      <td>{{item.samm2}}</td>
+      <td>{{item.ISO}}</td>
+    </tr>
+  </table>
 </div>