Compliance list done.

Except for the cleanup of the hearing import data, This is the first version.

otis/src/app/app-routing.module.ts

@@ -30,6 +30,11 @@ const routes: Routes = [
     path: 'cases',
     loadChildren: () => import('./cases/cases.module').then((mod) => mod.CasesModule),
   },
+  {
+    path: 'compliance-list',
+    loadChildren: () =>
+      import('./compliance-list/compliance-list.module').then((mod) => mod.ComplianceListModule),
+  },
   {
     path: 'contacts',
     loadChildren: () => import('./contacts/contacts.module').then((mod) => mod.ContactsModule),

otis/src/app/cause-list/cause-list.component.html

@@ -1,10 +1,6 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Cases</mat-card-title>
-    <a mat-button [routerLink]="['/cases', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
   </mat-card-title-group>
   <mat-card-content>
     <form [formGroup]="form" fxLayout="column">
@@ -15,7 +11,7 @@
         fxLayoutGap.lt-md="0px"
         fxLayoutAlign="space-around start"
       >
-        <mat-form-field fxFlex="40">
+        <mat-form-field fxFlex="40%">
           <input
             matInput
             [matDatepicker]="startDate"
@@ -27,7 +23,7 @@
           <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
-        <mat-form-field fxFlex="40">
+        <mat-form-field fxFlex="40%">
           <input
             matInput
             [matDatepicker]="finishDate"
@@ -39,7 +35,7 @@
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
-        <button mat-raised-button color="primary" (click)="show()" fxFlex="20c">Show</button>
+        <button mat-raised-button color="primary" (click)="show()" fxFlex="20%">Show</button>
       </div>
     </form>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">

otis/src/app/cause-list/cause-list.component.ts

@@ -49,7 +49,6 @@ export class CauseListComponent implements OnInit {
       const data = value as { info: CauseList };
 
       this.info = data.info;
-      console.log(this.info.cases);
       this.form.setValue({
         startDate: moment(this.info.startDate, 'DD-MMM-YYYY').toDate(),
         finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY').toDate(),

otis/src/app/compliance-list/compliance-list-datasource.ts

@@ -0,0 +1,42 @@
+import { DataSource } from '@angular/cdk/collections';
+import { EventEmitter } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { merge, Observable, of as observableOf } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { ComplianceListItem } from './compliance-list-item';
+
+export class ComplianceListDatasource extends DataSource<ComplianceListItem> {
+  constructor(public data: ComplianceListItem[], private paginator?: MatPaginator) {
+    super();
+  }
+
+  connect(): Observable<ComplianceListItem[]> {
+    const dataMutations: (Observable<ComplianceListItem[]> | EventEmitter<PageEvent>)[] = [
+      observableOf(this.data),
+    ];
+    if (this.paginator) {
+      dataMutations.push((this.paginator as MatPaginator).page);
+    }
+
+    return merge(...dataMutations)
+      .pipe(
+        tap((x: ComplianceListItem[]) => {
+          if (this.paginator) {
+            this.paginator.length = x.length;
+          }
+        }),
+      )
+      .pipe(map((x: ComplianceListItem[]) => this.getPagedData(this.data)));
+  }
+
+  disconnect() {}
+
+  private getPagedData(data: ComplianceListItem[]) {
+    if (this.paginator === undefined) {
+      return data;
+    }
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.slice(startIndex, startIndex + this.paginator.pageSize);
+  }
+}

otis/src/app/compliance-list/compliance-list-item.ts

@@ -0,0 +1,20 @@
+export class ComplianceListItem {
+  id: string;
+  officeFileNumber: string;
+  courtNumber: string;
+  itemNumber: string;
+  title: string;
+  proceedings: string;
+  complianceDate: string;
+
+  public constructor(init?: Partial<ComplianceListItem>) {
+    this.id = '';
+    this.officeFileNumber = '';
+    this.courtNumber = '';
+    this.itemNumber = '';
+    this.title = '';
+    this.proceedings = '';
+    this.complianceDate = '';
+    Object.assign(this, init);
+  }
+}

otis/src/app/compliance-list/compliance-list-resolver.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { ComplianceListResolver } from './compliance-list-resolver.service';
+
+describe('ComplianceListResolverService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ComplianceListResolver],
+    });
+  });
+
+  it('should be created', inject([ComplianceListResolver], (service: ComplianceListResolver) => {
+    expect(service).toBeTruthy();
+  }));
+});

