diff --git a/src/app/groups/create-group/create-group.component.ts b/src/app/groups/create-group/create-group.component.ts index c6da51c1d..ad61999d8 100644 --- a/src/app/groups/create-group/create-group.component.ts +++ b/src/app/groups/create-group/create-group.component.ts @@ -146,22 +146,22 @@ export class CreateGroupComponent implements OnInit, AfterViewInit { * if successful redirects to groups. */ submit() { - const submittedOnDate: Date = this.groupForm.value.submittedOnDate; - const activationDate: Date = this.groupForm.value.activationDate; - // TODO: Update once language and date settings are setup - const dateFormat = 'dd MMMM yyyy'; - this.groupForm.patchValue({ - submittedOnDate: this.datePipe.transform(submittedOnDate, dateFormat), - activationDate: this.datePipe.transform(activationDate, dateFormat) - }); - const group = this.groupForm.value; - group.locale = 'en'; - group.dateFormat = dateFormat; - group.clientMembers = []; - this.clientMembers.forEach((client: any) => group.clientMembers.push(client.id)); - this.groupService.createGroup(group).subscribe((response: any) => { - this.router.navigate(['../groups']); - }); + const submittedOnDate: Date = this.groupForm.value.submittedOnDate; + const activationDate: Date = this.groupForm.value.activationDate; + // TODO: Update once language and date settings are setup + const dateFormat = 'dd MMMM yyyy'; + this.groupForm.patchValue({ + submittedOnDate: this.datePipe.transform(submittedOnDate, dateFormat), + activationDate: this.datePipe.transform(activationDate, dateFormat) + }); + const group = this.groupForm.value; + group.locale = 'en'; + group.dateFormat = dateFormat; + group.clientMembers = []; + this.clientMembers.forEach((client: any) => group.clientMembers.push(client.id)); + this.groupService.createGroup(group).subscribe((response: any) => { + this.router.navigate(['../groups']); + }); } } diff --git a/src/app/groups/edit-group/edit-group.component.html b/src/app/groups/edit-group/edit-group.component.html new file mode 100644 index 000000000..295437516 --- /dev/null +++ b/src/app/groups/edit-group/edit-group.component.html @@ -0,0 +1,69 @@ +
+ + + +
+ + + +
+ + + Name + + + Group Name is required + + + Group Name cannot begin with a special character or number + + + + + Staff + + + {{ staff.displayName }} + + + + + + Activation Date + + + + + Activation Date is required + + + + + External id + + + + + Submitted on + + + + + Submission Date is required + + + +
+ + + + + + + + +
+ + + +
diff --git a/src/app/groups/edit-group/edit-group.component.scss b/src/app/groups/edit-group/edit-group.component.scss new file mode 100644 index 000000000..d774f68da --- /dev/null +++ b/src/app/groups/edit-group/edit-group.component.scss @@ -0,0 +1,3 @@ +.container { + max-width: 37rem; +} diff --git a/src/app/groups/edit-group/edit-group.component.spec.ts b/src/app/groups/edit-group/edit-group.component.spec.ts new file mode 100644 index 000000000..229c9b1f9 --- /dev/null +++ b/src/app/groups/edit-group/edit-group.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditGroupComponent } from './edit-group.component'; + +describe('EditGroupComponent', () => { + let component: EditGroupComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditGroupComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditGroupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/groups/edit-group/edit-group.component.ts b/src/app/groups/edit-group/edit-group.component.ts new file mode 100644 index 000000000..47da3cd1e --- /dev/null +++ b/src/app/groups/edit-group/edit-group.component.ts @@ -0,0 +1,112 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; +import { Router, ActivatedRoute } from '@angular/router'; +import { DatePipe } from '@angular/common'; + +/** Custom Services */ +import { GroupsService } from '../groups.service'; + +/** + * Edit Group component. + */ +@Component({ + selector: 'mifosx-edit-group', + templateUrl: './edit-group.component.html', + styleUrls: ['./edit-group.component.scss'] +}) +export class EditGroupComponent implements OnInit { + + /** Minimum date allowed. */ + minDate = new Date(2000, 0, 1); + /** Maximum date allowed. */ + maxDate = new Date(); + /** Group form. */ + editGroupForm: FormGroup; + /** Staff data. */ + staffData: any; + /** Group Data */ + groupData: any; + /** Submitted On Date */ + submittedOnDate: any; + + /** + * Retrieves the offices data from `resolve`. + * @param {FormBuilder} formBuilder Form Builder. + * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + * @param {GroupsService} groupService GroupsService. + * @param {DatePipe} datePipe Date Pipe to format date. + */ + constructor(private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + private groupService: GroupsService, + private datePipe: DatePipe) { + this.route.data.subscribe( (data: { groupAndTemplateData: any, groupViewData: any } ) => { + this.staffData = data.groupAndTemplateData.staffOptions; + this.groupData = data.groupAndTemplateData; + this.submittedOnDate = data.groupViewData.timeline.submittedOnDate && new Date(data.groupViewData.timeline.submittedOnDate); + }); + } + + /** + * Creates and sets the group form. + */ + ngOnInit() { + this.createEditGroupForm(); + this.editGroupForm.patchValue({ + 'name': this.groupData.name, + 'submittedOnDate': this.submittedOnDate, + 'staffId': this.groupData.staffId, + 'externalId': this.groupData.externalId + }); + } + + /** + * Creates the group form. + */ + createEditGroupForm() { + this.editGroupForm = this.formBuilder.group({ + 'name': ['', [Validators.required, Validators.pattern('(^[A-z]).*')]], + 'submittedOnDate': ['', Validators.required], + 'staffId': [''], + 'externalId': [''] + }); + this.buildDependencies(); + } + + /** + * Adds form control Activation Date if group is active. + */ + buildDependencies() { + if (this.groupData.active) { + this.editGroupForm.addControl('activationDate', new FormControl('', Validators.required)); + this.editGroupForm.get('activationDate').patchValue(this.groupData.activationDate && new Date(this.groupData.activationDate)); + } else { + this.editGroupForm.removeControl('activationDate'); + } + } + + /** + * Submits the group form and creates group, + * if successful redirects to groups. + */ + submit() { + const submittedOnDate: Date = this.editGroupForm.value.submittedOnDate; + const activationDate: Date = this.editGroupForm.value.activationDate; + // TODO: Update once language and date settings are setup + const dateFormat = 'dd MMMM yyyy'; + this.editGroupForm.patchValue({ + submittedOnDate: this.datePipe.transform(submittedOnDate, dateFormat), + activationDate: activationDate && this.datePipe.transform(activationDate, dateFormat) + }); + const group = this.editGroupForm.value; + group.locale = 'en'; + group.dateFormat = dateFormat; + this.groupService.updateGroup(group, this.groupData.id).subscribe((response: any) => { + this.router.navigate(['../'], { relativeTo: this.route }); + }); + } + +} diff --git a/src/app/groups/groups-routing.module.ts b/src/app/groups/groups-routing.module.ts index d0d479914..69ca52c88 100644 --- a/src/app/groups/groups-routing.module.ts +++ b/src/app/groups/groups-routing.module.ts @@ -18,6 +18,7 @@ import { CreateGroupComponent } from './create-group/create-group.component'; import { DatatableTabsComponent } from './groups-view/datatable-tabs/datatable-tabs.component'; import { AddRoleComponent } from './groups-view/add-role/add-role.component'; import { GroupActionsComponent } from './groups-view/group-actions/group-actions.component'; +import { EditGroupComponent } from './edit-group/edit-group.component'; /** Custom Resolvers */ import { GroupViewResolver } from './common-resolvers/group-view.resolver'; @@ -44,7 +45,7 @@ const routes: Routes = [ { path: 'create', component: CreateGroupComponent, - data: { title: extract('Create Group'), breadcrumb: 'Create' }, + data: { title: extract('Create Group'), breadcrumb: 'Create', routeParamBreadcrumb: false }, resolve: { offices: OfficesResolver } @@ -98,6 +99,15 @@ const routes: Routes = [ } ] }, + { + path: 'edit', + component: EditGroupComponent, + data: { title: extract('Edit Group'), breadcrumb: 'Edit', routeParamBreadcrumb: false }, + resolve: { + groupAndTemplateData: GroupDataAndTemplateResolver, + groupViewData: GroupViewResolver + } + }, { path: 'committee', children: [ diff --git a/src/app/groups/groups-view/groups-view.component.html b/src/app/groups/groups-view/groups-view.component.html index a9e756ada..b5ee58ea3 100644 --- a/src/app/groups/groups-view/groups-view.component.html +++ b/src/app/groups/groups-view/groups-view.component.html @@ -57,7 +57,7 @@ - @@ -82,7 +82,7 @@ - + diff --git a/src/app/groups/groups-view/groups-view.component.ts b/src/app/groups/groups-view/groups-view.component.ts index 1ae2d09e1..f70137944 100644 --- a/src/app/groups/groups-view/groups-view.component.ts +++ b/src/app/groups/groups-view/groups-view.component.ts @@ -50,6 +50,9 @@ export class GroupsViewComponent { case 'Activate': this.router.navigate([`actions/${name}`], { relativeTo: this.route }); break; + case 'Edit': + this.router.navigate(['edit'], { relativeTo: this.route }); + break; case 'Unassign Staff': this.unassignStaff(); break; diff --git a/src/app/groups/groups.module.ts b/src/app/groups/groups.module.ts index ebcfd17c8..1e870023c 100644 --- a/src/app/groups/groups.module.ts +++ b/src/app/groups/groups.module.ts @@ -25,6 +25,7 @@ import { GroupAssignStaffComponent } from './groups-view/group-actions/group-ass import { UnassignStaffDialogComponent } from './groups-view/custom-dialogs/unassign-staff-dialog/unassign-staff-dialog.component'; import { CloseGroupComponent } from './groups-view/group-actions/close-group/close-group.component'; import { ActivateGroupComponent } from './groups-view/group-actions/activate-group/activate-group.component'; +import { EditGroupComponent } from './edit-group/edit-group.component'; /** * Groups Module @@ -54,7 +55,8 @@ import { ActivateGroupComponent } from './groups-view/group-actions/activate-gro GroupAssignStaffComponent, UnassignStaffDialogComponent, CloseGroupComponent, - ActivateGroupComponent + ActivateGroupComponent, + EditGroupComponent ], entryComponents: [ UnassignRoleDialogComponent, diff --git a/src/app/groups/groups.service.ts b/src/app/groups/groups.service.ts index 19e984123..b00825f19 100644 --- a/src/app/groups/groups.service.ts +++ b/src/app/groups/groups.service.ts @@ -224,4 +224,13 @@ export class GroupsService { return this.http.post('/groups', group); } + /** + * @param {any} group Group to be created. + * @param {any} groupId Group Id + * @returns {Observable} + */ + updateGroup(group: any, groupId: any): Observable { + return this.http.put(`/groups/${groupId}`, group); + } + }