feat: TT-190 Use add/remove groups endpoints in users section in UI

Author: LEON12699

src/app/modules/users/components/users-list/users-list.component.html

@@ -19,20 +19,37 @@
         <td class="col-4 text-break">{{ user.email }}</td>
         <td class="col-5 text-break">{{ user.name }}</td>
         <td class="col-3 text-center">
-          <div>
+          <div *ngIf="flakyToggle; else elseBlock">
             <ui-switch
               size="small"
-              (change)="switchGroups(user.id, user.groups, 'admin', 'time-tracker-admin')"
+              (change)="switchGroup(user.id, user.groups, 'time-tracker-admin')"
               [checked]="user.groups.includes('time-tracker-admin')"
             ></ui-switch>
             admin
             <ui-switch
               size="small"
-              (change)="switchGroups(user.id, user.groups, 'test', 'time-tracker-tester')"
+              (change)="switchGroup(user.id, user.groups, 'time-tracker-tester')"
               [checked]="user.groups.includes('time-tracker-tester')"
             ></ui-switch>
             test
           </div>
+          <ng-template #elseBlock>
+            <div>
+              <ui-switch
+                size="small"
+                (change)="switchRole(user.id, user.roles, 'admin','time-tracker-admin')"
+                [checked]="user.roles.includes('time-tracker-admin')"
+              ></ui-switch>
+              admin
+              <ui-switch
+                size="small"
+                (change)="switchRole(user.id, user.roles,'tester','time-tracker-tester')"
+                [checked]="user.roles.includes('time-tracker-tester')"
+              ></ui-switch>
+              test
+            </div>
+          </ng-template>
+
         </td>
       </tr>
     </tbody>

src/app/modules/users/components/users-list/users-list.component.ts

@@ -1,11 +1,18 @@
 import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
-import { Observable, Subject, Subscription} from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { delay, filter, map } from 'rxjs/operators';
 import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 import { User } from '../../models/users';
-import { GrantRoleUser, LoadUsers, RevokeRoleUser, UserActionTypes, AddUserToGroup, RemoveUserToGroup} from '../../store/user.actions';
+import {
+  GrantRoleUser,
+  LoadUsers,
+  RevokeRoleUser,
+  UserActionTypes,
+  AddUserToGroup,
+  RemoveUserToGroup,
+} from '../../store/user.actions';
 import { getIsLoading } from '../../store/user.selectors';
 
 @Component({
@@ -24,13 +31,13 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {};
   switchGroupsSubscription: Subscription;
   isEnableToggleSubscription: Subscription;
-  isUserRoleToggleOn;
-  flakyToggle: true;
+  isUserGroupsToggleOn;
+  flakyToggle: boolean = false; // borrar para implementar feature toggle
 
   constructor(
     private store: Store<User>,
     private actionsSubject$: ActionsSubject,
-    private featureManagerService: FeatureManagerService
+    //private featureManagerService: FeatureManagerService
   ) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
   }
@@ -44,10 +51,10 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
         this.rerenderDataTable();
       });
 
-    this.isEnableToggleSubscription = this.isFeatureToggleActivated().subscribe((flag) => {
-      this.isUserRoleToggleOn = flag;
-      console.log('in subscription', this.isUserRoleToggleOn);
-    });
+  /*  this.isEnableToggleSubscription = this.isFeatureToggleActivated().subscribe((flag) => {
+      this.isUserGroupsToggleOn = flag;
+      console.log('in subscription', this.isUserGroupsToggleOn);
+    });*/
 
     this.switchGroupsSubscription = this.actionsSubject$
       .pipe(
@@ -102,17 +109,17 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
       : this.store.dispatch(new GrantRoleUser(userId, roleId));
   }
 
-  isFeatureToggleActivated() {
+  switchGroup(userId: string, userGroups: string[], groupName: string) {
+    userGroups.includes(groupName)
+      ? this.store.dispatch(new RemoveUserToGroup(userId, groupName))
+      : this.store.dispatch(new AddUserToGroup(userId, groupName));
+  }
+
+ /* isFeatureToggleActivated() {
     return this.featureManagerService.isToggleEnabledForUser('ui-list-technologies').pipe(
       map((enabled) => {
         return enabled === true ? true : false;
       })
     );
-  }
-
-  switchGroups(userId: string, userGroups: string[], groupname: string, groupValue: string) {
-    userGroups.includes(groupValue)
-      ? this.store.dispatch(new RemoveUserToGroup(userId, groupname))
-      : this.store.dispatch(new AddUserToGroup(userId, groupname));
-  }
+  }*/
 }