feat: add edit user component (#616)

Fixes: #585

src/app/users/edit-user/edit-user.component.html

@@ -0,0 +1,104 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="editUserForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+        
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Username</mat-label>
+            <input matInput required formControlName="username"/>
+            <mat-error *ngIf="editUserForm.controls.username.hasError('required')">
+              Username is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Email</mat-label>
+            <input matInput required formControlName="email">
+            <mat-error *ngIf="editUserForm.controls.email.hasError('email')">
+              Email is <strong>invalid</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.email.hasError('required')">
+              Email is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>First name</mat-label>
+            <input matInput required formControlName="firstname"/>
+            <mat-error *ngIf="editUserForm.controls.firstname.hasError('pattern')">
+              First Name <strong>cannot begin with a special character or number</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.firstname.hasError('required')">
+              First Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Last name</mat-label>
+            <input matInput required formControlName="lastname"/>
+            <mat-error *ngIf="editUserForm.controls.lastname.hasError('pattern')">
+              Last Name <strong>cannot begin with a special character or number</strong>
+            </mat-error>
+            <mat-error *ngIf="editUserForm.controls.lastname.hasError('required')">
+              Last Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div class="password-never-expires-wrapper" fxFlex="48%">
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
+              Override password expiry policy
+            </mat-checkbox>
+          </div>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
+              <mat-option *ngFor="let office of officesData" [value]="office.id">
+                {{ office.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="editUserForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Staff</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Roles</mat-label>
+            <mat-select required formControlName="roles" multiple>
+              <mat-option *ngFor="let role of rolesData" [value]="role.id">
+                {{ role.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="editUserForm.controls.roles.hasError('required')">
+              At least one role <strong>must be selected</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]="!editUserForm.valid">Submit</button>
+      </mat-card-actions>
+    
+    </form>
+  
+  </mat-card>
+
+</div>

src/app/users/edit-user/edit-user.component.scss

@@ -0,0 +1,3 @@
+.password-never-expires-wrapper {
+  padding: 17.5px 0 17.5px 0;
+}

src/app/users/edit-user/edit-user.component.spec.ts

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

src/app/users/edit-user/edit-user.component.ts

@@ -0,0 +1,92 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { UsersService } from '../users.service';
+
+/**
+ * Edit User Component.
+ */
+@Component({
+    selector: 'mifosx-edit-user',
+    templateUrl: './edit-user.component.html',
+    styleUrls: ['./edit-user.component.scss']
+})
+export class EditUserComponent implements OnInit {
+
+  /** User Data */
+  userData: any;
+  /** Offices Data */
+  officesData: any;
+  /** Staff Data */
+  staffData: any;
+  /** Roles Data */
+  rolesData: any;
+  /** Edit User form. */
+  editUserForm: FormGroup;
+
+  /**
+   * Retrieves the offices data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {UsersService} UsersService Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private usersService: UsersService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { user: any, usersTemplate: any }) => {
+      this.userData = data.user;
+      this.officesData = data.usersTemplate.allowedOffices;
+      this.rolesData = data.usersTemplate.availableRoles;
+    });
+  }
+
+  ngOnInit() {
+    this.createEditUserForm();
+    this.officeChanged(this.userData.officeId);
+  }
+
+  /**
+   * Creates the edit user form.
+   */
+  createEditUserForm() {
+    const staffId = this.userData.staff ? this.userData.staff.id : null;
+    this.editUserForm = this.formBuilder.group({
+      'username': [this.userData.username, Validators.required],
+      'email': [this.userData.email, [Validators.required, Validators.email]],
+      'firstname': [this.userData.firstname, [Validators.required, Validators.pattern('(^[A-z]).*')]],
+      'lastname': [this.userData.lastname, [Validators.required, Validators.pattern('(^[A-z]).*')]],
+      'passwordNeverExpires': [this.userData.passwordNeverExpires],
+      'officeId': [this.userData.officeId, Validators.required],
+      'staffId': [staffId],
+      'roles': [this.userData.selectedRoles.map((role: any) => role.id), Validators.required]
+    });
+  }
+
+  /**
+   * Fetches the staff for the selected office
+   * @param officeId the selected office id
+   */
+  officeChanged(officeId: number) {
+    this.staffData = [];
+    this.usersService.getStaff(officeId).subscribe((staff: any) => {
+      this.staffData = staff;
+    });
+  }
+
+  /**
+   * Submits the user form and edits the user,
+   * if successful redirects to the updated user.
+   */
+  submit() {
+    const editedUser = this.editUserForm.value;
+    this.usersService.editUser(this.userData.id, editedUser).subscribe((response: any) => {
+      this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -12,6 +12,7 @@ import { extract } from '../core/i18n/i18n.service';
 import { UsersComponent } from './users.component';
 import { CreateUserComponent } from './create-user/create-user.component';
 import { ViewUserComponent } from './view-user/view-user.component';
+import { EditUserComponent } from './edit-user/edit-user.component';
 
 /** Custom Resolvers */
 import { UsersResolver } from './users.resolver';
@@ -43,13 +44,22 @@ const routes: Routes = [
         {
           path: ':id',
           data: { title: extract('View User'), routeResolveBreadcrumb: ['user', 'username'] },
-          resolve: {
-            user: UserResolver
-          },
           children: [
             {
               path: '',
-              component: ViewUserComponent
+              component: ViewUserComponent,
+              resolve: {
+                user: UserResolver
+              }
+            },
+            {
+              path: 'edit',
+              component: EditUserComponent,
+              data: { title: extract('Edit User'), breadcrumb: 'Edit', routeResolveBreadcrumb: false },
+              resolve: {
+                user: UserResolver,
+                usersTemplate: UsersTemplateResolver
+              }
             }
           ]
         }

src/app/users/users.module.ts

@@ -9,6 +9,7 @@ import { UsersRoutingModule } from './users-routing.module';
 import { UsersComponent } from './users.component';
 import { CreateUserComponent } from './create-user/create-user.component';
 import { ViewUserComponent } from './view-user/view-user.component';
+import { EditUserComponent } from './edit-user/edit-user.component';
 
 /**
  * Users Module
@@ -23,7 +24,8 @@ import { ViewUserComponent } from './view-user/view-user.component';
   declarations: [
     UsersComponent,
     CreateUserComponent,
-    ViewUserComponent
+    ViewUserComponent,
+    EditUserComponent
   ]
 })
 export class UsersModule { }

src/app/users/users.service.ts

@@ -40,6 +40,15 @@ export class UsersService {
     return this.http.post('/users', user);
   }
 
+  /**
+   * @param {string} userId user ID of user.
+   * @param {any} user user to be updated.
+   * @returns {Observable<any>} User.
+   */
+  editUser(userId: string, user: any): Observable<any> {
+    return this.http.put(`/users/${userId}`, user);
+  }
+
   /**
    * @param {string} userId user ID of user.
    * @returns {Observable<any>} User.
@@ -72,7 +81,8 @@ export class UsersService {
    */
   getStaff(officeId: any): Observable<any> {
     const httpParams = new HttpParams()
-      .set('officeId', officeId.toString());
+      .set('officeId', officeId.toString())
+      .set('status', 'all');
     return this.http.get('/staff', { params: httpParams });
   }
 

src/app/users/view-user/view-user.component.html

@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>