Merge pull request #80 from Pear-Trading/finn/dashboard-fixes

Added fixes to dashboard

src/app/_guards/auth.guard.ts

@@ -8,13 +8,11 @@ export class AuthGuard implements CanActivate {
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     if (localStorage.getItem('sessionKey')) {
-      console.log('session key found');
       // logged in so return true
       return true;
     }
 
     // not logged in so redirect to login page with the return url
-    console.log('no session key found');
     this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
     return false;
   }

src/app/_guards/customer.guard.ts

@@ -8,11 +8,9 @@ export class CustomerGuard implements CanActivate {
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     if (localStorage.getItem('usertype') === 'customer') {
-      console.log('Customer logged in');
       // customer logged in so return true
       return true;
     } else if (localStorage.getItem('usertype') === 'organisation') {
-      console.log('not an customer');
       this.router.navigate(['/dashboard']);
       return false;
     }

src/app/_guards/org.guard.ts

@@ -8,11 +8,9 @@ export class OrgGuard implements CanActivate {
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     if (localStorage.getItem('usertype') === 'organisation') {
-      console.log('Organisation logged in');
       // org logged in so return true
       return true;
     } else if (localStorage.getItem('usertype') === 'customer') {
-      console.log('not an organisation');
       this.router.navigate(['/dashboard-customer']);
       return false;
     }

src/app/dashboard/add-data.component.ts

@@ -174,6 +174,7 @@ export class AddDataComponent implements OnInit {
   }
 
   transactionFormValidate() {
+    this.transactionFormStatus = null;
     if (this.submitOrg.name.length &&
         this.amount &&
         (this.recurringPurchase &&

src/app/dashboard/dashboard-customer.component.html

@@ -11,10 +11,10 @@
     </div><!--/.col-->
   </div><!--/.row-->
   <div class=row>
-    <div class="col-xl-4 col-md-6">
+    <div class="col-xl-6">
       <panel-pie></panel-pie>
     </div><!--/.col-->
-    <div *ngIf="showCategoryDoughnutChart" class="col-xl-4 col-md-6">
+    <div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -26,7 +26,7 @@
             <canvas baseChart class="chart"
             [datasets]="doughnutChartDataCategory"
             [labels]="doughnutChartLabelsCategory"
-            [options]="doughtnutChartOptionsCategory"
+            [options]="doughnutChartOptionsCategory"
             [legend]="chartLegend"
             [chartType]="chartType"
             (chartHover)="chartHovered($event)"
@@ -35,7 +35,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showEssentialBarChart" class="col-xl-4 col-md-6">
+    <div *ngIf="showEssentialBarChart" class="col-xl-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -55,7 +55,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showCategoryBarChart" class="col-xl-4 col-md-6">
+    <div *ngIf="showCategoryBarChart" class="col-xl-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -76,7 +76,7 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-4 col-md-6">
+    <div class="col-xl-6">
       <div class="card">
         <div class="card-block">
           <div class="row">
@@ -135,29 +135,29 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-4">
+    <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">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 sector of sectorLetters | slice:0:sectorLimit; let i=index">
+              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
-                <i [ngClass]="[sectorIcons [sector] || 'icon-question', sectorClasses [sector] || 'bg-info']"></i>
+                <i [ngClass]="[ 'icon-question', 'bg-info']"></i>
                 <div class="desc">
-                  <div class="title">{{ sectorNames [sector] || 'N/A' }}</div>
+                  <div class="title">{{ category.category || 'N/A' }}</div>
                 </div>
                 <div class="value">
                   <div class="small text-muted">Bought</div>
-                  <strong>{{ sectorPurchases[i] || 'N/A' }}</strong>
+                  <strong>{{ category.value || 'N/A' }}</strong>
                 </div>
               </li>
-              <li *ngIf="sectorLetters.length > sectorLimit && disableSectorButton == false" class="divider text-center">
+              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == 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)="categoryLoadMore()"><i class="icon-options"></i></button>
               </li>
             </ul>
           </div>

src/app/dashboard/dashboard-customer.component.ts

@@ -23,14 +23,14 @@ export class DashboardCustomerComponent implements OnInit {
   username: any;
   maxPurchase: number = 0;
 
-  disableSectorButton: boolean = false;
+  disableCategoryButton: boolean = false;
 
   public chartType = 'doughnut';
   public chartLegend = true;
   public doughnutChartDataCategory: any[] = [];
   public doughnutChartLabelsCategory: string[] = [];
 
-  public doughtnutChartOptionsCategory:any = {
+  public doughnutChartOptionsCategory:any = {
     tooltips: {
       callbacks: {
         label: (tooltip, data) => {
@@ -100,83 +100,9 @@ export class DashboardCustomerComponent implements OnInit {
     count: 0,
   };
 
-  sectorNames = {
+  showTotalCategoryList: boolean = false;
-    A: 'Agriculture, Forestry & Fishing',
+  totalCategoryLimit: number = 10;
-    B: 'Mining & Quarrying',
+  totalCategoryList: any[]=[];
-    C: 'Manufacturing',
-    D: 'Electricity, Gas, Steam & Air Conditioning',
-    E: 'Water & Waste Management',
-    F: 'Construction',
-    G: 'Wholesale & Retail Trade',
-    H: 'Transportation & Storage',
-    I: 'Accomodation & Food Services',
-    J: 'Information & Communication',
-    K: 'Financial & Insurance Activities',
-    L: 'Real Estate',
-    M: 'Professional, Scientfic & Technical',
-    N: 'Administrative & Support Services',
-    O: 'Public Administration, Defence & Social Security',
-    P: 'Education',
-    Q: 'Human Health & Social Work',
-    R: 'Arts, Entertainment & Recreation',
-    S: 'Other Service Activities',
-    T: 'Household Domestic Business',
-    U: 'Extraterritorial Organisations and Bodies'
-  }
-
-  sectorIcons = {
-    A: 'icon-drop',
-    B: 'icon-diamond',
-    C: 'icon-settings',
-    D: 'icon-energy',
-    E: 'icon-trash',
-    F: 'icon-wrench',
-    G: 'icon-tag',
-    H: 'icon-speedometer',
-    I: 'icon-cup',
-    J: 'icon-feed',
-    K: 'icon-credit-card',
-    L: 'icon-graph',
-    M: 'icon-chemistry',
-    N: 'icon-drawer',
-    O: 'icon-pie-chart',
-    P: 'icon-graduation',
-    Q: 'icon-support',
-    R: 'icon-film',
-    S: 'icon-calendar',
-    T: 'icon-home',
-    U: 'icon-globe',
-  }
-
-  sectorClasses = {
-    A: 'bg-primary',
-    B: 'bg-success',
-    C: 'bg-danger',
-    D: 'bg-warning',
-    E: 'bg-info',
-    F: 'bg-primary',
-    G: 'bg-success',
-    H: 'bg-danger',
-    I: 'bg-warning',
-    J: 'bg-info',
-    K: 'bg-primary',
-    L: 'bg-success',
-    M: 'bg-danger',
-    N: 'bg-warning',
-    O: 'bg-info',
-    P: 'bg-primary',
-    Q: 'bg-success',
-    R: 'bg-danger',
-    S: 'bg-warning',
-    T: 'bg-info',
-    U: 'bg-primary',
-  }
-
-  sectorLetters: string[] = [];
-  sectorPurchases: number[] = [];
-  sectorLimit: number = 10;
-
-  sectorList: any;
 
   // Graph widgets
   public widgetList = [
@@ -216,9 +142,10 @@ export class DashboardCustomerComponent implements OnInit {
     this.api.customerStats().subscribe(
       result => {
         this.setWeekPurchaseList(result.weeks);
-        this.setSectorList(result.sectors);
         this.setWeekData(result);
         this.setChartData(result.data.cat_total);
+        this.totalCategoryList = result.data.cat_list;
+        this.showTotalCategoryList = true;
         this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
         this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
         this.barChartDataEssential = [
@@ -273,14 +200,9 @@ export class DashboardCustomerComponent implements OnInit {
     };
   }
 
-  public setSectorList (data: any) {
+  private categoryLoadMore () {
-    this.sectorLetters = Object.keys(data.sectors).map(key => data.sectors[key]);
+    this.disableCategoryButton = true;
-    this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]);
+    this.totalCategoryLimit = 30;
-  }
-
-  private loadMore () {
-    this.disableSectorButton = true;
-    this.sectorLimit = 22;
   }
 
   public convertHex(hex: string, opacity: number) {

src/app/providers/api-service.ts

@@ -29,18 +29,15 @@ export class ApiService {
   // Login API
 
   public getSessionKey() {
-    console.log('get key');
     return this.sessionKey;
   }
 
   public setSessionKey(key) {
-    console.log('set key');
     this.sessionKey = key;
     localStorage.setItem('sessionKey', this.sessionKey);
   }
 
   public removeSessionKey() {
-    console.log('remove key');
     this.sessionKey = null;
     localStorage.removeItem('sessionKey');
   }
@@ -73,7 +70,6 @@ export class ApiService {
   }
 
   public logout() {
-    console.log(this.sessionKey);
     const key = this.sessionKey;
     return this.http
       .post<any>(
@@ -96,7 +92,6 @@ export class ApiService {
     data.package_name = 'Foodloop Web';
     data.version_code = 'dev';
     data.version_number = 'dev';
-      console.log(data);
       return this.http.post<any>(
         this.apiUrl + '/feedback',
         data
@@ -230,7 +225,6 @@ export class ApiService {
   public setUserInfo(
     email: string,
     display_name: string) {
-    console.log('set UserInfo');
     localStorage.setItem('email', email);
     localStorage.setItem('displayname', display_name);
   }
@@ -238,7 +232,6 @@ export class ApiService {
   // Sets usertype
 
   public setUserType(user_type: string) {
-    console.log('set UserType');
     localStorage.setItem('usertype', user_type);
   }
 
@@ -263,33 +256,27 @@ export class ApiService {
   // Deletes account details on logout
 
   public removeUserInfo() {
-    console.log('remove UserInfo');
     localStorage.removeItem('email');
     localStorage.removeItem('displayname');
   }
 
   public getFullName() {
-    console.log('get Full Name');
     localStorage.getItem('fullname');
   }
 
   public getDisplayName() {
-    console.log('get Display Name');
     localStorage.getItem('displayname');
   }
 
   public getPostcode() {
-    console.log('get Postcode');
     localStorage.getItem('postcode');
   }
 
   public getYearOfBirth() {
-    console.log('get Year of Birth');
     localStorage.getItem('yearofbirth');
   }
 
   public getEmail() {
-    console.log('get email');
     localStorage.getItem('email');
   }