Bug/ex UI 2346 hidden unavailable dates (#1778)

* Add the fix for arrays within case read field table Add dummy path and test to ensure show condition actually works as expected * Add new version * Change version * Update npmpublish.yml * Update npmpublish.yml * Update npmpublish.yml * Change version * Make fix to evidence issue * release notes updated --------- Co-authored-by: Ritesh Dsouza <[email protected]>
hmcts · Oct 24, 2024 · 067f0d4 · 067f0d4
1 parent 697af4d
commit 067f0d4
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 7 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,5 +1,10 @@
 ## RELEASE NOTES 
 
+### Version 7.0.70
+**EXUI-2193** Get rid of mc-menu-items LD flag
+**EXUI-2346** Not able to see unavailable dates on check your answers page
+**EXUI-2460** Describe your evidence' free text boxes not being
+
 ### Version 7.0.69
 **EXUI-2354** Flakyness/slow login/Search issue
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.69",
+  "version": "7.0.70",
   "engines": {
     "node": ">=18.19.0"
   },

diff --git a/projects/ccd-case-ui-toolkit/package.json b/projects/ccd-case-ui-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "7.0.69",
+  "version": "7.0.70",
   "engines": {
     "node": ">=18.19.0"
   },

diff --git a/...lkit/src/lib/shared/components/palette/complex/read-complex-field-table.component.spec.ts b/...lkit/src/lib/shared/components/palette/complex/read-complex-field-table.component.spec.ts
@@ -254,6 +254,126 @@ describe('ReadComplexFieldTableComponent', () => {
 
       expect(compoundRowsValues[0].componentInstance.context).toEqual(PaletteContext.CHECK_YOUR_ANSWER);
     });
+
+    it('should set the dummy path for child fields correctly', () => {
+      component.idPrefix = 'testString';
+      component.ngOnInit();
+      expect(component.path).toBe(ReadComplexFieldTableComponent.DUMMY_STRING_PRE + component.idPrefix + ReadComplexFieldTableComponent.DUMMY_STRING_POST);
+    });
+
+    it('should show child fields based on show conditions', () => {
+      component.caseField = (({
+        field_type: {
+          collection_field_type: null,
+          complex_fields: [
+            {
+              id: 'unavailableDateType',
+              display_context: 'MANDATORY',
+              field_type: {
+                type: 'FixedRadioList'
+              }
+            },
+            {
+              id: 'date',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"SINGLE_DATE\"',
+              field_type: {
+                type: 'Date'
+              }
+            },
+            {
+              id: 'fromDate',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"DATE_RANGE\"',
+              field_type: {
+                type: 'Date'
+              }
+            },
+            {
+              id: 'toDate',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"DATE_RANGE\"',
+              field_type: {
+                type: 'Date'
+              }
+            }
+          ],
+          id: 'MediationUnavailableDate',
+          type: 'Complex',
+        },
+        hidden: false,
+        id: 0,
+        label: 'Unavailable dates 1',
+        value: {
+          unavailableDateType: 'DATE_RANGE',
+          date: null,
+          fromDate: '2025-01-01',
+          toDate: '2025-01-03'
+        }
+      }) as unknown as CaseField);
+      fixture.detectChanges();
+
+      const rangeValues = de.queryAll($COMPLEX_PANEL_ALL_VALUES);
+
+      // values will be date type, fromDate and toDate (date hidden)
+      expect(rangeValues.length).toEqual(3);
+
+      component.caseField = (({
+        field_type: {
+          collection_field_type: null,
+          complex_fields: [
+            {
+              id: 'unavailableDateType',
+              display_context: 'MANDATORY',
+              field_type: {
+                type: 'FixedRadioList'
+              }
+            },
+            {
+              id: 'date',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"SINGLE_DATE\"',
+              field_type: {
+                type: 'Date'
+              }
+            },
+            {
+              id: 'fromDate',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"DATE_RANGE\"',
+              field_type: {
+                type: 'Date'
+              }
+            },
+            {
+              id: 'toDate',
+              display_context: 'MANDATORY',
+              show_condition: 'parent.unavailableDatesForMediation.unavailableDateType=\"DATE_RANGE\"',
+              field_type: {
+                type: 'Date'
+              }
+            }
+          ],
+          id: 'MediationUnavailableDate',
+          type: 'Complex',
+        },
+        hidden: false,
+        id: 0,
+        label: 'Unavailable dates 1',
+        value: {
+          unavailableDateType: 'SINGLE_DATE',
+          date: '2025-01-01',
+          fromDate: null,
+          toDate: null
+        }
+      }) as unknown as CaseField);
+      fixture.detectChanges();
+
+      const singleValues = de.queryAll($COMPLEX_PANEL_ALL_VALUES);
+
+      // values will be date type and date (fromDate and toDate hidden)
+      expect(singleValues.length).toEqual(2);
+    })
   });
 
   describe('when values as object in root field', () => {

diff --git a/...i-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.component.ts b/...i-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CaseField } from '../../../domain/definition';
 import { AbstractFieldReadComponent } from '../base-field/abstract-field-read.component';
 
@@ -7,7 +7,27 @@ import { AbstractFieldReadComponent } from '../base-field/abstract-field-read.co
   templateUrl: './read-complex-field-table.html',
   styleUrls: ['./read-complex-field-table.scss']
 })