otis/src/app/compliance-list/compliance-list-resolver.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+
+import { ComplianceList } from './compliance-list';
+import { ComplianceListService } from './compliance-list.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ComplianceListResolver implements Resolve<ComplianceList> {
+  constructor(private ser: ComplianceListService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<ComplianceList> {
+    const date = route.queryParamMap.get('date') || null;
+    return this.ser.list(date);
+  }
+}

otis/src/app/compliance-list/compliance-list-routing.module.spec.ts

@@ -0,0 +1,13 @@
+import { ComplianceListRoutingModule } from './compliance-list-routing.module';
+
+describe('ComplianceListRoutingModule', () => {
+  let complianceListRoutingModule: ComplianceListRoutingModule;
+
+  beforeEach(() => {
+    complianceListRoutingModule = new ComplianceListRoutingModule();
+  });
+
+  it('should create an instance', () => {
+    expect(complianceListRoutingModule).toBeTruthy();
+  });
+});

otis/src/app/compliance-list/compliance-list-routing.module.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AuthGuard } from '../auth/auth-guard.service';
+
+import { ComplianceListResolver } from './compliance-list-resolver.service';
+import { ComplianceListComponent } from './compliance-list.component';
+const advocatesRoutes: Routes = [
+  {
+    path: '',
+    component: ComplianceListComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Cases',
+    },
+    resolve: {
+      info: ComplianceListResolver,
+    },
+    runGuardsAndResolvers: 'always',
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(advocatesRoutes)],
+  exports: [RouterModule],
+  providers: [ComplianceListResolver],
+})
+export class ComplianceListRoutingModule {}

otis/src/app/compliance-list/compliance-list.component.html

@@ -0,0 +1,68 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Compliances</mat-card-title>
+  </mat-card-title-group>
+  <mat-card-content>
+    <form [formGroup]="form" fxLayout="column">
+      <div
+        fxLayout="row"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+        fxLayoutAlign="space-around start"
+      >
+        <mat-form-field fxFlex="60%">
+          <input
+            matInput
+            [matDatepicker]="date"
+            (focus)="date.open()"
+            placeholder="Date"
+            formControlName="date"
+            autocomplete="off"
+          />
+          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+          <mat-datepicker #date></mat-datepicker>
+        </mat-form-field>
+        <button mat-raised-button color="primary" (click)="show()" fxFlex="40%">Show</button>
+      </div>
+    </form>
+    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
+      <!-- Office File Number Column -->
+      <ng-container matColumnDef="officeFileNumber">
+        <mat-header-cell *matHeaderCellDef>File No.</mat-header-cell>
+        <mat-cell *matCellDef="let row"
+          ><a [routerLink]="['/cases', row.id]">{{ row.officeFileNumber }}</a></mat-cell
+        >
+      </ng-container>
+
+      <!-- Title Column -->
+      <ng-container matColumnDef="title">
+        <mat-header-cell *matHeaderCellDef>Title</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.title }}</mat-cell>
+      </ng-container>
+
+      <!-- Proceedings Column -->
+      <ng-container matColumnDef="proceedings">
+        <mat-header-cell *matHeaderCellDef>Proceedings</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.proceedings }}</mat-cell>
+      </ng-container>
+
+      <!-- Compliance Date Column -->
+      <ng-container matColumnDef="complianceDate">
+        <mat-header-cell *matHeaderCellDef>Compliance Date</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.complianceDate }}</mat-cell>
+      </ng-container>
+
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+    <mat-paginator
+      #paginator
+      [length]="0"
+      [pageIndex]="0"
+      [pageSize]="10"
+      [pageSizeOptions]="[10, 25, 50, 100, 250]"
+    >
+    </mat-paginator>
+  </mat-card-content>
+</mat-card>

