feat: #228 Adding angular datatables to customer list component

angular.json

@@ -27,12 +27,19 @@
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
-              "node_modules/ngx-toastr/toastr.css"
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "./node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/datatables.net/js/jquery.dataTables.js"
+              "node_modules/datatables.net/js/jquery.dataTables.js",
+              "node_modules/jszip/dist/jszip.js",
+              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
+              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
+              "node_modules/datatables.net-buttons/js/buttons.flash.js",
+              "node_modules/datatables.net-buttons/js/buttons.html5.js",
+              "node_modules/datatables.net-buttons/js/buttons.print.js"
             ]
           },
           "configurations": {

package.json

@@ -36,7 +36,11 @@
     "ngx-toastr": "^12.0.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "jszip": "^3.4.0",
+    "datatables.net-buttons": "^1.6.2",
+    "datatables.net-buttons-dt": "^1.6.2",
+    "@types/datatables.net-buttons": "^1.4.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.900.5",

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -2,7 +2,7 @@
   <thead class="thead-orange">
     <tr class="d-flex">
       <th class="col-9">Name</th>
-      <th class="col-3 text-center"></th>
+      <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
   <tbody>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss

@@ -1 +0,0 @@
-@import '../../../../../../../styles/colors.scss';

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -1,10 +1,11 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MockStore, provideMockStore} from '@ngrx/store/testing';
 
-import { NgxPaginationModule } from 'ngx-pagination';
-import { CustomerListComponent } from './customer-list.component';
-import { allCustomers } from './../../../../store/customer-management.selectors';
-import { CustomerState, SetCustomerToEdit, DeleteCustomer } from 'src/app/modules/customer-management/store';
+import {NgxPaginationModule} from 'ngx-pagination';
+import {CustomerListComponent} from './customer-list.component';
+import {allCustomers} from './../../../../store/customer-management.selectors';
+import {CustomerState, SetCustomerToEdit, DeleteCustomer, LoadCustomers} from 'src/app/modules/customer-management/store';
+import {DataTablesModule} from 'angular-datatables';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
@@ -13,21 +14,20 @@ describe('CustomerTableListComponent', () => {
   let mockCustomerSelector;
 
   const state = {
-    data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
+    data: [{tenant_id: 'id', name: 'name', description: 'description'}],
     isLoading: false,
     message: '',
     customerIdToEdit: '',
     customerId: ''
   };
 
 
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NgxPaginationModule],
+      imports: [NgxPaginationModule, DataTablesModule],
       declarations: [CustomerListComponent],
       providers: [
-        provideMockStore({ initialState: state })
+        provideMockStore({initialState: state})
       ],
     }).compileComponents();
   }));
@@ -46,13 +46,12 @@ describe('CustomerTableListComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onNgInit customers are loaded from store executing an action', () => {
+  it('when the component is initialized the load customer action is triggered', () => {
     spyOn(store, 'dispatch');
 
     component.ngOnInit();
 
-    expect(store.dispatch).toHaveBeenCalled();
-    expect(component.customers).toEqual(state.data);
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
   it('onClick edit, dispatch SetCustomerToEdit and enable customer form', () => {

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -1,57 +1,69 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-import { DataTableDirective } from 'angular-datatables';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
+import {ActionsSubject, Store} from '@ngrx/store';
 
-import { Subscription, Subject } from 'rxjs';
-import { allCustomers } from './../../../../store/customer-management.selectors';
-import { LoadCustomers, DeleteCustomer, SetCustomerToEdit } from './../../../../store/customer-management.actions';
-import { Customer } from './../../../../../shared/models/customer.model';
-import { ITEMS_PER_PAGE } from 'src/environments/environment';
-import {ToastrService} from 'ngx-toastr';
+import {Subject, Subscription} from 'rxjs';
+import {
+  CustomerManagementActionTypes,
+  DeleteCustomer,
+  LoadCustomers,
+  SetCustomerToEdit
+} from './../../../../store/customer-management.actions';
+import {Customer} from './../../../../../shared/models/customer.model';
+import {filter} from 'rxjs/operators';
+import {DataTableDirective} from 'angular-datatables';
 
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.scss'],
 })
-export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
-  initPage1 = 1;
-  itemsPerPage = ITEMS_PER_PAGE;
+export class CustomerListComponent implements OnInit, OnDestroy {
+
   @Input() showCustomerForm: boolean;
   @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
-
+  @Input()
   customers: Customer[] = [];
-  customerSubscription: Subscription;
-  dtOptions: DataTables.Settings = {};
+  dtOptions: any = {};
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, {static: false})
   dtElement: DataTableDirective;
   isDtInitialized = false;
+  private actionsSubscription: Subscription;
 
-  constructor(private store: Store<Customer>, private toastrService: ToastrService) {
-
+  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) {
   }
 
   ngOnInit(): void {
     this.dtOptions = {
-      scrollY: '250px',
-      paging: false,
+      scrollY: '290px',
+      paging: false
     };
-
-    this.store.dispatch(new LoadCustomers());
-    const customers$ = this.store.pipe(select(allCustomers));
-    this.customerSubscription = customers$.subscribe((response) => {
-      this.customers = response ? response : [];
-      this.rerender();
+    this.actionsSubscription = this.actionsSubject$.pipe(
+      filter((action: any) => (
+          action.type === CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS
+        )
+      )
+    ).subscribe((action) => {
+      this.customers = action.payload;
+      this.rerenderDataTable();
     });
-  }
 
-  ngAfterViewInit(): void {
-    this.dtTrigger.next();
+    this.actionsSubscription = this.actionsSubject$.pipe(
+      filter((action: any) => (
+          action.type === CustomerManagementActionTypes.DELETE_CUSTOMER_SUCCESS ||
+          action.type === CustomerManagementActionTypes.UPDATE_CUSTOMER_SUCCESS ||
+          action.type === CustomerManagementActionTypes.CREATE_CUSTOMER_SUCCESS
+        )
+      )
+    ).subscribe((action) => {
+      this.store.dispatch(new LoadCustomers());
+      this.showCustomerForm = false;
+    });
+    this.store.dispatch(new LoadCustomers());
   }
 
   ngOnDestroy() {
-    this.customerSubscription.unsubscribe();
+    this.actionsSubscription.unsubscribe();
     this.dtTrigger.unsubscribe();
   }
 
@@ -65,15 +77,15 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.store.dispatch(new DeleteCustomer(customerId));
   }
 
-  rerender(): void {
+  private rerenderDataTable(): void {
     if (this.isDtInitialized) {
       this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
         dtInstance.destroy();
         this.dtTrigger.next();
       });
     } else {
-      this.isDtInitialized = true;
       this.dtTrigger.next();
+      this.isDtInitialized = true;
     }
   }
 }

src/styles/colors.scss

@@ -51,3 +51,35 @@ $info: #00BAEE;
 .btn:active {
   border: none;
 }
+
+
+/**
+General Datatable adjustment styles
+ */
+.dataTables_wrapper {
+  .dataTables_scroll {
+    .dataTables_scrollBody {
+      table {
+        thead {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.dt-buttons {
+  .dt-button {
+    background-image: linear-gradient($info);
+    color: white;
+  }
+  .dt-button:hover:not(.disabled){
+    background-image: linear-gradient($info);
+    opacity: 0.5;
+  }
+
+  .dt-button.disabled{
+    background-image: linear-gradient($info);
+    opacity: 0.5;
+  }
+}