Fineract backend settings with environment variables

src/app/app-routing.module.ts

@@ -21,7 +21,7 @@ const routes: Routes = [
  * Configures the fallback route.
  */
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule],
   providers: []
 })

src/app/app.module.ts

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
 /** Environment Configuration */
@@ -38,7 +38,9 @@ import { TasksModule } from './tasks/tasks.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
-import { DatePipe } from '@angular/common';
+import { DatePipe, LocationStrategy } from '@angular/common';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 /**
  * App Module
@@ -47,6 +49,15 @@ import { DatePipe } from '@angular/common';
  */
 @NgModule({
   imports: [
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: HttpClient, locationStrategy: LocationStrategy) => {
+          return new TranslateHttpLoader(http, `${ window.location.protocol }//${ window.location.host }${locationStrategy.getBaseHref()}/assets/translations/`, '.json');
+        },
+        deps: [HttpClient, LocationStrategy]
+      }
+    }),
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,

src/app/core/core.module.ts

@@ -51,15 +51,7 @@ import { APP_BASE_HREF, LocationStrategy } from '@angular/common';
   imports: [
     SharedModule,
     HttpClientModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: (http: HttpClient, locationStrategy: LocationStrategy) => {
-          return new TranslateHttpLoader(http, `${ window.location.protocol }//${ window.location.host }${locationStrategy.getBaseHref()}/assets/translations/`, '.json');
-        },
-        deps: [HttpClient, LocationStrategy]
-      }
-    }),
+    TranslateModule.forRoot(),
     RouterModule
   ],
   declarations: [

src/app/core/http/api-prefix.interceptor.ts

@@ -6,23 +6,27 @@ import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/c
 import { Observable } from 'rxjs';
 
 /** Environment Configuration */
-import { environment } from 'environments/environment';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
- * Http request interceptor to prefix a request with `environment.serverUrl`.
+ * Http request interceptor to prefix a request with `serverUrl`.
  */
 @Injectable()
 export class ApiPrefixInterceptor implements HttpInterceptor {
+  /**
+   * @param {SettingsService} settingsService Settings Service
+   */
+   constructor(private settingsService: SettingsService) {}
 
   /**
-   * Intercepts a Http request and prefixes it with `environment.serverUrl`.
+   * Intercepts a Http request and prefixes it with `serverUrl`.
    */
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     /**
      * Ignore URLs that are complete for i18n
      */
      if (!request.url.includes('http:') && !request.url.includes('https:')) {
-      request = request.clone({ url: environment.serverUrl + request.url });
+      request = request.clone({ url: this.settingsService.serverUrl + request.url });
     }
 
     return next.handle(request);

src/app/core/i18n/i18n.service.ts

@@ -2,16 +2,11 @@
 import { Injectable } from '@angular/core';
 
 /** Translation Imports */
-import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 
 /** Custom Services */
 import { Logger } from '../logger/logger.service';
 
-/** Other Imports */
-import { includes } from 'lodash';
-import * as enUS from '../../../translations/en-US.json';
-import * as frFR from '../../../translations/fr-FR.json';
-
 /** Initialize Logger */
 const log = new Logger('I18nService');
 
@@ -19,71 +14,18 @@ const log = new Logger('I18nService');
  * Pass-through function to mark a string for translation extraction.
  * Running `npm translations:extract` will include the given string by using this.
  * @param {string} s The string to extract for translation.
- * @return {string} The same string.
+ * @return {string} The translated string.
  */
 export function extract(s: string) {
-  return s;
+  return I18nService.translate(s);
 }
 
 @Injectable()
 export class I18nService {
 
-  /** Key to store current language of application in local storage. */
-  private languageStorageKey = 'mifosXLanguage';
-
-  defaultLanguage: string;
-  supportedLanguages: string[];
-
   constructor(private translateService: TranslateService) { }
 
-  /**
-   * Initializes i18n for the application.
-   * Loads language from local storage if present, or sets default language.
-   * @param {!string} defaultLanguage The default language to use.
-   * @param {Array.<String>} supportedLanguages The list of supported languages.
-   */
-  init(defaultLanguage: string, supportedLanguages: string[]) {
-    this.defaultLanguage = defaultLanguage;
-    this.supportedLanguages = supportedLanguages;
-    this.language = '';
-
-    this.translateService.onLangChange
-      .subscribe((event: LangChangeEvent) => { localStorage.setItem(this.languageStorageKey, event.lang); });
+  public static translate(key: string): string {
+    return key;
   }
-
-  /**
-   * Sets the current language.
-   * Note: The current language is saved to the local storage.
-   * If no parameter is specified, the language is loaded from local storage (if present).
-   * @param {string} language The IETF language code to set.
-   */
-  set language(language: string) {
-    language = language || localStorage.getItem(this.languageStorageKey) || this.translateService.getBrowserCultureLang();
-    let isSupportedLanguage = includes(this.supportedLanguages, language);
-
-    // If no exact match is found, search without the region
-    if (language && !isSupportedLanguage) {
-      language = language.split('-')[0];
-      language = this.supportedLanguages.find(supportedLanguage => supportedLanguage.startsWith(language)) || '';
-      isSupportedLanguage = Boolean(language);
-    }
-
-    // Fallback if language is not supported
-    if (!isSupportedLanguage) {
-      language = this.defaultLanguage;
-    }
-
-    log.debug(`Language set to ${language}`);
-    localStorage.setItem(this.languageStorageKey, language);
-    this.translateService.setDefaultLang(language);
-  }
-
-  /**
-   * Gets the current language.
-   * @return {string} The current language code.
-   */
-  get language(): string {
-    return this.translateService.currentLang;
-  }
-
 }

src/app/core/utils/dates.ts

@@ -1,6 +1,7 @@
 import { DatePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
 import { SettingsService } from 'app/settings/settings.service';
+import * as moment from 'moment';
 
 @Injectable({
   providedIn: 'root'
@@ -10,13 +11,20 @@ export class Dates {
   constructor(private settingsService: SettingsService,
       private datePipe: DatePipe) {}
 
-  public getDate(timestamp: any) {
+  public getDate(timestamp: any): string {
     const dateFormat = this.settingsService.dateFormat;
     return this.datePipe.transform(timestamp, dateFormat);
   }
 
-  public formatDate(timestamp: any, dateFormat: string) {
+  public formatDate(timestamp: any, dateFormat: string): string {
     return this.datePipe.transform(timestamp, dateFormat);
   }
 
+  public parseDate(value: any): Date {
+    if (value instanceof Array) {
+      return moment(value.join('-'), 'YYYY-MM-DD').toDate();
+    } else {
+      return moment(value).toDate();
+    }
+  }
 }

src/app/loans/loans-view/loan-documents-tab/loan-documents-tab.component.ts

@@ -13,6 +13,7 @@ import { LoansService } from 'app/loans/loans.service';
 /** Dialog Components */
 import { LoanAccountLoadDocumentsDialogComponent } from 'app/loans/custom-dialog/loan-account-load-documents-dialog/loan-account-load-documents-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Overdue charges tab component
@@ -50,6 +51,7 @@ export class LoanDocumentsTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
     private loansService: LoansService,
+    private settingsService: SettingsService,
     public dialog: MatDialog) {
     this.route.data.subscribe((data: { loanDocuments: any }) => {
       this.getLoanDocumentsData(data.loanDocuments);
@@ -72,7 +74,7 @@ export class LoanDocumentsTabComponent implements OnInit {
   getLoanDocumentsData(data: any) {
     data.forEach((ele: any) => {
       let loandocs = {};
-      loandocs = environment.serverUrl + '/loans/' + ele.parentEntityId + '/documents/' + ele.id + '/attachment?tenantIdentifier=' + environment.fineractPlatformTenantId;
+      loandocs = this.settingsService.serverUrl + '/loans/' + ele.parentEntityId + '/documents/' + ele.id + '/attachment?tenantIdentifier=' + environment.fineractPlatformTenantId;
       ele.docUrl = loandocs;
       if (ele.fileName) {
         if (ele.fileName.toLowerCase().indexOf('.jpg') !== -1 || ele.fileName.toLowerCase().indexOf('.jpeg') !== -1 || ele.fileName.toLowerCase().indexOf('.png') !== -1) {

src/app/pipes/date-format.pipe.spec.ts

@@ -1,8 +1,19 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { SettingsService } from 'app/settings/settings.service';
 import { DateFormatPipe } from './date-format.pipe';
 
 describe('DateFormatPipe', () => {
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ SettingsService ],
+      declarations: [ DateFormatPipe ]
+    })
+    .compileComponents();
+  }));
+
   it('create an instance', () => {
-    const pipe = new DateFormatPipe();
+    const pipe = new DateFormatPipe(new SettingsService());
     expect(pipe).toBeTruthy();
   });
 });

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html

@@ -60,6 +60,10 @@
           </button>
         </div>
 
+        <div fxFlex="100%" *ngIf="chart.value.chartSlabs.length === 0">
+          <h3 class="mat-h3">It's required to add at least one Slab</h3>
+        </div>
+
         <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs" *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
 
           <ng-container matColumnDef="period">

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts

@@ -228,7 +228,7 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
       'fromDate': ['', Validators.required],
       'endDate': [''],
       'isPrimaryGroupingByAmount': [false],
-      'chartSlabs': this.formBuilder.array([])
+      'chartSlabs': this.formBuilder.array([], Validators.required)
     });
   }
 

src/app/settings/settings.service.ts

@@ -1,5 +1,7 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
+import { AlertService } from 'app/core/alert/alert.service';
+import { Dates } from 'app/core/utils/dates';
 
 /** Environment Imports */
 import { environment } from '../../environments/environment';
@@ -12,7 +14,12 @@ import { environment } from '../../environments/environment';
 })
 export class SettingsService {
 
-  constructor() { }
+  public static businessDateConfigName = 'enable_business_date';
+  public static businessDateType = 'BUSINESS_DATE';
+  public static cobDateType = 'COB_DATE';
+
+  constructor(private alertService: AlertService,
+    private dateUtils: Dates) { }
 
   /**
    * Sets date format setting throughout the app.
@@ -42,7 +49,7 @@ export class SettingsService {
    * @param {string} url URL
    */
   setServer(url: string) {
-    localStorage.setItem('mifosXServerURL', JSON.stringify(url));
+    localStorage.setItem('mifosXServerURL', url);
   }
 
   /**
@@ -81,7 +88,42 @@ export class SettingsService {
    * Returns server setting
    */
   get server() {
+    if (localStorage.getItem('mifosXServerURL')) {
+      return localStorage.getItem('mifosXServerURL');
+    }
     return environment.baseApiUrl;
   }
 
+  /**
+   * Returns server url with api path and version
+   */
+  get serverUrl() {
+    return this.server + environment.apiProvider + environment.apiVersion;
+  }
+
+  /**
+   * Validate If the enable_business_date configuration is enabled or disabled.
+   */
+   validateBusinessDateStatus(configurations: any) {
+    configurations.some((config: any) => {
+      if (config.name === SettingsService.businessDateConfigName) {
+        return config.enabled;
+      }
+    });
+  }
+
+  /**
+   * Get the Business Date or COB Date.
+   */
+  getBusinessDates(businessDateData: any, dateType: string): void {
+    businessDateData.some((data: any) => {
+      if (data.type === dateType) {
+        const dateVal = new Date(data.date);
+        this.alertService.alert({ type: dateType + ' Set',
+          message: this.dateUtils.formatDate(dateVal, this.dateFormat())});
+        return;
+      }
+    });
+  }
+
 }

src/app/shared/footer/footer.component.html

@@ -1,5 +1,7 @@
 <div fxLayout="column" id="footer" class="m-b-20">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">Version {{ version }}</p>
-  <p fxFlexAlign="center" class="footer-content">Mifos X is up to date</p>
+  <p fxFlexAlign="center" class="footer-content">Version <b>{{ version }}</b> - <b>{{ hash }}</b></p>
+  <p fxFlexAlign="center" class="footer-content" *ngIf="isBusinessDateDefined">Current Business Date: <b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></p>
+  <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
+  <p fxFlexAlign="center" class="footer-content">Mifos X by Mifos</p>
 </div>

src/app/shared/footer/footer.component.ts

@@ -1,8 +1,14 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Alert } from 'app/core/alert/alert.model';
+import { AlertService } from 'app/core/alert/alert.service';
+import { AuthenticationService } from 'app/core/authentication/authentication.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { SystemService } from 'app/system/system.service';
 
 /** Environment Configuration */
 import { environment } from 'environments/environment';
+import { Subscription } from 'rxjs';
 
 /**
  *  Footer component.
@@ -12,14 +18,73 @@ import { environment } from 'environments/environment';
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss']
 })
-export class FooterComponent implements OnInit {
+export class FooterComponent implements OnInit, OnDestroy {
 
   /** Mifos X version. */
   version: string = environment.version;
+  /** Mifos X hash */
+  hash: string = environment.hash;
+  /** Business Date */
+  businessDate: Date = null;
 
-  constructor() { }
+  isBusinessDateEnabled = false;
+  isBusinessDateDefined = false;
+  /** Subscription to alerts. */
+  alert$: Subscription;
+  timer: any;
+
+  constructor(private systemService: SystemService,
+    private authenticationService: AuthenticationService,
+    private alertService: AlertService) { }
 
   ngOnInit() {
+    this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
+      const alertType = alertEvent.type;
+      if (alertType === SettingsService.businessDateType + ' Set Config') {
+        this.isBusinessDateEnabled = (alertEvent.message === 'enabled') ? true : false;
+        this.isBusinessDateDefined = false;
+        if (this.isBusinessDateEnabled) {
+          this.setBusinessDate();
+        }
+      } else if (alertType === SettingsService.businessDateType + ' Set') {
+        if (this.isBusinessDateEnabled) {
+          this.setBusinessDate();
+        }
+      } else if (alertType === 'Authentication Start') {
+        this.timer = setTimeout(() => { this.getConfigurations(); }, 60000);
+      }
+    });
+    this.getConfigurations();
   }
 
+  ngOnDestroy() {
+    clearTimeout(this.timer);
+  }
+
+  /**
+   * Get the Configuration for Business Date
+   */
+   getConfigurations(): void {
+    if (this.authenticationService.isAuthenticated()) {
+      this.systemService.getConfigurationByName(SettingsService.businessDateConfigName)
+      .subscribe((configurationData: any) => {
+        this.isBusinessDateEnabled = configurationData.enabled;
+        if (this.isBusinessDateEnabled) {
+          this.setBusinessDate();
+          this.timer = setTimeout(() => { this.getConfigurations(); }, 60000);
+        }
+      });
+    }
+  }
+
+  /**
+   * Get the Business Date data
+   */
+  setBusinessDate(): void {
+    this.systemService.getBusinessDate(SettingsService.businessDateType)
+    .subscribe((data: any) => {
+      this.businessDate = new Date(data.date);
+      this.isBusinessDateDefined = true;
+    });
+  }
 }

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

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

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

@@ -1,19 +1,19 @@
-<mat-form-field id="server-selector">
-    <mat-label>Server</mat-label>
-    <mat-select [formControl]="serverSelector">
+<mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
+    <mat-label>{{ 'Server' | translate }}</mat-label>
+    <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
         <div class="sticky">
-            <form [formGroup]="form" (ngSubmit)="setNewServer()">
+            <form [formGroup]="form" (ngSubmit)="addNewServer()">
                 <div class="actions">
                     <mat-form-field class="ml" fxFlexAlign="start">
                         <span matPrefix><mat-icon>language</mat-icon></span>
-                        <mat-label>Add new server</mat-label>
+                        <mat-label>{{ 'Add new server' | translate }}</mat-label>
                         <input matInput type="text" autocomplete="off" formControlName="url">
                         <mat-error *ngIf="form.controls.url.hasError('required')">
-                            Url <strong>is required</strong>
+                            Url <strong>{{'is required' | translate }}</strong>
                         </mat-error>
                     </mat-form-field>
 
-                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">Add</button>
+                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{'Add' | translate }}</button>
                 </div>
             </form>
         </div>
