fix: #89 C1-edit and delete customres

Author: daros10

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"
       >

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 * as models from 'src/app/modules/shared/models/index';
 
 describe('CreateCustomerComponent', () => {
   let component: CreateCustomerComponent;
@@ -16,6 +16,7 @@ describe('CreateCustomerComponent', () => {
     data: [],
     isLoading: false,
     message: '',
+    customerIdToEdit: '',
   };
 
   const customerData: models.Customer = {
@@ -35,7 +36,6 @@ describe('CreateCustomerComponent', () => {
     fixture = TestBed.createComponent(CreateCustomerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-
     store = TestBed.inject(MockStore);
     store.setState(state);
   });
@@ -81,9 +81,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 +95,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,14 @@ 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/index';
+import {
+  CustomerState,
+  CreateCustomer,
+  LoadCustomers,
+  UpdateCustomer,
+} from 'src/app/modules/customer-management/store';
 
 @Component({
   selector: 'app-create-customer',
@@ -17,7 +23,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 +39,35 @@ 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());
+    const key = 'id';
+    if (this.customerToEdit) {
+      const customer = {
+        ...customerData,
+        id: this.customerToEdit[key],
+      };
+      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,6 +80,16 @@ 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() {

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));
+  }
 }

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html

@@ -1,35 +1,42 @@
-
-  <form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
-    <div class="form-group">
-      <input
-        type="text"
-        class="form-control form-control-sm"
-        id="name"
-        formControlName="name"
-        aria-describedby=""
-        [class.is-invalid]="name.invalid && name.touched"
-        required
-        placeholder="Name"
-      />
-      <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
-        Name is required.
+<form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
+  <div class="form-group">
+    <input
+      type="text"
+      class="form-control form-control-sm"
+      id="name"
+      formControlName="name"
+      aria-describedby=""
+      [class.is-invalid]="name.invalid && name.touched"
+      required
+      placeholder="Name"
+    />
+    <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+      Name is required.
+    </div>
+    <textarea
+      class="form-control form-control-sm mt-2"
+      id="descriptionTextArea"
+      rows="3"
+      placeholder="Description"
+      formControlName="description"
+    ></textarea>
+    <div class="btn-toolbar" role="toolbar">
+      <div class="btn-group mr-2" role="group">
+        <button type="submit" class="btn btn-sm btn-primary mb-2 ml-2 mt-2" [disabled]="!projectTypeForm.valid">
+          Save
+        </button>
       </div>
-      <textarea
-        class="form-control form-control-sm mt-2"
-        id="descriptionTextArea"
-        rows="3"
-        placeholder="Description"
-        formControlName="description"
-      ></textarea>
-      <div class="btn-toolbar" role="toolbar">
-        <div class="btn-group mr-2" role="group">
-          <button type="submit" class="btn btn-sm btn-primary mb-2 ml-2 mt-2" [disabled]="!projectTypeForm.valid">Save</button>
-        </div>
-        <div class="btn-group mr-2" role="group">
-           <button class="btn btn-sm btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!projectTypeToEdit" (click)="cancelButton()">Cancel</button>
-        </div>
+      <div class="btn-group mr-2" role="group">
+        <button
+          class="btn btn-sm btn-secondary mb-2 ml-2 mt-2"
+          type="reset"
+          [hidden]="!projectTypeToEdit"
+          (click)="cancelButton()"
+        >
+          Cancel
+        </button>
       </div>
     </div>
-  </form>
-  <hr />
-
+  </div>
+</form>
+<hr />

src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html

@@ -1,7 +1,7 @@
 <div class="container mb-1">
   <form style="width: 600px;">
     <div class="form-group">
-      <input type="text" class="form-control form-control-sm" id="" aria-describedby="" placeholder="Project name" />
+      <input type="text" class="form-control form-control-sm" id="projectName" placeholder="Project name" />
       <textarea
         class="form-control form-control-sm mt-2"
         id="exampleFormControlTextarea1"

src/app/modules/customer-management/pages/customer.component.html

@@ -8,7 +8,10 @@ <h4>Customers</h4>
       <app-search-project></app-search-project>
     </div>
   </div>
-  <app-customer-list></app-customer-list>
+  <app-customer-list
+    [showCustomerForm]="showCustomerForm"
+    (changeValueShowCustomerForm)="showCustomerForm = $event"
+  ></app-customer-list>
   <div class="row" *ngIf="showCustomerForm">
     <div class="col">
       <app-management-customer-projects></app-management-customer-projects>