feat: add edit center action (#1222)

Fixes: #1221

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

@@ -14,6 +14,7 @@ import { CentersViewComponent } from './centers-view/centers-view.component';
 import { GeneralTabComponent } from './centers-view/general-tab/general-tab.component';
 import { NotesTabComponent } from './centers-view/notes-tab/notes-tab.component';
 import { DatatableTabComponent } from './centers-view/datatable-tab/datatable-tab.component';
+import { EditCenterComponent } from './edit-center/edit-center.component';
 
 /** Custom Resolvers */
 import { OfficesResolver } from 'app/accounting/common-resolvers/offices.resolver';
@@ -26,6 +27,7 @@ import { CenterDatatableResolver } from './common-resolvers/center-datatable.res
 import { CenterDatatablesResolver } from './common-resolvers/center-datatables.resolver';
 import { CenterActionsComponent } from './centers-view/center-actions/center-actions.component';
 import { CenterActionsResolver } from './common-resolvers/center-actions.resolver';
+import { CenterDataAndTemplateResolver } from './common-resolvers/center-data-and-template.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -89,6 +91,14 @@ const routes: Routes = [
                 }
               ]
             },
+            {
+              path: 'edit',
+              component: EditCenterComponent,
+              data: { title: extract('Edit Center'), breadcrumb: 'Edit', routeParamBreadcrumb: 'Edit' },
+              resolve: {
+                centerData: CenterDataAndTemplateResolver,
+              }
+            },
             {
               path: 'actions/:name',
               data: { title: extract('Center Actions'), routeParamBreadcrumb: 'name' },
@@ -116,7 +126,8 @@ const routes: Routes = [
     CenterNotesResolver,
     CenterDatatableResolver,
     CenterDatatablesResolver,
-    CenterActionsResolver
+    CenterActionsResolver,
+    CenterDataAndTemplateResolver
   ]
 })
 export class CentersRoutingModule { }

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

@@ -61,7 +61,7 @@
       <span *ngIf="!(centerViewData.status.value=='Active')">
         <button mat-raised-button *mifosxHasPermission="'ACTIVATE_CENTER'" (click)="doAction('Activate')"><i class="fa fa-check-sign"></i> Activate </button>
       </span>
-      <button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'"><i class="fa fa-edit"></i> Edit </button>
+      <button mat-raised-button *mifosxHasPermission="'UPDATE_CENTER'" (click)="doAction('Edit')"><i class="fa fa-edit"></i> Edit </button>
       <button mat-raised-button *mifosxHasPermission="'CREATE_GROUP'"><i class="fa fa-plus"></i> Add Group </button>
       <button mat-raised-button *mifosxHasPermission="'ASSOCIATEGROUPS_CENTER'" (click)="doAction('Manage Groups')"> <i class="fa fa-edit"></i> Manage Groups </button>
       <span  *ngIf="centerViewData.active">

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

@@ -87,6 +87,9 @@ export class CentersViewComponent implements OnInit {
         break;
       case 'Delete':
         this.deleteCenter();
+        break;
+      case 'Edit':
+        this.router.navigate(['edit'], { relativeTo: this.route });
     }
   }
 

src/app/centers/centers.module.ts

@@ -26,6 +26,7 @@ import { EditCenterMeetingComponent } from './centers-view/center-actions/edit-c
 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';
 import { StaffAssignmentHistoryComponent } from './centers-view/center-actions/staff-assignment-history/staff-assignment-history.component';
+import { EditCenterComponent } from './edit-center/edit-center.component';
 
 /**
  * Centers Module
@@ -57,7 +58,8 @@ import { StaffAssignmentHistoryComponent } from './centers-view/center-actions/s
     EditCenterMeetingComponent,
     EditCenterMeetingScheduleComponent,
     ManageGroupsComponent,
-    StaffAssignmentHistoryComponent
+    StaffAssignmentHistoryComponent,
+    EditCenterComponent
   ]
 })
 export class CentersModule { }

src/app/centers/centers.service.ts

@@ -12,6 +12,7 @@ import { Observable } from 'rxjs';
     providedIn: 'root'
 })
 export class CentersService {
+
   /**
    * @param {HttpClient} http Http Client to send requests.
    */
@@ -42,209 +43,209 @@ export class CentersService {
     return this.http.get('/centers', { params: httpParams });
   }
 
-    /**
-     * @param {any} center Center to be created.
-     * @returns {Observable<any>}
-     */
-    createCenter(center: any): Observable<any> {
-        return this.http.post('/centers', center);
-    }
+  /**
+   * @param {any} center Center to be created.
+   * @returns {Observable<any>}
+   */
+  createCenter(center: any): Observable<any> {
+      return this.http.post('/centers', center);
+  }
 
