fix: #228 table-component

Author: macrisguncay

angular.json

@@ -24,13 +24,15 @@
               "src/assets"
             ],
             "styles": [
+              "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"
             ],
             "scripts": [
-              "./node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/jquery/dist/jquery.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/datatables.net/js/jquery.dataTables.js"
             ]
           },
           "configurations": {

package.json

@@ -23,9 +23,12 @@
     "@ngrx/effects": "^9.0.0",
     "@ngrx/store": "^9.0.0",
     "@ngrx/store-devtools": "^9.0.0",
+    "angular-datatables": "^9.0.2",
     "angular-ng-autocomplete": "^2.0.1",
     "bootstrap": "^4.4.1",
-    "jquery": "^3.5.0",
+    "datatables.net": "^1.10.21",
+    "datatables.net-dt": "^1.10.21",
+    "jquery": "^3.5.1",
     "minimist": "^1.2.5",
     "moment": "^2.25.3",
     "msal": "^1.2.1",
@@ -47,8 +50,10 @@
     "@stryker-mutator/core": "^3.1.0",
     "@stryker-mutator/karma-runner": "^3.1.0",
     "@stryker-mutator/typescript": "^3.1.0",
+    "@types/datatables.net": "^1.10.19",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/jquery": "^3.3.38",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "commit-message-validator": "^0.1.11",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { DataTablesModule } from 'angular-datatables';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -106,6 +107,7 @@ import { TimeDetailsPipe } from './modules/time-clock/pipes/time-details.pipe';
     ReactiveFormsModule,
     HttpClientModule,
     NgxPaginationModule,
+    DataTablesModule,
     AutocompleteLibModule,
     StoreModule.forRoot(reducers, {
       metaReducers,

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

@@ -1,4 +1,4 @@
-<table class="table table-sm table-bordered table-striped mb-0">
+<table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
   <thead class="thead-orange">
     <tr class="d-flex">
       <th class="col-9">Name</th>
@@ -8,7 +8,7 @@
   <tbody>
     <tr
       class="d-flex"
-      *ngFor="let customer of customers | paginate: { itemsPerPage: itemsPerPage, currentPage: initPage1, id: 'first' }"
+      *ngFor="let customer of customers"
     >
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
@@ -22,12 +22,3 @@
     </tr>
   </tbody>
 </table>
-<div class="d-flex align-items-end flex-column">
-  <pagination-controls
-    class="mt-auto p-2 custom-pagination"
-    (pageChange)="initPage1 = $event"
-    id="first"
-    previousLabel=""
-    nextLabel=""
-  ></pagination-controls>
-</div>

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

@@ -1,38 +1,58 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
+import { DataTableDirective } from 'angular-datatables';
 
-import { Subscription } from 'rxjs';
+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';
 
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.scss'],
 })
-export class CustomerListComponent implements OnInit, OnDestroy {
+export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   initPage1 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
   @Input() showCustomerForm: boolean;
   @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
 
   customers: Customer[] = [];
   customerSubscription: Subscription;
+  dtOptions: DataTables.Settings = {};
+  dtTrigger: Subject<any> = new Subject();
+  @ViewChild(DataTableDirective, {static: false})
+  dtElement: DataTableDirective;
+  isDtInitialized = false;
 
-  constructor(private store: Store<Customer>) { }
+  constructor(private store: Store<Customer>, private toastrService: ToastrService) {
+
+  }
 
   ngOnInit(): void {
+    this.dtOptions = {
+      scrollY: '250px',
+      paging: false,
+    };
+
     this.store.dispatch(new LoadCustomers());
     const customers$ = this.store.pipe(select(allCustomers));
     this.customerSubscription = customers$.subscribe((response) => {
-      this.customers = response;
+      this.customers = response ? response : [];
+      this.rerender();
     });
   }
 
+  ngAfterViewInit(): void {
+    this.dtTrigger.next();
+  }
+
   ngOnDestroy() {
     this.customerSubscription.unsubscribe();
+    this.dtTrigger.unsubscribe();
   }
 
   editCustomer(customerId: string) {
@@ -44,4 +64,16 @@ export class CustomerListComponent implements OnInit, OnDestroy {
   deleteCustomer(customerId: string) {
     this.store.dispatch(new DeleteCustomer(customerId));
   }
+
+  rerender(): void {
+    if (this.isDtInitialized) {
+      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+        dtInstance.destroy();
+        this.dtTrigger.next();
+      });
+    } else {
+      this.isDtInitialized = true;
+      this.dtTrigger.next();
+    }
+  }
 }

src/styles.scss

@@ -12,3 +12,7 @@ body {
   padding: 0;
   overflow-x: hidden;
 }
+
+.table.dataTable th, .table.dataTable td{
+  box-sizing: border-box;
+}

tsconfig.json

@@ -17,7 +17,12 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@angular/*": [
+        "../node_modules/@angular/*"
+      ]
+    }
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,