POC-267:System is not Loading Members Under Group Manager

src/app/group-manager/group-detail/group-detail.component.html

@@ -153,22 +153,25 @@ <h4 class="panel-heading">Active Members</h4>
             </tr>
           </thead>
           <tbody>
-            <ng-container *ngFor="let member of group.cohortMembers">
+            <ng-container
+              *ngFor="let member of group.cohortMembers; let i = index"
+            >
               <tr *ngIf="!member.endDate">
                 <td>{{ member.patient.person.display }}</td>
 
                 <td *ngIf="member.phoneNumber">
                   {{ member.phoneNumber.value }}
                 </td>
                 <td *ngIf="!member.phoneNumber">-</td>
-
                 <td>{{ member.startDate | date: 'medium' }}</td>
                 <td>
                   <button
                     (click)="
                       showDateModal(
                         member,
-                        'End Membership For ' + member.patient.person.display
+                        'End Membership For ' + member.patient.person.display,
+                        i,
+                        group.uuid
                       )
                     "
                     class="btn btn-sm btn-danger"

src/app/group-manager/group-detail/group-detail.component.ts

@@ -25,6 +25,8 @@ import { GridOptions } from 'ag-grid';
 import { GroupTransferModalComponent } from '../modals/group-transfer-modal.component';
 import { RetrospectiveDataEntryService } from '../../retrospective-data-entry/services/retrospective-data-entry.service';
 import { RisonService } from '../../shared/services/rison-service';
+import { HttpClient } from '@angular/common/http';
+import { flatMap, map } from 'rxjs/operators';
 
 @Component({
   selector: 'group-detail',
@@ -121,7 +123,8 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
     private router: Router,
     private modalService: BsModalService,
     private risonService: RisonService,
-    private retrospectiveService: RetrospectiveDataEntryService
+    private retrospectiveService: RetrospectiveDataEntryService,
+    private http: HttpClient
   ) {}
 
   ngOnInit() {
@@ -260,6 +263,8 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
   public showDateModal(
     member: any,
     title?: string,
+    arrayCount?: any,
+    cohortId?: string,
     okBtnText?: string,
     closeBtnText?: string
   ) {
@@ -274,7 +279,7 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
     });
     this.nestedModalRef.content.onSave.subscribe((date) => {
       this.modalRef.hide();
-      this.endMembership(member, date);
+      this.endMembership(member, date, arrayCount, cohortId);
     });
   }
 
@@ -292,23 +297,50 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
     this.modalRef.hide();
   }
 
