From 7a249fb2578d25acd75fb05312cb5fb120268db5 Mon Sep 17 00:00:00 2001 From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com> Date: Tue, 14 Jul 2020 22:39:40 +0530 Subject: [PATCH] feat: add centers action (attach meeting) (#1097) Fixes: #1096 --- .../attach-center-meeting.component.html | 74 ++++++++++ .../attach-center-meeting.component.scss | 3 + .../attach-center-meeting.component.spec.ts | 25 ++++ .../attach-center-meeting.component.ts | 135 ++++++++++++++++++ .../center-actions.component.html | 1 + .../center-actions.component.ts | 6 +- .../centers-view/centers-view.component.html | 36 +++-- .../centers-view/centers-view.component.scss | 12 ++ .../centers-view/centers-view.component.ts | 1 + src/app/centers/centers.module.ts | 4 +- src/app/centers/centers.service.ts | 8 ++ .../center-actions.resolver.ts | 2 + 12 files changed, 289 insertions(+), 18 deletions(-) create mode 100644 src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html create mode 100644 src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.scss create mode 100644 src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.spec.ts create mode 100644 src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts diff --git a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html new file mode 100644 index 000000000..b862cf056 --- /dev/null +++ b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html @@ -0,0 +1,74 @@ +
+ + + +
+ + + +
+ + + Meeting Start Date + + + + + Start Date is required + + + + + Repeats? + + + + Repetition Frequency + + + {{ option.value }} + + + + Repetition Frequency is required + + + + + Repetition Interval + + + {{ interval }} + + + + Repeition Interval is required + + + + + Repeats on Day + + + {{ day.value }} + + + + At least one day must be selected + + + +
+ + + + + + + + +
+ + + +
diff --git a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.scss b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.scss new file mode 100644 index 000000000..d774f68da --- /dev/null +++ b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.scss @@ -0,0 +1,3 @@ +.container { + max-width: 37rem; +} diff --git a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.spec.ts b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.spec.ts new file mode 100644 index 000000000..fd7b295ec --- /dev/null +++ b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AttachCenterMeetingComponent } from './attach-center-meeting.component'; + +describe('AttachCenterMeetingComponent', () => { + let component: AttachCenterMeetingComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AttachCenterMeetingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AttachCenterMeetingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts new file mode 100644 index 000000000..2706652aa --- /dev/null +++ b/src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts @@ -0,0 +1,135 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; +import { DatePipe } from '@angular/common'; +import { ActivatedRoute, Router } from '@angular/router'; + +/** Custom Services */ +import { CentersService } from 'app/centers/centers.service'; + +/** + * Center Meetings Component + */ +@Component({ + selector: 'mifosx-attach-center-meeting', + templateUrl: './attach-center-meeting.component.html', + styleUrls: ['./attach-center-meeting.component.scss'] +}) +export class AttachCenterMeetingComponent implements OnInit { + + /** Minimum date allowed. */ + minDate = new Date(2000, 0, 1); + /** Maximum date allowed. */ + maxDate = new Date(); + /** Center Meeting form. */ + centerMeetingForm: FormGroup; + /** Calnedar Template Data */ + calendarTemplate: any; + /** Center Id */ + centerId: any; + /** Repetition Intervals */ + repetitionIntervals: any[]; + /** Frequency Options */ + frequencyOptions: any; + /** Repetition Days Data */ + repeatsOnDays: any; + + /** + * Fetches Calendar Template from `resolve` + * @param {FormBuilder} formBuilder Form Builder + * @param {CentersService} centersService Shares Service + * @param {DatePipe} datePipe Date Pipe + * @param {ActivatedRoute} route Activated Route + * @param {Router} router Router + */ + constructor(private formBuilder: FormBuilder, + private centersService: CentersService, + private datePipe: DatePipe, + private route: ActivatedRoute, + private router: Router) { + this.route.data.subscribe((data: { centersActionData: any }) => { + this.calendarTemplate = data.centersActionData; + this.frequencyOptions = this.calendarTemplate.frequencyOptions; + this.repeatsOnDays = this.calendarTemplate.repeatsOnDayOptions; + }); + this.centerId = this.route.parent.snapshot.params['centerId']; + } + + ngOnInit() { + this.createCenterMeetingForm(); + this.buildDependencies(); + } + + /** + * Creates the Center Meeting form. + */ + createCenterMeetingForm() { + this.centerMeetingForm = this.formBuilder.group({ + 'startDate': ['', Validators.required], + 'repeating': [false] + }); + } + + /** + * Subscribes to value changes of controls. + */ + buildDependencies() { + this.centerMeetingForm.get('repeating').valueChanges.subscribe((value: boolean) => { + if (value) { + this.centerMeetingForm.addControl('frequency', new FormControl()); + this.centerMeetingForm.addControl('interval', new FormControl()); + this.centerMeetingForm.get('frequency').valueChanges.subscribe((frequency: any) => { + this.centerMeetingForm.removeControl('repeatsOnDay'); + switch (frequency) { + case 1: // Daily + this.repetitionIntervals = ['1', '2', '3']; + break; + case 2: // Weekly + this.repetitionIntervals = ['1', '2', '3']; + this.centerMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required)); + break; + case 3: // Monthly + this.repetitionIntervals = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']; + break; + case 4: // Yearly + this.repetitionIntervals = ['1', '2', '3', '4', '5']; + break; + } + }); + this.centerMeetingForm.patchValue({ + 'frequency': 1, + 'interval': '1' + }); + } else { + this.centerMeetingForm.removeControl('frequency'); + this.centerMeetingForm.removeControl('interval'); + } + }); + } + + /** + * Submits the form and attatches the meeting. + */ + submit() { + // TODO: Update once language and date settings are setup + const locale = 'en'; + const dateFormat = 'dd MMMM yyyy'; + const title = `centers_${this.centerId}_CollectionMeeting`; + const typeId = '1'; + const prevStartDate: Date = this.centerMeetingForm.value.startDate; + this.centerMeetingForm.patchValue({ + startDate: this.datePipe.transform(prevStartDate, dateFormat), + }); + const data = { + ...this.centerMeetingForm.value, + title, + typeId, + dateFormat, + locale + }; + this.centersService.createCenterMeeting(this.centerId, data).subscribe((response: any) => { + this.router.navigate(['../../'], { relativeTo: this.route }); + }); + } + +} 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 837092e1d..6d81565e6 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 @@ -2,3 +2,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 f55d75d90..18d605df2 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 @@ -17,12 +17,14 @@ export class CenterActionsComponent { 'Activate': boolean, 'Assign Staff': boolean, 'Close': boolean, - 'Attendance': boolean + 'Attendance': boolean, + 'Attach Meeting': boolean } = { 'Activate': false, 'Assign Staff': false, 'Close': false, - 'Attendance': false + 'Attendance': false, + 'Attach Meeting': false }; /** diff --git a/src/app/centers/centers-view/centers-view.component.html b/src/app/centers/centers-view/centers-view.component.html index 9563b432b..38db5f929 100644 --- a/src/app/centers/centers-view/centers-view.component.html +++ b/src/app/centers/centers-view/centers-view.component.html @@ -31,23 +31,29 @@ {{(centerViewData.activationDate)?(centerViewData.activationDate|date) :'Not Activated'}}

-
-

- Next Meeting On: - - {{centerViewData.collectionMeetingCalendar.nextTenRecurringDates[0]|date}} - - -
- Meeting Frequency: {{centerViewData.collectionMeetingCalendar.humanReadable}} - - Unassigned
- Closed Date: {{centerViewData.timeline.closedOnDate|date}} -

-
+ +
+
+

+ Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | date}} +
+ Meeting Frequency: {{centerViewData.collectionMeetingCalendar?.frequency.value | lowercase}} +

+
+ +
+

+ Next Meeting on: Unassigned +
+ Meeting Frequency: N/A +

+
+ +
+ @@ -75,7 +81,7 @@ - + diff --git a/src/app/centers/centers-view/centers-view.component.scss b/src/app/centers/centers-view/centers-view.component.scss index e67ff794c..b02bdddb3 100644 --- a/src/app/centers/centers-view/centers-view.component.scss +++ b/src/app/centers/centers-view/centers-view.component.scss @@ -21,6 +21,18 @@ border-radius: 20px; } } + .center-meeting { + align-self: flex-end; + width: 300px; + height: 140px; + div, ng-template > div { + background-color: #0a6aac; + p { + color: white; + padding: 0 10px; + } + } + } .center-actions { align-self: flex-end; margin: 0 1%; diff --git a/src/app/centers/centers-view/centers-view.component.ts b/src/app/centers/centers-view/centers-view.component.ts index 794e6f11b..df1925dc2 100644 --- a/src/app/centers/centers-view/centers-view.component.ts +++ b/src/app/centers/centers-view/centers-view.component.ts @@ -60,6 +60,7 @@ export class CentersViewComponent implements OnInit { case 'Assign Staff': case 'Close': case 'Attendance': + case 'Attach Meeting': this.router.navigate([`actions/${name}`], { relativeTo: this.route }); break; case 'Unassign Staff': diff --git a/src/app/centers/centers.module.ts b/src/app/centers/centers.module.ts index 3e4a93e76..f14862794 100644 --- a/src/app/centers/centers.module.ts +++ b/src/app/centers/centers.module.ts @@ -21,6 +21,7 @@ import { ActivateCenterComponent } from './centers-view/center-actions/activate- import { CenterAssignStaffComponent } from './centers-view/center-actions/center-assign-staff/center-assign-staff.component'; import { CloseCenterComponent } from './centers-view/center-actions/close-center/close-center.component'; import { CenterAttendanceComponent } from './centers-view/center-actions/center-attendance/center-attendance.component'; +import { AttachCenterMeetingComponent } from './centers-view/center-actions/attach-center-meeting/attach-center-meeting.component'; /** * Centers Module @@ -47,7 +48,8 @@ import { CenterAttendanceComponent } from './centers-view/center-actions/center- ActivateCenterComponent, CenterAssignStaffComponent, CloseCenterComponent, - CenterAttendanceComponent + CenterAttendanceComponent, + AttachCenterMeetingComponent ] }) export class CentersModule { } diff --git a/src/app/centers/centers.service.ts b/src/app/centers/centers.service.ts index 55dfd28d3..cb6668096 100644 --- a/src/app/centers/centers.service.ts +++ b/src/app/centers/centers.service.ts @@ -228,4 +228,12 @@ export class CentersService { return this.http.post(`/centers/${centerId}/meetings`, data, {params: httpParams}); } + getCalendarTemplate(centerId: any): Observable { + return this.http.get(`/centers/${centerId}/calendars/template`); + } + + createCenterMeeting(centerId: any, data: any): Observable { + return this.http.post(`/centers/${centerId}/calendars`, data); + } + } diff --git a/src/app/centers/common-resolvers/center-actions.resolver.ts b/src/app/centers/common-resolvers/center-actions.resolver.ts index bafb12949..869cdf015 100644 --- a/src/app/centers/common-resolvers/center-actions.resolver.ts +++ b/src/app/centers/common-resolvers/center-actions.resolver.ts @@ -32,6 +32,8 @@ export class CenterActionsResolver implements Resolve { return this.centersService.getGroupStaffData(centerId); case 'Attendance': return this.centersService.getCentersData(centerId); + case 'Attach Meeting': + return this.centersService.getCalendarTemplate(centerId); default: return undefined; }