refractor: app module and settings (#293)

* Refractor settings component.
* Improve responsiveness of settings component.
* Add comments.

Fixes #292

src/app/app-routing.module.ts

@@ -1,7 +1,10 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-// Fallback when no prior route is matched
+/**
+ * Fallback to this route when no prior route is matched.
+ */
 const routes: Routes = [
   {
     path: '**',
@@ -10,6 +13,11 @@ const routes: Routes = [
   }
 ];
 
+/**
+ * App Routing Module.
+ *
+ * Configures the fallback route.
+ */
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],

src/app/app.module.ts

@@ -1,56 +1,66 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
+/** Tanslation Imports */
 import { TranslateModule } from '@ngx-translate/core';
+
+/** Chart Imports */
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
+/** Environment Configuration */
 import { environment } from 'environments/environment';
 
+/** Main Component */
 import { WebAppComponent } from './web-app.component';
 
+/** Custom Modules */
 import { CoreModule } from './core/core.module';
-import { NavigationModule } from './navigation/navigation.module';
 import { HomeModule } from './home/home.module';
-import { AboutModule } from './about/about.module';
 import { LoginModule } from './login/login.module';
+import { SettingsModule } from './settings/settings.module';
+import { AboutModule } from './about/about.module'; // TODO: Remove redundant module.
+import { NavigationModule } from './navigation/navigation.module';
 import { ClientsModule} from './clients/clients.module';
+import { GroupsModule } from './groups/groups.module';
+import { CentersModule } from './centers/centers.module';
 import { AccountingModule } from './accounting/accounting.module';
 import { SelfServiceModule } from './self-service/self-service.module';
-import { CentersModule } from './centers/centers.module';
-import { GroupsModule } from './groups/groups.module';
 
+/** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
-import { SettingsModule } from './settings/settings.module';
 
+/**
+ * App Module
+ *
+ * Core module and all feature modules should be imported here in proper order.
+ */
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    FormsModule,
     HttpClientModule,
     ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }),
     TranslateModule.forRoot(),
     NgxChartsModule,
     CoreModule,
     HomeModule,
-    NavigationModule,
-    AboutModule,
     LoginModule,
+    SettingsModule,
+    AboutModule,
+    NavigationModule,
     ClientsModule,
+    GroupsModule,
+    CentersModule,
     AccountingModule,
     SelfServiceModule,
-    SettingsModule,
-    CentersModule,
-    GroupsModule,
     AppRoutingModule
   ],
   declarations: [WebAppComponent],
-  providers: [
-  ],
+  providers: [],
   bootstrap: [WebAppComponent]
 })
 export class AppModule { }

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

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 /** Custom Modules */
 import { SharedModule } from '../shared/shared.module';
