Added all the fields to case detail

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

@@ -21,6 +21,20 @@
               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"
@@ -45,6 +59,20 @@
             <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"
@@ -84,7 +112,7 @@
         >
           <mat-form-field fxFlex>
             <mat-label>Connected Cases</mat-label>
-            <input matInput placeholder="Connected Cases" formControlName="connectedCases" />
+            <input matInput placeholder="Connected Cases" formControlName="caseConnectedWith" />
           </mat-form-field>
         </div>
         <div
@@ -136,8 +164,8 @@
             </mat-select>
           </mat-form-field>
           <mat-form-field fxFlex>
-            <mat-label>Department</mat-label>
-            <mat-select placeholder="Department" formControlName="office">
+            <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 }}
@@ -154,7 +182,7 @@
         >
           <mat-form-field fxFlex>
             <mat-label>Contact Person</mat-label>
-            <input matInput placeholder="Contact Person" formControlName="contactPerson" />
+            <input matInput placeholder="Contact Person" formControlName="contactDetail" />
           </mat-form-field>
         </div>
         <div
@@ -209,6 +237,157 @@
             </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>

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

@@ -1,3 +1,4 @@
+import * as moment from 'moment';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
@@ -111,16 +112,16 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
       year: this.item.year,
       title: this.item.title,
       docketNumber: this.item.docketNumber,
-      receiptDate: this.item.receiptDate,
-      limitationDate: this.item.limitationDate,
-      filingDate: this.item.filingDate,
+      receiptDate: moment(this.item.receiptDate, 'DD-MMM-YYYY').toDate(),
+      limitationDate: moment(this.item.limitationDate, 'DD-MMM-YYYY').toDate(),
+      filingDate: moment(this.item.filingDate, 'DD-MMM-YYYY').toDate(),
       appearOnBehalfOf: this.item.appearOnBehalfOf,
       questionOfLaw: this.item.questionOfLaw,
       aorName: this.item.aorName,
       opposingCouncilAor: this.item.opposingCouncilAor,
       opposingCouncilDetail: this.item.opposingCouncilDetail,
       lowerCourtCaseNumber: this.item.lowerCourtCaseNumber,
-      dateOfImpugnedJudgement: this.item.dateOfImpugnedJudgement,
+      dateOfImpugnedJudgement: moment(this.item.dateOfImpugnedJudgement, 'DD-MMM-YYYY').toDate(),
       briefDescription: this.item.briefDescription,
       remarks: this.item.remarks,
       slpCounter: this.item.slpCounter,

otis/src/app/cases/cases.module.ts

@@ -3,8 +3,16 @@ 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 { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -16,6 +24,19 @@ import { CaseDetailComponent } from './case-detail/case-detail.component';
 import { CaseListComponent } from './case-list/case-list.component';
 import { CasesRoutingModule } from './cases-routing.module';
 
+
+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,
@@ -31,7 +52,12 @@ import { CasesRoutingModule } from './cases-routing.module';
     CasesRoutingModule,
     MatSelectModule,
     MatPaginatorModule,
+    MatDatepickerModule,
   ],
   declarations: [CaseListComponent, CaseDetailComponent],
+  providers: [
+    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+  ],
 })
 export class CasesModule {}