feat: add support for runtime server url changes (#1271)

Fixes: #786
Fixes: #1229

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

@@ -120,7 +120,7 @@ export class ClientAddressStepComponent {
    * @param {any} address Address
    */
   getSelectedValue(fieldName: any, fieldId: any) {
-    return (this.clientTemplate.address[fieldName].find((fieldObj: any) => fieldObj.id === fieldId));
+    return (this.clientTemplate.address[0][fieldName].find((fieldObj: any) => fieldObj.id === fieldId));
   }
 
   /**
@@ -133,7 +133,7 @@ export class ClientAddressStepComponent {
       controlName: 'addressTypeId',
       label: 'Address Type',
       value: address ? address.addressTypeId : '',
-      options: { label: 'name', value: 'id', data: this.clientTemplate.address.addressTypeIdOptions },
+      options: { label: 'name', value: 'id', data: this.clientTemplate.address[0].addressTypeIdOptions },
       order: 1,
       required: true
     }) : null);
@@ -184,7 +184,7 @@ export class ClientAddressStepComponent {
       controlName: 'stateProvinceId',
       label: 'State / Province',
       value: address ? address.stateProvinceId : '',
-      options: { label: 'name', value: 'id', data: this.clientTemplate.address.stateProvinceIdOptions },
+      options: { label: 'name', value: 'id', data: this.clientTemplate.address[0].stateProvinceIdOptions },
       order: 8
     }) : null);
     formfields.push(this.isFieldEnabled('countyDistrict') ? new InputBase({
@@ -198,7 +198,7 @@ export class ClientAddressStepComponent {
       controlName: 'countryId',
       label: 'Country',
       value: address ? address.countryId : '',
-      options: { label: 'name', value: 'id', data: this.clientTemplate.address.countryIdOptions },
+      options: { label: 'name', value: 'id', data: this.clientTemplate.address[0].countryIdOptions },
       order: 10
     }) : null);
     formfields.push(this.isFieldEnabled('postalCode') ? new InputBase({

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

@@ -30,7 +30,7 @@ export class ClientPreviewStepComponent {
    * @param {any} fieldId Field Id
    */
   getSelectedValue(fieldName: any, fieldId: any) {
-    return (this.clientTemplate.address[fieldName].find((fieldObj: any) => fieldObj.id === fieldId));
+    return (this.clientTemplate.address[0][fieldName].find((fieldObj: any) => fieldObj.id === fieldId));
   }
 
   /**

src/app/login/login.component.html

@@ -34,6 +34,8 @@
     <!-- Language Selector to the extreme right -->
     <div fxLayout="row-reverse" fxFlex="1 0 auto">
       <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
+      <div fxFlex></div>
+      <mifosx-server-selector class="p-l-10 p-t-10" *ngIf="environment.allowServerSwitch"></mifosx-server-selector>
     </div>
 
     <!-- Logo with Organization Name -->

src/app/login/login.component.ts

@@ -11,6 +11,9 @@ import { Alert } from '../core/alert/alert.model';
 /** Custom Services */
 import { AlertService } from '../core/alert/alert.service';
 
+/** Environment Imports */
+import { environment } from '../../environments/environment';
+
 /**
  * Login component.
  */
@@ -21,6 +24,8 @@ import { AlertService } from '../core/alert/alert.service';
 })
 export class LoginComponent implements OnInit, OnDestroy {
 
+  public environment = environment;
+
   /** True if password requires a reset. */
   resetPassword = false;
   /** True if user requires two factor authentication. */

src/app/settings/settings.service.ts

@@ -1,6 +1,9 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
 
+/** Environment Imports */
+import { environment } from '../../environments/environment';
+
 /**
  * Settings Service
  */
@@ -27,6 +30,22 @@ export class SettingsService {
     localStorage.setItem('mifosXLanguage', JSON.stringify(language));
   }
 
+  /**
+   * Sets server URL setting throughout the app.
+   * @param {string} url URL
+   */
+  setServer(url: string) {
+    localStorage.setItem('mifosXServerURL', JSON.stringify(url));
+  }
+
+  /**
+   * Sets server URL setting throughout the app.
+   * @param {string[]} list List of default servers
+   */
+  setServers(list: string[]) {
+    localStorage.setItem('mifosXServers', JSON.stringify(list));
+  }
+
   /**
    * Returns date format setting.
    */
@@ -41,4 +60,18 @@ export class SettingsService {
     return JSON.parse(localStorage.getItem('mifosXLanguage'));
   }
 
+  /**
+   * Returns list of default server
+   */
+  get servers() {
+    return JSON.parse(localStorage.getItem('mifosXServers'));
+  }
+
+  /**
+   * Returns server setting
+   */
+  get server() {
+    return environment.baseApiUrl;
+  }
+
 }

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

