Misc chart work

Search feature on both suppliers and the pagination feature on the spend history still not functional

package-lock.json

@@ -7149,6 +7149,14 @@
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.0.0.tgz",
       "integrity": "sha512-5TTFP9s3wfiRychGcdyvpCvvxtxW1Nf2Dqmk2YBzuIhHHLT6gRq1Fsic4lYrtAUwmy0PSLhOY/XW/saYKlrSJw=="
     },
+    "ngx-filter-pipe": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-filter-pipe/-/ngx-filter-pipe-2.1.2.tgz",
+      "integrity": "sha512-YEXvjEw+Mpg5jL+yqSnFWKiY0P9XtRAJ2Dk3n9sC4stnsuhPzPRwIkF58aBvqYfoi3vrb7KQFImgbmfFAQqnFw==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "ngx-pagination": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-4.0.0.tgz",

package.json

@@ -48,6 +48,7 @@
     "ng2-charts": "^2.3.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "^5.0.0",
+    "ngx-filter-pipe": "^2.1.2",
     "ngx-pagination": "^4.0.0",
     "popper.js": "^1.15.0",
     "rxjs": "6.5.2",

src/app/app.module.ts

@@ -44,6 +44,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 import { ChartsModule } from 'ng2-charts';
 // import { StackedBarChartComponent } from './panels/stacked-bar.component';
 import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
