feat: add functionality for codes component (#309)

src/app/system/codes/codes.component.html

@@ -10,22 +10,27 @@
   <div fxLayout="row">
     <mat-form-field fxFlex>
       <mat-label>Filter</mat-label>
-      <input matInput>
+      <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
 
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="codeName">
+      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
+        <td mat-cell *matCellDef="let code"> {{ code.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <td mat-cell *matCellDef="let code">
+          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="No" matTooltipPosition="right"></fa-icon>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>

src/app/system/codes/codes.component.scss

@@ -1,3 +1,12 @@
 table {
   width: 100%;
 }
+
+// TODO: CONFIGURE THESE CLASSES GLOBALLY
+.system-defined {
+  color: #32cd32;
+}
+
+.not-system-defined {
+  color: #f44366;
+}

src/app/system/codes/codes.component.ts

@@ -1,5 +1,7 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'mifosx-codes',
@@ -11,7 +13,7 @@ export class CodesComponent implements OnInit {
   /** Codes data. */
   codesData: any;
   /** Columns to be displayed in codes table. */
-  displayedColumns: string[] = ['codeName', 'systemDefined'];
+  displayedColumns: string[] = ['name', 'systemDefined'];
   /** Data source for codes table. */
   dataSource: MatTableDataSource<any>;
 
@@ -20,9 +22,39 @@ export class CodesComponent implements OnInit {
   /** Sorter for codes table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor() { }
+  /**
+   * Retrieves the codes data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { codes: any }) => {
+      this.codesData = data.codes;
+    });
+  }
 
+  /**
+   * Sets the codes table.
+   */
   ngOnInit() {
+    this.setCodes();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for codes table.
+   */
+  setCodes() {
+    this.dataSource = new MatTableDataSource(this.codesData);
+    console.log(this.codesData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Filters data in codes table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
 }

src/app/system/codes/codes.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../system.service';
+
+/**
+ * Codes data resolver.
+ */
+@Injectable()
+export class CodesResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Codes data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.systemService.getCodes();
+  }
+
+}