Add email field to Client

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -85,11 +85,6 @@
       <input matInput formControlName="externalId">
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>Mobile No</mat-label>
-      <input matInput type="number" formControlName="mobileNo">
-    </mat-form-field>
-
     <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
       <mat-label>Gender</mat-label>
       <mat-select formControlName="genderId">
@@ -103,6 +98,19 @@
       Is staff?
     </mat-checkbox>
 
+    <mat-form-field fxFlex="48%">
+      <mat-label>Mobile No</mat-label>
+      <input matInput type="number" formControlName="mobileNo">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Email Address</mat-label>
+      <input matInput formControlName="emailAddress">
+      <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
+        Email not valid
+      </mat-error>
+    </mat-form-field>
+
     <mat-form-field fxFlex="48%">
       <mat-label>Client Type</mat-label>
       <mat-select formControlName="clientTypeId">

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -76,6 +76,7 @@ export class ClientGeneralStepComponent implements OnInit {
       'externalId': [''],
       'genderId': [''],
       'mobileNo': [''],
+      'emailAddress': ['', Validators.email],
       'dateOfBirth': [''],
       'clientTypeId': [''],
       'clientClassificationId': [''],

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -40,6 +40,11 @@
     <span fxFlex="60%">{{ client.mobileNo }}</span>
   </div>
 
+  <div fxFlexFill *ngIf="client.emailAddress">
+    <span fxFlex="40%">Email Address</span>
+    <span fxFlex="60%">{{ client.emailAddress }}</span>
+  </div>
+
   <div fxFlexFill *ngIf="client.clientTypeId">
     <span fxFlex="40%">Client Type</span>
     <span fxFlex="60%">{{ client.clientTypeId | find:clientTemplate.clientTypeOptions:'id':'name' }}</span>
@@ -76,7 +81,7 @@
       <span fxFlex="40%">Gender</span>
       <span fxFlex="60%">{{ client.genderId | find:clientTemplate.genderOptions:'id':'name' }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Is Staff?</span>
       <span fxFlex="60%">{{ client.isStaff ? 'Yes' : 'No' }}</span>
@@ -90,22 +95,22 @@
       <span fxFlex="40%">Incorporation Validity Till Date</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | date }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Incorportation Number</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
       <span fxFlex="40%">Main Business Line</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.mainBusinessLineId | find:clientTemplate.clientNonPersonMainBusinessLineOptions:'id':'name' }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
       <span fxFlex="40%">Constitution</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.constitutionId | find:clientTemplate.clientNonPersonConstitutionOptions:'id':'name'}}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Remarks</span>
       <span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
@@ -153,7 +158,7 @@
 
       </mat-expansion-panel>
 
-    </mat-accordion>    
+    </mat-accordion>
 
   </div>
 
@@ -166,21 +171,21 @@
     <mat-accordion fxFlexFill class="m-t-5">
 
       <mat-expansion-panel *ngFor="let address of client.address" class="address">
-  
+
         <mat-expansion-panel-header>
-  
+
           <mat-panel-title>
             {{ getSelectedValue('addressTypeIdOptions',address.addressTypeId)?.name }}
           </mat-panel-title>
-  
+
           <mat-panel-description>
             {{address.relationship}}
           </mat-panel-description>
-  
+
         </mat-expansion-panel-header>
-  
+
         <mat-divider></mat-divider>
-  
+
         <p>
           <span *ngIf="isFieldEnabled('street')">Street : {{address.street}}<br /></span>
           <span *ngIf="isFieldEnabled('addressLine1')">Address Line 1 : {{address.addressLine1}}<br /></span>
@@ -195,9 +200,9 @@
           <span *ngIf="isFieldEnabled('postalCode')">Postal Code : {{address.postalCode}}<br /></span>
           <span *ngIf="isFieldEnabled('isActive')">Active Status : {{address.isActive}}<br /></span>
         </p>
-  
+
       </mat-expansion-panel>
-  
+
     </mat-accordion>
 
   </div>

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

