Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: #89 C1-edit and delete customres
  • Loading branch information
daros10 committed Apr 21, 2020
commit 4e1bc8fe0d927f8c522d6f7cab90672aebd4696c
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import should be
import { Customer } from 'src/app/modules/shared/models';

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done


describe('CreateCustomerComponent', () => {
let component: CreateCustomerComponent;
Expand All @@ -16,6 +16,7 @@ describe('CreateCustomerComponent', () => {
data: [],
isLoading: false,
message: '',
customerIdToEdit: '',
};

const customerData: models.Customer = {
Expand All @@ -35,7 +36,6 @@ describe('CreateCustomerComponent', () => {
fixture = TestBed.createComponent(CreateCustomerComponent);
component = fixture.componentInstance;
fixture.detectChanges();

store = TestBed.inject(MockStore);
store.setState(state);
});
Expand Down Expand Up @@ -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!');
Expand All @@ -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);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

@jorgecod jorgecod Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import should be
import { Customer } from 'src/app/modules/shared/models';

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

import {
CustomerState,
CreateCustomer,
LoadCustomers,
UpdateCustomer,
} from 'src/app/modules/customer-management/store';

@Component({
selector: 'app-create-customer',
Expand All @@ -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({
Expand All @@ -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],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a better solution would be this.
const customer = { ...this.customerToEdit, ...customerData }; o const customer = { ...customerData, id: this.customerToEdit.id };
with this we would eliminate line 57
const key = 'id';

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

};
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) {
Expand All @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand Down Expand Up @@ -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();
});

});
Original file line number Diff line number Diff line change
@@ -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));
}
}
Original file line number Diff line number Diff line change
@@ -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 />
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading