Merge branch 'master' into TT-208-don't-allow-deleting-activities

Author: thegreatyamori

angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
@@ -106,6 +107,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.38.1",
+  "version": "1.40.0",
   "scripts": {
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",
@@ -20,6 +20,8 @@
     "@angular/compiler": "~10.2.2",
     "@angular/core": "~10.2.2",
     "@angular/forms": "~10.2.2",
+    "@angular/material": "^11.2.3",
+    "@angular/material-moment-adapter": "^11.2.9",
     "@angular/platform-browser": "~10.2.2",
     "@angular/platform-browser-dynamic": "~10.2.2",
     "@angular/router": "~10.2.2",

package.json

@@ -11,7 +11,9 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 
@@ -134,6 +136,9 @@ const maskConfig: Partial<IConfig> = {
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
+    MatInputModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
     CommonModule,
     BrowserModule,
     BrowserAnimationsModule,

src/app/app.module.ts

@@ -8,35 +8,36 @@
   >
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-5 text-center">Customer ID</th>
-        <th class="col-3 text-center">Name</th>
-        <th class="col-4 text-center">Options</th>
+        <th class="col-4 text-center">Customer ID</th>
+        <th class="col-4 text-center">Name</th>
+        <th class="col-2 text-center">Options</th>
+        <th class="col-2 text-center">Visibility</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
     <tbody *ngIf="((isLoading$ | async) === false)">
       <tr class="d-flex" *ngFor="let customer of customers">
-        <td class="col-5 text-break">{{ customer.id }}</td>
-        <td class="col-3 text-break">{{ customer.name }}</td>
-        <td class="col-4 text-center">
-          <button
-            data-toggle="modal"
-            (click)="editCustomer(customer.id)"
-            type="button"
-            data-target="#editModal"
-            class="btn btn-sm btn-primary"
-          >
+        <td class="col-4 text-break">{{ customer.id }}</td>
+        <td class="col-4 text-break">{{ customer.name }}</td>
+        <td class="col-2 text-center">
+          <button 
+            data-toggle="modal" 
+            (click)="editCustomer(customer.id)" 
+            type="button" data-target="#editModal"
+            class="btn btn-sm btn-primary">
             <i class="fa fa-pen fa-xs"></i>
           </button>
-
-          <button
-            data-toggle="modal"
-            data-target="#deleteModal"
-            (click)="openModal(customer)"
-            type="button"
-            class="btn btn-sm btn-danger ml-2"
+        </td>
+        <td class="col-2 text-center">
+          <button 
+          class="btn btn-sm"
+          data-toggle="modal" 
+          data-target="#deleteModal"
+          [ngClass]="customer.btnColor"
+          (click)="switchStatus(customer)"
           >
-            <i class="fa fa-trash-alt fa-xs"></i>
+            <i class="fa" [ngClass]="customer.btnIcon" ></i>
+            {{customer.btnName}}
           </button>
         </td>
       </tr>
@@ -68,4 +69,4 @@
   [body]="message"
   (closeModalEvent)="closeModal()"
   >
-</app-dialog>
+</app-dialog>

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

@@ -23,20 +23,39 @@ describe('CustomerTableListComponent', () => {
   const actionSub: ActionsSubject = new ActionsSubject();
 
   const state = {
-    data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
+    data: [{ tenant_id: 'id', name: 'name', description: 'description', status: 'inactive' }],
     isLoading: false,
     message: '',
     customerIdToEdit: '',
     customerId: '',
   };
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [NgxPaginationModule, DataTablesModule],
-      declarations: [CustomerListComponent],
-      providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
-    }).compileComponents();
-  }));
+  const btnProps = [
+    {
+      key: 'active',
+      _status: false,
+      btnColor: 'btn-danger',
+      btnIcon: 'fa-arrow-circle-down',
+      btnName: 'Archive',
+    },
+    {
+      key: 'inactive',
+      _status: true,
+      btnColor: 'btn-primary',
+      btnIcon: 'fa-arrow-circle-up',
+      btnName: 'Active',
+    },
+  ];
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [NgxPaginationModule, DataTablesModule],
+        declarations: [CustomerListComponent],
+        providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CustomerListComponent);
@@ -175,7 +194,12 @@ describe('CustomerTableListComponent', () => {
 
     actionSubject.next(action);
 
-    expect(component.customers).toEqual(state.data);
+    const StateWithBtnProperties = state.data.map((customer) => {
+      const addProps = btnProps.find((prop) => prop.key === component.setActive(customer.status));
+      return { ...customer, ...addProps };
+    });
+
+    expect(component.customers).toEqual(StateWithBtnProperties);
   });
 
   it('on success load customer, the datatable should be reloaded', async () => {
@@ -191,6 +215,60 @@ describe('CustomerTableListComponent', () => {
     expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
   });
 
+  it('openModal should set on true and display "Are you sure you want to archive customer"', () => {
+    const message = 'Are you sure you want to archive name?';
+    const itemData = {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      status: 'active',
+      key: 'active',
+      _status: false,
+      btnColor: 'btn-danger',
+      btnIcon: 'fa-arrow-circle-down',
+      btnName: 'Archive',
+    };
+
+    component.openModal(itemData);
+    expect(component.showModal).toBeTrue();
+    expect(component.message).toBe(message);
+  });
+
+  it('switchStatus should call openModal() on item.status = activate', () => {
+    const itemData = {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      status: 'activate',
+      key: 'activate',
+      _status: false,
+      btnColor: 'btn-danger',
+      btnIcon: 'fa-arrow-circle-down',
+      btnName: 'Archive',
+    };
+
+    spyOn(component, 'openModal');
+    component.switchStatus(itemData);
+    expect(component.openModal).toHaveBeenCalled();
+  });
+
+  it('switchStatus should set showModal false when item.status = inactive', () => {
+    const itemData = {
+      id: '1',
+      name: 'name',
+      description: 'description',
+      status: 'inactive',
+      key: 'inactive',
+      _status: true,
+      btnColor: 'btn-primary',
+      btnIcon: 'fa-arrow-circle-up',
+      btnName: 'Active',
+    };
+
+    component.switchStatus(itemData);
+    expect(component.showModal).toBeFalse();
+  });
+
   afterEach(() => {
     component.dtTrigger.unsubscribe();
     component.changeCustomerSubscription.unsubscribe();