+import { FilterPipeModule } from 'ngx-filter-pipe';
 
 
 @NgModule({
@@ -51,6 +52,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
     BrowserModule,
     HttpClientModule,
     FormsModule,
+    FilterPipeModule,
     ReactiveFormsModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),

src/app/dashboard/dashboard.component.html

@@ -60,7 +60,7 @@
           <div class="card-block">
             <div class="row">
               <div class="col-12">
-                <h4 class="card-title mb-0">Spending by Category</h4>
+                <h4 class="card-title mb-0">This weeks' spending by Category</h4>
               </div>
             </div>
             <div class="chart-wrapper">

src/app/dashboard/more-graphs-and-tables.component.html

@@ -10,6 +10,7 @@
           <input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
         </div>
       </div>
+      <small>vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date</small>
       <div class="col-sm-12"  *ngIf="!isBubbleChartLoaded">
         <div class="spinner"></div>
       </div>
@@ -27,12 +28,9 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-8">
+        <div class="col-sm-12">
           <h4 class="card-title mb-0">Spend amount and number of organisations</h4>
-        </div>
+          <small>horizontal axis shows date, vertical axis shows total number of orgs and amount spent</small>
-        <div class="col-sm-4 hidden-sm-down">
-          <input type="date" [(ngModel)]="lineChartBegin" (change)="lineChartUpdate()">
-          <input type="date" [(ngModel)]="lineChartEnd" (change)="lineChartUpdate()">
         </div>
       </div>
       <div>
@@ -49,14 +47,15 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-sm-8">
+        <div class="col-sm-6">
           <h4 class="card-title mb-0">Supplier Spend History</h4>
         </div>
-        <div class="col-sm-4 hidden-sm-down">
+        <div class="col-sm-6 hidden-sm-down">
-          <button type="button" class="btn btn-info" (click)="supplierChartUpdate()">New Suppliers</button>
+          <button type="button" class="btn btn-danger" (click)="supplierChartPrevious()">Previous Suppliers</button>
+          <button type="button" class="btn btn-info" (click)="supplierChartNext()">Next Suppliers</button>
         </div>
       </div>
-      <div>
+      <div *ngIf="isSupplierChartLoaded">
         <canvas baseChart #supplierChart
                 [datasets]="supplierMonthChartData"
                 [options]="supplierMonthChartOptions"

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -17,8 +17,9 @@ export class MoreStuffComponent implements OnInit {
   bubbleChartBegin: any;
   bubbleChartEnd: any;
   cached_graph_data: any;
-  isBubbleChartLoaded = false;
+  isBubbleChartLoaded:boolean = false;
-  isLineChartLoaded = false;
+  isLineChartLoaded:boolean = false;
+  isSupplierChartLoaded:boolean = false;
 
   constructor(
     private api: ApiService,
@@ -31,7 +32,7 @@ export class MoreStuffComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.loadYearSpend(false, ('0'), ('0'));
+    this.loadYearSpend();
     this.loadSupplierBubble(false, ('0'), ('0'));
     this.loadSupplierHistory();
   }
@@ -131,9 +132,6 @@ export class MoreStuffComponent implements OnInit {
 
     // console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
   }
-  private bubbleChartUpdate() {
-    console.log("test change");
-  }
   public supplierBubbleChartType: ChartType = 'bubble';
   public supplierBubbleChartData: any[] = [
     {
@@ -275,7 +273,7 @@ export class MoreStuffComponent implements OnInit {
   }
 
   lineChartUpdate() {
-    this.loadYearSpend(true, (this.lineChartBegin), (this.lineChartEnd));
+    this.loadYearSpend();
 
   }
 
@@ -300,27 +298,48 @@ export class MoreStuffComponent implements OnInit {
         this.supplierMonthChartLabels = labels.slice(0,15);
       }
     )
+    this.isSupplierChartLoaded = true;
   }
-  supplierChartUpdate() {
+
-    this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
+  private supplierChartNext() {
-      result => {
+    result => {
-        let labels = [];
+      let labels = [];
-        let year = [];
+      let year = [];
-        let half = [];
+      let half = [];
-        let quarter = [];
+      let quarter = [];
-        result.data.map(item => {
+      result.data.map(item => {
-          labels.push(item.name);
+        labels.push(item.name);
-          year.push(item.year_total);
+        year.push(item.year_total);
-          half.push(item.half_total);
+        half.push(item.half_total);
-          quarter.push(item.quarter_total);
+        quarter.push(item.quarter_total);
-        });
+      });
-        this.supplierMonthChartData[0].data = quarter.slice(0,15);
+      this.supplierMonthChartData[0].data = quarter.slice(16,30);
-        this.supplierMonthChartData[1].data = half.slice(0,15);
+      this.supplierMonthChartData[1].data = half.slice(16,30);
-        this.supplierMonthChartData[2].data = year.slice(0,15);
+      this.supplierMonthChartData[2].data = year.slice(16,30);
-        this.supplierMonthChartLabels = labels.slice(0,15);
+      this.supplierMonthChartLabels = labels.slice(16,30);
-      }
+    }
-    )
+    this.isSupplierChartLoaded = true;
   }
+  private supplierChartPrevious() {
+    result => {
+      let labels = [];
+      let year = [];
+      let half = [];
+      let quarter = [];
+      result.data.map(item => {
+        labels.push(item.name);
+        year.push(item.year_total);
+        half.push(item.half_total);
+        quarter.push(item.quarter_total);
+      });
+      this.supplierMonthChartData[0].data = quarter.slice(0,15);
+      this.supplierMonthChartData[1].data = half.slice(0,15);
+      this.supplierMonthChartData[2].data = year.slice(0,15);
+      this.supplierMonthChartLabels = labels.slice(0,15);
+    }
+    this.isSupplierChartLoaded = true;
+  }
+
   public supplierMonthChartData: any[] = [
     {
       data: [],

src/app/dashboard/suppliers.component.html

@@ -1,3 +1,20 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Search list of suppliers</strong>
+          <small>Search by name or postcode of suppliers here</small>
+        </div>
+          <div *ngIf="supplierListAvailable" class="card-block">
+            <div class="search-hero">
+              <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search for a supplier here">
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="animated fadeIn">
   <div class="row">
     <div class="col-lg-12">

src/app/dashboard/suppliers.component.ts

@@ -4,7 +4,7 @@ import { AgmCoreModule } from '@agm/core';
 import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
 import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 import { PaginationInstance } from 'ngx-pagination';
-
+import { FilterPipeModule } from 'ngx-filter-pipe'; 
 @Component({
   templateUrl: 'suppliers.component.html',
 })

src/app/dashboard/transaction-log.component.html

@@ -89,7 +89,7 @@
             </div>
             <div class="modal-footer d-flex justify-content-between">
               <button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
-              <button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Edit</button>
+              <button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Save</button>
             </div>
           </ng-template>
         </div>

src/scss/_custom.scss

@@ -74,7 +74,6 @@ agm-map {
       }
     }
     .small {
-      padding-left: 20px;
     }
     &.legend {
       text-align: center;

src/scss/bootstrap/_type.scss

@@ -66,7 +66,6 @@ small,
 .small {
   font-size: $small-font-size;
   font-weight: $font-weight-normal;
-  padding-left: 20px;
 }
 
 mark,