otis/src/app/compliance-list/compliance-list.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { ComplianceListComponent } from './compliance-list.component';
+
+describe('ComplianceListComponent', () => {
+  let component: ComplianceListComponent;
+  let fixture: ComponentFixture<ComplianceListComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ComplianceListComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComplianceListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

otis/src/app/compliance-list/compliance-list.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as moment from 'moment';
+
+import { ComplianceList } from './compliance-list';
+import { ComplianceListDatasource } from './compliance-list-datasource';
+
+@Component({
+  selector: 'app-compliance-list',
+  templateUrl: './compliance-list.component.html',
+  styleUrls: ['./compliance-list.component.css'],
+})
+export class ComplianceListComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  form: FormGroup;
+  info: ComplianceList = new ComplianceList();
+  dataSource: ComplianceListDatasource = new ComplianceListDatasource(this.info.items);
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['officeFileNumber', 'title', 'proceedings', 'complianceDate'];
+
+  constructor(private route: ActivatedRoute, private router: Router, private fb: FormBuilder) {
+    // Create form
+    this.form = this.fb.group({
+      date: '',
+    });
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((value) => {
+      const data = value as { info: ComplianceList };
+
+      this.info = data.info;
+      this.form.setValue({
+        date: moment(this.info.date, 'DD-MMM-YYYY').toDate(),
+      });
+      this.dataSource = new ComplianceListDatasource(this.info.items, this.paginator);
+    });
+  }
+
+  show() {
+    const info = this.getInfo();
+    this.router.navigate(['compliance-list'], {
+      queryParams: {
+        date: info.date,
+      },
+    });
+  }
+
+  getInfo(): ComplianceList {
+    const formModel = this.form.value;
+
+    return new ComplianceList({
+      date: moment(formModel.date).format('DD-MMM-YYYY'),
+    });
+  }
+}

otis/src/app/compliance-list/compliance-list.module.spec.ts

@@ -0,0 +1,13 @@
+import { ComplianceListModule } from './compliance-list.module';
+
+describe('ComplianceListModule', () => {
+  let complianceListModule: ComplianceListModule;
+
+  beforeEach(() => {
+    complianceListModule = new ComplianceListModule();
+  });
+
+  it('should create an instance', () => {
+    expect(complianceListModule).toBeTruthy();
+  });
+});

otis/src/app/compliance-list/compliance-list.module.ts

@@ -0,0 +1,63 @@
+import { CdkTableModule } from '@angular/cdk/table';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule,
+} from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+
+import { ComplianceListRoutingModule } from './compliance-list-routing.module';
+import { ComplianceListComponent } from './compliance-list.component';
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'DD-MMM-YYYY',
+  },
+  display: {
+    dateInput: 'DD-MMM-YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'DD-MMM-YYYY',
+    monthYearA11yLabel: 'MMM YYYY',
+  },
+};
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CdkTableModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    ReactiveFormsModule,
+    ComplianceListRoutingModule,
+    MatSelectModule,
+    MatPaginatorModule,
+    MatDatepickerModule,
+    MatDialogModule,
+  ],
+  declarations: [ComplianceListComponent],
+  providers: [
+    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+  ],
+})
+export class ComplianceListModule {}

otis/src/app/compliance-list/compliance-list.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { ComplianceListService } from './compliance-list.service';
+
+describe('ComplianceListService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ComplianceListService],
+    });
+  });
+
+  it('should be created', inject([ComplianceListService], (service: ComplianceListService) => {
+    expect(service).toBeTruthy();
+  }));
+});

otis/src/app/compliance-list/compliance-list.service.ts

@@ -0,0 +1,28 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { catchError } from 'rxjs/operators';
+
+import { ErrorLoggerService } from '../core/error-logger.service';
+
+import { ComplianceList } from './compliance-list';
+
+const url = '/api/compliance-list';
+const serviceName = 'ComplianceListService';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ComplianceListService {
+  constructor(private http: HttpClient, private log: ErrorLoggerService) {}
+
+  list(date: string | null): Observable<ComplianceList> {
+    const options = { params: new HttpParams() };
+    if (date !== null) {
+      options.params = options.params.set('d', date);
+    }
+    return this.http
+      .get<ComplianceList>(url, options)
+      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<ComplianceList>;
+  }
+}

otis/src/app/compliance-list/compliance-list.ts

@@ -0,0 +1,12 @@
+import { ComplianceListItem } from './compliance-list-item';
+
+export class ComplianceList {
+  date: string;
+  items: ComplianceListItem[];
+
+  public constructor(init?: Partial<ComplianceList>) {
+    this.date = '';
+    this.items = [];
+    Object.assign(this, init);
+  }
+}

otis/src/app/nav-bar/nav-bar.component.html

@@ -4,6 +4,7 @@
     Home
   </a>
   <a mat-button [routerLink]="['/cause-list']">Cause List</a>
+  <a mat-button [routerLink]="['/compliance-list']">Compliance List</a>
   <mat-menu #mastersMenu="matMenu">
     <a mat-menu-item routerLink="/acts">Acts</a>
     <a mat-menu-item routerLink="/advocates">Advocates</a>