feat: TT-208 remove delete button & assign openmodal to switch

Author: thegreatyamori

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

@@ -17,21 +17,15 @@
           <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
-          <button
-            type="button"
-            class="btn btn-sm btn-danger ml-2"
-            data-toggle="modal"
-            data-target="#deleteModal"
-            (click)="openModal(activity)"
-          >
-            <i class="fas fa-trash-alt fa-xs"></i>
-          </button>
         </td>
         <td class="col-2 text-center">
           <ui-switch
             size="small"
-            (change)="switchStatus('active')"
+            data-toggle="modal"
+            data-target="#deleteModal"
             [checked]="activity.status === 'active'"
+            (valueChange)="switchStatus($event, activity)"
+            [beforeChange]="OnSwitch(activity)"
           ></ui-switch>
         </td>
       </tr>
@@ -46,7 +40,7 @@
   tabindex="-1"
   role="dialog"
   aria-hidden="true"
-  [title]="'Delete Activity'"
+  [title]="'Archive Activity'"
   [body]="message"
   (closeModalEvent)="deleteActivity()"
 >

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

@@ -1,29 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { getIsLoading } from 'src/app/modules/activities-management/store/activity-management.selectors';
 import { Activity } from '../../../shared/models';
 import { allActivities } from '../../store';
 import { DeleteActivity, LoadActivities, SetActivityToEdit } from './../../store/activity-management.actions';
 import { ActivityState } from './../../store/activity-management.reducers';
 
-
 @Component({
   selector: 'app-activity-list',
   templateUrl: './activity-list.component.html',
   styleUrls: ['./activity-list.component.scss'],
 })
 export class ActivityListComponent implements OnInit {
+  constructor(private store: Store<ActivityState>) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
   activities: Activity[] = [];
   showModal = false;
   activityToDelete: Activity;
   message: string;
   idToDelete: string;
   isLoading$: Observable<boolean>;
-  constructor(private store: Store<ActivityState>) {
-    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
-  }
 
   ngOnInit() {
     this.store.dispatch(new LoadActivities());
@@ -35,8 +34,9 @@ export class ActivityListComponent implements OnInit {
   }
 
   deleteActivity() {
-    this.store.dispatch(new DeleteActivity(this.idToDelete));
-    this.showModal = true;
+    // this.store.dispatch(new DeleteActivity(this.idToDelete));
+    console.log('despachado el evento');
+    this.showModal = false;
   }
 
   updateActivity(activityId: string) {
@@ -45,15 +45,26 @@ export class ActivityListComponent implements OnInit {
 
   openModal(item: Activity) {
     this.idToDelete = item.id;
-    this.message = `Are you sure you want to delete ${item.name}?`;
+    this.message = `Are you sure you want to archive activity ${item.name}?`;
     this.showModal = true;
+    console.log(`Despliegue del modal para id: ${item.id}`);
+  }
+
+  switchStatus(evt: boolean, item: Activity): void {
+    if (!evt) {
+      // FIXME: Si el usuario selecciona cancelar, se produce la animación de cambio
+      // del switch
+      this.openModal(item);
+    } else {
+      this.showModal = false;
+      // TODO: dispatch para actualizar la operacion
+      // this.store.dispatch(new SetToTrueActivity());
+    }
   }
 
-  switchStatus(state: string): void {
-    // this.store.dispatch(
-    //   user.groups.includes(groupName)
-    //     ? new RemoveUserFromGroup(user.id, groupName)
-    //     : new AddUserToGroup(user.id, groupName)
-    // );
+  OnSwitch(item: Activity): Observable<boolean> {
+    // FIXME: OnBeforeChange debería ser un evento que traiga el estado del switch
+    // para poder realizar una acción antes de que el estado cambie.
+    return of(true);
   }
 }