Merge pull request #28 from b-venter/bv-newbranch

Added table view toggle
b-venter · Mar 30, 2023 · 4d0c749 · 4d0c749
2 parents 1fa057d + 11eadb6
commit 4d0c749
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 11 deletions.
diff --git a/src/app/shopping/list/list.component.html b/src/app/shopping/list/list.component.html
@@ -1,4 +1,12 @@
 <h1>Shopping List: {{name}}</h1>
+
+<button mat-icon-button (click)="renderDefaultType=true" [disabled]="renderDefaultType" matTooltip="Default view">
+  <mat-icon>view_agenda</mat-icon>
+</button>
+<button mat-icon-button (click)="!renderDefaultType=false" [disabled]="!renderDefaultType" matTooltip="Table view">
+  <mat-icon>grid_on</mat-icon>
+</button>
+
   <button mat-button [matMenuTriggerFor]="menu">
     {{currency[currencySel].icon}} {{currency[currencySel].abbr}}
     <mat-icon color="accent">arrow_drop_down</mat-icon>
@@ -9,10 +17,12 @@ <h1>Shopping List: {{name}}</h1>
   <button mat-mini-fab matTooltip="Add item" (click)="openDialog()">
     <mat-icon>add</mat-icon>
   </button>
-<div class="overall">
+  <br>
+
 
+<div class="overall">
   <!--Per shop accordion-->  
-  <cdk-accordion class="shop-accordion">
+  <cdk-accordion *ngIf="renderDefaultType" class="shop-accordion">
         <cdk-accordion-item
           *ngFor="let list of shopList; let index = index;"
           #accordionItem="cdkAccordionItem"
@@ -50,7 +60,12 @@ <h1>Shopping List: {{name}}</h1>
                       <span [style.fontSize]="fontSize">{{items.qty}}x&nbsp;{{items.nett}}{{items.nett_unit}} &nbsp; {{items.label}} @ {{currency[currencySel].symbol}}{{items.price * items.qty | number: '1.2-2'}}</span>
 
                     </mat-panel-title>
-                    <mat-panel-description></mat-panel-description>
+                    <mat-panel-description>
+                      <button mat-icon-button class="toggle-button">
+                        <mat-icon *ngIf="!items.trolley" matTooltip="Put in the trolley" color="accent" (click)="setTrolleyCounter(index, in2)">shopping_cart</mat-icon>
+                        <mat-icon *ngIf="items.trolley" matTooltip="Remove from the trolley" color="primary" (click)="setTrolleyCounter(index, in2)">remove_shopping_cart</mat-icon>
+                      </button>
+                    </mat-panel-description>
                   </mat-expansion-panel-header>
 
 
@@ -66,23 +81,82 @@ <h1>Shopping List: {{name}}</h1>
                       <mat-icon color="accent">trending_up</mat-icon>
                     </button>
 
-                    <button mat-icon-button class="toggle-button">
-                      <mat-icon *ngIf="!items.trolley" matTooltip="Put in the trolley" color="accent" (click)="setTrolleyCounter(index, in2)">shopping_cart</mat-icon>
-                      <mat-icon *ngIf="items.trolley" matTooltip="Remove from the trolley" color="primary" (click)="setTrolleyCounter(index, in2)">remove_shopping_cart</mat-icon>
-                    </button>
 
                     <button mat-icon-button matTooltip="Remove from shopping list" (click)="delShopListItem(items, list.shop)">
                       <mat-icon color="warn">
                         delete
                       </mat-icon>
                     </button>
+
                   </mat-expansion-panel>
                 </mat-accordion>
 
           </div>
 
         </cdk-accordion-item>
-      </cdk-accordion>      
+      </cdk-accordion>
+
+      <div *ngIf="!renderDefaultType">
+        <mat-form-field *ngIf="!renderDefaultType">
+          <mat-label>Filter</mat-label>
+          <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
+        </mat-form-field>
+
+        <table mat-table [dataSource]="this.dataSource" matSort class="mat-elevation-z8">
+
+          <!-- Item Column -->
+            <ng-container matColumnDef="label">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Item </th>
+              <td mat-cell *matCellDef="let slist"> {{slist.label}} </td>
+            </ng-container>
+
+            <!-- Qty Column -->
+            <ng-container matColumnDef="qty">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Qty </th>
+              <td mat-cell *matCellDef="let slist"> {{slist.qty}} </td>
+            </ng-container>
+
+            <!-- Nett Column -->
+            <ng-container matColumnDef="nett">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Nett </th>
+              <td mat-cell *matCellDef="let slist"> {{slist.nett}}{{slist.nett_unit}} </td>
+            </ng-container>
+
+            <!-- Cost Column -->
+            <ng-container matColumnDef="cost">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
+                <td mat-cell *matCellDef="let slist"> {{currency[currencySel].symbol}}{{slist.price}} </td>
+              </ng-container>
+
+              <!-- Shop Column -->
+            <ng-container matColumnDef="shop">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> Shop </th>
+              <td mat-cell *matCellDef="let slist"> {{slist.shop}} </td>
+            </ng-container>
+
+            <!-- Trolley Column -->
+            <ng-container matColumnDef="trolley">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
+              <td mat-cell *matCellDef="let slist"> 
+                <mat-icon *ngIf="slist.trolley" color="primary">shopping_cart</mat-icon>
+                <mat-icon *ngIf="!slist.trolley" color="accent">shopping_cart</mat-icon>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+            <!-- Row shown when there is no matching data. -->
+            <tr class="mat-row" *matNoDataRow>
+              <td class="mat-cell" colspan="4">No data matching the filter</td>
+            </tr>
+          </table>
+    </div>
+    <div class="paginator" [hidden]="renderDefaultType">
+        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+    </div>
+
+
     </div>
       <!--Total costs-->
       <div class="total-chip">

