Support additional export table report options (#1780)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/self-service/self-service-routing.module.ts

@@ -18,8 +18,9 @@ import { AppConfigurationComponent } from './app-configuration/app-configuration
 import { TaskManagementComponent } from './task-management/task-management.component';
 
 /** Custom Resolvers */
-import { UsersResolver } from './users/users.resolver';
 import { ViewUserResolver } from './users/view-user/view-user.resolver';
+import { OfficesResolver } from 'app/organization/offices/common-resolvers/offices.resolver';
+import { UsersResolver } from 'app/users/users.resolver';
 
 /** Self Service Admin Portal Routes */
 const routes: Routes = [
@@ -43,7 +44,10 @@ const routes: Routes = [
             {
               path: 'create',
               component: CreateUserComponent,
-              data: { title: extract('Create Self Service User'), breadcrumb: 'Create' }
+              data: { title: extract('Create Self Service User'), breadcrumb: 'Create' },
+              resolve: {
+                offices: OfficesResolver
+              }
             },
             {
               path: 'view/:id',
@@ -89,7 +93,6 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    UsersResolver,
     ViewUserResolver
   ]
 })

src/app/self-service/users/create-user/create-user.component.html

@@ -12,7 +12,7 @@
 
     <div *ngIf="userType.value === 'Existing User'">
 
-      <form>
+      <form [formGroup]="createUserForm">
 
         <mat-card-content>
 
@@ -20,18 +20,21 @@
 
             <mat-form-field>
               <mat-label>Office</mat-label>
-              <mat-select>
-                <mat-option *ngFor="let office of officeData" [value]="office">
-                  {{ office }}
+              <mat-select required formControlName="officeId">
+                <mat-option *ngFor="let office of offices" [value]="office.id">
+                  {{ office.name }}
                 </mat-option>
               </mat-select>
+              <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
+                Office is <strong>required</strong>
+              </mat-error>
             </mat-form-field>
 
             <mat-form-field>
               <mat-label>Staff</mat-label>
-              <mat-select>
-                <mat-option *ngFor="let staff of staffData" [value]="staff">
-                  {{ staff }}
+              <mat-select formControlName="staffId">
+                <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
+                  {{ staff.displayName }}
                 </mat-option>
               </mat-select>
             </mat-form-field>
@@ -63,26 +66,29 @@
 
     <div *ngIf="userType.value === 'New User'">
 
-      <form>
+      <form [formGroup]="createUserForm">
 
         <mat-card-content>
 
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field>
               <mat-label>Office</mat-label>
-              <mat-select>
-                <mat-option *ngFor="let office of officeData" [value]="office">
-                  {{ office }}
+              <mat-select required formControlName="officeId">
+                <mat-option *ngFor="let office of offices" [value]="office.id">
+                  {{ office.name }}
                 </mat-option>
               </mat-select>
+              <mat-error *ngIf="createUserForm.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>
-                <mat-option *ngFor="let staff of staffData" [value]="staff">
-                  {{ staff }}
+              <mat-select formControlName="staffId">
+                <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
+                  {{ staff.displayName }}
                 </mat-option>
               </mat-select>
             </mat-form-field>

src/app/self-service/users/create-user/create-user.component.ts

@@ -1,6 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ClientsService } from 'app/clients/clients.service';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -14,17 +16,21 @@ import { SettingsService } from 'app/settings/settings.service';
   styleUrls: ['./create-user.component.scss']
 })
 export class CreateUserComponent implements OnInit {
+  /** Create Client Form */
+  createUserForm: FormGroup;
 
   /** Denotes type of user. */
   userTypes = ['Existing User', 'New User'];
   /** Radio button group form control for type of user. */
   userType = new FormControl(this.userTypes[0]);
   /** Placeholder for office data. */
-  officeData = ['Office 1', 'Office 2'];
+  offices: any[] = [];
   /** Placeholder for staff data. */
-  staffData = ['Staff 1', 'Staff 2'];
+  staffOptions: any [] = [];
+  /** Placeholder for staff data. */
+  genderOptions: any [] = [];
   /** Placeholder for client data. */
-  clientData = ['Client 1', 'Client 2'];
+  clientData: any [] = [];
   /** Placeholder for gender data. */
   genderData = ['Male', 'Female'];
   /** Minimum date of birth of user allowed. */
@@ -35,10 +41,42 @@ export class CreateUserComponent implements OnInit {
   /**
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private settingsService: SettingsService) { }
+  constructor(private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private clientService: ClientsService,
+    private settingsService: SettingsService) {
+    this.route.data.subscribe((data: { offices: any }) => {
+      this.offices = data.offices;
+    });
+  }
 
   ngOnInit() {
+    this.minDate = this.settingsService.minAllowedDate;
     this.maxDate = this.settingsService.businessDate;
+    this.setClientForm();
+    this.buildDependencies();
+  }
+
+  /**
+   * Creates the client form.
+   */
+  setClientForm() {
+    this.createUserForm = this.formBuilder.group({
+      'officeId': ['', Validators.required],
+      'staffId': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Adds controls conditionally.
+   */
+  buildDependencies() {
+    this.createUserForm.get('officeId').valueChanges.subscribe((officeId: number) => {
+      this.clientService.getClientWithOfficeTemplate(officeId).subscribe((clientTemplate: any) => {
+        this.staffOptions = clientTemplate.staffOptions;
+        this.genderOptions = clientTemplate.genderOptions;
+      });
+    });
   }
 
 }

src/app/self-service/users/users.component.ts

@@ -44,7 +44,12 @@ export class UsersComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute) {
     this.route.data.subscribe((data: { users: User[] }) => {
-      this.userData = data.users;
+      this.userData = [];
+      data.users.forEach((user: any) => {
+        if (user.isSelfServiceUser) {
+          this.userData.push(user);
+        }
+      });
     });
   }
 

src/app/self-service/users/users.resolver.ts

@@ -1,33 +0,0 @@
-/** Angular Routes */
-import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { UserService } from './user.service';
-
-/** Custom Model */
-import { User } from './user.model';
-
-/**
- * Self service users data resolver.
- */
-@Injectable()
-export class UsersResolver implements Resolve<Object> {
-
-  /**
-   * @param {UserService} userService Self service user service.
-   */
-  constructor(private userService: UserService) {}
-
-  /**
-   * Returns the users data.
-   * @returns {Observable<User[]>}
-   */
-  resolve(): Observable<User[]> {
-    return this.userService.getUsers();
-  }
-
-}