-  public endMembership(member, date) {
-    const successMsg = `Successfully ended membership for ${
-      member.patient.person.display
-    } on ${Moment(date).format('DD MMMM YYYY')}`;
-    this.subscriptions.add(
-      this.communityGroupMemberService
-        .endMembership(member.uuid, date)
-        .subscribe(
-          (response) => {
-            this.reloadData();
-            this.showSuccessModal(successMsg);
-          },
-          (error) => {
-            this.error = true;
-            console.log(error);
-          }
-        )
+  public endMembership(member, date, arraycount, cohortId) {
+    this.getMembersByCohort(cohortId)
+      .pipe(
+        flatMap((response) => {
+          return this.communityGroupMemberService.endMembership(
+            response.results[arraycount].uuid.toString(),
+            date
+          );
+        })
+      )
+      .subscribe(
+        (response) => {
+          const successMsg = `Successfully ended membership for ${
+            member.patient.person.display
+          } on ${Moment(date).format('DD MMMM YYYY')}`;
+          this.reloadData();
+          this.showSuccessModal(successMsg);
+        },
+        (error) => {
+          this.error = true;
+          console.log(error);
+        }
+      );
+  }
+
+  getMembersByCohort(cohortId: string) {
+    const url = `${this.communityGroupService.getOpenMrsBaseUrl()}/cohortmember?cohort=${cohortId}`;
+    return this.http.get(url).pipe(
+      map((response: any) => {
+        const results = response.results.map((result: any) => {
+          return {
+            uuid: result.uuid,
+            display: result.display,
+            links: result.links.map((link: any) => {
+              return {
+                rel: link.rel,
+                uri: link.uri,
+                resourceAlias: link.resourceAlias
+              };
+            })
+          };
+        });
+        return { results };
+      })
     );
   }
 
@@ -379,21 +411,25 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  checkIfDrugPickupFilled(cohortVisit, patient) {
+  checkIfDrugPickupFilled(personuuid, cohortVisit) {
     let xx = false;
     const drugPickupUuid = '987009c6-6f24-43f7-9640-c285d6553c63';
 
-    cohortVisit.cohortMemberVisits.filter((cmv) => {
-      if (cmv.visit.patient.uuid === patient.person.uuid) {
-        cmv.visit.encounters.forEach((en) => {
-          if (
-            en.encounterType.uuid === drugPickupUuid &&
-            Moment(cmv.visit.startDatetime).format('DD MMMM YYYY') ===
-              Moment(en.encounterDatetime).format('DD MMMM YYYY')
-          ) {
-            xx = true;
+    cohortVisit.cohortMemberVisits.filter((cohortMemberVisit) => {
+      if (cohortMemberVisit.visit.patient.uuid === personuuid) {
+        const drugPickupEncounter = cohortMemberVisit.visit.encounters.find(
+          (encounter) => {
+            const isDrugPickupEncounter =
+              encounter.encounterType.uuid === drugPickupUuid;
+            const isSameDay = Moment(
+              cohortMemberVisit.visit.startDatetime
+            ).isSame(encounter.encounterDatetime, 'day');
+            return isDrugPickupEncounter && isSameDay;
           }
-        });
+        );
+        if (drugPickupEncounter) {
+          xx = true;
+        }
       }
     });
 
@@ -402,12 +438,16 @@ export class GroupDetailComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private patientPresent(patient, cohortVisit) {
     let present = false;
+    const personuuid = patient.person.uuid;
     const patientVisit = cohortVisit.cohortMemberVisits.find((v) => {
-      return v.visit.patient.uuid === patient.person.uuid;
+      return v.visit.patient.uuid === personuuid;
     });
-    if (patientVisit && this.checkIfDrugPickupFilled(patient, cohortVisit)) {
-      present = true;
+    if (patientVisit) {
+      if (this.checkIfDrugPickupFilled(personuuid, cohortVisit)) {
+        present = true;
+      }
     }
+
     return present;
   }
 

src/app/group-manager/group-manager-search/group-manager-search-results.component.html

@@ -29,21 +29,24 @@
             <td>{{ group.program }}</td>
             <td>{{ group.facility.display }}</td>
             <td>{{ group.landmark }}</td>
-            <td>{{ group.status }}</td>
+            <td
+              [ngStyle]="{ color: group.status === 'Active' ? 'green' : 'red' }"
+            >
+              {{ group.status }}
+            </td>
             <td *ngIf="group.endDate == null">
-              <button
-                class="btn btn-sm btn-danger"
-                (click)="$event.stopPropagation(); showDisbandDateModal(group)"
-              >
-                Disband
+              <button class="btn btn-sm btn-warning">
+                <i class="fa fa-times-circle" aria-hidden="true"></i> Open Group
+                to Disband
               </button>
             </td>
             <td *ngIf="group.endDate">
               <button
                 class="btn btn-sm btn-success"
-                (click)="$event.stopPropagation(); activateGroup(group)"
+                (click)="$event.stopPropagation(); confirmActivate(group)"
               >
-                Activate
+                <i class="fa fa-check-square" aria-hidden="true"></i> Activate
+                Group
               </button>
             </td>
           </tr>

src/app/group-manager/group-manager-search/group-manager-search-results.component.ts

@@ -14,6 +14,7 @@ import * as Moment from 'moment';
 import { Subscription } from 'rxjs';
 import { DatePickerModalComponent } from '../modals/date-picker-modal.component';
 import { Group } from '../../models/group.model';
+import { ToastrFunctionService } from 'src/app/shared/services/toastr-function.service';
 
 @Component({
   selector: 'group-manager-search-results',
@@ -42,7 +43,8 @@ export class GroupManagerSearchResultsComponent implements OnInit, OnDestroy {
 
   constructor(
     private communityGroupService: CommunityGroupService,
-    private modalService: BsModalService
+    private modalService: BsModalService,
+    private toastrService: ToastrFunctionService
   ) {}
 
   ngOnInit(): void {}
@@ -106,6 +108,15 @@ export class GroupManagerSearchResultsComponent implements OnInit, OnDestroy {
     );
   }
 
+  public confirmActivate(group: any): void {
+    const confirmed = window.confirm(
+      `Are you sure you want to activate group ${group.display}?`
+    );
+    if (confirmed) {
+      this.activateGroup(group);
+    }
+  }
+
   public activateGroup(group) {
     const index = _.indexOf(this._groups, group);
     this.communityGroupService.activateGroup(group.uuid).subscribe(
@@ -116,6 +127,12 @@ export class GroupManagerSearchResultsComponent implements OnInit, OnDestroy {
         console.log(error);
       }
     );
+
+    this.toastrService.showToastr(
+      'success',
+      `Group ${group.display} has been activated successully`,
+      'Activated!'
+    );
   }
 
   ngOnDestroy(): void {

src/app/group-manager/group-manager-search/group-manager-search.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy, TemplateRef } from '@angular/core';
 import { CommunityGroupService } from '../../openmrs-api/community-group-resource.service';
+import { ToastrFunctionService } from 'src/app/shared/services/toastr-function.service';
 import * as _ from 'lodash';
 import {
   ActivatedRoute,
@@ -15,6 +16,7 @@ import { BsModalService, BsModalRef } from 'ngx-bootstrap';
 import { Group } from '../../models/group.model';
 import { GridOptions, RowNode } from 'ag-grid';
 import { ProgramResourceService } from 'src/app/openmrs-api/program-resource.service';
+import { IndividualConfig, ToastrService } from 'ngx-toastr';
 @Component({
   selector: 'group-manager-search',
   templateUrl: './group-manager-search.component.html',
@@ -49,7 +51,8 @@ export class GroupManagerSearchComponent implements OnInit, OnDestroy {
     private router: Router,
     private bsModalService: BsModalService,
     private route: ActivatedRoute,
-    private programResourceService: ProgramResourceService
+    private programResourceService: ProgramResourceService,
+    private toastrService: ToastrFunctionService
   ) {}
 
   ngOnInit(): void {
@@ -243,11 +246,13 @@ export class GroupManagerSearchComponent implements OnInit, OnDestroy {
         field: 'endDate',
         cellRenderer: (column) => {
           if (column.value) {
-            return `<button class='btn btn-sm btn-success' data-action-type='activate'
-                    (click)='activateGroup($event, rowData)'>Activate</button>`;
+            return `
+            <button class='btn btn-sm btn-success' data-action-type='activate'
+                    (click)='activateGroup($event, rowData)'><i class="fa fa-check-square" aria-hidden="true"></i> Activate Group</button>`;
           } else {
-            return `<button class='btn btn-sm btn-danger' data-action-type='disband'
-                    (click)='disband(group, new Date())' >Disband</button>`;
+            return `<button class="btn btn-sm btn-warning">
+            <i class="fa fa-times-circle" aria-hidden="true"></i> Open Group to Disband
+          </button>`;
           }
         }
       }
@@ -277,6 +282,12 @@ export class GroupManagerSearchComponent implements OnInit, OnDestroy {
         console.log(error);
       }
     );
+
+    this.toastrService.showToastr(
+      'success',
+      `Group ${group.display} has been activated successully`,
+      'Activated!'
+    );
   }
 
   public gridOnCellClick($event) {
@@ -285,7 +296,13 @@ export class GroupManagerSearchComponent implements OnInit, OnDestroy {
       const actionType = $event.event.target.getAttribute('data-action-type');
       switch (actionType) {
         case 'activate':
-          return this.activateGroup(data, $event.node);
+          const confirmed = window.confirm(
+            `Are you sure you want to activate group ${data.display}?`
+          );
+          if (confirmed) {
+            return this.activateGroup(data, $event.node);
+          }
+          break;
         case 'disband':
           return this.disbandGroup(data, $event.node, new Date());
         default:

src/app/shared/services/toastr-function.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { ToastrService, IndividualConfig } from 'ngx-toastr';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastrFunctionService {
+  constructor(private toastr: ToastrService) {}
+
+  public showToastr(type: string, message: string, title: string) {
+    const options: Partial<IndividualConfig> = {
+      timeOut: 3000,
+      progressBar: true,
+      positionClass: 'toast-top-right',
+      closeButton: true,
+      progressAnimation: 'increasing'
+    };
+
+    switch (type) {
+      case 'success':
+        this.toastr.success(message, title, options);
+        break;
+      case 'error':
+        this.toastr.error(message, title, options);
+        break;
+      case 'warning':
+        this.toastr.warning(message, title, options);
+        break;
+      case 'info':
+        this.toastr.info(message, title, options);
+        break;
+      default:
+        break;
+    }
+  }
+}