close #87- save customers

close #87- save customers

Author: enriquezrene

src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { TimeEntriesComponent } from './modules/time-entries/pages/time-entries.
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
-import { CustomerComponent } from './modules/customer-managment/pages/customer.component';
+import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 
 const routes: Routes = [
   {

src/app/app.module.ts

@@ -36,20 +36,20 @@ import { ProjectEffects } from './modules/project-management/store/project.effec
 import { TechnologyEffects } from './modules/shared/store/technology.effects';
 import { reducers, metaReducers } from './reducers';
 import { environment } from '../environments/environment';
-import { CustomerComponent } from './modules/customer-managment/pages/customer.component';
+import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 // tslint:disable-next-line: max-line-length
-import { CustomerListComponent } from './modules/customer-managment/components/customer-info/components/customer-list/customer-list.component';
-import { SearchComponent } from './modules/customer-managment/components/search/search.component';
+import { CustomerListComponent } from './modules/customer-management/components/customer-info/components/customer-list/customer-list.component';
 // tslint:disable-next-line: max-line-length
-import { ManagementCustomerProjectsComponent } from './modules/customer-managment/components/management-customer-projects/management-customer-projects.component';
-import { CreateCustomerComponent } from './modules/customer-managment/components/customer-info/components/create-customer/create-customer';
+import { ManagementCustomerProjectsComponent } from './modules/customer-management/components/management-customer-projects/management-customer-projects.component';
+import { CreateCustomerComponent } from './modules/customer-management/components/customer-info/components/create-customer/create-customer';
 // tslint:disable-next-line: max-line-length
-import { CreateProjectComponent } from './modules/customer-managment/components/projects/components/create-project/create-project.component';
-import { ProjectListComponent } from './modules/customer-managment/components/projects/components/project-list/project-list.component';
+import { CreateProjectComponent } from './modules/customer-management/components/projects/components/create-project/create-project.component';
+import { ProjectListComponent } from './modules/customer-management/components/projects/components/project-list/project-list.component';
 // tslint:disable-next-line: max-line-length
-import { ProjectTypeListComponent } from './modules/customer-managment/components/projects-type/components/project-type-list/project-type-list.component';
+import { ProjectTypeListComponent } from './modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component';
 // tslint:disable-next-line: max-line-length
-import { CreateProjectTypeComponent } from './modules/customer-managment/components/projects-type/components/create-project-type/create-project-type.component';
+import { CreateProjectTypeComponent } from './modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component';
+import { CustomerEffects } from './modules/customer-management/store/customer-management.effects';
 
 @NgModule({
   declarations: [
@@ -77,7 +77,6 @@ import { CreateProjectTypeComponent } from './modules/customer-managment/compone
     SearchProjectComponent,
     CustomerComponent,
     CustomerListComponent,
-    SearchComponent,
     ManagementCustomerProjectsComponent,
     CreateCustomerComponent,
     CreateProjectComponent,
@@ -102,7 +101,7 @@ import { CreateProjectTypeComponent } from './modules/customer-managment/compone
           maxAge: 15, // Retains last 15 states
         })
       : [],
-    EffectsModule.forRoot([ProjectEffects, ActivityEffects, TechnologyEffects]),
+    EffectsModule.forRoot([ProjectEffects, ActivityEffects, CustomerEffects, TechnologyEffects]),
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,40 @@
+<div class="container">
+  <form style="width: 600px;" [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
+    <div class="form-group">
+      <div
+        *ngIf="showAlert && messageToShow !== ''"
+        [ngClass]="{'bg-secondary': messageToShow == 'Customer created successfully!', 'bg-primary': messageToShow != 'Customer created successfully!'}"
+        class="alert alert-dismissible fade fade-in show text-white"
+        role="alert"
+      >
+        <strong>{{ messageToShow }}</strong>
+      </div>
+
+      <input
+        class="form-control form-control-sm"
+        id="name"
+        type="text"
+        formControlName="name"
+        placeholder="Customer name"
+        [class.is-invalid]="customerForm.invalid && customerForm.touched"
+        required
+      />
+      <span
+        class="badge badge-pill badge-light text-danger"
+        *ngIf="(customerForm.dirty || customerForm.touched) && customerForm.invalid"
+        >Activity name is required</span
+      >
+      <textarea
+        class="form-control form-control-sm mt-2"
+        id="description"
+        rows="3"
+        formControlName="description"
+        placeholder="Customer description"
+      ></textarea>
+      <button type="submit" class="btn btn-sm btn-primary" [disabled]="!customerForm.valid">Save</button>
+      <button (click)="resetCustomerForm()" id="cancel" type="button" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">
+        Cancel
+      </button>
+    </div>
+  </form>
+</div>

src/app/modules/customer-managment/components/customer-info/components/create-customer/create-customer.scss renamed to src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.scss

@@ -0,0 +1,106 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
+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';
+
+describe('CreateCustomerComponent', () => {
+  let component: CreateCustomerComponent;
+  let fixture: ComponentFixture<CreateCustomerComponent>;
+  let store: MockStore<CustomerState>;
+
+  const state = {
+    data: [],
+    isLoading: false,
+    message: '',
+  };
+
+  const customerData: models.Customer = {
+    name: 'aa',
+    description: 'bb',
+    tenant_id: 'cc',
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CreateCustomerComponent],
+      providers: [FormBuilder, provideMockStore({ initialState: state })],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCustomerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    store = TestBed.inject(MockStore);
+    store.setState(state);
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('component should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call resetCustomerForm', () => {
+    spyOn(component.customerForm, 'reset');
+
+    component.resetCustomerForm();
+
+    expect(component.customerForm.reset).toHaveBeenCalled();
+  });
+
+  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 created successfully! ', () => {
+    component.areTabsActive = false;
+    component.messageToShow = '';
+
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    component.onSubmit(customerData);
+
+    component.setStatusOnScreen('Customer created successfully!');
+
+    expect(component.messageToShow).toEqual('Customer created successfully!');
+    expect(component.areTabsActive).toBeTrue();
+  });
+
+  it('should be disabled tabs and show message An error occurred, try again later. ', () => {
+    component.areTabsActive = false;
+    component.messageToShow = '';
+
+    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();
+  });
+});

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

@@ -0,0 +1,62 @@
+import { Component, Input, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Store, select } from '@ngrx/store';
+
+import { Subscription } from 'rxjs';
+import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
+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 implements OnInit, OnDestroy {
+  customerForm: FormGroup;
+  @Input() areTabsActive: boolean;
+  @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
+  showAlert = false;
+  messageToShow = '';
+  saveSubscription: Subscription;
+
+  constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
+    this.customerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      description: [''],
+    });
+  }
+
+  ngOnInit() {
+    const messages$ = this.store.pipe(select(getStatusMessage));
+    this.saveSubscription = messages$.subscribe((valueMessage) => {
+      this.setStatusOnScreen(valueMessage);
+    });
+  }
+
+  ngOnDestroy() {
+    this.areTabsActive = false;
+    this.saveSubscription.unsubscribe();
+  }
+
+  onSubmit(customerData) {
+    this.store.dispatch(new CreateCustomer(customerData));
+    this.showAlert = true;
+  }
+
+  setStatusOnScreen(message: string) {
+    if (message === 'Customer created successfully!') {
+      this.messageToShow = message;
+      this.areTabsActive = true;
+      this.changeValueAreTabsActives.emit(this.areTabsActive);
+    } else if (message === 'An error occurred, try again later.') {
+      this.messageToShow = message;
+      this.areTabsActive = false;
+      this.changeValueAreTabsActives.emit(this.areTabsActive);
+    }
+  }
+
+  resetCustomerForm() {
+    this.showAlert = false;
+    this.customerForm.reset();
+  }
+}