From d12ce958e974b4407ef9f77a53eff5e4a0362bd8 Mon Sep 17 00:00:00 2001 From: Santiago Pozo Ruiz <38196801+DrFreud1@users.noreply.github.com> Date: Fri, 23 Jul 2021 14:42:12 -0500 Subject: [PATCH 1/2] Tt 289 cannot edit the date of an entry (#708) * fix: TT-289 added an extra comparison to make sure the update date is being saved * fix: TT-289 remove non-relevant anymore test cases, after fist changes * Update details-fields.component.ts * Update details-fields.component.ts --- .../details-fields.component.spec.ts | 26 ------------------- .../details-fields.component.ts | 3 +-- 2 files changed, 1 insertion(+), 28 deletions(-) diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts b/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts index 42f6e2263..2fa11b8af 100644 --- a/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts +++ b/src/app/modules/shared/components/details-fields/details-fields.component.spec.ts @@ -418,19 +418,6 @@ describe('DetailsFieldsComponent', () => { expect(component.saveEntry.emit).toHaveBeenCalledWith(data); }); - it('should not modify the start_date when start_hour has not been modified', () => { - const currentDate = moment().format('YYYY-MM-DD'); - const startHour = moment().subtract(3, 'hours').format('HH:mm:ss'); - const expectedStartDate = new Date(`${currentDate}T${startHour.trim()}`); - - component.entryToEdit = { ...entryToEdit, start_date: expectedStartDate }; - fixture.componentInstance.ngOnChanges(); - - component.entryForm.patchValue({ description: 'test' }); - - expect(component.dateToSubmit('start_date', 'start_hour')).toEqual(expectedStartDate); - }); - it('should modify the start_date when start_hour has been modified', () => { const startDate = new Date(mockCurrentDate); @@ -445,19 +432,6 @@ describe('DetailsFieldsComponent', () => { expect(component.dateToSubmit('start_date', 'start_hour')).toEqual(expectedStartDate); }); - it('should not modify the end_date when end_hour has not been modified', () => { - const currentDate = moment().format('YYYY-MM-DD'); - const endHour = moment().subtract(3, 'hours').format('HH:mm:ss'); - const expectedEndDate = new Date(`${currentDate}T${endHour.trim()}`); - - component.entryToEdit = { ...entryToEdit, end_date: expectedEndDate }; - fixture.componentInstance.ngOnChanges(); - - component.entryForm.patchValue({ description: 'test' }); - - expect(component.dateToSubmit('end_date', 'end_hour')).toEqual(expectedEndDate); - }); - it('should modify the end_date when end_hour has been modified', () => { const endDate = new Date(mockCurrentDate); diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.ts b/src/app/modules/shared/components/details-fields/details-fields.component.ts index 82b99a121..e36b97433 100644 --- a/src/app/modules/shared/components/details-fields/details-fields.component.ts +++ b/src/app/modules/shared/components/details-fields/details-fields.component.ts @@ -269,8 +269,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit { const updatedHour = this.entryForm.value[hour]; const updatedDate = new Date(`${entryFormDate}T${updatedHour.trim()}`).toISOString(); const initialDate = get(this.entryToEdit, date, updatedDate); - const initialHour = formatDate(get(this.entryToEdit, date, updatedDate), 'HH:mm', 'en'); - const dateHasNotChanged = updatedHour === initialHour; + const dateHasNotChanged = (initialDate === updatedDate); const result = dateHasNotChanged ? initialDate : updatedDate; return result; } From b42c4c92b0c7d56c9dd0eab8627436f93eaba6f9 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Fri, 16 Jul 2021 10:57:26 -0500 Subject: [PATCH 2/2] fix: TT-290 created the component dropdown and changed style in the buttons associeted --- src/app/app.module.ts | 2 + .../activity-list.component.html | 17 +-- .../activity-list.component.scss | 2 + .../activity-list.component.spec.ts | 41 ++++--- .../activity-list/activity-list.component.ts | 18 +-- .../customer-list.component.html | 16 +-- .../customer-list.component.spec.ts | 24 ++-- .../customer-list/customer-list.component.ts | 18 +-- .../project-list/project-list.component.html | 24 ++-- .../project-list/project-list.component.scss | 10 ++ .../project-list.component.spec.ts | 22 +++- .../project-list/project-list.component.ts | 20 ++-- .../dropdown/dropdown.component.html | 20 ++++ .../dropdown/dropdown.component.scss | 33 ++++++ .../dropdown/dropdown.component.spec.ts | 109 ++++++++++++++++++ .../components/dropdown/dropdown.component.ts | 44 +++++++ src/app/modules/shared/components/index.ts | 2 + .../modules/shared/models/activity.model.ts | 4 +- .../modules/shared/models/customer.model.ts | 16 ++- .../modules/shared/models/project.model.ts | 21 ++-- 20 files changed, 356 insertions(+), 107 deletions(-) create mode 100644 src/app/modules/shared/components/dropdown/dropdown.component.html create mode 100644 src/app/modules/shared/components/dropdown/dropdown.component.scss create mode 100644 src/app/modules/shared/components/dropdown/dropdown.component.spec.ts create mode 100644 src/app/modules/shared/components/dropdown/dropdown.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d0bca2dfd..c1259c812 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -84,6 +84,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'; import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component'; import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component'; import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component'; +import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component'; const maskConfig: Partial = { validation: false, @@ -137,6 +138,7 @@ const maskConfig: Partial = { TechnologyReportComponent, TechnologyReportTableComponent, CalendarComponent, + DropdownComponent, ], imports: [ NgxMaskModule.forRoot(maskConfig), diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.html b/src/app/modules/activities-management/components/activity-list/activity-list.component.html index 0a9789373..e5492f92c 100644 --- a/src/app/modules/activities-management/components/activity-list/activity-list.component.html +++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.html @@ -19,17 +19,10 @@ - + @@ -43,7 +36,7 @@ tabindex="-1" role="dialog" aria-hidden="true" - [title]="'Archive Activity'" + [title]="'Disable Activity'" [body]="message" (closeModalEvent)="deleteActivity()" > diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss index 6e59a8bda..5dd97fc35 100644 --- a/src/app/modules/activities-management/components/activity-list/activity-list.component.scss +++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.scss @@ -2,4 +2,6 @@ .activity-list { overflow: auto; + } + diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts index d29ee5780..61594e1f8 100644 --- a/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts +++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts @@ -18,19 +18,26 @@ describe('ActivityListComponent', () => { message: '', activityIdToEdit: '', }; - const operationBtnProps = [{ - key: 'active', - _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', - }, { - key: 'inactive', - _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', - }]; + const operationBtnProps = [ + { + key: 'active', + _status: false, + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' + }, + { + key: 'inactive', + _status: true, + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' + }, + ]; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ @@ -100,8 +107,8 @@ describe('ActivityListComponent', () => { expect(store.dispatch).toHaveBeenCalledWith(new UnarchiveActivity('id')); }); - it('openModal should set on true and display \"Are you sure you want to archive activity\"', () => { - const message = 'Are you sure you want to archive activity name?'; + it('openModal should set on true and display \"Are you sure you want to inactive activity\"', () => { + const message = 'Are you sure you want to disable activity name?'; const itemData = { id: '1', name: 'name', @@ -129,7 +136,9 @@ describe('ActivityListComponent', () => { _status: true, btnColor: 'btn-primary', btnIcon: 'fa-arrow-circle-up', + btnIconTwo: 'fa-check', btnName: 'Active', + iconColor: 'text-danger' }; spyOn(component, 'unarchiveActivity'); @@ -147,7 +156,9 @@ describe('ActivityListComponent', () => { _status: false, btnColor: 'btn-danger', btnIcon: 'fa-arrow-circle-down', + btnIconTwo: 'fa-caret-check', btnName: 'Archive', + iconColor: 'text-success' }; spyOn(component, 'openModal'); diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts index 165d51cad..cf4df9b94 100644 --- a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts +++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts @@ -28,15 +28,19 @@ export class ActivityListComponent implements OnInit { const operationBtnProps = [{ key: 'active', _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' }, { key: 'inactive', _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' }]; this.store.dispatch(new LoadActivities()); @@ -70,7 +74,7 @@ export class ActivityListComponent implements OnInit { } openModal(item: Activity): void { - this.message = `Are you sure you want to archive activity ${item.name}?`; + this.message = `Are you sure you want to disable activity ${item.name}?`; this.showModal = true; } diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html index acf7e6f99..50dab31b8 100644 --- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html +++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html @@ -29,16 +29,10 @@ - + @@ -52,7 +46,7 @@ tabindex="-1" role="dialog" aria-hidden="true" - [title]="'Delete Customer'" + [title]="'Disable Customer'" [body]="message" (closeModalEvent)="deleteCustomer()" > diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts index b38a604a8..b9f7f58ed 100644 --- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts +++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts @@ -34,16 +34,20 @@ describe('CustomerTableListComponent', () => { { key: 'active', _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' }, { key: 'inactive', _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' }, ]; @@ -215,8 +219,8 @@ describe('CustomerTableListComponent', () => { expect(component.dtElement.dtInstance.then).toHaveBeenCalled(); }); - it('openModal should set on true and display "Are you sure you want to archive customer"', () => { - const message = 'Are you sure you want to archive name?'; + it('openModal should set on true and display "Are you sure you want to disable customer"', () => { + const message = 'Are you sure you want to disable name?'; const itemData = { id: '1', name: 'name', @@ -244,7 +248,9 @@ describe('CustomerTableListComponent', () => { _status: false, btnColor: 'btn-danger', btnIcon: 'fa-arrow-circle-down', + btnIconTwo: 'fa-caret-check', btnName: 'Archive', + iconColor: 'text-success' }; spyOn(component, 'openModal'); @@ -262,7 +268,9 @@ describe('CustomerTableListComponent', () => { _status: true, btnColor: 'btn-primary', btnIcon: 'fa-arrow-circle-up', + btnIconTwo: 'fa-check', btnName: 'Active', + iconColor: 'text-danger' }; component.switchStatus(itemData); diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts index a3d431e82..ecf91a753 100644 --- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts +++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts @@ -53,16 +53,20 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit { { key: 'active', _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' }, { key: 'inactive', _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' }, ]; @@ -172,7 +176,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit { openModal(item: Customer) { this.idToDelete = item.id; - this.message = `Are you sure you want to archive ${item.name}?`; + this.message = `Are you sure you want to disable ${item.name}?`; this.showModal = true; } diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html index 747c53f71..3382e4821 100644 --- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html +++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html @@ -4,32 +4,26 @@ Project ID Project - Project Type + Project Type Options - Visibility + Visibility {{ project.id }} {{ project.name }} - {{ project.project_type.name }} + {{ project.project_type.name }} - - + + + @@ -43,7 +37,7 @@ tabindex="-1" role="dialog" aria-hidden="true" - [title]="'Archive Project'" + [title]="'Disable Project'" [body]="message" (closeModalEvent)="deleteProject()" > diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss index 8938bf72b..02e9a73fd 100644 --- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss +++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss @@ -3,3 +3,13 @@ .project-list { max-height: 300px; overflow: auto; display:inline-block; width: 100%; } + +.btn--switch{ + font-size: 1rem; + border: 1px solid #c5c5c5; + border-radius: 20px; +} + +.iconTwo{ + color: #a1a1a1; +} \ No newline at end of file diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts index 61dc638a1..e9ecc59d2 100644 --- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts +++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.spec.ts @@ -32,16 +32,20 @@ describe('ProjectListComponent', () => { { key: 'active', _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' }, { key: 'inactive', _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' }, ]; @@ -136,7 +140,9 @@ describe('ProjectListComponent', () => { _status: false, btnColor: 'btn-danger', btnIcon: 'fa-arrow-circle-down', + btnIconTwo: 'fa-caret-check', btnName: 'Archive', + iconColor: 'text-success' }; spyOn(component, 'openModal'); @@ -155,7 +161,9 @@ describe('ProjectListComponent', () => { _status: true, btnColor: 'btn-primary', btnIcon: 'fa-arrow-circle-up', + btnIconTwo: 'fa-check', btnName: 'Active', + iconColor: 'text-danger' }; component.switchStatus(itemData); @@ -173,7 +181,9 @@ describe('ProjectListComponent', () => { _status: false, btnColor: 'btn-danger', btnIcon: 'fa-arrow-circle-down', + btnIconTwo: 'fa-caret-check', btnName: 'Archive', + iconColor: 'text-success' }; component.openModal(itemData); diff --git a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts index 58b18e79f..7073c4fcd 100644 --- a/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts +++ b/src/app/modules/customer-management/components/projects/components/project-list/project-list.component.ts @@ -6,7 +6,6 @@ import { ProjectState } from '../store/project.reducer'; import { getCustomerProjects } from '../store/project.selectors'; import * as actions from '../store/project.actions'; import { ProjectUI } from '../../../../../shared/models/project.model'; -import { ProjectTypeState } from '../../../projects-type/store'; import { ProjectType } from 'src/app/modules/shared/models'; @Component({ @@ -30,7 +29,6 @@ export class ProjectListComponent implements OnInit, OnDestroy { constructor( private store: Store, - private projectTypeStore: Store ) {} ngOnInit(): void { @@ -38,16 +36,20 @@ export class ProjectListComponent implements OnInit, OnDestroy { { key: 'active', _status: false, - btnColor: 'btn-danger', - btnIcon: 'fa-arrow-circle-down', - btnName: 'Archive', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Active', + iconColor: 'text-success' }, { key: 'inactive', _status: true, - btnColor: 'btn-primary', - btnIcon: 'fa-arrow-circle-up', - btnName: 'Active', + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-check', + btnName: 'Inactive', + iconColor: 'text-danger' }, ]; @@ -79,7 +81,7 @@ export class ProjectListComponent implements OnInit, OnDestroy { openModal(item: ProjectUI) { this.idToDelete = item.id; - this.message = `Are you sure you want archive ${item.name}?`; + this.message = `Are you sure you want Disable ${item.name}?`; this.showModal = true; } diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.html b/src/app/modules/shared/components/dropdown/dropdown.component.html new file mode 100644 index 000000000..7eb643119 --- /dev/null +++ b/src/app/modules/shared/components/dropdown/dropdown.component.html @@ -0,0 +1,20 @@ + +
+
+ +

{{ info.btnName }}

+ +
+
+
+ +

{{ dataChange.btnName }}

+
+
\ No newline at end of file diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.scss b/src/app/modules/shared/components/dropdown/dropdown.component.scss new file mode 100644 index 000000000..5cb173fce --- /dev/null +++ b/src/app/modules/shared/components/dropdown/dropdown.component.scss @@ -0,0 +1,33 @@ +@import '../../../../../styles/colors.scss'; + +.btn--switch { + font-size: 1rem; + border: 1px solid #c5c5c5; + border-radius: 20px; + width: clamp(7rem, 50%, 12rem); + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} + +.iconTwo { + color: #a1a1a1; + text-align: center; +} + +.container-description-status { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.icon { + flex: 0 0 20%; +} + +.description { + flex: 1 1 60%; + padding: 0; + margin: 0; +} diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts b/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts new file mode 100644 index 000000000..ca5e237b7 --- /dev/null +++ b/src/app/modules/shared/components/dropdown/dropdown.component.spec.ts @@ -0,0 +1,109 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { DropdownComponent } from './dropdown.component'; + +describe('DropdownComponent', () => { + let component: DropdownComponent; + let fixture: ComponentFixture; + let fakeInfo: any; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ DropdownComponent ] + }) + .compileComponents(); + + fakeInfo = { + id: 'fake', + name: 'fake', + description: 'fake', + tenant_id: '', + status: '', + key: 'active', + _status: false, + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-caret-check', + btnName: 'Active', + iconColor: 'text-success' + }; + + fixture = TestBed.createComponent(DropdownComponent); + component = fixture.componentInstance; + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should emit the item when clicked in method changeOperation', () => { + spyOn(component.updateInfo, 'emit'); + component.info = fakeInfo; + + fixture.detectChanges(); + component.changeOperation(fakeInfo); + + expect(component.updateInfo.emit).toHaveBeenCalled(); + }); + + it('should changed properties of item when is Active', () => { + const fakeInfoActive = { + id: 'fake', + name: 'fake', + description: 'fake', + tenant_id: '', + status: '', + key: 'active', + _status: true, + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-caret-check', + btnName: 'Active', + iconColor: 'text-success' + }; + const expectChangeValue = { + btnName: 'Inactive', + btnIcon: 'fa-circle', + iconColor: 'text-danger' + }; + component.info = fakeInfoActive; + + component.changePropertiesItem(fakeInfoActive); + + expect(component.dataChange.btnName).toEqual(expectChangeValue.btnName); + expect(component.dataChange.btnIcon).toEqual(expectChangeValue.btnIcon); + expect(component.dataChange.iconColor).toEqual(expectChangeValue.iconColor); + }); + + it('should change properties of item when is Inactive', () => { + const fakeInfoInactive = { + id: 'fake', + name: 'fake', + description: 'fake', + tenant_id: '', + status: '', + key: 'active', + _status: true, + btnColor: 'btn-white', + btnIcon: 'fa-circle', + btnIconTwo: 'fa-caret-check', + btnName: 'Inactive', + iconColor: 'text-danger' + }; + const expectChangeValue = { + btnName: 'Active', + btnIcon: 'fa-circle', + iconColor: 'text-success' + }; + component.info = fakeInfoInactive; + + component.changePropertiesItem(fakeInfoInactive); + + expect(component.dataChange.btnName).toEqual(expectChangeValue.btnName); + expect(component.dataChange.btnIcon).toEqual(expectChangeValue.btnIcon); + expect(component.dataChange.iconColor).toEqual(expectChangeValue.iconColor); + + }); +}); + + + diff --git a/src/app/modules/shared/components/dropdown/dropdown.component.ts b/src/app/modules/shared/components/dropdown/dropdown.component.ts new file mode 100644 index 000000000..7f3672b26 --- /dev/null +++ b/src/app/modules/shared/components/dropdown/dropdown.component.ts @@ -0,0 +1,44 @@ +import { Output, Component, EventEmitter, Input } from '@angular/core'; + + +@Component({ + selector: 'app-dropdown', + templateUrl: './dropdown.component.html', + styleUrls: ['./dropdown.component.scss'] +}) +export class DropdownComponent { + + @Input() info: any; + @Output() updateInfo: EventEmitter = new EventEmitter(); + + dataChange: any = { + id: '', + name: '', + description: '', + tenant_id: '', + status: '', + key: '', + _status: false, + btnColor: '', + btnIcon: '', + btnIconTwo: '', + btnName: '', + iconColor: '' + }; + + changePropertiesItem({btnName, btnIcon}){ + this.dataChange.btnIcon = btnIcon; + if (btnName === 'Active'){ + this.dataChange.btnName = 'Inactive'; + this.dataChange.iconColor = 'text-danger'; + }else{ + this.dataChange.btnName = 'Active'; + this.dataChange.iconColor = 'text-success'; + } + } + + changeOperation(item: any){ + this.updateInfo.emit(item); + + } +} diff --git a/src/app/modules/shared/components/index.ts b/src/app/modules/shared/components/index.ts index 41d940e42..81c30d5f5 100644 --- a/src/app/modules/shared/components/index.ts +++ b/src/app/modules/shared/components/index.ts @@ -5,3 +5,5 @@ export * from './month-picker/month-picker.component'; export * from './navbar/navbar.component'; export * from './sidebar/sidebar.component'; export * from './user/user.component'; +export * from './dropdown/dropdown.component'; + diff --git a/src/app/modules/shared/models/activity.model.ts b/src/app/modules/shared/models/activity.model.ts index d9fd4eb0c..d8c9332ff 100644 --- a/src/app/modules/shared/models/activity.model.ts +++ b/src/app/modules/shared/models/activity.model.ts @@ -14,9 +14,11 @@ export interface ActivityFront { status?: string; key: string; _status: boolean; - btnColor: string; + btnColor?: string; btnIcon: string; + btnIconTwo: string; btnName: string; + iconColor: string; } export interface ActivityStatus { diff --git a/src/app/modules/shared/models/customer.model.ts b/src/app/modules/shared/models/customer.model.ts index 42107c878..cfe704ed4 100644 --- a/src/app/modules/shared/models/customer.model.ts +++ b/src/app/modules/shared/models/customer.model.ts @@ -6,13 +6,17 @@ export interface Customer { } export interface CustomerUI { id?: string; - name?: string; - description?: string; - status?: any; - key?: string; + name: string; + description: string; + tenant_id?: string; + status?: string; + key: string; + _status: boolean; btnColor?: string; - btnIcon?: string; - btnName?: string; + btnIcon: string; + btnIconTwo: string; + btnName: string; + iconColor: string; } export interface Status { id: string; diff --git a/src/app/modules/shared/models/project.model.ts b/src/app/modules/shared/models/project.model.ts index 5a1c609d8..3c59e76c7 100644 --- a/src/app/modules/shared/models/project.model.ts +++ b/src/app/modules/shared/models/project.model.ts @@ -10,15 +10,16 @@ export interface Project { status?: any; } export interface ProjectUI { - id?: string; - customer_id?: string; - name?: string; - description?: string; - project_type_id?: string; - search_field?: string; - status?: any; - key?: string; + id: string; + name: string; + description: string; + tenant_id?: string; + status?: string; + key: string; + _status: boolean; btnColor?: string; - btnIcon?: string; - btnName?: string; + btnIcon: string; + btnIconTwo: string; + btnName: string; + iconColor: string; }