580 lines
20 KiB
HTML
580 lines
20 KiB
HTML
<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>
|
|
<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>
|
|
<textarea
|
|
matInput
|
|
placeholder="Title"
|
|
formControlName="title"
|
|
autocomplete="off"
|
|
cdkTextareaAutosize
|
|
cdkAutosizeMinRows="2"
|
|
></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 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>
|
|
<mat-form-field fxFlex>
|
|
<mat-label>Number</mat-label>
|
|
<input matInput placeholder="Number" formControlName="respondentNo" />
|
|
</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>
|
|
<mat-form-field fxFlex>
|
|
<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>
|
|
<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 *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 / Action to be taken</mat-label>
|
|
<textarea
|
|
type="text"
|
|
matInput
|
|
placeholder="Proceedings / Action to be taken"
|
|
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="40%">
|
|
<mat-label>Compliance Date</mat-label>
|
|
<input
|
|
matInput
|
|
[matDatepicker]="complianceDate"
|
|
placeholder="Compliance Date"
|
|
formControlName="complianceDate"
|
|
autocomplete="off"
|
|
#complianceDateElement
|
|
(focus)="complianceDateElement.select()"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="complianceDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #complianceDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-checkbox formControlName="complianceDone" class="checkbox-align" fxFlex="40%"
|
|
>Compliance Done?</mat-checkbox
|
|
>
|
|
<button mat-raised-button color="primary" (click)="addHearing()" fxFlex="20%">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>
|
|
|
|
<!-- Compliance Date Column -->
|
|
<ng-container matColumnDef="complianceDate">
|
|
<mat-header-cell *matHeaderCellDef class="right">Compliance Date</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="right">{{ row.complianceDate }}</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"
|
|
[class.complied]="row.complianceDate && row.complianceDone"
|
|
[class.not-complied]="row.complianceDate && !row.complianceDone"
|
|
></mat-row>
|
|
</mat-table>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
|
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
|
|
Delete
|
|
</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</form>
|