fix: TT-290 added a new component (dropdown), and change the style the buttons associeted

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<IConfig> = {
   validation: false,
@@ -137,6 +138,7 @@ const maskConfig: Partial<IConfig> = {
     TechnologyReportComponent,
     TechnologyReportTableComponent,
     CalendarComponent,
+    DropdownComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

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

@@ -19,17 +19,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button
-            class="btn btn-sm"
-            data-toggle="modal"
-            data-target="#deleteModal"
-            [ngClass]="activity.btnColor"
-            (click)="changeOperation(activity)"
-          >
-            <i class="fa" [ngClass]="activity.btnIcon"></i>
-            {{ activity.btnName }}
-            <span *ngIf="activity._status">&nbsp;</span>
-          </button>
+            <app-dropdown
+              [info] = "activity"
+              (updateInfo) = "changeOperation($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -43,7 +36,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Activity'"
+  [title]="'Disable Activity'"
   [body]="message"
   (closeModalEvent)="deleteActivity()"
 >

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

@@ -2,4 +2,6 @@
 
 .activity-list {
   overflow: auto;
+
 }
+

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');

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;
   }
 

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

@@ -29,16 +29,10 @@
           </button>
         </td>
         <td class="col-2 text-center">
-          <button 
-          class="btn btn-sm"
-          data-toggle="modal" 
-          data-target="#deleteModal"
-          [ngClass]="customer.btnColor"
-          (click)="switchStatus(customer)"
-          >
-            <i class="fa" [ngClass]="customer.btnIcon" ></i>
-            {{customer.btnName}}
-          </button>
+          <app-dropdown
+              [info] = "customer"
+              (updateInfo) = "switchStatus($event)"
+            > </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -52,7 +46,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Delete Customer'"
+  [title]="'Disable Customer'"
   [body]="message"
   (closeModalEvent)="deleteCustomer()"
 >

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);

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;
   }
 

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

@@ -4,32 +4,26 @@
       <tr class="d-flex">
         <th scope="col" class="col-4 text-center">Project ID</th>
         <th scope="col" class="col-3 text-center">Project</th>
-        <th scope="col" class="col-3 text-center">Project Type</th>
+        <th scope="col" class="col-2 text-center">Project Type</th>
         <th scope="col" class="col-1 text-center">Options</th>
-        <th scope="col" class="col-1 text-center">Visibility</th>
+        <th scope="col" class="col-2 text-center">Visibility</th>
       </tr>
     </thead>
     <tbody>
       <tr class="d-flex" *ngFor="let project of projects">
         <td class="col-sm-4">{{ project.id }}</td>
         <td class="col-sm-3">{{ project.name }}</td>
-        <td class="col-sm-3">{{ project.project_type.name }}</td>
+        <td class="col-sm-2">{{ project.project_type.name }}</td>
         <td class="col-sm-1 text-center">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
         </td>
-        <td class="col-sm-1 text-center">
-          <button
-          class="btn btn-sm"
-          data-toggle="modal"
-          data-target="#deleteModal"
-          [ngClass]="project.btnColor"
-          (click)="switchStatus(project)"
-          >
-            <em class="fa" [ngClass]="project.btnIcon" ></em>
-            {{project.btnName}}
-          </button>
+        <td class="col-sm-2 text-center">
+          <app-dropdown
+            [info] = "project"
+            (updateInfo) = "switchStatus($event)"> 
+          </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -43,7 +37,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Archive Project'"
+  [title]="'Disable Project'"
   [body]="message"
   (closeModalEvent)="deleteProject()"
 >

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;
+}