refractor: app module and settings (#293)

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

Fixes #292

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
   ],