refractor: shared module

* Delete unused loader component.
* Make file upload component responsive.
* Add comments.

.htmlhintrc

@@ -8,7 +8,7 @@
   "src-not-empty": true,
   "attr-no-duplication": true,
   "title-require": true,
-  "tag-self-close": true,
+  "tag-self-close": false,
   "head-script-disabled": true,
   "doctype-html5": true,
   "id-class-value": "dash",

src/app/shared/delete-dialog/delete-dialog.component.ts

@@ -1,6 +1,10 @@
+/** Angular Imports */
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
+/**
+ * Delete dialog component.
+ */
 @Component({
   selector: 'mifosx-delete-dialog',
   templateUrl: './delete-dialog.component.html',
@@ -8,6 +12,10 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 })
 export class DeleteDialogComponent implements OnInit {
 
+  /**
+   * @param dialogRef Component reference to dialog.
+   * @param data Provides a deleteContext.
+   */
   constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any) { }
 

src/app/shared/file-upload/file-upload.component.html

@@ -1,7 +1,13 @@
-<button mat-button (click)="inputFile.click()">
+<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="2%">
-  <fa-icon icon="file-upload" size="lg"></fa-icon>
+  <mat-form-field fxFlex="83%">
-  &nbsp;&nbsp;
+    <input matInput [readonly]="true" [value]="fileName" placeholder="No file uploaded">
-  Upload an image
+  </mat-form-field>
-</button>
+  <span fxFlex="13%" fxFlexAlign="center">
-{{ filename || 'No File Uploaded' }}
+    <button mat-button (click)="uploadFile.click()">
-<input type="file" #inputFile (change)="onFileSelected($event)" [style.display]="'none'" />
+      <fa-icon icon="file-upload" size="lg"></fa-icon>
+      &nbsp;&nbsp;
+      Upload a file
+    </button>
+  </span>
+</div>
+<input type="file" #uploadFile (change)="onFileSelected($event)" [style.display]="'none'">

src/app/shared/file-upload/file-upload.component.ts

@@ -1,5 +1,9 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 
+/**
+ * Custom file upload component based on angular material.
+ */
 @Component({
   selector: 'mifosx-file-upload',
   templateUrl: './file-upload.component.html',
@@ -7,15 +11,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FileUploadComponent implements OnInit {
 
-  filename: string;
+  /** Name of file. */
+  fileName = '';
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  /**
+   * Uploads a file.
+   * @param {any} $event The file input change event.
+   */
   onFileSelected($event: any) {
-    this.filename = $event.target.files[0].name;
+    this.fileName = $event.target.files[0].name;
   }
 
 }

src/app/shared/icons.module.ts

@@ -1,5 +1,7 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 
+/** Angular Font Awesome Imports */
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -7,15 +9,17 @@ import {
   faSearch
 } from '@fortawesome/free-solid-svg-icons';
 
-// Add an icon to the library for convenient access in other components
+/** Add icons to the library for convenient access in other components. */
 library.add(
   faFileUpload,
   faSearch
 );
 
+/**
+ * Icons Module
+ * Angular Font Awesome module is exported here.
+ */
 @NgModule({
-  imports: [],
-  declarations: [],
   exports: [FontAwesomeModule]
 })
 export class IconsModule { }

src/app/shared/index.ts

@@ -1,2 +1,2 @@
 export * from './shared.module';
-export * from './loader/loader.component';
+export { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';

src/app/shared/loader/loader.component.html

@@ -1,5 +0,0 @@
-<!-- TODO: Loading Component -->
-<div [hidden]="!isLoading">
-  <span>{{message}}</span>
-</div>
-

src/app/shared/loader/loader.component.spec.ts

@@ -1,65 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoaderComponent } from './loader.component';
-
-describe('LoaderComponent', () => {
-  let component: LoaderComponent;
-  let fixture: ComponentFixture<LoaderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-        declarations: [LoaderComponent]
-      })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should not be visible by default', () => {
-    // Arrange
-    const element = fixture.nativeElement;
-    const div = element.querySelectorAll('div')[0];
-
-    // Assert
-    expect(div.getAttribute('hidden')).not.toBeNull();
-  });
-
-  it('should be visible when app is loading', () => {
-    // Arrange
-    const element = fixture.nativeElement;
-    const div = element.querySelectorAll('div')[0];
-
-    // Act
-    fixture.componentInstance.isLoading = true;
-    fixture.detectChanges();
-
-    // Assert
-    expect(div.getAttribute('hidden')).toBeNull();
-  });
-
-  it('should not display a message by default', () => {
-    // Arrange
-    const element = fixture.nativeElement;
-    const span = element.querySelectorAll('span')[0];
-
-    // Assert
-    expect(span.innerText).toBe('');
-  });
-
-  it('should display specified message', () => {
-    // Arrange
-    const element = fixture.nativeElement;
-    const span = element.querySelectorAll('span')[0];
-
-    // Act
-    fixture.componentInstance.message = 'testing';
-    fixture.detectChanges();
-
-    // Assert
-    expect(span.innerText).toBe('testing');
-  });
-});

src/app/shared/loader/loader.component.ts

@@ -1,17 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-@Component({
-  selector: 'mifosx-loader',
-  templateUrl: './loader.component.html',
-  styleUrls: ['./loader.component.scss']
-})
-export class LoaderComponent implements OnInit {
-
-  @Input() isLoading = false;
-  @Input() message: string;
-
-  constructor() { }
-
-  ngOnInit() { }
-
-}

src/app/shared/material.module.ts

@@ -1,7 +1,9 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 import { LayoutModule } from '@angular/cdk/layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {
+  MAT_FORM_FIELD_DEFAULT_OPTIONS,
   MatAutocompleteModule,
   MatButtonModule,
   MatButtonToggleModule,
@@ -37,9 +39,11 @@ import {
   MatTreeModule
 } from '@angular/material';
 
+/**
+ * Material Module
+ * Angular CDK, Angular Material and Flex Layout modules are exported here.
+ */
 @NgModule({
-  imports: [],
-  declarations: [],
   exports: [
     FlexLayoutModule,
     LayoutModule,
@@ -76,6 +80,12 @@ import {
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule
+  ],
+  providers: [
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'standard' }
+    }
   ]
 })
 export class MaterialModule { }

src/app/shared/shared.module.ts

@@ -1,13 +1,19 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ /** Angular Imports */
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { LoaderComponent } from './loader/loader.component';
+/** Custom Components */
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
 
+/** Custom Modules */
 import { MaterialModule } from './material.module';
 import { IconsModule } from './icons.module';
 
+/**
+ * Shared Module
+ * Modules and components that are shared throughout the application should be here.
+ */
 @NgModule({
   imports: [
     CommonModule,
@@ -15,15 +21,13 @@ import { IconsModule } from './icons.module';
     MaterialModule
   ],
   declarations: [
-    LoaderComponent,
+    DeleteDialogComponent,
-    FileUploadComponent,
+    FileUploadComponent
-    DeleteDialogComponent
   ],
   exports: [
-    CommonModule,
     FileUploadComponent,
+    CommonModule,
     IconsModule,
-    LoaderComponent,
     MaterialModule
   ],
   entryComponents: [