Skip to content

Commit b42c4c9

Browse files
kevinjlopekevinjlope
committed
fix: TT-290 created the component dropdown and changed style in the buttons associeted
1 parent d12ce95 commit b42c4c9

20 files changed

+356
-107
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
8484
import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
8585
import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
8686
import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
87+
import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
8788

8889
const maskConfig: Partial<IConfig> = {
8990
validation: false,
@@ -137,6 +138,7 @@ const maskConfig: Partial<IConfig> = {
137138
TechnologyReportComponent,
138139
TechnologyReportTableComponent,
139140
CalendarComponent,
141+
DropdownComponent,
140142
],
141143
imports: [
142144
NgxMaskModule.forRoot(maskConfig),

‎src/app/modules/activities-management/components/activity-list/activity-list.component.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,10 @@
1919
</button>
2020
</td>
2121
<td class="col-2 text-center">
22-
<button
23-
class="btn btn-sm"
24-
data-toggle="modal"
25-
data-target="#deleteModal"
26-
[ngClass]="activity.btnColor"
27-
(click)="changeOperation(activity)"
28-
>
29-
<i class="fa" [ngClass]="activity.btnIcon"></i>
30-
{{ activity.btnName }}
31-
<span *ngIf="activity._status">&nbsp;</span>
32-
</button>
22+
<app-dropdown
23+
[info] = "activity"
24+
(updateInfo) = "changeOperation($event)"
25+
> </app-dropdown>
3326
</td>
3427
</tr>
3528
</tbody>
@@ -43,7 +36,7 @@
4336
tabindex="-1"
4437
role="dialog"
4538
aria-hidden="true"
46-
[title]="'Archive Activity'"
39+
[title]="'Disable Activity'"
4740
[body]="message"
4841
(closeModalEvent)="deleteActivity()"
4942
>

‎src/app/modules/activities-management/components/activity-list/activity-list.component.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@
22

33
.activity-list {
44
overflow: auto;
5+
56
}
7+

‎src/app/modules/activities-management/components/activity-list/activity-list.component.spec.ts‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,26 @@ describe('ActivityListComponent', () => {
1818
message: '',
1919
activityIdToEdit: '',
2020
};
21-
const operationBtnProps = [{
22-
key: 'active',
23-
_status: false,
24-
btnColor: 'btn-danger',
25-
btnIcon: 'fa-arrow-circle-down',
26-
btnName: 'Archive',
27-
}, {
28-
key: 'inactive',
29-
_status: true,
30-
btnColor: 'btn-primary',
31-
btnIcon: 'fa-arrow-circle-up',
32-
btnName: 'Active',
33-
}];
21+
const operationBtnProps = [
22+
{
23+
key: 'active',
24+
_status: false,
25+
btnColor: 'btn-white',
26+
btnIcon: 'fa-circle',
27+
btnIconTwo: 'fa-check',
28+
btnName: 'Active',
29+
iconColor: 'text-success'
30+
},
31+
{
32+
key: 'inactive',
33+
_status: true,
34+
btnColor: 'btn-white',
35+
btnIcon: 'fa-circle',
36+
btnIconTwo: 'fa-check',
37+
btnName: 'Inactive',
38+
iconColor: 'text-danger'
39+
},
40+
];
3441

3542
beforeEach(waitForAsync(() => {
3643
TestBed.configureTestingModule({
@@ -100,8 +107,8 @@ describe('ActivityListComponent', () => {
100107
expect(store.dispatch).toHaveBeenCalledWith(new UnarchiveActivity('id'));
101108
});
102109

103-
it('openModal should set on true and display \"Are you sure you want to archive activity\"', () => {
104-
const message = 'Are you sure you want to archive activity name?';
110+
it('openModal should set on true and display \"Are you sure you want to inactive activity\"', () => {
111+
const message = 'Are you sure you want to disable activity name?';
105112
const itemData = {
106113
id: '1',
107114
name: 'name',
@@ -129,7 +136,9 @@ describe('ActivityListComponent', () => {
129136
_status: true,
130137
btnColor: 'btn-primary',
131138
btnIcon: 'fa-arrow-circle-up',
139+
btnIconTwo: 'fa-check',
132140
btnName: 'Active',
141+
iconColor: 'text-danger'
133142
};
134143

135144
spyOn(component, 'unarchiveActivity');
@@ -147,7 +156,9 @@ describe('ActivityListComponent', () => {
147156
_status: false,
148157
btnColor: 'btn-danger',
149158
btnIcon: 'fa-arrow-circle-down',
159+
btnIconTwo: 'fa-caret-check',
150160
btnName: 'Archive',
161+
iconColor: 'text-success'
151162
};
152163

153164
spyOn(component, 'openModal');

‎src/app/modules/activities-management/components/activity-list/activity-list.component.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,19 @@ export class ActivityListComponent implements OnInit {
2828
const operationBtnProps = [{
2929
key: 'active',
3030
_status: false,
31-
btnColor: 'btn-danger',
32-
btnIcon: 'fa-arrow-circle-down',
33-
btnName: 'Archive',
31+
btnColor: 'btn-white',
32+
btnIcon: 'fa-circle',
33+
btnIconTwo: 'fa-check',
34+
btnName: 'Active',
35+
iconColor: 'text-success'
3436
}, {
3537
key: 'inactive',
3638
_status: true,
37-
btnColor: 'btn-primary',
38-
btnIcon: 'fa-arrow-circle-up',
39-
btnName: 'Active',
39+
btnColor: 'btn-white',
40+
btnIcon: 'fa-circle',
41+
btnIconTwo: 'fa-check',
42+
btnName: 'Inactive',
43+
iconColor: 'text-danger'
4044
}];
4145

4246
this.store.dispatch(new LoadActivities());
@@ -70,7 +74,7 @@ export class ActivityListComponent implements OnInit {
7074
}
7175

7276
openModal(item: Activity): void {
73-
this.message = `Are you sure you want to archive activity ${item.name}?`;
77+
this.message = `Are you sure you want to disable activity ${item.name}?`;
7478
this.showModal = true;
7579
}
7680

‎src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,10 @@
2929
</button>
3030
</td>
3131
<td class="col-2 text-center">
32-
<button
33-
class="btn btn-sm"
34-
data-toggle="modal"
35-
data-target="#deleteModal"
36-
[ngClass]="customer.btnColor"
37-
(click)="switchStatus(customer)"
38-
>
39-
<i class="fa" [ngClass]="customer.btnIcon" ></i>
40-
{{customer.btnName}}
41-
</button>
32+
<app-dropdown
33+
[info] = "customer"
34+
(updateInfo) = "switchStatus($event)"
35+
> </app-dropdown>
4236
</td>
4337
</tr>
4438
</tbody>
@@ -52,7 +46,7 @@
5246
tabindex="-1"
5347
role="dialog"
5448
aria-hidden="true"
55-
[title]="'Delete Customer'"
49+
[title]="'Disable Customer'"
5650
[body]="message"
5751
(closeModalEvent)="deleteCustomer()"
5852
>

‎src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,20 @@ describe('CustomerTableListComponent', () => {
3434
{
3535
key: 'active',
3636
_status: false,
37-
btnColor: 'btn-danger',
38-
btnIcon: 'fa-arrow-circle-down',
39-
btnName: 'Archive',
37+
btnColor: 'btn-white',
38+
btnIcon: 'fa-circle',
39+
btnIconTwo: 'fa-check',
40+
btnName: 'Active',
41+
iconColor: 'text-success'
4042
},
4143
{
4244
key: 'inactive',
4345
_status: true,
44-
btnColor: 'btn-primary',
45-
btnIcon: 'fa-arrow-circle-up',
46-
btnName: 'Active',
46+
btnColor: 'btn-white',
47+
btnIcon: 'fa-circle',
48+
btnIconTwo: 'fa-check',
49+
btnName: 'Inactive',
50+
iconColor: 'text-danger'
4751
},
4852
];
4953

@@ -215,8 +219,8 @@ describe('CustomerTableListComponent', () => {
215219
expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
216220
});
217221

218-
it('openModal should set on true and display "Are you sure you want to archive customer"', () => {
219-
const message = 'Are you sure you want to archive name?';
222+
it('openModal should set on true and display "Are you sure you want to disable customer"', () => {
223+
const message = 'Are you sure you want to disable name?';
220224
const itemData = {
221225
id: '1',
222226
name: 'name',
@@ -244,7 +248,9 @@ describe('CustomerTableListComponent', () => {
244248
_status: false,
245249
btnColor: 'btn-danger',
246250
btnIcon: 'fa-arrow-circle-down',
251+
btnIconTwo: 'fa-caret-check',
247252
btnName: 'Archive',
253+
iconColor: 'text-success'
248254
};
249255

250256
spyOn(component, 'openModal');
@@ -262,7 +268,9 @@ describe('CustomerTableListComponent', () => {
262268
_status: true,
263269
btnColor: 'btn-primary',
264270
btnIcon: 'fa-arrow-circle-up',
271+
btnIconTwo: 'fa-check',
265272
btnName: 'Active',
273+
iconColor: 'text-danger'
266274
};
267275

268276
component.switchStatus(itemData);

‎src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,20 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
5353
{
5454
key: 'active',
5555
_status: false,
56-
btnColor: 'btn-danger',
57-
btnIcon: 'fa-arrow-circle-down',
58-
btnName: 'Archive',
56+
btnColor: 'btn-white',
57+
btnIcon: 'fa-circle',
58+
btnIconTwo: 'fa-check',
59+
btnName: 'Active',
60+
iconColor: 'text-success'
5961
},
6062
{
6163
key: 'inactive',
6264
_status: true,
63-
btnColor: 'btn-primary',
64-
btnIcon: 'fa-arrow-circle-up',
65-
btnName: 'Active',
65+
btnColor: 'btn-white',
66+
btnIcon: 'fa-circle',
67+
btnIconTwo: 'fa-check',
68+
btnName: 'Inactive',
69+
iconColor: 'text-danger'
6670
},
6771
];
6872

@@ -172,7 +176,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
172176

173177
openModal(item: Customer) {
174178
this.idToDelete = item.id;
175-
this.message = `Are you sure you want to archive ${item.name}?`;
179+
this.message = `Are you sure you want to disable ${item.name}?`;
176180
this.showModal = true;
177181
}
178182

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

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,26 @@
44
<tr class="d-flex">
55
<th scope="col" class="col-4 text-center">Project ID</th>
66
<th scope="col" class="col-3 text-center">Project</th>
7-
<th scope="col" class="col-3 text-center">Project Type</th>
7+
<th scope="col" class="col-2 text-center">Project Type</th>
88
<th scope="col" class="col-1 text-center">Options</th>
9-
<th scope="col" class="col-1 text-center">Visibility</th>
9+
<th scope="col" class="col-2 text-center">Visibility</th>
1010
</tr>
1111
</thead>
1212
<tbody>
1313
<tr class="d-flex" *ngFor="let project of projects">
1414
<td class="col-sm-4">{{ project.id }}</td>
1515
<td class="col-sm-3">{{ project.name }}</td>
16-
<td class="col-sm-3">{{ project.project_type.name }}</td>
16+
<td class="col-sm-2">{{ project.project_type.name }}</td>
1717
<td class="col-sm-1 text-center">
1818
<button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
1919
<i class="fa fa-pencil fa-xs"></i>
2020
</button>
2121
</td>
22-
<td class="col-sm-1 text-center">
23-
<button
24-
class="btn btn-sm"
25-
data-toggle="modal"
26-
data-target="#deleteModal"
27-
[ngClass]="project.btnColor"
28-
(click)="switchStatus(project)"
29-
>
30-
<em class="fa" [ngClass]="project.btnIcon" ></em>
31-
{{project.btnName}}
32-
</button>
22+
<td class="col-sm-2 text-center">
23+
<app-dropdown
24+
[info] = "project"
25+
(updateInfo) = "switchStatus($event)">
26+
</app-dropdown>
3327
</td>
3428
</tr>
3529
</tbody>
@@ -43,7 +37,7 @@
4337
tabindex="-1"
4438
role="dialog"
4539
aria-hidden="true"
46-
[title]="'Archive Project'"
40+
[title]="'Disable Project'"
4741
[body]="message"
4842
(closeModalEvent)="deleteProject()"
4943
>

‎src/app/modules/customer-management/components/projects/components/project-list/project-list.component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,13 @@
33
.project-list {
44
max-height: 300px; overflow: auto; display:inline-block; width: 100%;
55
}
6+
7+
.btn--switch{
8+
font-size: 1rem;
9+
border: 1px solid #c5c5c5;
10+
border-radius: 20px;
11+
}
12+
13+
.iconTwo{
14+
color: #a1a1a1;
15+
}

0 commit comments

Comments
 (0)