From adc0a1a7db506b59e13ba8dfdebba4676eb1514c Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Tue, 22 May 2018 12:28:09 +0100
Subject: [PATCH] Added category all time purchase list

---
 .../dashboard-customer.component.html         | 33 +++++++++++++++++--
 .../dashboard/dashboard-customer.component.ts | 13 ++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html
index 2ce4fa4..133719e 100644
--- a/src/app/dashboard/dashboard-customer.component.html
+++ b/src/app/dashboard/dashboard-customer.component.html
@@ -140,7 +140,36 @@
         <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title float-left mb-0">Purchases by Sector</h4>
+              <h4 class="card-title float-left mb-0">All Purchases by Category</h4>
+            </div><!--/.col-->
+          </div><!--/.row-->
+          <div class="chart-wrapper">
+            <ul class="icons-list">
+              <!-- New loop  -->
+              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
+                <i [ngClass]="[sectorIcons [category.name] || 'icon-question', sectorClasses [category.name] || 'bg-info']"></i>
+                <div class="desc">
+                  <div class="title">{{ category.category || 'N/A' }}</div>
+                </div>
+                <div class="value">
+                  <div class="small text-muted">Bought</div>
+                  <strong>{{ category.value || 'N/A' }}</strong>
+                </div>
+              </li>
+              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
+                <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div><!--/.col-->
+    <div class="col-xl-6">
+      <div class="card">
+        <div class="card-block">
+          <div class="row">
+            <div class="col-12">
+              <h4 class="card-title float-left mb-0">All Purchases by Sector</h4>
             </div><!--/.col-->
           </div><!--/.row-->
           <div class="chart-wrapper">
@@ -157,7 +186,7 @@
                 </div>
               </li>
               <li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="loadMore()"><i class="icon-options"></i></button>
+                <button type="button" class="btn btn-sm btn-link text-muted" (click)="sectorLoadMore()"><i class="icon-options"></i></button>
               </li>
             </ul>
           </div>
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts
index 4317bd2..f6abd47 100644
--- a/src/app/dashboard/dashboard-customer.component.ts
+++ b/src/app/dashboard/dashboard-customer.component.ts
@@ -24,6 +24,7 @@ export class DashboardCustomerComponent implements OnInit {
   maxPurchase: number = 0;
 
   disableSectorButton: boolean = false;
+  disableCategoryButton: boolean = false;
 
   public chartType = 'doughnut';
   public chartLegend = true;
@@ -175,7 +176,8 @@ export class DashboardCustomerComponent implements OnInit {
   sectorLetters: string[] = [];
   sectorPurchases: number[] = [];
   sectorLimit: number = 10;
-
+  totalCategoryLimit: number = 10;
+  totalCategoryList: any;
   sectorList: any;
 
   // Graph widgets
@@ -219,6 +221,8 @@ export class DashboardCustomerComponent implements OnInit {
         this.setSectorList(result.sectors);
         this.setWeekData(result);
         this.setChartData(result.data.cat_total);
+        this.totalCategoryList = result.data.cat_list;
+        console.log(this.totalCategoryList);
         this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
         this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
         this.barChartDataEssential = [
@@ -278,11 +282,16 @@ export class DashboardCustomerComponent implements OnInit {
     this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
   }
 
-  private loadMore () {
+  private sectorLoadMore () {
     this.disableSectorButton = true;
     this.sectorLimit = 22;
   }
 
+  private categoryLoadMore () {
+    this.disableCategoryButton = true;
+    this.totalCategoryLimit = 30;
+  }
+
   public convertHex(hex: string, opacity: number) {
     hex = hex.replace('#', '');
     const r = parseInt(hex.substring(0, 2), 16);