Fixed Deposit and Recurring Deposit products with datatables (#1647)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -25,7 +25,7 @@ export class GroupActionsResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const actionName = route.paramMap.get('name');
+    const actionName = route.paramMap.get('action');
     const groupId = route.paramMap.get('groupId') || route.parent.parent.paramMap.get('groupId');
     switch (actionName) {
       case 'Attendance':

src/app/groups/create-group/create-group.component.html

@@ -40,13 +40,23 @@
             </mat-select>
           </mat-form-field>
 
+          <mat-form-field (click)="submittedOnDatePicker.open()">
+            <mat-label>Submitted on</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="groupForm.controls.submittedOnDate.hasError('required')">
+              Submission Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
           <mat-checkbox labelPosition="before" formControlName="active">
             Active
           </mat-checkbox>
 
-          <mat-form-field *ngIf="this.groupForm.controls.active.value" (click)="activationDatePicker.open()">
+          <mat-form-field *ngIf="groupForm.controls.active.value" (click)="activationDatePicker.open()">
             <mat-label>Activation Date</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <input matInput [min]="groupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="groupForm.controls.activationDate.hasError('required')">
@@ -59,21 +69,11 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
-          <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>Submitted on</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
-            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupForm.controls.submittedOnDate.hasError('required')">
-              Submission Date is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
           <mat-form-field>
             <mat-label>Add Clients</mat-label>
             <input matInput [formControl]="clientChoice" [matAutocomplete]="clientsAutocomplete">
           </mat-form-field>
-  
+
         </div>
 
         <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
@@ -108,10 +108,10 @@
           <mat-nav-list *ngIf="clientMembers.length">
             <h3 matSubheader>Selected Clients</h3>
             <div mat-list-item *ngFor="let client of clientMembers index as i">
-              <button mat-icon-button (click)="removeClient(i)">
+              <span matLine>{{client.displayName}}</span>
+              <button mat-icon-button color="warn" (click)="removeClient(i)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <span matLine>{{client.displayName}}</span>
             </div>
           </mat-nav-list>
 

src/app/groups/create-group/create-group.component.scss

@@ -1,5 +1,5 @@
 .container {
-    max-width: 37rem;
+    max-width: 50rem;
   }
 
 .mat-table {

src/app/groups/create-group/create-group.component.ts

@@ -87,7 +87,7 @@ export class CreateGroupComponent implements OnInit, AfterViewInit {
     this.groupForm = this.formBuilder.group({
       'name': ['', [Validators.required, Validators.pattern('(^[A-z]).*')]],
       'officeId': ['', Validators.required],
-      'submittedOnDate': ['', Validators.required],
+      'submittedOnDate': [this.settingsService.businessDate, Validators.required],
       'staffId': [''],
       'externalId': [''],
       'active': [false],
@@ -169,7 +169,7 @@ export class CreateGroupComponent implements OnInit, AfterViewInit {
     data.clientMembers = [];
     this.clientMembers.forEach((client: any) => data.clientMembers.push(client.id));
     this.groupService.createGroup(data).subscribe((response: any) => {
-      this.router.navigate(['../groups']);
+      this.router.navigate(['../groups', response.resourceId, 'general']);
     });
   }
 

src/app/groups/edit-group/edit-group.component.html

@@ -28,9 +28,19 @@
             </mat-select>
           </mat-form-field>
 
+          <mat-form-field (click)="submittedOnDatePicker.open()">
+            <mat-label>Submitted on</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
+            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="editGroupForm.controls.submittedOnDate.hasError('required')">
+              Submission Date is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
           <mat-form-field *ngIf="this.editGroupForm.contains('activationDate')" (click)="activationDatePicker.open()">
             <mat-label>Activation Date</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
+            <input matInput [min]="editGroupForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="editGroupForm.controls.activationDate.hasError('required')">
@@ -43,16 +53,6 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
-          <mat-form-field (click)="submittedOnDatePicker.open()">
-            <mat-label>Submitted on</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
-            <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #submittedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="editGroupForm.controls.submittedOnDate.hasError('required')">
-              Submission Date is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-          
         </div>
 
       </mat-card-content>

src/app/groups/edit-group/edit-group.component.scss

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

src/app/groups/groups-routing.module.ts

@@ -67,6 +67,11 @@ const routes: Routes = [
                 groupDatatables: GroupDatatablesResolver
               },
               children: [
+                {
+                  path: '',
+                  redirectTo: 'general',
+                  pathMatch: 'full'
+                },
                 {
                   path: 'general',
                   component: GeneralTabComponent,
@@ -133,8 +138,8 @@ const routes: Routes = [
               ]
             },
             {
-              path: 'actions/:name',
-              data: { title: extract('Group Actions'), routeParamBreadcrumb: 'name' },
+              path: 'actions/:action',
+              data: { title: extract('Group Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
               component: GroupActionsComponent,
               resolve: {
                 groupActionData: GroupActionsResolver

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

@@ -59,7 +59,7 @@ export class AttachGroupMeetingComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = this.settingsService.maxFutureDate;
     this.createGroupMeetingForm();
     this.buildDependencies();
   }
@@ -119,7 +119,7 @@ export class AttachGroupMeetingComponent implements OnInit {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `groups_${this.groupId}_CollectionMeeting`;
-    const typeId = '1';
+    const typeId = groupMeetingFormData.repeating ? '1' : '4' ;
     const prevStartDate: Date = this.groupMeetingForm.value.startDate;
     if (groupMeetingFormData.startDate instanceof Date) {
       groupMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);

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

@@ -42,8 +42,8 @@ export class GroupActionsComponent {
   constructor(private route: ActivatedRoute,
               private router: Router) {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    const name = this.route.snapshot.params['name'];
-    this.actions[name] = true;
+    const action = this.route.snapshot.params['action'];
+    this.actions[action] = true;
   }
 
 }

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

@@ -36,7 +36,7 @@
 
   </mat-card>
 
-  <mat-card fxFlex="40%">
+  <mat-card fxFlex="50%">
 
     <h3 matSubheader>Client Members</h3>
 
@@ -44,7 +44,7 @@
       <div mat-list-item *ngFor="let client of clientMembers index as i">
         <span matLine class="p-t-10">{{client.displayName}}</span>
         <div fxFlex></div>
-        <button mat-icon-button color="warn" (click)="removeClient(i, client)">
+        <button mat-icon-button color="warn" (click)="removeClient(i, client)" matTooltip="Remove Client from Group" matTooltipPosition="left">
           <fa-icon icon="trash"></fa-icon>
         </button>
       </div>
@@ -52,4 +52,8 @@
 
   </mat-card>
 
+  <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+    <button type="button" mat-raised-button [routerLink]="['../']">Back</button>
+  </div>
+
 </div>

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.scss

@@ -1,12 +1,12 @@
 .container {
-  max-width: 50rem;
+  max-width: 70rem;
 
   .mat-table {
     display: block;
     font-family: Tahoma, Verdana;
     width: 100%;
   }
-  
+
   .mat-row,
   .mat-header-row {
     display: flex;
@@ -16,14 +16,14 @@
     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;

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

@@ -43,7 +43,7 @@ export class ManageGroupMembersComponent implements AfterViewInit {
               public dialog: MatDialog) {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
-      this.clientMembers = data.groupActionData.clientMembers;
+      this.clientMembers = data.groupActionData.clientMembers || [];
     });
   }
 

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

@@ -74,7 +74,7 @@
           </mat-icon>
           <span>Edit</span>
         </button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_CLIENT'">
+        <button mat-menu-item *mifosxHasPermission="'CREATE_CLIENT'" (click)="doAction('Manage Members')">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>