FIO-8986 fixed setting up of default value with hidden fields (#5797)

* FIO-8986 fixed setting up of default value with hidden fields * FIO-8986 update core dependency --------- Co-authored-by: lane-formio <[email protected]>
formio · Sep 10, 2024 · 606c25d · 606c25d
1 parent 737a8eb
commit 606c25d
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 13 deletions.
diff --git a/src/components/day/Day.js b/src/components/day/Day.js
@@ -387,6 +387,21 @@ export default class DayComponent extends Field {
     const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
     const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';
 
+    let defaultDay = '';
+    let defaultMonth = '';
+    let defaultYear = '';
+
+    if(defaultValue) {
+      const hasHiddenFields = defaultValue.length !==3;
+      defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];
+      defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];
+      defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];
+    }
+
+    if(this.options.building && defaultValue.length ===3) {
+      return this.component.defaultValue;
+    }
+
     const getNextPart = (shouldTake, defaultValue) => {
        // Only push the part if it's not an empty string
       const part = shouldTake ? valueParts.shift() : defaultValue;
@@ -396,17 +411,16 @@ export default class DayComponent extends Field {
     }
 
     if (this.dayFirst) {
-      getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '');
+      getNextPart(this.showDay, defaultDay);
     }
 
-    getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '');
+    getNextPart(this.showMonth, defaultMonth);
 
     if (!this.dayFirst) {
-      getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '');
+      getNextPart(this.showDay, defaultDay);
     }
 
-    getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '');
-
+    getNextPart(this.showYear, defaultYear);
     return dateParts.join('/');
   }
 
