fix: #87 c3-save-customers

Author: daros10

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

@@ -2,15 +2,12 @@
   <form style="width: 600px;" [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
     <div class="form-group">
       <div
-        *ngIf="messageToShow != ''"
-        [ngClass]="{'bg-secondary': messageToShow == 'Data create successfully!', 'bg-primary': messageToShow != 'Data create successfully!'}"
+        *ngIf="showAlert && messageToShow !== ''"
+        [ngClass]="{'bg-secondary': messageToShow == 'Customer create successfully!', 'bg-primary': messageToShow != 'Customer create successfully!'}"
         class="alert alert-dismissible fade fade-in show text-white"
         role="alert"
       >
         <strong>{{ messageToShow }}</strong>
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
       </div>
 
       <input

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

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CreateCustomerComponent } from './create-customer';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 import { Customer } from 'src/app/modules/shared/models/customer.model';
 
 describe('CreateCustomerComponent', () => {
@@ -17,6 +17,12 @@ describe('CreateCustomerComponent', () => {
     message: '',
   };
 
+  const customerData: Customer = {
+    name: 'aa',
+    description: 'bb',
+    tenant_id: 'cc',
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [CreateCustomerComponent],
@@ -41,26 +47,60 @@ describe('CreateCustomerComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call resetCustomerForm', async(() => {
+  it('should call resetCustomerForm', () => {
     spyOn(component.customerForm, 'reset');
 
     component.resetCustomerForm();
 
     expect(component.customerForm.reset).toHaveBeenCalled();
-  }));
-
-  it('onSubmit and dispatch CreateCustomer action', async(() => {
-    const customerData: Customer = {
-      name: 'aa',
-      description: 'bb',
-      tenant_id: 'cc',
-    };
+  });
 
+  it('onSubmit and dispatch CreateCustomer action', () => {
     spyOn(store, 'dispatch');
 
     component.onSubmit(customerData);
 
     expect(store.dispatch).toHaveBeenCalledTimes(1);
     expect(store.dispatch).toHaveBeenCalledWith(new CreateCustomer(customerData));
-  }));
+  });
+
+  it('should call resetCustomerForm', () => {
+    spyOn(component.customerForm, 'reset');
+
+    component.resetCustomerForm();
+
+    expect(component.customerForm.reset).toHaveBeenCalled();
+  });
+
+  it('should be enable tabs and show message Customer create successfully! ', () => {
+    component.isActiveItemTabs = false;
+    component.messageToShow = '';
+
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    component.onSubmit(customerData);
+
+    component.setStatusOnScreen('Customer create successfully!');
+
+    expect(component.messageToShow).toEqual('Customer create successfully!');
+    expect(component.isActiveItemTabs).toBeTrue();
+  });
+
+  it('should be disabled tabs and show message Something went wrong creating customer! ', () => {
+    component.isActiveItemTabs = false;
+    component.messageToShow = '';
+
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    component.onSubmit(customerData);
+
+    component.setStatusOnScreen('Something went wrong creating customer!');
+
+    expect(component.messageToShow).toEqual('Something went wrong creating customer!');
+    expect(component.isActiveItemTabs).toBeFalse();
+  });
 });

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

@@ -1,20 +1,22 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Component, Input, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { getStatusMessage } from 'src/app/modules/customer-management/store/customer-management.selectors';
 
 @Component({
   selector: 'app-create-customer',
   templateUrl: './create-customer.html',
   styleUrls: ['./create-customer.scss'],
 })
-export class CreateCustomerComponent {
+export class CreateCustomerComponent implements OnInit, OnDestroy {
   customerForm: FormGroup;
   @Input() isActiveItemTabs: boolean;
   @Output() changeValueIsActiveItemTabs = new EventEmitter<boolean>();
-  showSuccessAlert = false;
+  showAlert = false;
   messageToShow = '';
-  response = '';
+  saveSubscription: Subscription;
 
   constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
     this.customerForm = this.formBuilder.group({
@@ -23,22 +25,38 @@ export class CreateCustomerComponent {
     });
   }
 
+  ngOnInit() {
+    const messages$ = this.store.pipe(select(getStatusMessage));
+    this.saveSubscription = messages$.subscribe((valueMessage) => {
+      this.setStatusOnScreen(valueMessage);
+      console.log(valueMessage);
+    });
+  }
+
+  ngOnDestroy() {
+    this.isActiveItemTabs = false;
+    this.saveSubscription.unsubscribe();
+  }
+
   onSubmit(customerData) {
     this.store.dispatch(new CreateCustomer(customerData));
-    this.store.subscribe((state) => {
-      this.response = Object.values(state)[2].message;
-      if (this.response === 'Data create successfully!' || undefined) {
-        this.isActiveItemTabs = true;
-        this.changeValueIsActiveItemTabs.emit(this.isActiveItemTabs);
-        this.messageToShow = this.response;
-      } else {
-        this.messageToShow = this.response;
-      }
-    });
-    this.messageToShow = '';
+    this.showAlert = true;
+  }
+
+  setStatusOnScreen(message: string) {
+    if (message === 'Customer create successfully!') {
+      this.messageToShow = message;
+      this.isActiveItemTabs = true;
+      this.changeValueIsActiveItemTabs.emit(this.isActiveItemTabs);
+    } else if (message === 'Something went wrong creating customer!') {
+      this.messageToShow = message;
+      this.isActiveItemTabs = false;
+      this.changeValueIsActiveItemTabs.emit(this.isActiveItemTabs);
+    }
   }
 
   resetCustomerForm() {
+    this.showAlert = false;
     this.customerForm.reset();
   }
 }

src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-management-customer-projects',

src/app/modules/customer-management/store/customer-management.reducers.ts

@@ -30,7 +30,7 @@ export function customerManagementReducer(
         ...state,
         data: [action.payload],
         isLoading: false,
-        message: 'Data create successfully!',
+        message: 'Customer create successfully!',
       };
     }
 
@@ -42,5 +42,8 @@ export function customerManagementReducer(
         message: 'Something went wrong creating customer!',
       };
     }
+
+    default:
+      return state;
   }
 }

src/app/modules/customer-management/store/customer-management.selectors.ts

@@ -1,5 +1,10 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
 import { CustomerState } from './customer-management.reducers';
+export const getCustomerState = createFeatureSelector<CustomerState>('customers');
 
-const getCustomerState = createFeatureSelector<CustomerState>('customers');
+export const getStatusMessage = createSelector(getCustomerState, (messageState) => {
+  if (messageState) {
+    return messageState.message;
+  }
+});

src/app/reducers/index.ts

@@ -15,8 +15,8 @@ export interface State {
 export const reducers: ActionReducerMap<State> = {
   projects: projectReducer,
   activities: activityManagementReducer,
-  technologies: technologyReducer,
   customers: customerManagementReducer,
+  technologies: technologyReducer,
 };
 
 export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

src/environments/environment.ts

@@ -5,7 +5,7 @@ import * as keys from './keys';
 
 export const environment = {
   production: false,
-  timeTrackerApiUrl: 'https://timetracker-api.azurewebsites.net',
+  timeTrackerApiUrl: 'https://tsheets-apim.azure-api.net',
   stackexchangeApiUrl: 'https://api.stackexchange.com',
 };