@@ -0,0 +1,8 @@
+<mat-form-field id="server-selector">
+  <mat-label>Server</mat-label>
+  <mat-select [formControl]="serverSelector">
+    <mat-option *ngFor="let server of servers" [value]="server">
+      {{ server }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/shared/server-selector/server-selector.component.spec.ts

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

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

@@ -0,0 +1,45 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** Custom Services */
+import { SettingsService } from 'app/settings/settings.service';
+
+/**
+ * Server Selector Component
+ */
+@Component({
+  selector: 'mifosx-server-selector',
+  templateUrl: './server-selector.component.html',
+  styleUrls: ['./server-selector.component.scss']
+})
+export class ServerSelectorComponent implements OnInit {
+
+  /** Server Settings. */
+  servers: string[];
+
+  /** Server Setting */
+  serverSelector =  new FormControl('');
+
+  /**
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private settingsService: SettingsService) { }
+
+  ngOnInit(): void {
+    this.servers = this.settingsService.servers;
+    this.serverSelector.patchValue(this.settingsService.server);
+    this.buildDependencies();
+  }
+
+  /**
+   * Subscribe to value changes.
+   */
+  buildDependencies() {
+    this.serverSelector.valueChanges.subscribe((url: string) => {
+      this.settingsService.setServer(url);
+      window.location.reload(); // refreshes the environment.ts.
+    });
+  }
+
+}

src/app/shared/shared.module.ts

@@ -20,6 +20,7 @@ import { ErrorDialogComponent } from './error-dialog/error-dialog.component';
 import { NotificationsTrayComponent } from './notifications-tray/notifications-tray.component';
 import { SearchToolComponent } from './search-tool/search-tool.component';
 import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
+import { ServerSelectorComponent } from './server-selector/server-selector.component';
 
 /** Custom Modules */
 import { IconsModule } from './icons.module';
@@ -53,12 +54,14 @@ import { MaterialModule } from './material.module';
     KeyboardShortcutsDialogComponent,
     ErrorDialogComponent,
     NotificationsTrayComponent,
-    SearchToolComponent
+    SearchToolComponent,
+    ServerSelectorComponent
   ],
   exports: [
     FileUploadComponent,
     FooterComponent,
     LanguageSelectorComponent,
+    ServerSelectorComponent,
     ThemePickerComponent,
     NotificationsTrayComponent,
     SearchToolComponent,

src/app/web-app.component.ts

@@ -146,6 +146,16 @@ export class WebAppComponent implements OnInit {
     if (!localStorage.getItem('mifosXDateFormat')) {
       this.settingsService.setDateFormat('dd MMMM yyyy');
     }
+    if (!localStorage.getItem('mifosXServers')) {
+      this.settingsService.setServers([
+        'https://dev.mifos.io',
+        'https://demo.mifos.io',
+        'https://staging.mifos.io',
+        'https://mobile.mifos.io',
+        'https://demo.fineract.dev',
+        'https://localhost:8443'
+      ]);
+    }
   }
 
   logout() {

src/environments/.env.ts

@@ -1,3 +1,4 @@
 export default {
-  'npm_package_version': '0.0.0'
+  'mifos_x_version': '0.0.0',
+  'allow_switching_backend_instance': true
 };

src/environments/environment.prod.ts

@@ -3,9 +3,10 @@ import env from './.env';
 
 export const environment = {
   production: true,
-  version: env.npm_package_version,
+  version: env.mifos_x_version,
   fineractPlatformTenantId: 'default',  // For connecting to server running elsewhere update the tenant identifier
-  baseApiUrl: 'https://demo.fineract.dev',  // For connecting to server running elsewhere update the base API URL
+  baseApiUrl: JSON.parse(localStorage.getItem('mifosXServerURL')) || 'https://demo.fineract.dev',  // For connecting to server running elsewhere update the base API URL
+  allowServerSwitch: env.allow_switching_backend_instance,
   apiProvider: '/fineract-provider/api',
   apiVersion: '/v1',
   serverUrl: '',

src/environments/environment.ts

@@ -8,9 +8,10 @@ import env from './.env';
 
 export const environment = {
   production: false,
-  version: env.npm_package_version + '-dev',
+  version: env.mifos_x_version + '-dev',
   fineractPlatformTenantId: 'default',  // For connecting to server running elsewhere update the tenant identifier
-  baseApiUrl: 'https://dev.mifos.io',  // For connecting to server running elsewhere update the base API URL
+  baseApiUrl: JSON.parse(localStorage.getItem('mifosXServerURL')) || 'https://dev.mifos.io',  // For connecting to server running elsewhere update the base API URL
+  allowServerSwitch: env.allow_switching_backend_instance,
   apiProvider: '/fineract-provider/api',
   apiVersion: '/v1',
   serverUrl: '',