From 90b6e3cc6d4edcb2f1050ea68edcf3501f33e231 Mon Sep 17 00:00:00 2001 From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com> Date: Wed, 15 Jul 2020 15:26:43 +0530 Subject: [PATCH] feat: add centers action (manage groups) (#1107) Fixes: #1106 --- .../center-actions.component.html | 1 + .../center-actions.component.ts | 6 +- .../manage-groups.component.html | 55 ++++++++++ .../manage-groups.component.scss | 35 ++++++ .../manage-groups.component.spec.ts | 25 +++++ .../manage-groups/manage-groups.component.ts | 103 ++++++++++++++++++ .../centers-view/centers-view.component.html | 2 +- .../centers-view/centers-view.component.ts | 1 + src/app/centers/centers.module.ts | 4 +- src/app/centers/centers.service.ts | 5 +- .../center-actions.resolver.ts | 4 +- src/app/groups/groups.service.ts | 3 +- 12 files changed, 236 insertions(+), 8 deletions(-) create mode 100644 src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html create mode 100644 src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss create mode 100644 src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts create mode 100644 src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts diff --git a/src/app/centers/centers-view/center-actions/center-actions.component.html b/src/app/centers/centers-view/center-actions/center-actions.component.html index d34c569dd..1c2358737 100644 --- a/src/app/centers/centers-view/center-actions/center-actions.component.html +++ b/src/app/centers/centers-view/center-actions/center-actions.component.html @@ -5,3 +5,4 @@ + diff --git a/src/app/centers/centers-view/center-actions/center-actions.component.ts b/src/app/centers/centers-view/center-actions/center-actions.component.ts index 4d4257607..747ed5cbf 100644 --- a/src/app/centers/centers-view/center-actions/center-actions.component.ts +++ b/src/app/centers/centers-view/center-actions/center-actions.component.ts @@ -20,7 +20,8 @@ export class CenterActionsComponent { 'Attendance': boolean, 'Attach Meeting': boolean, 'Edit Meeting': boolean, - 'Edit Meeting Schedule': boolean + 'Edit Meeting Schedule': boolean, + 'Manage Groups': boolean } = { 'Activate': false, 'Assign Staff': false, @@ -28,7 +29,8 @@ export class CenterActionsComponent { 'Attendance': false, 'Attach Meeting': false, 'Edit Meeting': false, - 'Edit Meeting Schedule': false + 'Edit Meeting Schedule': false, + 'Manage Groups': false }; /** diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html new file mode 100644 index 000000000..e5f2292b9 --- /dev/null +++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html @@ -0,0 +1,55 @@ +
+ + + + + Add Groups + + + + + + {{ group.name }} + + + +
+
+
Group Details
+ +
+
+
Name
+
{{groupChoice.value.name}}
+
+
+
Id
+
{{groupChoice.value.id}}
+
+
+
Office
+
{{groupChoice.value.officeName}}
+
+
+ + + + + +

Group Members

+ + +
+ {{group.name}} +
+ +
+ + + + +
diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss new file mode 100644 index 000000000..eac69372a --- /dev/null +++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss @@ -0,0 +1,35 @@ +.container { + max-width: 50rem; + + .mat-table { + display: block; + font-family: Tahoma, Verdana; + width: 100%; + } + + .mat-row, + .mat-header-row { + display: flex; + border-bottom-width: 1px; + border-bottom-style: solid; + align-items: center; + min-height: 48px; + padding: 0 24px; + } + + .mat-cell, + .mat-header-cell { + flex: 1; + overflow: hidden; + word-wrap: break-word; + } + + h3 { + padding-left: 0; + margin-bottom: 0; + } + + .group-card { + max-height: 20rem; + } +} diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts new file mode 100644 index 000000000..1b5dbdf38 --- /dev/null +++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManageGroupsComponent } from './manage-groups.component'; + +describe('ManageGroupsComponent', () => { + let component: ManageGroupsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManageGroupsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManageGroupsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts new file mode 100644 index 000000000..b2bbe4ecd --- /dev/null +++ b/src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.ts @@ -0,0 +1,103 @@ +/** Angular Imports */ +import { Component, AfterViewInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; + +/** Custom Dialogs */ +import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component'; + +/** Custom Services */ +import { CentersService } from 'app/centers/centers.service'; +import { GroupsService } from 'app/groups/groups.service'; +import { MatDialog } from '@angular/material'; + + +@Component({ + selector: 'mifosx-manage-groups', + templateUrl: './manage-groups.component.html', + styleUrls: ['./manage-groups.component.scss'] +}) +export class ManageGroupsComponent implements AfterViewInit { + + /** Center Data */ + centerData: any; + /** Group data. */ + groupsData: any = []; + /** Group Members. */ + groupMembers: any[] = []; + /** GroupChoice. */ + groupChoice = new FormControl(''); + + /** + * Fetches center action data from `resolve` + * @param {ActivatedRoute} route Activated Route + * @param {CentersService} centersService Centers Service + * @param {GroupsService} groupsService Groups Service + * @param {MatDialog} dialog Mat Dialog + */ + constructor(private route: ActivatedRoute, + private centersService: CentersService, + private groupsService: GroupsService, + public dialog: MatDialog) { + this.route.data.subscribe((data: { centersActionData: any }) => { + this.centerData = data.centersActionData; + this.groupMembers = data.centersActionData.groupMembers; + }); + } + + + /** + * Subscribes to Groups search filter: + */ + ngAfterViewInit() { + this.groupChoice.valueChanges.subscribe( (value: string) => { + if (value.length >= 2) { + this.groupsService.getFilteredGroups('name', 'ASC', value, this.centerData.officeId, 'true') + .subscribe((data: any) => { + this.groupsData = data; + }); + } + }); + } + + /** + * Add group. + */ + addGroup() { + if (this.groupMembers !== null && this.groupMembers !== undefined) { + if (!this.groupMembers.includes(this.groupChoice.value)) { + this.centersService.executeCenterActionCommand(this.centerData.id, 'associateGroups', {groupMembers: [this.groupChoice.value.id]}) + .subscribe(() => { this.groupMembers.push(this.groupChoice.value); }); + } + } else { + this.centersService.executeCenterActionCommand(this.centerData.id, 'associateGroups', {groupMembers: [this.groupChoice.value.id]}) + .subscribe(() => { this.groupMembers.push(this.groupChoice.value); }); + } + } + + /** + * Remove group. + * @param index Group's array index. + */ + removeGroup(index: number, group: any) { + const removeMemberDialogRef = this.dialog.open(DeleteDialogComponent, { + data: { deleteContext: `group member: ${group.name}` } + }); + removeMemberDialogRef.afterClosed().subscribe((response: any) => { + if (response.delete) { + this.centersService.executeCenterActionCommand(this.centerData.id, 'disassociateGroups', {groupMembers: [group.id]}) + .subscribe(() => { this.groupMembers.splice(index, 1); }); + } + }); + } + + /** + * Displays Group name in form control input. + * @param {any} group Group data. + * @returns {string} Group name if valid otherwise undefined. + */ + displayGroup(group: any): string | undefined { + return group ? group.name : undefined; + } + +} diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html index 89bf2ef69..4b16badd3 100644 --- a/src/app/centers/centers-view/centers-view.component.html +++ b/src/app/centers/centers-view/centers-view.component.html @@ -61,7 +61,7 @@ - + diff --git a/src/app/centers/centers-view/centers-view.component.ts b/src/app/centers/centers-view/centers-view.component.ts index f1e7249ec..12054cdbe 100644 --- a/src/app/centers/centers-view/centers-view.component.ts +++ b/src/app/centers/centers-view/centers-view.component.ts @@ -74,6 +74,7 @@ export class CentersViewComponent implements OnInit { case 'Close': case 'Attendance': case 'Attach Meeting': + case 'Manage Groups': this.router.navigate([`actions/${name}`], { relativeTo: this.route }); break; case 'Edit Meeting': diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts index 987bdd737..c86bc8c1f 100644 --- a/src/app/centers/centers.module.ts +++ b/src/app/centers/centers.module.ts @@ -24,6 +24,7 @@ import { CenterAttendanceComponent } from './centers-view/center-actions/center- import { AttachCenterMeetingComponent } from './centers-view/center-actions/attach-center-meeting/attach-center-meeting.component'; import { EditCenterMeetingComponent } from './centers-view/center-actions/edit-center-meeting/edit-center-meeting.component'; import { EditCenterMeetingScheduleComponent } from './centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component'; +import { ManageGroupsComponent } from './centers-view/center-actions/manage-groups/manage-groups.component'; /** * Centers Module @@ -53,7 +54,8 @@ import { EditCenterMeetingScheduleComponent } from './centers-view/center-action CenterAttendanceComponent, AttachCenterMeetingComponent, EditCenterMeetingComponent, - EditCenterMeetingScheduleComponent + EditCenterMeetingScheduleComponent, + ManageGroupsComponent ] }) export class CentersModule { } diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts index 1a2a82fca..e601a1f02 100644 --- a/src/app/centers/centers.service.ts +++ b/src/app/centers/centers.service.ts @@ -213,8 +213,9 @@ export class CentersService { return this.http.delete(`/centers/${centerId}`); } - getCentersData(centerId: string) { - const httpParams = new HttpParams().set('associations', 'groupMembers,collectionMeetingCalendar'); + getCentersData(centerId: string, associations: string, template?: string) { + let httpParams = new HttpParams().set('associations', associations); + httpParams = template ? httpParams.set('template', template) : httpParams; return this.http.get(`/centers/${centerId}`, {params: httpParams}); } diff --git a/src/app/centers/common-resolvers/center-actions.resolver.ts b/src/app/centers/common-resolvers/center-actions.resolver.ts index aa3dba49f..36005890f 100644 --- a/src/app/centers/common-resolvers/center-actions.resolver.ts +++ b/src/app/centers/common-resolvers/center-actions.resolver.ts @@ -31,7 +31,9 @@ export class CenterActionsResolver implements Resolve { case 'Assign Staff': return this.centersService.getGroupStaffData(centerId); case 'Attendance': - return this.centersService.getCentersData(centerId); + return this.centersService.getCentersData(centerId, 'groupMembers,collectionMeetingCalendar'); + case 'Manage Groups': + return this.centersService.getCentersData(centerId, 'groupMembers', 'true'); case 'Attach Meeting': return this.centersService.getCalendarTemplate(centerId); case 'Edit Meeting': diff --git a/src/app/groups/groups.service.ts b/src/app/groups/groups.service.ts index ea3a1f2e3..6986672bf 100644 --- a/src/app/groups/groups.service.ts +++ b/src/app/groups/groups.service.ts @@ -25,7 +25,7 @@ export class GroupsService { * @param {string} name Filter value for groups names. * @returns {Observable} Groups. */ - getFilteredGroups(orderBy: string, sortOrder: string, name: string, officeId?: any): Observable { + getFilteredGroups(orderBy: string, sortOrder: string, name: string, officeId?: any, orphansOnly?: any): Observable { let httpParams = new HttpParams() .set('name', name) .set('sortOrder', sortOrder) @@ -33,6 +33,7 @@ export class GroupsService { if (officeId) { httpParams = httpParams.set('officeId', officeId); } + httpParams = orphansOnly ? httpParams.set('orphansOnly', orphansOnly) : httpParams; return this.http.get('/groups', { params: httpParams }); }