@@ -21,4 +21,4 @@
             {{ server }}
         </mat-option>
     </mat-select>
-</mat-form-field>
+</mat-form-field>

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

@@ -26,34 +26,42 @@ export class ServerSelectorComponent implements OnInit {
   /** Server Setting */
   serverSelector =  new FormControl('');
 
+  /** Server list to show */
+  existMoreThanOneServer = false;
+
   /**
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private settingsService: SettingsService, public dialog: MatDialog, private formBuilder: FormBuilder) { }
+  constructor(private settingsService: SettingsService,
+    public dialog: MatDialog,
+    private formBuilder: FormBuilder) { }
 
   ngOnInit(): void {
     this.servers = this.settingsService.servers;
-    this.serverSelector.patchValue(this.settingsService.server);
-    this.buildDependencies();
-    this.form = this.formBuilder.group({
-      'url': ['', [Validators.required]],
-    });
+    this.existMoreThanOneServer = (this.servers && this.servers.length > 1);
+    if (!this.existMoreThanOneServer) {
+      this.settingsService.setServer(this.servers[0]);
+    } else {
+      this.existMoreThanOneServer = true;
+      this.serverSelector.patchValue(this.settingsService.server);
+      this.form = this.formBuilder.group({
+        'url': ['', [Validators.required]],
+      });
+    }
   }
 
   /**
-   * Subscribe to value changes.
+   * Set backend server from the list
    */
-  buildDependencies() {
-    this.serverSelector.valueChanges.subscribe((url: string) => {
-      this.settingsService.setServer(url);
-      window.location.reload(); // refreshes the environment.ts.
-    });
+  setServer(): void {
+    this.settingsService.setServer(this.serverSelector.value);
   }
 
+
   /**
-   * Set new server.
+   * Add new server to the list.
    */
-  setNewServer() {
+  addNewServer(): void {
     let servers;
     this.settingsService.setServer(this.form.value.url);
     servers = this.settingsService.servers;

src/app/shared/shared.module.ts

@@ -25,6 +25,7 @@ import { ServerSelectorComponent } from './server-selector/server-selector.compo
 /** Custom Modules */
 import { IconsModule } from './icons.module';
 import { MaterialModule } from './material.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 /**
  * Shared Module
@@ -36,7 +37,8 @@ import { MaterialModule } from './material.module';
     CommonModule,
     IconsModule,
     MaterialModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    TranslateModule.forRoot(),
   ],
   declarations: [
     FormfieldComponent,

src/app/system/configurations/business-date-tab/business-date-tab.component.ts

@@ -3,8 +3,11 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { ActivatedRoute } from '@angular/router';
+import { Alert } from 'app/core/alert/alert.model';
+import { AlertService } from 'app/core/alert/alert.service';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
+import { Subscription } from 'rxjs';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
@@ -15,10 +18,8 @@ import { SystemService } from '../../system.service';
   styleUrls: ['./business-date-tab.component.scss']
 })
 export class BusinessDateTabComponent implements OnInit {
-
-  configurationName = 'enable_business_date';
-  businessDateType = 'BUSINESS_DATE';
-  cobDateType = 'COB_DATE';
+  /** Subscription to alerts. */
+  alert$: Subscription;
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -30,8 +31,6 @@ export class BusinessDateTabComponent implements OnInit {
   cobDate = new Date();
   /** business Date form. */
   businessDateForm: FormGroup;
-  /** Configuration data. */
-  configurations: any;
   /** Business data. */
   businessDateData: any;
 
@@ -42,17 +41,29 @@ export class BusinessDateTabComponent implements OnInit {
 
   /**
    * Retrieves the configurations data from `resolve`.
-   * @param {ActivatedRoute} route Activated Route.
    * @param {SystemService} systemService System Service.
-   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {Dates} dateUtils Date Utils.
    */
-  constructor(private route: ActivatedRoute,
+  constructor(
     private systemService: SystemService,
     private settingsService: SettingsService,
     private formBuilder: FormBuilder,
-    private dateUtils: Dates) {}
+    private dateUtils: Dates,
+    private alertService: AlertService) {}
 
   ngOnInit(): void {
+    this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
+      const alertType = alertEvent.type;
+      if (alertType === SettingsService.businessDateType + ' Set Config') {
+        this.isBusinessDateEnabled = (alertEvent.message === 'enabled') ? true : false;
+        if (this.isBusinessDateEnabled) {
+          this.setBusinessDates();
+          this.createBusinessDateForm();
+        }
+      }
+    });
     this.userDateFormat = this.settingsService.dateFormat;
     this.getConfigurations();
     this.createBusinessDateForm();
@@ -61,31 +72,26 @@ export class BusinessDateTabComponent implements OnInit {
   /**
    * Get the Configuration and the Business Date data
    */
-  getConfigurations(): void {
-    this.systemService.getConfigurations()
+   getConfigurations(): void {
+    this.systemService.getConfigurationByName(SettingsService.businessDateConfigName)
     .subscribe((configurationData: any) => {
-      this.configurations = configurationData.globalConfiguration;
-      this.validateBusinessDateStatus();
+      this.isBusinessDateEnabled = configurationData.enabled;
       if (this.isBusinessDateEnabled) {
-        this.systemService.getBusinessDates()
-        .subscribe((businessDateData: any) => {
-          this.businessDateData = businessDateData;
-          this.setBusinessDates();
-        });
+        this.setBusinessDates();
       }
     });
   }
 
-  /**
-   * Set the Business Date and COB Date.
-   */
-  setBusinessDates() {
-    this.businessDateData.forEach((data: any) => {
-      if (data.type === this.businessDateType) {
-        this.businessDate = new Date(data.date);
-      } else {
-        this.cobDate = new Date(data.date);
-      }
+  setBusinessDates(): void {
+    this.systemService.getBusinessDates()
+    .subscribe((businessDateData: any) => {
+      businessDateData.forEach((data: any) => {
+        if (data.type === SettingsService.businessDateType) {
+          this.businessDate = new Date(data.date);
+        } else {
+          this.cobDate = new Date(data.date);
+        }
+      });
     });
   }
 
@@ -99,18 +105,6 @@ export class BusinessDateTabComponent implements OnInit {
     });
   }
 
-  /**
-   * Validate If the enable_business_date configuration is enabled or disabled.
-   */
-  validateBusinessDateStatus(): void {
-    this.isBusinessDateEnabled = false;
-    this.configurations.forEach((config: any) => {
-      if (config.name === this.configurationName) {
-        this.isBusinessDateEnabled = config.enabled;
-      }
-    });
-  }
-
   /**
    * Flag to display or not the datepicker control to set the Business Date value
    */
@@ -123,9 +117,9 @@ export class BusinessDateTabComponent implements OnInit {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevBusinessDate: Date = this.businessDateForm.value.businessDate;
-    let dateType = this.businessDateType;
+    let dateType = SettingsService.businessDateType;
     if (this.dateIndex === 1) {
-      dateType = this.cobDateType;
+      dateType = SettingsService.cobDateType;
     }
     const data = {
       date: this.dateUtils.formatDate(prevBusinessDate, dateFormat),

src/app/system/configurations/configurations.component.html

@@ -4,7 +4,7 @@
       <mat-tab label="Global Configurations">
         <mifosx-global-configurations-tab></mifosx-global-configurations-tab>
       </mat-tab>
-      <mat-tab label="Business Date">
+      <mat-tab label="Business Date" *ngIf="isBusinessDateEnabled">
         <mifosx-business-date-tab></mifosx-business-date-tab>
       </mat-tab>
     </mat-tab-group>

src/app/system/configurations/configurations.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { Alert } from 'app/core/alert/alert.model';
+import { AlertService } from 'app/core/alert/alert.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Subscription } from 'rxjs';
+import { SystemService } from '../system.service';
 
 @Component({
   selector: 'mifosx-configurations',
@@ -6,10 +11,31 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./configurations.component.scss']
 })
 export class ConfigurationsComponent implements OnInit {
+  /** Subscription to alerts. */
+  alert$: Subscription;
 
-  constructor() { }
+  isBusinessDateEnabled = false;
+
+  constructor(private alertService: AlertService,
+    private systemService: SystemService) { }
 
   ngOnInit(): void {
+    this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
+      const alertType = alertEvent.type;
+      if (alertType === SettingsService.businessDateType + ' Set Config') {
+        this.isBusinessDateEnabled = (alertEvent.message === 'enabled') ? true : false;
+      }
+    });
+    this.getConfigurations();
   }
 
+  /**
+   * Get the Configuration and the Business Date data
+   */
+   getConfigurations(): void {
+    this.systemService.getConfigurationByName(SettingsService.businessDateConfigName)
+    .subscribe((configurationData: any) => {
+      this.isBusinessDateEnabled = configurationData.enabled;
+    });
+  }
 }

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
+import { AlertService } from 'app/core/alert/alert.service';
+import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
@@ -33,7 +34,7 @@ export class GlobalConfigurationsTabComponent implements OnInit {
    * @param {SystemService} systemService System Service.
    * @param {Router} router Router for navigation.
    */
-  constructor(private route: ActivatedRoute,
+  constructor(private alertService: AlertService,
               private systemService: SystemService) {
       this.configurationData = this.systemService.getConfigurations();
   }
@@ -73,6 +74,10 @@ export class GlobalConfigurationsTabComponent implements OnInit {
     this.systemService.updateConfiguration(configuration.id, { enabled: !configuration.enabled })
       .subscribe((response: any) => {
         configuration.enabled = response.changes.enabled;
+        if (configuration.name === SettingsService.businessDateConfigName) {
+          const msg = configuration.enabled ? 'enabled' : 'disabled';
+          this.alertService.alert({type: SettingsService.businessDateType + ' Set Config', message: msg});
+        }
       });
   }
 }

src/app/system/system.service.ts

@@ -331,10 +331,17 @@ export class SystemService {
   /**
    * @returns {Observable<any>} Business Date data.
    */
-   getBusinessDates(): Observable<any> {
+  getBusinessDates(): Observable<any> {
     return this.http.get('/businessdate');
   }
 
+  /**
+   * @returns {Observable<any>} Business Date data using a type BUSINESS_DATE / COB_DATE.
+   */
+   getBusinessDate(dateType: string): Observable<any> {
+    return this.http.get(`/businessdate/${dateType}`);
+  }
+
   /**
    * @param {any} dateData Business Date data to be updated.
    * @returns {Observable<any>}
@@ -358,6 +365,14 @@ export class SystemService {
     return this.http.get(`/configurations/${configurationId}`);
   }
 
+  /**
+   * @param {string} configurationId Configuration ID of configuration.
+   * @returns {Observable<any>} Configuration.
+   */
+   getConfigurationByName(configurationName: string): Observable<any> {
+    return this.http.get(`/configurations/name/${configurationName}`);
+  }
+
   /**
    * @param {string} configurationId Configuration ID of configuration to be updated.
    * @param {any} configuration Configuration to be updated.

src/app/web-app.component.spec.ts

@@ -1,6 +1,5 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule } from '@ngx-translate/core';
 
 import { CoreModule } from './core/core.module';
 import { WebAppComponent } from './web-app.component';
@@ -10,7 +9,6 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        TranslateModule.forRoot(),
         CoreModule
       ],
       declarations: [WebAppComponent],

src/app/web-app.component.ts

@@ -49,6 +49,7 @@ export class WebAppComponent implements OnInit {
    * @param {ThemeStorageService} themeStorageService Theme Storage Service.
    * @param {MatSnackBar} snackBar Material Snackbar for notifications.
    * @param {AlertService} alertService Alert Service.
+   * @param {SettingsService} settingsService Settings Service.
    * @param {AuthenticationService} authenticationService Authentication service.
    */
   constructor(private router: Router,
@@ -82,7 +83,7 @@ export class WebAppComponent implements OnInit {
     log.debug('init');
 
     // Setup translations
-    this.translateService.addLangs(environment.supportedLanguages);
+    this.translateService.addLangs(environment.supportedLanguages.split(','));
     this.translateService.use(environment.defaultLanguage);
 
     // Change page title on navigation or language change, based on route data
@@ -142,17 +143,8 @@ 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://qa.mifos.io',
-        'https://staging.mifos.io',
-        'https://mobile.mifos.io',
-        'https://demo.fineract.dev',
-        'https://localhost:8443'
-      ]);
-    }
+    // Set the server list from the env var FINERACT_API_URLS
+    this.settingsService.setServers(environment.baseApiUrls.split(','));
   }
 
   logout() {

src/assets/env.js

@@ -0,0 +1,16 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+
+  // BackEnd Environment variables
+  window["env"]["fineractApiUrls"] = 'https://localhost:8443';
+  window["env"]["fineractApiUrl"]  = 'https://localhost:8443';
+
+  window["env"]["apiProvider"] = '/fineract-provider/api';
+  window["env"]["apiVersion"]  = '/v1';
+
+  window["env"]["fineractPlatformTenantId"]  = '';
+
+  // Language Environment variables
+  window["env"]["defaultLanguage"] = '';
+  window["env"]["supportedLanguages"] = '';
+})(this);

src/assets/env.template.js

@@ -0,0 +1,16 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+
+  // BackEnd Environment variables
+  window["env"]["fineractApiUrls"] = '$FINERACT_API_URLS';
+  window["env"]["fineractApiUrl"]  = '$FINERACT_API_URL';
+
+  window["env"]["apiProvider"] = '$FINERACT_API_PROVIDER';
+  window["env"]["apiVersion"]  = '$FINERACT_API_VERSION';
+
+  window["env"]["fineractPlatformTenantId"]  = '$FINERACT_PLATFORM_TENANT_IDENTIFIER';
+
+  // Language Environment variables
+  window["env"]["defaultLanguage"] = '$MIFOS_DEFAULT_LANGUAGE';
+  window["env"]["supportedLanguages"] = '$MIFOS_SUPPORTED_LANGUAGES';
+})(this);

src/assets/styles/_form.scss

@@ -27,3 +27,7 @@ textarea.noresize {
 .full-input [type="radio"] {
   width: auto;
 }
+
+.mat-tab-body-content {
+  margin-bottom: 20px;
+}

src/assets/translations/en-US.json

@@ -16,5 +16,7 @@
   "Reports": "Reports",
   "Admin": "Admin",
   "Self Service": "Self Service",
-  "Institution": "Institution"
+  "Institution": "Institution",
+  "Language": "Language",
+  "Server": "Server"
 }

src/assets/translations/fr-FR.json

@@ -16,5 +16,7 @@
   "Reports": "Rapports",
   "Admin": "Admin",
   "Self Service": "En libre service",
-  "Institution": "Institution"
+  "Institution": "Institution",
+  "Language": "Langue",
+  "Server": "Serveur"
 }

src/environments/.env.ts

@@ -1,4 +1,10 @@
+// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
+/* tslint:disable */
 export default {
-  'mifos_x_version': '0.0.0',
+  'mifos_x': {
+    'version': '0.0.0',
+    'hash': '79efe55'
+  },
   'allow_switching_backend_instance': true
 };
+/* tslint:enable */

src/environments/environment.prod.ts

@@ -3,22 +3,25 @@ import env from './.env';
 
 export const environment = {
   production: true,
-  version: env.mifos_x_version,
-  fineractPlatformTenantId: 'default',  // For connecting to server running elsewhere update the tenant identifier
-  baseApiUrl: JSON.parse(localStorage.getItem('mifosXServerURL')) || 'https://demo.fineract.dev',  // For connecting to server running elsewhere update the base API URL
+  version: env.mifos_x.version,
+  hash: env.mifos_x.hash,
+  // For connecting to server running elsewhere update the tenant identifier
+  fineractPlatformTenantId: window['env']['fineractPlatformTenantId'] || 'default',
+  // For connecting to others servers running elsewhere update the base API URL
+  baseApiUrls: window['env']['fineractApiUrls'] ||
+    'https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://demo.fineract.dev,https://localhost:8443',
+  // For connecting to server running elsewhere set the base API URL
+  baseApiUrl: window['env']['baseApiUrl'] || 'https://demo.fineract.dev',
   allowServerSwitch: env.allow_switching_backend_instance,
-  apiProvider: '/fineract-provider/api',
-  apiVersion: '/v1',
+  apiProvider: window['env']['apiProvider'] || '/fineract-provider/api',
+  apiVersion: window['env']['apiVersion'] || '/v1',
   serverUrl: '',
   oauth: {
     enabled: false,  // For connecting to Mifos X using OAuth2 Authentication change the value to true
     serverUrl: ''
   },
-  defaultLanguage: 'en-US',
-  supportedLanguages: [
-    'en-US',
-    'fr-FR'
-  ]
+  defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
+  supportedLanguages: window['env']['supportedLanguages'] || 'en-US,fr-FR'
 };
 
 // Server URL

src/environments/environment.ts

@@ -8,22 +8,25 @@ import env from './.env';
 
 export const environment = {
   production: false,
-  version: env.mifos_x_version,
-  fineractPlatformTenantId: 'default',  // For connecting to server running elsewhere update the tenant identifier
-  baseApiUrl: JSON.parse(localStorage.getItem('mifosXServerURL')) || 'https://dev.mifos.io',  // For connecting to server running elsewhere update the base API URL
+  version: env.mifos_x.version,
+  hash: env.mifos_x.hash,
+  // For connecting to server running elsewhere update the tenant identifier
+  fineractPlatformTenantId: window['env']['fineractPlatformTenantId'] || 'default',
+  // For connecting to others servers running elsewhere update the base API URL
+  baseApiUrls: window['env']['fineractApiUrls'] ||
+    'https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://demo.fineract.dev,https://localhost:8443',
+  // For connecting to server running elsewhere set the base API URL
+  baseApiUrl: window['env']['baseApiUrl'] || 'https://demo.fineract.dev',
   allowServerSwitch: env.allow_switching_backend_instance,
-  apiProvider: '/fineract-provider/api',
-  apiVersion: '/v1',
+  apiProvider: window['env']['apiProvider'] || '/fineract-provider/api',
+  apiVersion: window['env']['apiVersion'] || '/v1',
   serverUrl: '',
   oauth: {
     enabled: false,  // For connecting to Mifos X using OAuth2 Authentication change the value to true
     serverUrl: ''
   },
-  defaultLanguage: 'en-US',
-  supportedLanguages: [
-    'en-US',
-    'fr-FR'
-  ]
+  defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
+  supportedLanguages: window['env']['supportedLanguages'] || 'en-US,fr-FR'
 };
 
 // Server URL

src/index.html

@@ -16,6 +16,8 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  <!-- Load environment variables -->
+  <script src="assets/env.js"></script>
 </head>
 <body>
   <!--[if lt IE 10]>

src/karma.conf.js

@@ -1,45 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-const path = require('path');
-
-module.exports = function(config) {
-  config.set({
-    basePath: '..',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-junit-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-      captureConsole: Boolean(process.env.KARMA_ENABLE_CONSOLE)
-    },
-    junitReporter: {
-      outputDir: path.join(__dirname, '../reports/junit/'),
-      outputFile: 'TESTS-xunit.xml',
-      useBrowserName: false,
-      suite: '' // Will become the package name attribute in xml testsuite element
-    },
-    coverageIstanbulReporter: {
-      reports: ['html', 'lcovonly', 'text-summary'],
-      dir: path.join(__dirname, '../reports/coverage'),
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'junit'],
-    port: 9876,
-    colors: true,
-    // Level of logging, can be: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['ChromeHeadless'],
-    singleRun: false
-  });
-};

src/karma.conf.ts

@@ -0,0 +1,84 @@
+// Karma configuration
+
+module.exports = (config: any) => {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '..',
+
+
+    // frameworks to use
+    // available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'src/**/*spec.ts',
+      'src/**/*.ts',
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://www.npmjs.com/search?q=keywords:karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser instances should be started simultaneously
+    concurrency: Infinity,
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+
+    reporter: ['progress', 'kjhtml']
+  })
+}