luthor/otis/src/app/cases/case-detail/case-detail.component.html

<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
  <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>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>
    </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>
</div>