After fixing the initial data.

In the Hearing table made the changes
1. Unique constraint on next_hearing_date & case_id
2. Made case_id non nullable as without it the data is garbage
3. Made the court_status_id in hearing non nullable

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

@@ -438,7 +438,6 @@
         <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>
@@ -521,7 +520,7 @@
         <!-- 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>
+          <mat-cell *matCellDef="let row" class="right">{{ row.courtStatus.name }}</mat-cell>
         </ng-container>
 
         <!-- Proceedings Column -->

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

@@ -351,14 +351,10 @@ export class CaseDetailComponent implements OnInit, AfterViewInit {
     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 latestStatus = new CourtStatus({
+      id: formValue.latestStatus,
+      name: (this.courtStatuses.find((x) => x.id === formValue.latestStatus) as CourtStatus).name,
+    });
 
     const proceedings = formValue.proceedings;
     const complianceDate = formValue.complianceDate

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

@@ -49,7 +49,6 @@
       <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>

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

@@ -35,7 +35,7 @@ export class HearingDialogComponent implements OnInit {
       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 : '',
+      latestStatus: this.data.hearing.courtStatus.id,
       proceedings: this.data.hearing.proceedings,
       complianceDate: this.data.hearing.complianceDate
         ? moment(this.data.hearing.complianceDate, 'DD-MMM-YYYY').toDate()
@@ -52,15 +52,11 @@ export class HearingDialogComponent implements OnInit {
     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.courtStatus = new CourtStatus({
+      id: formValue.latestStatus,
+      name: (this.data.courtStatuses.find((x) => x.id === formValue.latestStatus) as CourtStatus)
+        .name,
+    });
     this.data.hearing.proceedings = formValue.proceedings;
     this.data.hearing.complianceDate = formValue.complianceDate
       ? moment(formValue.complianceDate).format('DD-MMM-YYYY')

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

@@ -96,20 +96,6 @@
         <mat-cell *matCellDef="let row">{{ row.receiptDate }}</mat-cell>
       </ng-container>
 
-      <!-- Office Column -->
-      <ng-container matColumnDef="office">
-        <mat-header-cell *matHeaderCellDef>Office</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          >{{ row.department?.name }} / {{ row.office?.name }}</mat-cell
-        >
-      </ng-container>
-
-      <!-- Lower Court Case Number Column -->
-      <ng-container matColumnDef="lowerCourtCaseNumber">
-        <mat-header-cell *matHeaderCellDef>Lower Court Case Number</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.lowerCourtCaseNumber }}</mat-cell>
-      </ng-container>
-
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
     </mat-table>

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

@@ -35,8 +35,6 @@ export class CaseListComponent implements OnInit {
     'officeStatus',
     'remarks',
     'receiptDate',
-    'office',
-    'lowerCourtCaseNumber',
   ];
 
   constructor(private route: ActivatedRoute, private fb: FormBuilder, private ser: CaseService) {

otis/src/app/core/hearing.ts

@@ -5,7 +5,7 @@ export class Hearing {
   courtNumber: string;
   itemNumber: string;
   bench: string;
-  courtStatus: CourtStatus | null;
+  courtStatus: CourtStatus;
   proceedings: string;
   complianceDate: string | null;
   nextHearingDate: string | null;
@@ -15,7 +15,7 @@ export class Hearing {
     this.courtNumber = '';
     this.itemNumber = '';
     this.bench = '';
-    this.courtStatus = null;
+    this.courtStatus = new CourtStatus();
     this.proceedings = '';
     this.complianceDate = null;
     this.nextHearingDate = null;