@@ -83,8 +83,7 @@ const routes: Routes = [
             data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
             resolve: {
               clientAccountsData: ClientAccountsResolver,
-              clientChargesData: ClientChargesResolver,
-              clientSummary: ClientSummaryResolver
+              clientChargesData: ClientChargesResolver
             }
           },
           {

src/app/clients/clients-view/general-tab/general-tab.component.ts

@@ -73,7 +73,7 @@ export class GeneralTabComponent {
       this.loanAccounts = data.clientAccountsData.loanAccounts;
       this.shareAccounts = data.clientAccountsData.shareAccounts;
       this.upcomingCharges = data.clientChargesData.pageItems;
-      this.clientSummary = data.clientSummary[0];
+      this.clientSummary = data.clientSummary ? data.clientSummary[0] : [];
       this.clientid = this.route.parent.snapshot.params['clientId'];
   });
   }

src/app/clients/edit-client/edit-client.component.html

@@ -84,9 +84,21 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
+          <mat-checkbox *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
+            Is staff?
+          </mat-checkbox>
+
           <mat-form-field fxFlex="48%">
             <mat-label>Mobile No</mat-label>
-            <input matInput formControlName="mobileNo">
+            <input matInput type="number" formControlName="mobileNo">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Email Address</mat-label>
+            <input matInput formControlName="emailAddress">
+            <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email">
+              Email not valid
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
@@ -109,20 +121,20 @@
 
           <mat-form-field fxFlex="48%">
             <mat-label>Submitted On</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate">
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+            <mat-error *ngIf="editClientForm.controls.submittedOnDate.hasError('required')">
+              Submitted Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
             <mat-label>Activated On</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker"
               formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="editClientForm.controls.activationDate.hasError('required')">
-              Activation Date is <strong>required</strong>
-            </mat-error>
           </mat-form-field>
 
           <mat-form-field *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%">
@@ -134,10 +146,6 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-checkbox *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
-            Is staff?
-          </mat-checkbox>
-
           <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
             *ngIf="editClientForm.contains('clientNonPersonDetails')">
 
@@ -147,12 +155,12 @@
               <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
             </mat-form-field>
-  
+
             <mat-form-field fxFlex="48%">
               <mat-label>Incorporation No</mat-label>
               <input matInput formControlName="incorpNumber">
             </mat-form-field>
-  
+
             <mat-form-field fxFlex="48%">
               <mat-label>Main Business Line</mat-label>
               <mat-select formControlName="mainBusinessLineId">
@@ -161,7 +169,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-  
+
             <mat-form-field fxFlex="48%">
               <mat-label>Constitution</mat-label>
               <mat-select formControlName="constitutionId">
@@ -170,7 +178,7 @@
                 </mat-option>
               </mat-select>
             </mat-form-field>
-  
+
             <mat-form-field fxFlex="98%">
               <mat-label>Remarks</mat-label>
               <textarea matInput formControlName="remarks"></textarea>

src/app/clients/edit-client/edit-client.component.ts

@@ -79,6 +79,7 @@ export class EditClientComponent implements OnInit {
       'isStaff': this.clientDataAndTemplate.isStaff,
       'active': this.clientDataAndTemplate.active,
       'mobileNo': this.clientDataAndTemplate.mobileNo,
+      'emailAddress': this.clientDataAndTemplate.emailAddress,
       'dateOfBirth': this.clientDataAndTemplate.dateOfBirth && new Date(this.clientDataAndTemplate.dateOfBirth),
       'clientTypeId': this.clientDataAndTemplate.clientType && this.clientDataAndTemplate.clientType.id,
       'clientClassificationId': this.clientDataAndTemplate.clientClassification && this.clientDataAndTemplate.clientClassification.id,
@@ -101,11 +102,12 @@ export class EditClientComponent implements OnInit {
       'externalId': [''],
       'genderId': [''],
       'mobileNo': [''],
+      'emailAddress': ['', Validators.email],
       'dateOfBirth': [''],
       'clientTypeId': [''],
       'clientClassificationId': [''],
-      'submittedOnDate': [''],
-      'activationDate': ['', Validators.required]
+      'submittedOnDate': ['', Validators.required],
+      'activationDate': ['']
     });
   }
 

src/app/settings/settings.service.ts

@@ -30,6 +30,13 @@ export class SettingsService {
     localStorage.setItem('mifosXLanguage', JSON.stringify(language));
   }
 
