Fineract backend settings with environment variables

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;