Hearing Date is not not null and unique for the court case.

Data import also needs to reflect this.
Cause List made.

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

@@ -13,6 +13,10 @@ const routes: Routes = [
     path: 'advocates',
     loadChildren: () => import('./advocates/advocates.module').then((mod) => mod.AdvocatesModule),
   },
+  {
+    path: 'cause-list',
+    loadChildren: () => import('./cause-list/cause-list.module').then((mod) => mod.CauseListModule),
+  },
   {
     path: 'case-sources',
     loadChildren: () =>

otis/src/app/cases/case-detail/case-detail.component.ts

@@ -238,6 +238,7 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Case {
     const formModel = this.form.value;
+    this.item.caseSource.id = formModel.caseSource;
     this.item.officeFileNumber = formModel.officeFileNumber;
     this.item.courtCaseNumber = formModel.courtCaseNumber;
     this.item.year = formModel.year;

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

@@ -0,0 +1,43 @@
+import { DataSource } from '@angular/cdk/collections';
+import { EventEmitter } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { merge, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { Case } from '../core/case';
+
+export class CauseListDatasource extends DataSource<Case> {
+  private dataValues: Case[] = [];
+  private data: Observable<Case[]> = new Observable<Case[]>();
+  constructor(public d: Observable<Case[]>, private paginator?: MatPaginator) {
+    super();
+    this.data = d.pipe(tap((x) => (this.dataValues = x)));
+  }
+
+  connect(): Observable<Case[]> {
+    const dataMutations: (Observable<Case[]> | EventEmitter<PageEvent>)[] = [this.data];
+    if (this.paginator) {
+      dataMutations.push((this.paginator as MatPaginator).page);
+    }
+
+    return merge(...dataMutations)
+      .pipe(
+        tap((x: Case[]) => {
+          if (this.paginator) {
+            this.paginator.length = x.length;
+          }
+        }),
+      )
+      .pipe(map((x: Case[]) => this.getPagedData(this.dataValues)));
+  }
+
+  disconnect() {}
+
+  private getPagedData(data: Case[]) {
+    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/cause-list/cause-list-resolver.service.spec.ts

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

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+
+import { CauseList } from './cause-list';
+import { CauseListService } from './cause-list.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CauseListResolver implements Resolve<CauseList> {
+  constructor(private ser: CauseListService) {}
+
+  resolve(route: ActivatedRouteSnapshot): Observable<CauseList> {
+    const startDate = route.queryParamMap.get('startDate') || null;
+    const finishDate = route.queryParamMap.get('finishDate') || null;
+    return this.ser.list(startDate, finishDate);
+  }
+}

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

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

otis/src/app/cause-list/cause-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 { CauseListResolver } from './cause-list-resolver.service';
+import { CauseListComponent } from './cause-list.component';
+const advocatesRoutes: Routes = [
+  {
+    path: '',
+    component: CauseListComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Cases',
+    },
+    resolve: {
+      info: CauseListResolver,
+    },
+    runGuardsAndResolvers: 'always',
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(advocatesRoutes)],
+  exports: [RouterModule],
+  providers: [CauseListResolver],
+})
+export class CauseListRoutingModule {}

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

@@ -0,0 +1,128 @@
+<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">
+      <div
+        fxLayout="row"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+        fxLayoutAlign="space-around start"
+      >
+        <mat-form-field fxFlex="40">
+          <input
+            matInput
+            [matDatepicker]="startDate"
+            (focus)="startDate.open()"
+            placeholder="Start Date"
+            formControlName="startDate"
+            autocomplete="off"
+          />
+          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+          <mat-datepicker #startDate></mat-datepicker>
+        </mat-form-field>
+        <mat-form-field fxFlex="40">
+          <input
+            matInput
+            [matDatepicker]="finishDate"
+            (focus)="finishDate.open()"
+            placeholder="Finish Date"
+            formControlName="finishDate"
+            autocomplete="off"
+          />
+          <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>
+      </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.caseSource.prefix }}-{{ 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>
+
+      <!-- Court Case Number Column -->
+      <ng-container matColumnDef="courtCaseNumber">
+        <mat-header-cell *matHeaderCellDef>Case No.</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.courtCaseNumber }}</mat-cell>
+      </ng-container>
+
+      <!-- Forum Column -->
+      <ng-container matColumnDef="forum">
+        <mat-header-cell *matHeaderCellDef>Forum</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.court?.name }}</mat-cell>
+      </ng-container>
+
+      <!-- Court and Item Number Column -->
+      <ng-container matColumnDef="courtAndItemNumber">
+        <mat-header-cell *matHeaderCellDef>Court / Item Number</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ courtNumber(row) }} / {{ itemNumber(row) }}</mat-cell>
+      </ng-container>
+
+      <!-- Bench Column -->
+      <ng-container matColumnDef="bench">
+        <mat-header-cell *matHeaderCellDef>Bench</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ bench(row) }}</mat-cell>
+      </ng-container>
+
+      <!-- Proceedings Column -->
+      <ng-container matColumnDef="proceedings">
+        <mat-header-cell *matHeaderCellDef>Proceedings</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ proceedings(row) }}</mat-cell>
+      </ng-container>
+
+      <!-- Next Hearing Date Column -->
+      <ng-container matColumnDef="nextHearingDate">
+        <mat-header-cell *matHeaderCellDef>Next Hearing Date</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ nextHearingDate(row) }}</mat-cell>
+      </ng-container>
+
+      <!-- Appear On Behalf Of Column -->
+      <ng-container matColumnDef="appearOnBehalfOf">
+        <mat-header-cell *matHeaderCellDef>On Behalf of</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.appearOnBehalfOf }}</mat-cell>
+      </ng-container>
+
+      <!-- Other Hearing Dates Column -->
+      <ng-container matColumnDef="otherHearingDates">
+        <mat-header-cell *matHeaderCellDef>Other Hearing Dates</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ otherHearingDates(row) }}</mat-cell>
+      </ng-container>
+
+      <!-- Remarks Column -->
+      <ng-container matColumnDef="remarks">
+        <mat-header-cell *matHeaderCellDef>Remarks</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.remarks }}</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/cause-list/cause-list.component.spec.ts

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

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