+  setDefaultLanguage() {
+    this.setLanguage({
+      name: environment.defaultLanguage,
+      code: environment.defaultLanguage.substring(0, 2)
+    });
+  }
+
   /**
    * Sets server URL setting throughout the app.
    * @param {string} url URL
@@ -57,6 +64,9 @@ export class SettingsService {
    * Returns language setting
    */
   get language() {
+    if (!localStorage.getItem('mifosXLanguage')) {
+      this.setDefaultLanguage();
+    }
     return JSON.parse(localStorage.getItem('mifosXLanguage'));
   }
 

src/app/shared/language-selector/language-selector.component.html

@@ -1,6 +1,6 @@
 <mat-form-field id="language-selector">
   <mat-label>Language</mat-label>
-  <mat-select [formControl]="languageSelector">
+  <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
       {{ language }}
     </mat-option>

src/app/shared/language-selector/language-selector.component.scss

@@ -1,3 +1,4 @@
-#language-selector {
-  max-width: 4rem;
+#language-selector,
+.languageselector {
+  max-width: 6rem;
 }

src/app/shared/language-selector/language-selector.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 /** Custom Services */
-import { I18nService } from '../../core/i18n/i18n.service';
+import { TranslateService } from '@ngx-translate/core';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Language selector component.
@@ -25,9 +26,9 @@ export class LanguageSelectorComponent implements OnInit {
    * Sets the language of the application in the selector on initial setup.
    * @param {I18nService} i18nService Internationalization Service.
    */
-  constructor(private i18nService: I18nService) {
+   constructor(private translate: TranslateService,
+    private settingsService: SettingsService) {
     this.languageSelector.setValue(this.currentLanguage);
-    this.languageSelector.valueChanges.subscribe( language => this.setLanguage(language) );
   }
 
   ngOnInit() {
@@ -37,8 +38,9 @@ export class LanguageSelectorComponent implements OnInit {
    * Sets a new language to be used by the application.
    * @param {string} language New language.
    */
-  setLanguage(language: string) {
-    this.i18nService.language = language;
+   setLanguage() {
+    this.translate.use(this.languageSelector.value);
+    this.settingsService.setLanguage({ name: '', code: this.languageSelector.value.substring(0, 2) });
   }
 
   /**
@@ -46,7 +48,7 @@ export class LanguageSelectorComponent implements OnInit {
    * @returns {string} Current language.
    */
   get currentLanguage(): string {
-    return this.i18nService.language;
+    return this.translate.currentLang;
   }
 
   /**
@@ -54,7 +56,7 @@ export class LanguageSelectorComponent implements OnInit {
    * @return {string[]} Supported languages.
    */
   get languages(): string[] {
-    return this.i18nService.supportedLanguages;
+    return this.translate.getLangs();
   }
 
 }

src/app/web-app.component.ts

@@ -16,7 +16,6 @@ import { environment } from 'environments/environment';
 
 /** Custom Services */
 import { Logger } from './core/logger/logger.service';
-import { I18nService } from './core/i18n/i18n.service';
 import { ThemeStorageService } from './shared/theme-picker/theme-storage.service';
 import { AlertService } from './core/alert/alert.service';
 import { AuthenticationService } from './core/authentication/authentication.service';
@@ -56,7 +55,6 @@ export class WebAppComponent implements OnInit {
               private activatedRoute: ActivatedRoute,
               private titleService: Title,
               private translateService: TranslateService,
-              private i18nService: I18nService,
               private themeStorageService: ThemeStorageService,
               public snackBar: MatSnackBar,
               private alertService: AlertService,
@@ -84,7 +82,8 @@ export class WebAppComponent implements OnInit {
     log.debug('init');
 
     // Setup translations
-    this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
+    this.translateService.addLangs(environment.supportedLanguages);
+    this.translateService.use(environment.defaultLanguage);
 
     // Change page title on navigation or language change, based on route data
     const onNavigationEnd = this.router.events.pipe(filter(event => event instanceof NavigationEnd));
@@ -138,10 +137,7 @@ export class WebAppComponent implements OnInit {
 
     // initialize language and date format if they are null.
     if (!localStorage.getItem('mifosXLanguage')) {
-      this.settingsService.setLanguage({
-        name: 'English',
-        code: 'en'
-      });
+      this.settingsService.setDefaultLanguage();
     }
     if (!localStorage.getItem('mifosXDateFormat')) {
       this.settingsService.setDateFormat('dd MMMM yyyy');