diff --git a/src/app/shopping/list/list.component.scss b/src/app/shopping/list/list.component.scss
@@ -1,3 +1,10 @@
+table {
+  width: 90%;
+  margin: auto;
+  table-layout: fixed;
+  //min-width: 500px;
+}
+
 .overall {
     overflow: auto;
 }
@@ -55,4 +62,10 @@
 
 .total-chip{ 
   margin-left: 80%;
+}
+
+.paginator {
+  margin: auto;
+  width: 90%;
+  //min-width: 500px;
 }
diff --git a/src/app/shopping/list/list.component.ts b/src/app/shopping/list/list.component.ts
@@ -13,6 +13,11 @@ import {map, startWith} from 'rxjs/operators';
 import { Item, Shop, SList, SlistEdge, SlistItem, SlistEdgeItem, TrendItem } from '../../interfaces';
 import { DataService } from '../../data.service';
 
+//Table option
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+
 //Chart specific imports
 import { ViewChild } from '@angular/core';
 import { Chart, ChartConfiguration, ChartEvent, ChartType } from 'chart.js';
@@ -48,6 +53,7 @@ export class ListComponent implements OnInit {
   name = "";
   screenSize: boolean;
   fontSize = "normal";
+  renderDefaultType = true; // true = accordion | false = table
 
   currency :curr[] = [
     {abbr: "USD", symbol: "$", icon: "🇺🇸", value: 0},
@@ -58,6 +64,12 @@ export class ListComponent implements OnInit {
   ];
   currencySel = 3;
 
+  //Table option
+  displayedColumns: string[] = ['label', 'qty', 'nett', 'cost', 'trolley'];
+  dataSource = new MatTableDataSource<SlistItem>(); //Initiate data source class. Requires import of MatTableDataSource above.
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
   constructor(
     private route: ActivatedRoute,
     private dataService: DataService,
@@ -73,6 +85,7 @@ export class ListComponent implements OnInit {
     this.getShoppingList();
     this.getName(this.id.toString());
     this.setFontSize();
+    this.getShoppingListTable();
   }
 
   setCurrency(x: number){
@@ -92,7 +105,36 @@ export class ListComponent implements OnInit {
       complete: () => this.setTrolleyInit(),
     }
     );
-
+  }
+
+  getShoppingListTable(): void {
+    this.dataService.getShoppingList(this.id.toString()).subscribe({
+      next: (list) => {
+
+        var list2: SlistItem[] = [];
+        list.forEach(function (value){
+          value.items.forEach( function (value2) {
+            var listx = value2;
+            list2.push(listx)
+          })
+        });
+
+        this.dataSource.data = list2;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+      },
+      error: e => console.error(e),
+    }
+    );
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 
   //Update shopping list is used to dynamically update shopList when add/edit/remove/move
@@ -242,6 +284,8 @@ export class ListComponent implements OnInit {
     )
   }
 
+
+
   delShopListItem(key: SlistItem, shopD: string){
     //warning modal
     var a = confirm("Do you really want to remove this item from your shopping list?");
@@ -372,7 +416,6 @@ export class ListComponent implements OnInit {
   }
 
 
-
 }
 
 

diff --git a/src/app/shopping/trolley/trolley.component.html b/src/app/shopping/trolley/trolley.component.html
@@ -19,7 +19,7 @@
               <!-- Price -->
               <ng-container matColumnDef="price">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> Indiv. Price </th>
-                <td mat-cell *matCellDef="let item"> {{item.currency}}&nbsp;{{item.price | number:'1-2-2'}} </td>
+                <td mat-cell *matCellDef="let item"> {{item.currency}}&nbsp;{{item.price | number:'1.2-2'}} </td>
                 <td mat-footer-cell *matFooterCellDef> <b>Total</b> </td>
               </ng-container>