refractor: accounting module (#300)

* Refractor components.
* Add resolvers.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes: #298

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -9,9 +9,13 @@
         <div fxLayout="row">
 
           <mat-form-field fxFlex>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" placeholder="Accrue Till Date" required formControlName="tillDate">
+            <mat-label>Accrue Till Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #tillDatePicker></mat-datepicker>
+            <mat-error *ngIf="periodicAccrualsForm.controls.tillDate.hasError('required')">
+              Accrue Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
         </div>
@@ -19,8 +23,11 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting']">Cancel</button>
-        <button mat-raised-button color="primary"><mat-icon>play_arrow</mat-icon>&nbsp;&nbsp;Run Periodic Accruals</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid">
+          <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+          Run Periodic Accruals
+        </button>
       </mat-card-actions>
 
     </form>