@@ -23,7 +22,6 @@ import { TaskManagementComponent } from './task-management/task-management.compo
 @NgModule({
   imports: [
     SharedModule,
-    FormsModule,
     SelfServiceRoutingModule
   ],
   declarations: [

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

@@ -1,9 +1,17 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { Route, extract } from '../core';
+/** Routing Imports */
+import { Route } from '../core';
+
+/** Translation Imports */
+import { extract } from '../core';
+
+/** Custom Components */
 import { SettingsComponent } from './settings.component';
 
+/** Settings Routes */
 const routes: Routes = [
   Route.withShell([
     {
@@ -14,6 +22,11 @@ const routes: Routes = [
   ])
 ];
 
+/**
+ * Settings Routing Module
+ *
+ * Configures the settings and web app configuration routes.
+ */
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],

src/app/settings/settings.component.html

@@ -1,4 +1,7 @@
-<mat-card class="container">
+<!-- TODO: Add user specific settings for choice of language and date format. -->
+
+<!-- Global Web App Configuration Settings -->
+<div class="container">
 
   <mat-accordion>
 
@@ -13,29 +16,34 @@
       <div fxLayout="column">
 
         <mat-form-field>
-          <input matInput placeholder="Name of the Organisation">
+          <mat-label>Name of the Organisation</mat-label>
+          <input matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <textarea matInput placeholder="Description"></textarea>
+          <mat-label>Description</mat-label>
+          <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <textarea matInput placeholder="Summary"></textarea>
+          <mat-label>Summary</mat-label>
+          <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-select placeholder="Default Language">
-            <mat-option *ngFor="let language of languages" [value]="language.value">
-              {{ language.viewValue }}
+          <mat-label>Default Language</mat-label>
+          <mat-select>
+            <mat-option *ngFor="let language of languages" [value]="language">
+              {{ language }}
             </mat-option>
           </mat-select>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-select placeholder="Default Date Format">
-            <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat.value">
-              {{ dateFormat.viewValue }}
+          <mat-label>Default Date Format</mat-label>
+          <mat-select>
+            <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
+              {{ dateFormat }}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -54,10 +62,17 @@
 
       <div fxLayout="column">
 
-        Favicon <mifosx-file-upload></mifosx-file-upload>
-        Cover Image <mifosx-file-upload></mifosx-file-upload>
-        Logo <mifosx-file-upload></mifosx-file-upload>
-        Logo with Organisation Name <mifosx-file-upload></mifosx-file-upload>
+        <span class="header">Favicon</span>
+        <mifosx-file-upload></mifosx-file-upload>
+
+        <span class="header">Cover Image</span>
+        <mifosx-file-upload></mifosx-file-upload>
+
+        <span class="header">Logo</span>
+        <mifosx-file-upload></mifosx-file-upload>
+
+        <span class="header">Logo with Organisation Name</span>
+        <mifosx-file-upload></mifosx-file-upload>
 
       </div>
 
@@ -73,12 +88,14 @@
 
       <div fxLayout="column">
 
-        Theme <mifosx-theme-picker></mifosx-theme-picker> <!-- TODO: Replace or Change to Show More Detail -->
+        <span class="header">Theme</span>
+        <mifosx-theme-picker></mifosx-theme-picker>
 
         <mat-form-field>
-          <mat-select placeholder="Default Font">
-            <mat-option *ngFor="let font of fonts" [value]="font.value">
-              {{ font.viewValue }}
+          <mat-label>Default Font</mat-label>
+          <mat-select>
+            <mat-option *ngFor="let font of fonts" [value]="font">
+              {{ font }}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -98,15 +115,18 @@
       <div fxLayout="column">
 
         <mat-form-field>
-          <input type="url" matInput placeholder="Website">
+          <mat-label>Website</mat-label>
+          <input type="url" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <input type="email" matInput placeholder="Email">
+          <mat-label>Email</mat-label>
+          <input type="email" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <input type="tel" matInput placeholder="Contact No">
+          <mat-label>Contact No</mat-label>
+          <input type="tel" matInput>
         </mat-form-field>
 
       </div>
@@ -115,4 +135,4 @@
 
   </mat-accordion>
 
-</mat-card>
+</div>

src/app/settings/settings.component.scss

@@ -0,0 +1,3 @@
+.header {
+  font-weight: 500;
+}

src/app/settings/settings.component.ts

@@ -1,5 +1,9 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 
+/**
+ * Settings component.
+ */
 @Component({
   selector: 'mifosx-settings',
   templateUrl: './settings.component.html',
@@ -7,9 +11,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SettingsComponent implements OnInit {
 
-  languages: string[];
-  dateFormats: string[];
-  fonts: string[];
+  /** Placeholder for languages. */
+  languages: any;
+  /** Placeholder for date formats. */
+  dateFormats: any;
+  /** Placeholder for fonts. */
+  fonts: any;
 
   constructor() { }
 

src/app/settings/settings.module.ts

@@ -1,15 +1,20 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
-import { CoreModule } from '../core';
-import { SettingsRoutingModule } from './settings-routing.module';
-import { SettingsComponent } from './settings.component';
+/** Custom Modules */
 import { SharedModule } from '../shared/shared.module';
+import { SettingsRoutingModule } from './settings-routing.module';
 
+/** Custom Components */
+import { SettingsComponent } from './settings.component';
+
+/**
+ * Settings Module
+ *
+ * All components related to settings and web app configuration should be declared here.
+ */
 @NgModule({
   imports: [
-    CommonModule,
-    CoreModule,
     SharedModule,
     SettingsRoutingModule
   ],

src/app/shared/shared.module.ts

@@ -1,7 +1,7 @@
  /** Angular Imports */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 /** Custom Components */
 import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
@@ -41,6 +41,7 @@ import { MaterialModule } from './material.module';
     CommonModule,
     IconsModule,
     MaterialModule,
+    FormsModule,
     ReactiveFormsModule
   ],
   entryComponents: [

src/app/web-app.component.ts

@@ -1,20 +1,34 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { MatSnackBar } from '@angular/material';
 
-import { TranslateService } from '@ngx-translate/core';
+/** rxjs Imports */
 import { merge } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 
+/** Translation Imports */
+import { TranslateService } from '@ngx-translate/core';
+
+/** Environment Configuration */
 import { environment } from 'environments/environment';
-import { I18nService } from './core/i18n/i18n.service';
+
+/** 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';
 
+/** Custom Models */
+import { Alert } from './core/alert/alert.model';
+
+/** Initialize Logger */
 const log = new Logger('MifosX');
 
+/**
+ * Main web app component.
+ */
 @Component({
   selector: 'mifosx-web-app',
   templateUrl: './web-app.component.html',
@@ -22,6 +36,16 @@ const log = new Logger('MifosX');
 })
 export class WebAppComponent implements OnInit {
 
+  /**
+   * @param {Router} router Router for navigation.
+   * @param {ActivatedRoute} activatedRoute Activated Route.
+   * @param {Title} titleService Title Service.
+   * @param {TranslateService} translateService Translate Service.
+   * @param {I18nService} i18nService I18n Service.
+   * @param {ThemeStorageService} themeStorageService Theme Storage Service.
+   * @param {MatSnackBar} snackBar Material Snackbar for notifications.
+   * @param {AlertService} alertService Alert Service.
+   */
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title,
@@ -31,20 +55,31 @@ export class WebAppComponent implements OnInit {
               public snackBar: MatSnackBar,
               private alertService: AlertService) { }
 
+  /**
+   * Initial Setup:
+   *
+   * 1) Logger
+   *
+   * 2) Language and Translations
+   *
+   * 3) Page Title
+   *
+   * 4) Theme
+   *
+   * 5) Alerts
+   */
   ngOnInit() {
     // Setup logger
     if (environment.production) {
       Logger.enableProductionMode();
     }
-
     log.debug('init');
 
     // Setup translations
     this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
 
-    const onNavigationEnd = this.router.events.pipe(filter(event => event instanceof NavigationEnd));
-
     // Change page title on navigation or language change, based on route data
+    const onNavigationEnd = this.router.events.pipe(filter(event => event instanceof NavigationEnd));
     merge(this.translateService.onLangChange, onNavigationEnd)
       .pipe(
         map(() => {
@@ -64,12 +99,14 @@ export class WebAppComponent implements OnInit {
         }
       });
 
+    // Setup theme
     const theme = this.themeStorageService.getTheme();
     if (theme) {
       this.themeStorageService.installTheme(theme);
     }
 
-    this.alertService.alertEvent.subscribe((alertEvent: any) => {
+    // Setup alerts
+    this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
       this.snackBar.open(`${alertEvent.message}`, 'Close', {
         duration: 2000,
         horizontalPosition: 'right',