-    /**
-     * @param {number} officeId Office Id of office to get staff for.
-     * @returns {Observable<any>}
-     */
-    getStaff(officeId: number): Observable<any> {
-        const httpParams = new HttpParams()
-            .set('officeId', officeId.toString())
-            .set('staffInSelectedOfficeOnly', 'true');
-        return this.http.get('/centers/template', { params: httpParams });
-    }
-
-    /**
-     * @param centerId CenterID
-     * @returns {Observable<any>} Group Data for Center
-     */
-    getCenterData(centerId: string): Observable<any> {
+  /**
+   * @param {number} officeId Office Id of office to get staff for.
+   * @returns {Observable<any>}
+   */
+  getStaff(officeId: number): Observable<any> {
       const httpParams = new HttpParams()
-          .set('associations', 'groupMembers,collectionMeetingCalendar');
-      return this.http.get(`/centers/${centerId}`, { params: httpParams } );
-    }
+          .set('officeId', officeId.toString())
+          .set('staffInSelectedOfficeOnly', 'true');
+      return this.http.get('/centers/template', { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center ID
-     * @returns {Observable<any>} Returns the entire details of the Center ID
-     */
-    getCenterSummary(centerId: string): Observable<any> {
-      const httpParams = new HttpParams().set('R_groupId', centerId)
-        .set('genericResultSet', 'false');
-      return this.http.get(`/runreports/GroupSummaryCounts`, { params: httpParams });
-    }
+  /**
+   * @param centerId CenterID
+   * @returns {Observable<any>} Group Data for Center
+   */
+  getCenterData(centerId: string): Observable<any> {
+    const httpParams = new HttpParams()
+        .set('associations', 'groupMembers,collectionMeetingCalendar');
+    return this.http.get(`/centers/${centerId}`, { params: httpParams } );
+  }
 
-    /**
-     * @param centerId Center ID
-     * @returns {Observable<any>} Returns the saving account for that center
-     */
-    getSavingsAccountDetails(centerId: string): Observable<any> {
-      return this.http.get(`/centers/${centerId}/accounts`);
-    }
+  /**
+   * @param centerId Center ID
+   * @returns {Observable<any>} Returns the entire details of the Center ID
+   */
+  getCenterSummary(centerId: string): Observable<any> {
+    const httpParams = new HttpParams().set('R_groupId', centerId)
+      .set('genericResultSet', 'false');
+    return this.http.get(`/runreports/GroupSummaryCounts`, { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center Id
-     * @returns The notes for particular center
-     */
-    getCenterNotes(centerId: string): Observable<any> {
-      return this.http.get(`/groups/${centerId}/notes`);
-    }
+  /**
+   * @param centerId Center ID
+   * @returns {Observable<any>} Returns the saving account for that center
+   */
+  getSavingsAccountDetails(centerId: string): Observable<any> {
+    return this.http.get(`/centers/${centerId}/accounts`);
+  }
 
-    /**
-     * Adds a note to the particular Center Id
-     * @param centerId Center ID
-     * @param noteData Note Data to be added
-     * @returns {Observable<any>}
-     */
-    createCenterNote(centerId: string, noteData: any): Observable<any> {
-      return this.http.post(`/groups/${centerId}/notes`, noteData);
-    }
+  /**
+   * @param centerId Center Id
+   * @returns The notes for particular center
+   */
+  getCenterNotes(centerId: string): Observable<any> {
+    return this.http.get(`/groups/${centerId}/notes`);
+  }
 
-    /**
-     * Edits the Center Note
-     * @param centerId Center ID
-     * @param noteId Note ID
-     * @param noteData Note Data
-     */
-    editCenterNote(centerId: string, noteId: string, noteData: any) {
-      return this.http.put(`/groups/${centerId}/notes/${noteId}`, noteData);
-    }
+  /**
+   * Adds a note to the particular Center Id
+   * @param centerId Center ID
+   * @param noteData Note Data to be added
+   * @returns {Observable<any>}
+   */
+  createCenterNote(centerId: string, noteData: any): Observable<any> {
+    return this.http.post(`/groups/${centerId}/notes`, noteData);
+  }
 
-    /**
-     * Deletes the particular Note
-     * @param centerId Center ID
-     * @param noteId Note ID
-     */
-    deleteCenterNote(centerId: string, noteId: string) {
-      return this.http.delete(`/groups/${centerId}/notes/${noteId}`);
-    }
+  /**
+   * Edits the Center Note
+   * @param centerId Center ID
+   * @param noteId Note ID
+   * @param noteData Note Data
+   */
+  editCenterNote(centerId: string, noteId: string, noteData: any) {
+    return this.http.put(`/groups/${centerId}/notes/${noteId}`, noteData);
+  }
 
-    /**
-     * Get Center Datatables
-     */
-    getcenterDatatables() {
-      const httpParams = new HttpParams().set('apptable', 'm_center');
-    return this.http.get(`/datatables`, { params: httpParams });
-    }
+  /**
+   * Deletes the particular Note
+   * @param centerId Center ID
+   * @param noteId Note ID
+   */
+  deleteCenterNote(centerId: string, noteId: string) {
+    return this.http.delete(`/groups/${centerId}/notes/${noteId}`);
+  }
 
-    /**
-     * Get Center Datatable
-     * @param centerId Center ID
-     * @param datatableName Datatable Name
-     */
-    getCenterDatatable(centerId: string, datatableName: string) {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.get(`/datatables/${datatableName}/${centerId}`, { params: httpParams });
-    }
+  /**
+   * Get Center Datatables
+   */
+  getcenterDatatables() {
+    const httpParams = new HttpParams().set('apptable', 'm_center');
+  return this.http.get(`/datatables`, { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center Id of center to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @param data Data.
-     * @returns {Observable<any>}
-     */
-    addCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.post(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams });
-    }
+  /**
+   * Get Center Datatable
+   * @param centerId Center ID
+   * @param datatableName Datatable Name
+   */
+  getCenterDatatable(centerId: string, datatableName: string) {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.get(`/datatables/${datatableName}/${centerId}`, { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center Id of center to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @param data Data.
-     * @returns {Observable<any>}
-     */
-    editCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.put(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams });
-    }
+  /**
+   * @param centerId Center Id of center to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @param data Data.
+   * @returns {Observable<any>}
+   */
+  addCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.post(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center Id of center to get add datatable entry for.
-     * @param datatableName Data Table name.
-     * @returns {Observable<any>}
-     */
-    deleteDatatableContent(centerId: string, datatableName: string): Observable<any> {
-      const httpParams = new HttpParams().set('genericResultSet', 'true');
-      return this.http.delete(`/datatables/${datatableName}/${centerId}`, { params: httpParams });
-    }
+  /**
+   * @param centerId Center Id of center to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @param data Data.
+   * @returns {Observable<any>}
+   */
+  editCenterDatatableEntry(centerId: string, datatableName: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.put(`/datatables/${datatableName}/${centerId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param {string} centerId Center Id
-     * @param {string} command Command
-     * @param {any} data Data
-     * @returns {Observable<any>}
-     */
-    executeCenterActionCommand(centerId: string, command: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('command', command);
-      return this.http.post(`/centers/${centerId}`, data, { params: httpParams });
-    }
+  /**
+   * @param centerId Center Id of center to get add datatable entry for.
+   * @param datatableName Data Table name.
+   * @returns {Observable<any>}
+   */
+  deleteDatatableContent(centerId: string, datatableName: string): Observable<any> {
+    const httpParams = new HttpParams().set('genericResultSet', 'true');
+    return this.http.delete(`/datatables/${datatableName}/${centerId}`, { params: httpParams });
+  }
 
-    /**
-     * @param {string} centerId Center Id
-     * @param {string} command Command
-     * @param {any} data Data
-     * @returns {Observable<any>}
-     */
-    executeGroupActionCommand(centerId: string, command: string, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('command', command);
-      return this.http.post(`/groups/${centerId}`, data, { params: httpParams });
-    }
+  /**
+   * @param {string} centerId Center Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>}
+   */
+  executeCenterActionCommand(centerId: string, command: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/centers/${centerId}`, data, { params: httpParams });
+  }
 
-    /**
-     * @param centerId Center Id of center to get data for.
-     * @returns {Observable<any>} Center data.
-     */
-    getGroupStaffData(centerId: string): Observable<any> {
-      const httpParams = new HttpParams().set('groupOrCenter', 'centers')
-                                       .set('staffInSelectedOfficeOnly', 'true')
-                                       .set('template', 'true');
-      return this.http.get(`/groups/${centerId}`, { params: httpParams });
-    }
+  /**
+   * @param {string} centerId Center Id
+   * @param {string} command Command
+   * @param {any} data Data
+   * @returns {Observable<any>}
+   */
+  executeGroupActionCommand(centerId: string, command: string, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/groups/${centerId}`, data, { params: httpParams });
+  }
 
-    deleteCenter(centerId: any): Observable<any> {
-      return this.http.delete(`/centers/${centerId}`);
-    }
+  /**
+   * @param centerId Center Id of center to get data for.
+   * @returns {Observable<any>} Center data.
+   */
+  getGroupStaffData(centerId: string): Observable<any> {
+    const httpParams = new HttpParams().set('groupOrCenter', 'centers')
+                                      .set('staffInSelectedOfficeOnly', 'true')
+                                      .set('template', 'true');
+    return this.http.get(`/groups/${centerId}`, { params: httpParams });
+  }
 
-    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});
-    }
+  deleteCenter(centerId: any): Observable<any> {
+    return this.http.delete(`/centers/${centerId}`);
+  }
 
-    getMeetingsTemplate(centerId: any, calendarId: any): Observable<any> {
-      const httpParams = new HttpParams().set('calenderId', calendarId);
-      return this.http.get(`/centers/${centerId}/meetings/template`);
-    }
+  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});
+  }
 
-    assignCenterAttendance(centerId: any, calendarId: any, data: any): Observable<any> {
-      const httpParams = new HttpParams().set('calenderId', calendarId);
-      return this.http.post(`/centers/${centerId}/meetings`, data, {params: httpParams});
-    }
+  getMeetingsTemplate(centerId: any, calendarId: any): Observable<any> {
+    const httpParams = new HttpParams().set('calenderId', calendarId);
+    return this.http.get(`/centers/${centerId}/meetings/template`);
+  }
 
-    getCalendarTemplate(centerId: any): Observable<any> {
-      return this.http.get(`/centers/${centerId}/calendars/template`);
-    }
+  assignCenterAttendance(centerId: any, calendarId: any, data: any): Observable<any> {
+    const httpParams = new HttpParams().set('calenderId', calendarId);
+    return this.http.post(`/centers/${centerId}/meetings`, data, {params: httpParams});
+  }
 
-    createCenterMeeting(centerId: any, data: any): Observable<any> {
-      return this.http.post(`/centers/${centerId}/calendars`, data);
-    }
+  getCalendarTemplate(centerId: any): Observable<any> {
+    return this.http.get(`/centers/${centerId}/calendars/template`);
+  }
 
-    getCalendarAndTemplate(centerId: any, calendarId: any): Observable<any> {
-      const httpParams = new HttpParams().set('template', 'true');
-      return this.http.get(`/centers/${centerId}/calendars/${calendarId}`, { params: httpParams });
-    }
+  createCenterMeeting(centerId: any, data: any): Observable<any> {
+    return this.http.post(`/centers/${centerId}/calendars`, data);
+  }
 
-    updateCenterMeeting(centerId: any, data: any, calendarId: any): Observable<any> {
-      return this.http.put(`/centers/${centerId}/calendars/${calendarId}`, data);
-    }
+  getCalendarAndTemplate(centerId: any, calendarId: any): Observable<any> {
+    const httpParams = new HttpParams().set('template', 'true');
+    return this.http.get(`/centers/${centerId}/calendars/${calendarId}`, { params: httpParams });
+  }
+
+  updateCenterMeeting(centerId: any, data: any, calendarId: any): Observable<any> {
+    return this.http.put(`/centers/${centerId}/calendars/${calendarId}`, data);
+  }
 
   /**
    * Run Report Data for Staff Assignement History.
@@ -260,4 +261,23 @@ export class CentersService {
     return this.http.get(`/runreports/${reportName}`, { responseType: 'arraybuffer', observe: 'response', params: httpParams });
   }
 
+  /**
+   * @param centerId Center Id of center to get data for.
+   * @returns {Observable<any>} Center data and template.
+   */
+  getCenterAndTemplateData(centerId: string): Observable<any> {
+    const httpParams = new HttpParams().set('staffInSelectedOfficeOnly', 'true')
+                                       .set('template', 'true');
+    return this.http.get(`/centers/${centerId}`, { params: httpParams });
+  }
+
+  /**
+   * @param centerId Center Id.
+   * @param data Data to be submitted
+   * @returns {Observable<any>} Returns the change.
+   */
+  executeEditCenter(centerId: string, data: any): Observable<any> {
+    return this.http.put(`/groups/${centerId}`, data);
+  }
+
 }

src/app/centers/common-resolvers/center-data-and-template.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { CentersService } from '../centers.service';
+
+/**
+ * Centers data and template resolver.
+ */
+@Injectable()
+export class CenterDataAndTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {CentersService} CentersService Centers service.
+     */
+    constructor(private centersService: CentersService) { }
+
+    /**
+     * Returns the Centers and template data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const centerId = route.parent.paramMap.get('centerId');
+        return this.centersService.getCenterAndTemplateData(centerId);
+    }
+
+}

src/app/centers/edit-center/edit-center.component.html

@@ -0,0 +1,62 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="editCenterForm" (ngSubmit)="submit()">
+
+	  <mat-card-content>
+
+	    <div fxLayout="column">
+
+		  <mat-form-field>
+		    <mat-label>Name</mat-label>
+			<input matInput required formControlName="name">
+			<mat-error *ngIf="editCenterForm.controls.name.hasError('required')">
+			  Center Name is <strong>required</strong>
+			</mat-error>
+			<mat-error *ngIf="editCenterForm.controls.name.hasError('pattern')">
+			  Center Name <strong>cannot</strong> begin with a special character or number
+			</mat-error>
+			</mat-form-field>
+
+			<mat-form-field>
+			  <mat-label>Staff</mat-label>
+			  <mat-select formControlName="staffId">
+				<mat-option *ngFor="let staff of staffs" [value]="staff.id">
+				  {{ staff.displayName }}
+				</mat-option>
+			  </mat-select>
+			</mat-form-field>
+
+			<mat-form-field>
+			  <mat-label>External id</mat-label>
+			  <input matInput formControlName="externalId">
+			</mat-form-field>
+
+			<ng-container *ngIf="centerData.status.value=='Pending'">
+			  <mat-form-field>
+				<mat-label>Activation date</mat-label>
+				<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+				  formControlName="activationDate">
+				<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+				<mat-datepicker #activatedOnDatePicker></mat-datepicker>
+				<mat-error *ngIf="editCenterForm.controls.activationDate.hasError('required')">
+				  Activation Date is <strong>required</strong>
+				</mat-error>
+			  </mat-form-field>
+			</ng-container>
+
+		</div>
+
+	  </mat-card-content>
+
+	  <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+	    <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+	    <button mat-raised-button color="accent" [disabled]="!editCenterForm.valid">Confirm</button>
+	  </mat-card-actions>
+
+	</form>
+
+  </mat-card>
+
+</div>

src/app/centers/edit-center/edit-center.component.scss

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

src/app/centers/edit-center/edit-center.component.spec.ts

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

src/app/centers/edit-center/edit-center.component.ts

@@ -0,0 +1,99 @@
+/** 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 { CentersService } from '../centers.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+/**
+ * Edit Center component.
+ */
+@Component({
+  selector: 'mifosx-edit-center',
+  templateUrl: './edit-center.component.html',
+  styleUrls: ['./edit-center.component.scss']
+})
+export class EditCenterComponent implements OnInit {
+
+  /** Center Data */
+  centerData: any;
+  /** Staffs Data */
+  staffs: any;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Activate center form. */
+  editCenterForm: FormGroup;
+
+  /**
+   * Retrieves the center and template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {CentersService} centerService CentersService.
+   * @param {GroupsService} groupService GroupsService.
+   * @param {DatePipe} datePipe Date Pipe to format date.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private centersService: CentersService,
+    private settingsService: SettingsService,
+    private datePipe: DatePipe) {
+    this.route.data.subscribe((data: { centerData: any }) => {
+      this.centerData = data.centerData;
+      this.staffs = this.centerData.staffOptions;
+    });
+  }
+
+  /**
+   * Creates the edit center form.
+   */
+  ngOnInit(): void {
+    this.createEditCenterForm();
+  }
+
+  /**
+   * Creates the edit center form.
+   */
+  createEditCenterForm() {
+    const dateFormat = this.settingsService.dateFormat;
+    this.editCenterForm = this.formBuilder.group({
+      'name': [this.centerData.name, [Validators.required, Validators.pattern('(^[A-z]).*')]],
+      'staffId': [this.centerData.staffId],
+      'externalId': [this.centerData.externalId]
+    });
+    if (this.centerData.status.value === 'Pending') {
+      this.editCenterForm.addControl('activationDate', new FormControl(this.centerData.activationDate ? this.centerData.activationDate : new Date(), Validators.required));
+    }
+  }
+
+  /**
+   * Submits the form to edit the center data,
+   * if successful redirects to the center.
+   */
+  submit() {
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    if (this.centerData.status.value === 'Pending') {
+      const prevactivationDate: Date = this.editCenterForm.value.activationDate;
+      this.editCenterForm.patchValue({
+        activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
+      });
+    }
+    const data = {
+      ...this.editCenterForm.value,
+      name: this.centerData.name,
+      dateFormat,
+      locale
+    };
+    this.centersService.executeEditCenter(this.centerData.id, data).subscribe(() => {
+      this.router.navigate(['../general'], { relativeTo: this.route });
+    });
+  }
+
+}