Merge pull request #157 from ioet/89-Edit-and-delete-customers

fix: #89 edit and delete customers

Author: enriquezrene

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html

@@ -3,7 +3,8 @@
     <div class="form-group">
       <div
         *ngIf="showAlert && messageToShow !== ''"
-        [ngClass]="{'bg-secondary': messageToShow == 'Customer created successfully!', 'bg-primary': messageToShow != 'Customer created successfully!'}"
+        [ngClass]="{'bg-secondary': messageToShow == 'Customer created successfully!' || messageToShow == 'Customer updated successfully!', 
+                    'bg-primary': messageToShow !== 'Customer created successfully!' }"
         class="alert alert-dismissible fade fade-in show text-white"
         role="alert"
       >
@@ -12,7 +13,7 @@
 
       <input
         class="form-control form-control-sm"
-        id="name"
+        id="customerName"
         type="text"
         formControlName="name"
         placeholder="Customer name"
@@ -26,7 +27,7 @@
       >
       <textarea
         class="form-control form-control-sm mt-2"
-        id="description"
+        id="customerDescription"
         rows="3"
         formControlName="description"
         placeholder="Customer description"

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

@@ -4,8 +4,8 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
 import { CreateCustomerComponent } from './create-customer';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
-import * as models from 'src/app/modules/shared/models/index';
-import { LoadCustomers } from './../../../../store/customer-management.actions';
+import { LoadCustomers, ResetCustomerToEdit } from './../../../../store/customer-management.actions';
+import { Customer } from 'src/app/modules/shared/models';
 
 describe('CreateCustomerComponent', () => {
   let component: CreateCustomerComponent;
@@ -16,9 +16,10 @@ describe('CreateCustomerComponent', () => {
     data: [],
     isLoading: false,
     message: '',
+    customerIdToEdit: '',
   };
 
-  const customerData: models.Customer = {
+  const customerData: Customer = {
     name: 'aa',
     description: 'bb',
     tenant_id: 'cc',
@@ -35,7 +36,6 @@ describe('CreateCustomerComponent', () => {
     fixture = TestBed.createComponent(CreateCustomerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-
     store = TestBed.inject(MockStore);
     store.setState(state);
   });
@@ -68,9 +68,12 @@ describe('CreateCustomerComponent', () => {
 
   it('should call resetCustomerForm', () => {
     spyOn(component.customerForm, 'reset');
+    spyOn(store, 'dispatch');
 
     component.resetCustomerForm();
 
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledWith(new ResetCustomerToEdit());
     expect(component.customerForm.reset).toHaveBeenCalled();
   });
 
@@ -81,9 +84,7 @@ describe('CreateCustomerComponent', () => {
     spyOn(store, 'dispatch');
 
     component.ngOnInit();
-
     component.onSubmit(customerData);
-
     component.setStatusOnScreen('Customer created successfully!');
 
     expect(component.messageToShow).toEqual('Customer created successfully!');
@@ -97,12 +98,19 @@ describe('CreateCustomerComponent', () => {
     spyOn(store, 'dispatch');
 
     component.ngOnInit();
-
     component.onSubmit(customerData);
-
     component.setStatusOnScreen('An error occurred, try again later.');
 
     expect(component.messageToShow).toEqual('An error occurred, try again later.');
     expect(component.areTabsActive).toBeFalse();
   });
+
+  it('set data to update ', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+    component.setDataToUpdate(customerData);
+
+    expect(component.messageToShow).toEqual(undefined);
+  });
 });

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -3,8 +3,15 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
 import { Subscription } from 'rxjs';
-import { CustomerState, CreateCustomer, LoadCustomers } from 'src/app/modules/customer-management/store';
-import { getStatusMessage } from './../../../../store/customer-management.selectors';
+import { getStatusMessage, getCustomerById } from './../../../../store/customer-management.selectors';
+import { Customer } from 'src/app/modules/shared/models';
+import {
+  CustomerState,
+  CreateCustomer,
+  LoadCustomers,
+  UpdateCustomer,
+  ResetCustomerToEdit,
+} from 'src/app/modules/customer-management/store';
 
 @Component({
   selector: 'app-create-customer',
@@ -17,7 +24,9 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
   showAlert = false;
   messageToShow = '';
+  customerToEdit: Customer;
   saveSubscription: Subscription;
+  editSubscription: Subscription;
 
   constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
     this.customerForm = this.formBuilder.group({
@@ -31,17 +40,34 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     this.saveSubscription = messages$.subscribe((valueMessage) => {
       this.setStatusOnScreen(valueMessage);
     });
+
+    const customers$ = this.store.pipe(select(getCustomerById));
+    this.editSubscription = customers$.subscribe((customer) => {
+      this.customerToEdit = customer;
+      this.setDataToUpdate(this.customerToEdit);
+    });
   }
 
   ngOnDestroy() {
     this.areTabsActive = false;
     this.saveSubscription.unsubscribe();
+    this.editSubscription.unsubscribe();
   }
 
   onSubmit(customerData) {
-    this.store.dispatch(new CreateCustomer(customerData));
-    this.store.dispatch(new LoadCustomers());
+    if (this.customerToEdit) {
+      const customer = {
+        ...customerData,
+        id: this.customerToEdit.id,
+      };
+      this.store.dispatch(new UpdateCustomer(customer));
+      this.customerForm.reset();
+    } else {
+      this.store.dispatch(new CreateCustomer(customerData));
+      this.store.dispatch(new LoadCustomers());
+    }
     this.showAlert = true;
+    setTimeout(() => (this.showAlert = false), 3000);
   }
 
   setStatusOnScreen(message: string) {
@@ -54,10 +80,20 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.areTabsActive = false;
       this.changeValueAreTabsActives.emit(this.areTabsActive);
     }
+    this.messageToShow = message;
+  }
+
+  setDataToUpdate(customerData: Customer) {
+    if (customerData) {
+      this.customerForm.setValue({
+        name: customerData.name,
+        description: customerData.description,
+      });
+    }
   }
 
   resetCustomerForm() {
-    this.showAlert = false;
     this.customerForm.reset();
+    this.store.dispatch(new ResetCustomerToEdit());
   }
 }

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

@@ -1,3 +1,14 @@
+<div
+  *ngIf="showAlert && messageToShow !== ''"
+  [ngClass]="{
+    'bg-secondary': messageToShow == 'Customer removed successfully!',
+    'bg-primary': messageToShow != 'Customer removed successfully!'
+  }"
+  class="alert alert-dismissible fade fade-in show text-white"
+  role="alert"
+>
+  <strong>{{ messageToShow }}</strong>
+</div>
 <table class="table table-sm table-bordered table-striped mb-0">
   <thead class="thead-orange">
     <tr class="d-flex">
@@ -12,10 +23,10 @@
     >
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
-        <button type="button" class="btn btn-sm btn-secondary">
+        <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-secondary">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button type="button" class="btn btn-sm btn-danger ml-2">
+        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-danger ml-2">
           <i class="fas fa-trash-alt fa-xs"></i>
         </button>
       </td>

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

@@ -1,22 +1,22 @@
-import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
-import { CustomerListComponent } from './customer-list.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import { CustomerListComponent } from './customer-list.component';
 import { allCustomers } from './../../../../store/customer-management.selectors';
-import { CustomerState } from 'src/app/modules/customer-management/store';
+import { CustomerState, SetCustomerToEdit, DeleteCustomer } from 'src/app/modules/customer-management/store';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
   let fixture: ComponentFixture<CustomerListComponent>;
   let store: MockStore<CustomerState>;
   let mockCustomerSelector;
 
-
   const state = {
     data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
     isLoading: false,
     message: '',
+    customerIdToEdit: '',
   };
 
   beforeEach(async(() => {
@@ -50,8 +50,25 @@ describe('CustomerTableListComponent', () => {
     expect(component.customers).toEqual(state.data);
   });
 
+  it('onClick edit, dispatch SetCustomerToEdit and enable customer form', () => {
+    spyOn(store, 'dispatch');
+
+    component.editCustomer('1');
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetCustomerToEdit('1'));
+    expect(component.showCustomerForm).toBeTruthy();
+  });
+
+  it('onClick delete, dispatch DeleteCustomer and enable show alert', () => {
+    spyOn(store, 'dispatch');
+
+    component.deleteCustomer('1');
+
+    expect(store.dispatch).toHaveBeenCalledWith(new DeleteCustomer('1'));
+    expect(component.showAlert).toBeTruthy();
+  });
+
   afterEach(() => {
     fixture.destroy();
   });
-
 });

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

@@ -1,32 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
-import { allCustomers } from './../../../../store/customer-management.selectors';
-import { LoadCustomers } from './../../../../store/customer-management.actions';
+import { Subscription } from 'rxjs';
+import { allCustomers, getStatusMessage } 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';
 
-
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
   styleUrls: ['./customer-list.component.scss'],
 })
-export class CustomerListComponent implements OnInit {
-
+export class CustomerListComponent implements OnInit, OnDestroy {
   initPage1 = 1;
   itemsPerPage = ITEMS_PER_PAGE;
+  @Input() showCustomerForm: boolean;
+  @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
 
   customers: Customer[] = [];
+  messageToShow = '';
+  showAlert = false;
+  customerSubscription: Subscription;
+  customerMessageSubscription: Subscription;
 
   constructor(private store: Store<Customer>) {}
 
   ngOnInit(): void {
     this.store.dispatch(new LoadCustomers());
     const customers$ = this.store.pipe(select(allCustomers));
-    customers$.subscribe((response) => {
+    this.customerSubscription = customers$.subscribe((response) => {
       this.customers = response;
     });
+
+    const messages$ = this.store.pipe(select(getStatusMessage));
+    this.customerMessageSubscription = messages$.subscribe((valueMessage) => {
+      this.setStatusOnScreen(valueMessage);
+    });
+  }
+
+  ngOnDestroy() {
+    this.customerSubscription.unsubscribe();
+    this.customerMessageSubscription.unsubscribe();
   }
 
+  setStatusOnScreen(message: string) {
+    this.messageToShow = message;
+  }
+
+  editCustomer(customerId: string) {
+    this.showCustomerForm = true;
+    this.changeValueShowCustomerForm.emit(this.showCustomerForm);
+    this.store.dispatch(new SetCustomerToEdit(customerId));
+  }
+
+  deleteCustomer(customerId: string) {
+    this.showAlert = true;
+    setTimeout(() => (this.showAlert = false), 3000);
+    this.store.dispatch(new DeleteCustomer(customerId));
+  }
 }