@@ -0,0 +1,112 @@
+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 { Observable, of } from 'rxjs';
+
+import { Case } from '../core/case';
+
+import { CauseList } from './cause-list';
+import { CauseListDatasource } from './cause-list-datasource';
+
+@Component({
+  selector: 'app-cause-list',
+  templateUrl: './cause-list.component.html',
+  styleUrls: ['./cause-list.component.css'],
+})
+export class CauseListComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
+  form: FormGroup;
+  info: CauseList = new CauseList();
+  list: Observable<Case[]> = new Observable<Case[]>();
+  dataSource: CauseListDatasource = new CauseListDatasource(this.list);
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = [
+    'officeFileNumber',
+    'title',
+    'courtCaseNumber',
+    'forum',
+    'courtAndItemNumber',
+    'bench',
+    'proceedings',
+    'nextHearingDate',
+    'appearOnBehalfOf',
+    'otherHearingDates',
+    'remarks',
+  ];
+
+  constructor(private route: ActivatedRoute, private router: Router, private fb: FormBuilder) {
+    // Create form
+    this.form = this.fb.group({
+      startDate: '',
+      finishDate: '',
+    });
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((value) => {
+      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(),
+      });
+      this.list = of(this.info.cases);
+      this.dataSource = new CauseListDatasource(this.list, this.paginator);
+    });
+  }
+
+  courtNumber(row: Case): string {
+    const [hearing] = row.hearings;
+    return hearing.courtNumber;
+  }
+
+  itemNumber(row: Case): string {
+    const [hearing] = row.hearings;
+    return hearing.itemNumber;
+  }
+
+  bench(row: Case): string {
+    const [hearing] = row.hearings;
+    return hearing.bench;
+  }
+
+  proceedings(row: Case): string {
+    const [hearing] = row.hearings;
+    return hearing.proceedings;
+  }
+
+  nextHearingDate(row: Case): string {
+    const [hearing] = row.hearings;
+    return hearing.nextHearingDate || '';
+  }
+
+  otherHearingDates(row: Case): string {
+    return row.hearings
+      .map((x) => x.nextHearingDate)
+      .filter((x) => !!x)
+      .join(', ');
+  }
+
+  show() {
+    const info = this.getInfo();
+    this.router.navigate(['cause-list'], {
+      queryParams: {
+        startDate: info.startDate,
+        finishDate: info.finishDate,
+      },
+    });
+  }
+
+  getInfo(): CauseList {
+    const formModel = this.form.value;
+
+    return new CauseList({
+      startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
+      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
+    });
+  }
+}

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

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

otis/src/app/cause-list/cause-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 { CauseListRoutingModule } from './cause-list-routing.module';
+import { CauseListComponent } from './cause-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,
+    CauseListRoutingModule,
+    MatSelectModule,
+    MatPaginatorModule,
+    MatDatepickerModule,
+    MatDialogModule,
+  ],
+  declarations: [CauseListComponent],
+  providers: [
+    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+  ],
+})
+export class CauseListModule {}

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

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

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

@@ -0,0 +1,31 @@
+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 { CauseList } from './cause-list';
+
+const url = '/api/cause-list';
+const serviceName = 'CauseListService';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CauseListService {
+  constructor(private http: HttpClient, private log: ErrorLoggerService) {}
+
+  list(startDate: string | null, finishDate: string | null): Observable<CauseList> {
+    const options = { params: new HttpParams() };
+    if (startDate !== null) {
+      options.params = options.params.set('s', startDate);
+    }
+    if (finishDate !== null) {
+      options.params = options.params.set('f', finishDate);
+    }
+    return this.http
+      .get<CauseList>(url, options)
+      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<CauseList>;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Case } from '../core/case';
+
+export class CauseList {
+  startDate: string;
+  finishDate: string;
+  cases: Case[];
+
+  public constructor(init?: Partial<CauseList>) {
+    this.startDate = '';
+    this.finishDate = '';
+    this.cases = [];
+    Object.assign(this, init);
+  }
+}

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

@@ -3,7 +3,7 @@
     <mat-icon>home</mat-icon>
     Home
   </a>
-  <a mat-button [routerLink]="['/cases']"> Cases </a>
+  <a mat-button [routerLink]="['/cause-list']">Cause List</a>
   <mat-menu #mastersMenu="matMenu">
     <a mat-menu-item routerLink="/acts">Acts</a>
     <a mat-menu-item routerLink="/advocates">Advocates</a>