Add admin approval page.

src/app/pages/admin/admin-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AdminComponent } from './admin.component';
+
+const routes: Routes = [{ path: '', component: AdminComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AdminRoutingModule { }

src/app/pages/admin/admin.component.html

@@ -0,0 +1,68 @@
+<!-- Begin page -->
+<div class="wrapper">
+  <app-sidebar></app-sidebar>
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div id="content">
+    <app-topbar></app-topbar>
+    <!-- Start Content-->
+    <div class="container-fluid" appMenuSelection>
+      <div class="card">
+        <mat-card-title class="card-header">
+          Actions
+        </mat-card-title>
+        <div class="card-body">
+
+          <mat-form-field appearance="outline">
+            <mat-label> Filter </mat-label>
+            <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
+            <mat-icon matSuffix>search</mat-icon>
+          </mat-form-field>
+
+          <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="user"
+                     matSortDirection="asc" matSortDisableClear>
+            <ng-container matColumnDef="user">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
+              <mat-cell *matCellDef="let action"> {{action.user}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="role">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> ROLE </mat-header-cell>
+              <mat-cell *matCellDef="let action"> {{action.role}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="action">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> ACTION </mat-header-cell>
+              <mat-cell *matCellDef="let action"> {{action.action}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="status">
+              <mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
+              <mat-cell *matCellDef="let action"><span class="badge badge-primary badge-pill"> {{approvalStatus(action.approval)}} </span></mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="approve">
+              <mat-header-cell *matHeaderCellDef> APPROVE </mat-header-cell>
+              <mat-cell *matCellDef="let action">
+                <button mat-raised-button *ngIf="!action.approval" class="btn btn-outline-primary" (click)="approveAction(action)"> Approve </button>
+              </mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+            <mat-row *matRowDef="let action; columns: displayedColumns"></mat-row>
+          </mat-table>
+
+          <mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
+        </div>
+      </div>
+    </div>
+    <app-footer appMenuSelection></app-footer>
+  </div>
+  <!-- ============================================================== -->
+  <!-- End Page content -->
+  <!-- ============================================================== -->
+</div>
+

src/app/pages/admin/admin.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+import {HttpClient} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {AdminModule} from './admin.module';
+import {FooterStubComponent, SidebarStubComponent, TopbarStubComponent, UserServiceStub} from '../../../testing';
+import {AppModule} from '../../app.module';
+import {UserService} from '../../_services';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+  let userService: UserServiceStub;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AdminComponent,
+        FooterStubComponent,
+        SidebarStubComponent,
+        TopbarStubComponent
+      ],
+      imports: [
+        AdminModule,
+        AppModule,
+        HttpClientTestingModule,
+      ],
+      providers: [
+        { provide: UserService, useClass: UserServiceStub }
+      ]
+    })
+    .compileComponents();
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    userService = new UserServiceStub();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('#approveAction should toggle approval status', () => {
+    const action = userService.getActionById('1');
+    expect(action).toBe({
+      id: 1,
+      user: 'Tom',
+      role: 'enroller',
+      action: 'Disburse RSV 100',
+      approval: false
+    });
+  });
+});

src/app/pages/admin/admin.component.ts

@@ -0,0 +1,43 @@
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {UserService} from '../../_services';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.scss']
+})
+export class AdminComponent implements OnInit, AfterViewInit {
+  dataSource: MatTableDataSource<any>;
+  displayedColumns = ['user', 'role', 'action', 'status', 'approve'];
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(
+    private userService: UserService
+  ) { }
+
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<any>(this.userService.actions);
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  doFilter(value: string): void {
+    this.dataSource.filter = value.trim().toLocaleLowerCase();
+  }
+
+  approvalStatus(status: boolean): string {
+    return status ? 'Approved' : 'Unapproved';
+  }
+
+  approveAction(action: any): void {
+    this.userService.approveAction(action.id);
+  }
+}

src/app/pages/admin/admin.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import { AdminComponent } from './admin.component';
+import {SharedModule} from '../../shared/shared.module';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatButtonModule} from '@angular/material/button';
+
+
+@NgModule({
+  declarations: [AdminComponent],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+    SharedModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatButtonModule
+  ]
+})
+export class AdminModule { }