@@ -422,17 +436,24 @@ export default class DayComponent extends Field {
     if (value === 'Invalid date') {
       return null;
     }
+    let day, month, year;
     const parts = value.split('/');
-    let day;
-    if (this.component.dayFirst) {
-      day = parts.shift();
+
+    if (parts.length !== 3) {
+      day = this.getDayWithHiddenFields(parts).day;
+      month = this.getDayWithHiddenFields(parts).month;
+      year = this.getDayWithHiddenFields(parts).year;
     }
-    const month = parts.shift();
-    if (!this.component.dayFirst) {
-      day = parts.shift();
+    else {
+      if (this.component.dayFirst) {
+        day = parts.shift();
+      }
+      month = parts.shift();
+      if (!this.component.dayFirst) {
+        day = parts.shift();
+      }
+      year = parts.shift();
     }
-    const year = parts.shift();
-
     if (this.refs.day && this.showDay) {
       this.refs.day.value = day === '00' ? '' : parseInt(day, 10);
     }
@@ -444,6 +465,28 @@ export default class DayComponent extends Field {
     }
   }
 
+  getDayWithHiddenFields(parts) {
+    let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+    if (!this.showDay) {
+      MONTH = MONTH === 0 ? 0 : MONTH - 1;
+      YEAR = YEAR - 1;
+      DAY = null;
+    }
+    if (!this.showMonth) {
+      DAY = DAY === 0 ? 0 : DAY - 1;
+      YEAR = YEAR - 1;
+      MONTH = null;
+    }
+    if (!this.showYear) {
+      YEAR = null;
+    }
+    return {
+      month: _.isNull(MONTH) ? '' : parts[MONTH],
+      day: _.isNull(DAY) ? '' : parts[DAY],
+      year: _.isNull(YEAR) ? '' : parts[YEAR],
+    }
+  }
+
   getFieldValue(name) {
     const parts = this.dataValue ? this.dataValue.split('/') : [];
     let val = 0;

diff --git a/src/components/day/Day.unit.js b/src/components/day/Day.unit.js
@@ -263,6 +263,43 @@ describe('Day Component', () => {
     comp1.fields.year.hide = false;
   });
 
+  it('Should set correct default value if the day field is hidden', (done) => {
+    comp1.dayFirst = false;
+    comp1.defaultValue = '08/2019';
+    comp1.fields.day.hide = true;
+    Harness.testCreate(DayComponent, comp1).then((component) => {
+      component.checkValidity();
+      assert.equal(component.data.date, '08/2019');
+      assert.equal(component.errors.length, 0);
+      done();
+    });
+    comp1.fields.day.hide = false;
+  });
+
+  it('Should set correct default value if the month field is hidden', (done) => {
+    comp1.defaultValue = '24/2024';
+    comp1.fields.month.hide = true;
+    Harness.testCreate(DayComponent, comp1).then((component) => {
+      component.checkValidity();
+      assert.equal(component.data.date, '24/2024');
+      assert.equal(component.errors.length, 0);
+      done();
+    });
+    comp1.fields.month.hide = false;
+  });
+
+  it('Should set correct default value if the year field is hidden', (done) => {
+    comp1.defaultValue = '07/24';
+    comp1.fields.year.hide = true;
+    Harness.testCreate(DayComponent, comp1).then((component) => {
+      component.checkValidity();
+      assert.equal(component.data.date, '07/24');
+      assert.equal(component.errors.length, 0);
+      done();
+    });
+    comp1.fields.year.hide = false;
+  });
+
   it('OnBlur validation should work properly with Day component', (done) => {
     const element = document.createElement('div');
 

diff --git a/src/components/day/editForm/Day.edit.day.js b/src/components/day/editForm/Day.edit.day.js
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export default [
   {
     wieght: 200,
@@ -33,6 +35,21 @@ export default [
     label: 'Hidden',
     tooltip: 'Hide the Day part of the component.',
     key: 'fields.day.hide',
+    onChange: ({data}) => {
+      if (data.defaultValue) {
+        const defaultValueParts = data.defaultValue.split('/');
+        if (!data.fields.day.hide && defaultValueParts.length !==3) {
+          const newDefaultValue = ['00'];
+          if (!data.fields.month.hide) {
+            data.dayFirst ? newDefaultValue.push(defaultValueParts[0]) : newDefaultValue.unshift(defaultValueParts[0])
+          }
+          if (!data.fields.year.hide) {
+            newDefaultValue.push(defaultValueParts[1])
+          }
+          _.set(data, 'defaultValue', newDefaultValue.join('/'));
+        }
+      }
+    },
     input: true
   },
   {

diff --git a/src/components/day/editForm/Day.edit.month.js b/src/components/day/editForm/Day.edit.month.js
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export default [
   {
     wieght: 200,
@@ -33,6 +35,21 @@ export default [
     label: 'Hidden',
     tooltip: 'Hide the Month part of the component.',
     key: 'fields.month.hide',
+    onChange: ({data}) => {
+      if (data.defaultValue) {
+        const defaultValueParts = data.defaultValue.split('/');
+        if (!data.fields.month.hide && defaultValueParts.length !==3) {
+          const newDefaultValue = ['00'];
+          if (!data.fields.day.hide) {
+            data.dayFirst ? newDefaultValue.unshift(defaultValueParts[0]) : newDefaultValue.push(defaultValueParts[0])
+          }
+          if (!data.fields.year.hide) {
+            newDefaultValue.push(defaultValueParts[1])
+          }
+          _.set(data, 'defaultValue', newDefaultValue.join('/'));
+        }
+      }
+    },
     input: true
   },
 ];
diff --git a/src/components/day/editForm/Day.edit.year.js b/src/components/day/editForm/Day.edit.year.js
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export default [
   {
     wieght: 200,
@@ -51,6 +53,15 @@ export default [
     label: 'Hidden',
     tooltip: 'Hide the Year part of the component.',
     key: 'fields.year.hide',
+    onChange: ({data}) => {
+      if (data.defaultValue) {
+        const defaultValueParts = data.defaultValue.split('/');
+        if (!data.fields.month.hide && defaultValueParts.length !==3) {
+          defaultValueParts.push('0000')
+          _.set(data, 'defaultValue', defaultValueParts.join('/'));
+        }
+      }
+    },
     input: true
   },
 ];