-export class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
+export class ReadComplexFieldTableComponent extends AbstractFieldReadComponent implements OnInit {
+  // parent_ can be replaced with any ***_ - underscore is only important character
+  // value can also be replaced with anything
+  public static readonly DUMMY_STRING_PRE = 'parent_';
+  public static readonly DUMMY_STRING_POST = 'value';
+
   @Input()
   public caseFields: CaseField[] = [];
+
+  public path: string;
+
+  public ngOnInit(): void {
+    this.setDummyPathForChildArrays();
+  }
+
+  /* In order to get child arrays (within casefield) to display their logic
+    we need to add a path. This path needs to include the idPrefix as that
+    is the part of the path that is used to display the elements.
+    The joining strings will allow us to use the existing show condition to
+    match against this path. */
+  private setDummyPathForChildArrays(): void {
+    this.path = ReadComplexFieldTableComponent.DUMMY_STRING_PRE + this.idPrefix + ReadComplexFieldTableComponent.DUMMY_STRING_POST;
+  }
 }
diff --git a/...d-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html b/...d-case-ui-toolkit/src/lib/shared/components/palette/complex/read-complex-field-table.html
@@ -2,7 +2,7 @@
   <dl class="complex-panel-title"><dt><span class="text-16">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>
   <table class="complex-panel-table" aria-describedby="complex field table">
     <tbody>
-      <ng-container *ngFor="let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup: undefined :idPrefix">
+      <ng-container *ngFor="let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :path :idPrefix">
         <ng-container *ngIf="(field | ccdIsCompound); else SimpleRow">
           <tr class="complex-panel-compound-field" [hidden]="field.hidden">
             <td colspan="2">

diff --git a/...i-toolkit/src/lib/shared/directives/conditional-show/services/condition-parser.service.ts b/...i-toolkit/src/lib/shared/directives/conditional-show/services/condition-parser.service.ts
@@ -190,7 +190,9 @@ export class ConditionParser {
         }
       }
     } else {
-      console.error('Path in formArray should start with ', head, ', full path: ', path);
+      // EXUI-2460 - if path present then show error, otherwise log message to stop unnecessary console errors
+      path ? console.error('Path in formArray should start with ', head, ', full path: ', path) :
+        console.log('Path not present in formArray');
     }
   }
 

diff --git a/projects/ccd-case-ui-toolkit/src/lib/shared/pipes/complex/ccd-read-fields-filter.pipe.ts b/projects/ccd-case-ui-toolkit/src/lib/shared/pipes/complex/ccd-read-fields-filter.pipe.ts
@@ -124,7 +124,13 @@ export class ReadFieldsFilterPipe implements PipeTransform {
       } else {
         cond = ShowCondition.getInstance(field.show_condition);
       }
-      field.hidden = !cond.match(formValue, path);
+      if (path) {
+        // EXUI-2460 - evaluate with and without path to ensure validity
+        field.hidden = !cond.match(formValue, path) ? !cond.match(formValue) : false;
+      } else {
+        // if no path there is no need to evaluate twice
+        field.hidden = !cond.match(formValue);
+      }
     } else {
       field.hidden = false;
     }