tanshu/luthor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cases add/edit should be working now. Along with the hearings in it

Browse Source
This commit is contained in:
Amritanshu Agrawal
2021-01-18 09:00:30 +05:30
parent 8845ee6a81
commit 8fe385e601
17 changed files with 1013 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
otis/src/app/cases/case-detail/case-detail-datasource.ts Normal file
View File

@ -0,0 +1,16 @@
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs';
import { Hearing } from '../../core/hearing';
export class HearingDatasource extends DataSource<Hearing> {
constructor(private data: Observable<Hearing[]>) {
super();
}
connect(): Observable<Hearing[]> {
return this.data;
}
disconnect() {}
}

3
otis/src/app/cases/case-detail/case-detail.component.css
View File

@ -1,3 +1,6 @@
.example-card {
max-width: 900px;
}
.right-align {
text-align: right;
}

924
otis/src/app/cases/case-detail/case-detail.component.html
View File

@ -1,402 +1,536 @@
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
<form [formGroup]="form" fxFlex="75%" fxLayout="column">
<mat-card fxFlex>
<mat-card-title-group>
<mat-card-title>Case</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Source</mat-label>
<mat-select placeholder="Source" formControlName="caseSource">
<mat-option *ngFor="let cs of caseSources" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office File Number</mat-label>
<input
matInput
#nameElement
placeholder="Office File Number"
formControlName="officeFileNumber"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Receipt Date</mat-label>
<input
matInput
[matDatepicker]="receiptDate"
placeholder="Receipt Date"
formControlName="receiptDate"
autocomplete="off"
#receiptDateElement
(focus)="receiptDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="receiptDate"></mat-datepicker-toggle>
<mat-datepicker #receiptDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Title</mat-label>
<input matInput placeholder="Title" formControlName="title" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Case Number</mat-label>
<input matInput placeholder="Court Case Number" formControlName="courtCaseNumber" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Filing Date</mat-label>
<input
matInput
[matDatepicker]="filingDate"
placeholder="Filing Date"
formControlName="filingDate"
autocomplete="off"
#filingDateElement
(focus)="filingDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="filingDate"></mat-datepicker-toggle>
<mat-datepicker #filingDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Case Type</mat-label>
<mat-select placeholder="Case Type" formControlName="caseType">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let ct of caseTypes" [value]="ct.id">
{{ ct.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Year</mat-label>
<input matInput placeholder="Year" formControlName="year" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Connected Cases</mat-label>
<input matInput placeholder="Connected Cases" formControlName="caseConnectedWith" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Appearing for the</mat-label>
<mat-select placeholder="Appearing for the" formControlName="appearOnBehalfOf">
<mat-option value="Petitioner">Petitioner</mat-option>
<mat-option value="Respondent">Respondent</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Forum</mat-label>
<mat-select placeholder="Forum" formControlName="court">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let c of courts" [value]="c.id">
{{ c.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Department</mat-label>
<mat-select placeholder="Department" formControlName="department">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let d of departments" [value]="d.id">
{{ d.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office</mat-label>
<mat-select placeholder="Office" formControlName="office">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let o of offices | async" [value]="o.id">
{{ o.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Contact Person</mat-label>
<input matInput placeholder="Contact Person" formControlName="contactDetail" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Status</mat-label>
<mat-select placeholder="Court Status" formControlName="courtStatus">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let cs of courtStatuses" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office Status</mat-label>
<mat-select placeholder="Office Status" formControlName="officeStatus">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let os of officeStatuses" [value]="os.id">
{{ os.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Act</mat-label>
<mat-select placeholder="Act" formControlName="act">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let a of acts" [value]="a.id">
{{ a.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Nature</mat-label>
<mat-select placeholder="Nature" formControlName="nature">
<mat-option value=""> -- Not Applicable -- </mat-option>
<mat-option *ngFor="let n of natures" [value]="n.id">
{{ n.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Docket No of Departments/ Legal Cell</mat-label>
<input
matInput
placeholder="Docket No of Departments/ Legal Cell"
formControlName="docketNumber"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Petition/Counter</mat-label>
<input matInput placeholder="Petition/Counter" formControlName="slpCounter" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Question of Law</mat-label>
<input matInput placeholder="Question of Law" formControlName="questionOfLaw" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Brief Description</mat-label>
<input matInput placeholder="(Synopsis)" formControlName="briefDescription" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Advocate on Record</mat-label>
<input matInput placeholder="Advocate on Record" formControlName="aorName" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Opposing Advocate on Record</mat-label>
<input
matInput
placeholder="Opposing Advocate on Record"
formControlName="opposingCouncilAor"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Previous Court Case No</mat-label>
<input
matInput
placeholder="Lower Court Case No"
formControlName="lowerCourtCaseNumber"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Date of Impunged Judgement</mat-label>
<input
matInput
[matDatepicker]="dateOfImpugnedJudgement"
placeholder="Date of Impunged Judgement"
formControlName="dateOfImpugnedJudgement"
autocomplete="off"
#dateOfImpugnedJudgementElement
(focus)="dateOfImpugnedJudgementElement.select()"
/>
<mat-datepicker-toggle
matSuffix
[for]="dateOfImpugnedJudgement"
></mat-datepicker-toggle>
<mat-datepicker #dateOfImpugnedJudgement></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Date of Limitation/Target</mat-label>
<input
matInput
[matDatepicker]="limitationDate"
placeholder="Date of Limitation/Target"
formControlName="limitationDate"
autocomplete="off"
#limitationDateElement
(focus)="limitationDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="limitationDate"></mat-datepicker-toggle>
<mat-datepicker #limitationDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Bunch Cases</mat-label>
<input matInput placeholder="Bunch Cases" formControlName="bunchCases" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Remarks/Status</mat-label>
<input matInput placeholder="Remarks/Status" formControlName="remarks" />
</mat-form-field>
</div>
</form>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Source</mat-label>
<mat-select placeholder="Source" formControlName="caseSource">
<mat-option *ngFor="let cs of caseSources" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office File Number</mat-label>
<input
matInput
#nameElement
placeholder="Office File Number"
formControlName="officeFileNumber"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Receipt Date</mat-label>
<input
matInput
[matDatepicker]="receiptDate"
placeholder="Receipt Date"
formControlName="receiptDate"
autocomplete="off"
#receiptDateElement
(focus)="receiptDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="receiptDate"></mat-datepicker-toggle>
<mat-datepicker #receiptDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Title</mat-label>
<input matInput placeholder="Title" formControlName="title" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Case Number</mat-label>
<input matInput placeholder="Court Case Number" formControlName="courtCaseNumber" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Year</mat-label>
<input matInput placeholder="Year" formControlName="year" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Filing Date</mat-label>
<input
matInput
[matDatepicker]="filingDate"
placeholder="Filing Date"
formControlName="filingDate"
autocomplete="off"
#filingDateElement
(focus)="filingDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="filingDate"></mat-datepicker-toggle>
<mat-datepicker #filingDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Forum</mat-label>
<mat-select placeholder="Forum" formControlName="court">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let c of courts" [value]="c.id">
{{ c.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Case Type</mat-label>
<mat-select placeholder="Case Type" formControlName="caseType">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let ct of caseTypes" [value]="ct.id">
{{ ct.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Appearing for the</mat-label>
<mat-select placeholder="Appearing for the" formControlName="appearOnBehalfOf">
<mat-option value="Petitioner">Petitioner</mat-option>
<mat-option value="Respondent">Respondent</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Connected Cases</mat-label>
<input matInput placeholder="Connected Cases" formControlName="caseConnectedWith" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Department</mat-label>
<mat-select placeholder="Department" formControlName="department">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let d of departments" [value]="d.id">
{{ d.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office</mat-label>
<mat-select placeholder="Office" formControlName="office">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let o of offices | async" [value]="o.id">
{{ o.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Contact Person</mat-label>
<textarea
matInput
placeholder="Contact Person"
formControlName="contactDetail"
></textarea>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Status</mat-label>
<mat-select placeholder="Court Status" formControlName="courtStatus">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let cs of courtStatuses" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Office Status</mat-label>
<mat-select placeholder="Office Status" formControlName="officeStatus">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let os of officeStatuses" [value]="os.id">
{{ os.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Act</mat-label>
<mat-select placeholder="Act" formControlName="act">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let a of acts" [value]="a.id">
{{ a.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Nature</mat-label>
<mat-select placeholder="Nature" formControlName="nature">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let n of natures" [value]="n.id">
{{ n.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Docket No of Departments/ Legal Cell</mat-label>
<input
matInput
placeholder="Docket No of Departments/ Legal Cell"
formControlName="docketNumber"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Petition/Counter</mat-label>
<input matInput placeholder="Petition/Counter" formControlName="slpCounter" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Question of Law</mat-label>
<textarea
matInput
placeholder="Question of Law"
formControlName="questionOfLaw"
></textarea>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Brief Description</mat-label>
<textarea matInput placeholder="(Synopsis)" formControlName="briefDescription"></textarea>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Advocate on Record</mat-label>
<input matInput placeholder="Advocate on Record" formControlName="aorName" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Opposing Advocate on Record</mat-label>
<input
matInput
placeholder="Opposing Advocate on Record"
formControlName="opposingCouncilAor"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Previous Court Case No</mat-label>
<input
matInput
placeholder="Lower Court Case No"
formControlName="lowerCourtCaseNumber"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Date of Impunged Judgement</mat-label>
<input
matInput
[matDatepicker]="dateOfImpugnedJudgement"
placeholder="Date of Impunged Judgement"
formControlName="dateOfImpugnedJudgement"
autocomplete="off"
#dateOfImpugnedJudgementElement
(focus)="dateOfImpugnedJudgementElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="dateOfImpugnedJudgement"></mat-datepicker-toggle>
<mat-datepicker #dateOfImpugnedJudgement></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Date of Limitation/Target</mat-label>
<input
matInput
[matDatepicker]="limitationDate"
placeholder="Date of Limitation/Target"
formControlName="limitationDate"
autocomplete="off"
#limitationDateElement
(focus)="limitationDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="limitationDate"></mat-datepicker-toggle>
<mat-datepicker #limitationDate></mat-datepicker>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Bunch Cases</mat-label>
<input matInput placeholder="Bunch Cases" formControlName="bunchCases" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Remarks/Status</mat-label>
<textarea matInput placeholder="Remarks/Status" formControlName="remarks"></textarea>
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
<mat-card fxFlex>
<mat-card-title-group>
<mat-card-title>Hearings</mat-card-title>
</mat-card-title-group>
<mat-card-content formGroupName="addRow">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Number</mat-label>
<input
type="text"
matInput
placeholder="Court Number"
formControlName="courtNumber"
autocomplete="off"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Item Number</mat-label>
<input
type="text"
matInput
placeholder="Item Number"
formControlName="itemNumber"
autocomplete="off"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Bench</mat-label>
<input
type="text"
matInput
placeholder="Bench"
formControlName="bench"
autocomplete="off"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Latest Status</mat-label>
<mat-select placeholder="Latest Status" formControlName="latestStatus">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let cs of courtStatuses" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
fx
>
<mat-form-field fxFlex>
<mat-label>Proceedings</mat-label>
<textarea
type="text"
matInput
placeholder="Proceedings"
formControlName="proceedings"
autocomplete="off"
cdkTextareaAutosize
cdkAutosizeMinRows="5"
>
></textarea
>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="80%">
<mat-label>Next Hearing Date</mat-label>
<input
matInput
[matDatepicker]="nextHearingDate"
placeholder="Next Hearing Date"
formControlName="nextHearingDate"
autocomplete="off"
#nextHearingDateElement
(focus)="nextHearingDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="nextHearingDate"></mat-datepicker-toggle>
<mat-datepicker #nextHearingDate></mat-datepicker>
</mat-form-field>
<button mat-raised-button color="primary" (click)="addHearing()" fxFlex="80%">Add</button>
</div>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Item Number Column -->
<ng-container matColumnDef="itemNumber">
<mat-header-cell *matHeaderCellDef>Court and Item Number</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.courtNumber }} / {{ row.itemNumber }}</mat-cell>
</ng-container>
<!-- Bench Column -->
<ng-container matColumnDef="bench">
<mat-header-cell *matHeaderCellDef>Bench</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.bench }}</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="courtStatus">
<mat-header-cell *matHeaderCellDef class="right">Status</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.courtStatus?.name }}</mat-cell>
</ng-container>
<!-- Proceedings Column -->
<ng-container matColumnDef="proceedings">
<mat-header-cell *matHeaderCellDef class="right">Proceedings</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.proceedings }}</mat-cell>
</ng-container>
<!-- Next Hearing Date Column -->
<ng-container matColumnDef="nextHearingDate">
<mat-header-cell *matHeaderCellDef class="right">Next Hearing</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.nextHearingDate }}</mat-cell>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
<mat-cell *matCellDef="let row" class="center">
<button mat-icon-button tabindex="-1" (click)="editRow(row)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="save()">Save</button>
@ -405,4 +539,4 @@
</button>
</mat-card-actions>
</mat-card>
</div>
</form>

97
otis/src/app/cases/case-detail/case-detail.component.ts
View File

@ -3,7 +3,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { Observable } from 'rxjs';
import { BehaviorSubject, Observable } from 'rxjs';
import { distinctUntilChanged, startWith, switchMap } from 'rxjs/operators';
import { Act } from '../../core/act';
@ -13,14 +13,17 @@ import { CaseType } from '../../core/case-type';
import { Court } from '../../core/court';
import { CourtStatus } from '../../core/court-status';
import { Department } from '../../core/department';
import { Hearing } from '../../core/hearing';
import { Nature } from '../../core/nature';
import { Office } from '../../core/office';
import { OfficeStatus } from '../../core/office-status';
import { ToasterService } from '../../core/toaster.service';
import { OfficeService } from '../../offices/office.service';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { CaseService } from '../case.service';
import { HearingDatasource } from './case-detail-datasource';
import { HearingDialogComponent } from './hearing-dialog.component';
@Component({
selector: 'app-case-detail',
templateUrl: './case-detail.component.html',
@ -28,6 +31,8 @@ import { CaseService } from '../case.service';
})
export class CaseDetailComponent implements OnInit, AfterViewInit {
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
public hearingsObservable = new BehaviorSubject<Hearing[]>([]);
dataSource: HearingDatasource = new HearingDatasource(this.hearingsObservable);
form: FormGroup;
caseSources: CaseSource[] = [];
caseTypes: CaseType[] = [];
@ -40,6 +45,15 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
natures: Nature[] = [];
item: Case = new Case();
displayedColumns = [
'itemNumber',
'bench',
'courtStatus',
'proceedings',
'nextHearingDate',
'action',
];
constructor(
private route: ActivatedRoute,
private router: Router,
@ -80,6 +94,14 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
nature: '',
officeStatus: '',
courtStatus: '',
addRow: this.fb.group({
courtNumber: '',
itemNumber: '',
bench: '',
latestStatus: '',
proceedings: '',
nextHearingDate: '',
}),
});
}
@ -110,7 +132,7 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
showItem(item: Case) {
this.item = item;
this.form.setValue({
this.form.patchValue({
caseSource: this.item.caseSource.id,
officeFileNumber: this.item.officeFileNumber,
courtCaseNumber: this.item.courtCaseNumber,
@ -164,6 +186,7 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
this.form.patchValue({ officeFileNumber: x });
}
});
this.hearingsObservable.next(this.item.hearings);
}
ngAfterViewInit() {
@ -228,7 +251,6 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
} else {
this.item.limitationDate = moment(formModel.limitationDate).format('DD-MMM-YYYY');
}
console.log(formModel.filingDate);
if (formModel.filingDate === '') {
this.item.filingDate = null;
} else {
@ -320,4 +342,71 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
}
return this.item;
}
addHearing() {
const formValue = (this.form.get('addRow') as FormControl).value;
const courtNumber: string = formValue.courtNumber;
const itemNumber: string = formValue.itemNumber;
const bench: string = formValue.bench;
const latestStatus =
formValue.latestStatus === ''
? null
: new CourtStatus({
id: formValue.latestStatus,
name: (this.courtStatuses.find((x) => x.id === formValue.latestStatus) as CourtStatus)
.name,
});
const proceedings = formValue.proceedings;
const nextHearingDate =
formValue.nextHearingDate === ''
? null
: moment(formValue.nextHearingDate).format('DD-MMM-YYYY');
this.item.hearings.push(
new Hearing({
courtNumber,
itemNumber,
bench,
courtStatus: latestStatus,
proceedings,
nextHearingDate,
}),
);
this.hearingsObservable.next(this.item.hearings);
this.resetAddRow();
}
resetAddRow() {
(this.form.get('addRow') as FormControl).reset({
courtNumber: '',
itemNumber: '',
bench: '',
courtStatus: '',
proceedings: '',
nextHearingDate: '',
});
}
editRow(row: Hearing) {
const dialogRef = this.dialog.open(HearingDialogComponent, {
width: '750px',
data: { hearing: { ...row }, courtStatuses: this.courtStatuses },
});
dialogRef.afterClosed().subscribe((result: boolean | Hearing) => {
if (!result) {
return;
}
const h = result as Hearing;
Object.assign(row, h);
this.hearingsObservable.next(this.item.hearings);
this.resetAddRow();
});
}
deleteRow(row: Hearing) {
this.item.hearings.splice(this.item.hearings.indexOf(row), 1);
this.hearingsObservable.next(this.item.hearings);
}
}

0
otis/src/app/cases/case-detail/hearing-dialog.component.css Normal file
View File

109
otis/src/app/cases/case-detail/hearing-dialog.component.html Normal file
View File

@ -0,0 +1,109 @@
<h1 mat-dialog-title>Edit Journal Entry</h1>
<div mat-dialog-content>
<form [formGroup]="form">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Court Number</mat-label>
<input
type="text"
matInput
placeholder="Court Number"
formControlName="courtNumber"
autocomplete="off"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Item Number</mat-label>
<input
type="text"
matInput
placeholder="Item Number"
formControlName="itemNumber"
autocomplete="off"
/>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Bench</mat-label>
<input
type="text"
matInput
placeholder="Bench"
formControlName="bench"
autocomplete="off"
/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Latest Status</mat-label>
<mat-select placeholder="Latest Status" formControlName="latestStatus">
<mat-option value=""> -- Not Applicable --</mat-option>
<mat-option *ngFor="let cs of data.courtStatuses" [value]="cs.id">
{{ cs.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
fx
>
<mat-form-field fxFlex>
<mat-label>Proceedings</mat-label>
<textarea
type="text"
matInput
placeholder="Proceedings"
formControlName="proceedings"
autocomplete="off"
cdkTextareaAutosize
cdkAutosizeMinRows="5"
>
></textarea
>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="80%">
<mat-label>Next Hearing Date</mat-label>
<input
matInput
[matDatepicker]="nextHearingDate"
placeholder="Next Hearing Date"
formControlName="nextHearingDate"
autocomplete="off"
#nextHearingDateElement
(focus)="nextHearingDateElement.select()"
/>
<mat-datepicker-toggle matSuffix [for]="nextHearingDate"></mat-datepicker-toggle>
<mat-datepicker #nextHearingDate></mat-datepicker>
</mat-form-field>
</div>
</form>
</div>
<div mat-dialog-actions>
<button mat-button [mat-dialog-close]="false" cdkFocusInitial>Cancel</button>
<button mat-button (click)="accept()" color="primary">Ok</button>
</div>

26
otis/src/app/cases/case-detail/hearing-dialog.component.spec.ts Normal file
View File

@ -0,0 +1,26 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { HearingDialogComponent } from './hearing-dialog.component';
describe('HearingDialogComponent', () => {
let component: HearingDialogComponent;
let fixture: ComponentFixture<HearingDialogComponent>;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [HearingDialogComponent],
}).compileComponents();
}),
);
beforeEach(() => {
fixture = TestBed.createComponent(HearingDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

69
otis/src/app/cases/case-detail/hearing-dialog.component.ts Normal file
View File

@ -0,0 +1,69 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import * as moment from 'moment';
import { CourtStatus } from '../../core/court-status';
import { Hearing } from '../../core/hearing';
@Component({
selector: 'app-hearing-dialog',
templateUrl: './hearing-dialog.component.html',
styleUrls: ['./hearing-dialog.component.css'],
})
export class HearingDialogComponent implements OnInit {
form: FormGroup;
constructor(
public dialogRef: MatDialogRef<HearingDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { hearing: Hearing; courtStatuses: CourtStatus[] },
private fb: FormBuilder,
) {
this.form = this.fb.group({
courtNumber: '',
itemNumber: '',
bench: '',
latestStatus: '',
proceedings: '',
nextHearingDate: '',
});
}
ngOnInit() {
this.form.setValue({
courtNumber: this.data.hearing.courtNumber,
itemNumber: this.data.hearing.itemNumber,
bench: this.data.hearing.bench,
latestStatus: this.data.hearing.courtStatus ? this.data.hearing.courtStatus.id : '',
proceedings: this.data.hearing.proceedings,
nextHearingDate: this.data.hearing.nextHearingDate
? moment(this.data.hearing.nextHearingDate, 'DD-MMM-YYYY').toDate()
: '',
});
}
accept(): void {
const formValue = this.form.value;
this.data.hearing.courtNumber = formValue.courtNumber;
this.data.hearing.itemNumber = formValue.itemNumber;
this.data.hearing.bench = formValue.bench;
this.data.hearing.courtStatus =
formValue.latestStatus === ''
? null
: new CourtStatus({
id: formValue.latestStatus,
name: (this.data.courtStatuses.find(
(x) => x.id === formValue.latestStatus,
) as CourtStatus).name,
});
this.data.hearing.proceedings = formValue.proceedings;
if (formValue.nextHearingDate === '') {
this.data.hearing.nextHearingDate = null;
} else {
this.data.hearing.nextHearingDate = moment(formValue.nextHearingDate).format('DD-MMM-YYYY');
}
this.dialogRef.close(this.data.hearing);
}
}

5
otis/src/app/cases/cases.module.ts
View File

@ -13,6 +13,7 @@ import {
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';
@ -21,6 +22,7 @@ import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { CaseDetailComponent } from './case-detail/case-detail.component';
import { HearingDialogComponent } from './case-detail/hearing-dialog.component';
import { CaseListComponent } from './case-list/case-list.component';
import { CasesRoutingModule } from './cases-routing.module';
@ -52,8 +54,9 @@ export const MY_FORMATS = {
MatSelectModule,
MatPaginatorModule,
MatDatepickerModule,
MatDialogModule,
],
declarations: [CaseListComponent, CaseDetailComponent],
declarations: [CaseListComponent, CaseDetailComponent, HearingDialogComponent],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },

3
otis/src/app/core/case.ts
View File

@ -4,6 +4,7 @@ import { CaseType } from './case-type';
import { Court } from './court';
import { CourtStatus } from './court-status';
import { Department } from './department';
import { Hearing } from './hearing';
import { Nature } from './nature';
import { Office } from './office';
import { OfficeStatus } from './office-status';
@ -40,6 +41,7 @@ export class Case {
nature?: Nature;
officeStatus?: OfficeStatus;
courtStatus?: CourtStatus;
hearings: Hearing[];
public constructor(init?: Partial<Case>) {
this.id = undefined;
@ -65,6 +67,7 @@ export class Case {
this.contactDetail = '';
this.caseConnectedWith = '';
this.bunchCases = '';
this.hearings = [];
Object.assign(this, init);
}
}

22
otis/src/app/core/hearing.ts Normal file
View File

@ -0,0 +1,22 @@
import { CourtStatus } from './court-status';
export class Hearing {
id: string | undefined;
courtNumber: string;
itemNumber: string;
bench: string;
courtStatus: CourtStatus | null;
proceedings: string;
nextHearingDate: string | null;
public constructor(init?: Partial<Hearing>) {
this.id = undefined;
this.courtNumber = '';
this.itemNumber = '';
this.bench = '';
this.courtStatus = null;
this.proceedings = '';
this.nextHearingDate = '';
Object.assign(this, init);
}
}