feat: group actions (edit-meeting-schedule) (#1054)

Fixes: #1053

src/app/groups/common-resolvers/group-actions.resolver.ts

@@ -38,6 +38,7 @@ export class GroupActionsResolver implements Resolve<Object> {
       case 'Attach Meeting':
         return this.groupsService.getGroupCalendarTemplate(groupId);
       case 'Edit Meeting':
+      case 'Edit Meeting Schedule':
         const calendarId = route.queryParamMap.get('calendarId');
         return this.groupsService.getGroupCalendarAndTemplate(groupId, calendarId);
       default:

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -0,0 +1,46 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="groupEditMeetingScheduleForm">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Existing Meeting Date</mat-label>
+          <mat-select formControlName="presentMeetingDate">
+            <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
+              {{ date | date }}
+            </mat-option>
+          </mat-select>
+          <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
+            Existing Meeting Date is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Revised Meeting Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
+          <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #newMeetingDatePicker></mat-datepicker>
+          <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
+            Revised Meeting Date is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+  
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!groupEditMeetingScheduleForm.valid" (click)="submit()">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGroupMeetingScheduleComponent } from './edit-group-meeting-schedule.component';
+
+describe('EditGroupMeetingScheduleComponent', () => {
+  let component: EditGroupMeetingScheduleComponent;
+  let fixture: ComponentFixture<EditGroupMeetingScheduleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditGroupMeetingScheduleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGroupMeetingScheduleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.ts

@@ -0,0 +1,95 @@
+/** 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 { GroupsService } from 'app/groups/groups.service';
+
+/**
+ * Edit Group Meetings Schedule Component
+ */
+@Component({
+  selector: 'mifosx-edit-group-meeting-schedule',
+  templateUrl: './edit-group-meeting-schedule.component.html',
+  styleUrls: ['./edit-group-meeting-schedule.component.scss']
+})
+export class EditGroupMeetingScheduleComponent implements OnInit {
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Group Meeting form. */
+  groupEditMeetingScheduleForm: FormGroup;
+  /** Calendar Template Data */
+  calendarTemplate: any;
+  /** Group Id */
+  groupId: any;
+  /** CalendarI ID */
+  calendarId: any;
+  /** Next meetings data */
+  nextMeetingDates: any;
+
+  /**
+   * Fetches Calendar Template from `resolve`
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {GroupsService} groupsService Shares Service
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   */
+  constructor(private formBuilder: FormBuilder,
+              private groupsService: GroupsService,
+              private datePipe: DatePipe,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { groupActionData: any }) => {
+      this.calendarTemplate = data.groupActionData;
+      this.nextMeetingDates = this.calendarTemplate.nextTenRecurringDates;
+    });
+    this.calendarId = this.route.snapshot.queryParams['calendarId'];
+    this.groupId = this.route.parent.snapshot.params['groupId'];
+  }
+
+  ngOnInit() {
+    this.createEditMeetingScheduleForm();
+  }
+
+  /**
+   * Creates the Edit Group Meeting Schedule form.
+   */
+  createEditMeetingScheduleForm() {
+    this.groupEditMeetingScheduleForm = this.formBuilder.group({
+      'presentMeetingDate': ['', Validators.required],
+      'newMeetingDate': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submits the form and updates the meeting.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const reschedulebasedOnMeetingDates = true;
+    const prevOldDate: Date = new Date(this.groupEditMeetingScheduleForm.value.presentMeetingDate);
+    const prevNewDate: Date = this.groupEditMeetingScheduleForm.value.newMeetingDate;
+    this.groupEditMeetingScheduleForm.patchValue({
+      'presentMeetingDate': this.datePipe.transform(prevOldDate, dateFormat),
+      'newMeetingDate': this.datePipe.transform(prevNewDate, dateFormat)
+    });
+    const data = {
+      ...this.groupEditMeetingScheduleForm.value,
+      reschedulebasedOnMeetingDates,
+      dateFormat,
+      locale
+    };
+    this.groupsService.updateGroupMeeting(this.groupId, data, this.calendarId).subscribe((response: any) => {
+      this.router.navigate(['../../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -1,3 +1,10 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
+  <button mat-raised-button color="primary" (click)="editSchedule()">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit Schedule
+  </button>
+</div>
+
 <div class="container">
 
   <mat-card>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.ts

@@ -23,7 +23,7 @@ export class EditGroupMeetingComponent implements OnInit {
   maxDate = new Date();
   /** Group Meeting form. */
   groupEditMeetingForm: FormGroup;
-  /** Calnedar Template Data */
+  /** Calendar Template Data */
   calendarTemplate: any;
   /** Group Id */
   groupId: any;
@@ -87,6 +87,7 @@ export class EditGroupMeetingComponent implements OnInit {
         case 2: // Weekly
           this.repetitionIntervals = ['1', '2', '3'];
           this.groupEditMeetingForm.addControl('repeatsOnDay', new FormControl('', Validators.required));
+          this.groupEditMeetingForm.get('repeatsOnDay').patchValue(this.calendarTemplate.repeatsOnDay.id);
         break;
         case 3: // Monthly
           this.repetitionIntervals = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
@@ -99,10 +100,18 @@ export class EditGroupMeetingComponent implements OnInit {
     this.groupEditMeetingForm.patchValue({
       'startDate': this.calendarTemplate.startDate && new Date(this.calendarTemplate.startDate),
       'frequency': this.calendarTemplate.frequency.id,
-      'interval': this.calendarTemplate.interval
+      'interval': `${this.calendarTemplate.interval}`
     });
   }
 
+  /**
+   * Navigate to edit meeting schedule form.
+   */
+  editSchedule() {
+    const queryParams: any = { calendarId: this.calendarId };
+    this.router.navigate([`../Edit Meeting Schedule`], { relativeTo: this.route, queryParams: queryParams });
+  }
+
   /**
    * Submits the form and updates the meeting.
    */

src/app/groups/groups-view/group-actions/group-actions.component.html

@@ -5,3 +5,4 @@
 <mifosx-group-attendance *ngIf="actions['Attendance']"></mifosx-group-attendance>
 <mifosx-manage-group-members *ngIf="actions['Manage Members']"></mifosx-manage-group-members>
 <mifosx-edit-group-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-group-meeting>
+<mifosx-edit-group-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-group-meeting-schedule>

src/app/groups/groups-view/group-actions/group-actions.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /**
  * Group actions component.
@@ -21,6 +21,7 @@ export class GroupActionsComponent {
     'Attendance': boolean
     'Manage Members': boolean
     'Edit Meeting': boolean
+    'Edit Meeting Schedule': boolean
   } = {
     'Assign Staff': false,
     'Close': false,
@@ -28,13 +29,16 @@ export class GroupActionsComponent {
     'Attach Meeting': false,
     'Attendance': false,
     'Manage Members': false,
-    'Edit Meeting': false
+    'Edit Meeting': false,
+    'Edit Meeting Schedule': false
   };
 
   /**
    * @param {ActivatedRoute} route Activated Route
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
     const name = this.route.snapshot.params['name'];
     this.actions[name] = true;
   }

src/app/groups/groups-view/groups-view.component.ts

@@ -76,7 +76,7 @@ export class GroupsViewComponent {
     if (this.groupViewData.collectionMeetingCalendar) {
       const entityType = this.groupViewData.collectionMeetingCalendar.entityType.value;
       if (entityType === 'GROUPS' && this.groupViewData.hierarchy === '.' + this.groupViewData.id + '.' ) {
-          return true;
+        return true;
       }
     }
     return false;

src/app/groups/groups.module.ts

@@ -30,6 +30,7 @@ import { AttachGroupMeetingComponent } from './groups-view/group-actions/attach-
 import { GroupAttendanceComponent } from './groups-view/group-actions/group-attendance/group-attendance.component';
 import { ManageGroupMembersComponent } from './groups-view/group-actions/manage-group-members/manage-group-members.component';
 import { EditGroupMeetingComponent } from './groups-view/group-actions/edit-group-meeting/edit-group-meeting.component';
+import { EditGroupMeetingScheduleComponent } from './groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component';
 
 /**
  * Groups Module
@@ -64,7 +65,8 @@ import { EditGroupMeetingComponent } from './groups-view/group-actions/edit-grou
     AttachGroupMeetingComponent,
     GroupAttendanceComponent,
     ManageGroupMembersComponent,
-    EditGroupMeetingComponent
+    EditGroupMeetingComponent,
+    EditGroupMeetingScheduleComponent
   ],
   entryComponents: [
     UnassignRoleDialogComponent,