fix: keep "touch" and "dirty" states of gv-schema-form when using pol…

…icy documentation
gravitee-io · Jul 2, 2024 · 442506b · 442506b
1 parent b81712f
commit 442506b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/src/organisms/gv-schema-form/gv-schema-form.js b/src/organisms/gv-schema-form/gv-schema-form.js
@@ -57,7 +57,7 @@ export class GvSchemaForm extends LitElement {
       validateOnRender: { type: Boolean, attribute: 'validate-on-render' },
       _validatorResults: { type: Object },
       skeleton: { type: Boolean, reflect: true },
-      _touch: { type: Boolean },
+      touch: { type: Boolean },
       readonly: { type: Boolean, reflect: true },
       scrollable: { type: Boolean, reflect: true },
       groups: { type: Array },
@@ -71,7 +71,7 @@ export class GvSchemaForm extends LitElement {
     this.submitLabel = 'Ok';
     this.hasHeader = false;
     this.hasFooter = false;
-    this._touch = false;
+    this.touch = false;
     this._validator = new Validator();
     this._validatorResults = {};
     this._ignoreProperties = [];
@@ -109,7 +109,7 @@ export class GvSchemaForm extends LitElement {
 
   reset(values = null) {
     this._values = deepClone(values || this._initialValues);
-    this._touch = false;
+    this.touch = false;
     this._setDirty(false);
     this.getControls().forEach((s) => {
       s.requestUpdate();
@@ -141,7 +141,7 @@ export class GvSchemaForm extends LitElement {
     if (this.isValid()) {
       this._initialValues = deepClone(this._values);
       this.dirty = false;
-      this._touch = false;
+      this.touch = false;
       dispatchCustomEvent(this, 'submit', { values: this._values, validatorResults });
     } else {
       dispatchCustomEvent(this, 'error', { values: this._values, validatorResults });
@@ -153,7 +153,7 @@ export class GvSchemaForm extends LitElement {
   }
 
   _setTouch(touch = true) {
-    this._touch = !!touch;
+    this.touch = !!touch;
   }
 
   confirm(force = false) {
@@ -489,7 +489,7 @@ export class GvSchemaForm extends LitElement {
   }
 
   isTouch() {
-    return this._touch || (this.dirty && this.validateOnRender);
+    return this.touch || (this.dirty && this.validateOnRender);
   }
 
   canSubmit() {

diff --git a/src/organisms/gv-schema-form/gv-schema-form.test.js b/src/organisms/gv-schema-form/gv-schema-form.test.js
@@ -324,7 +324,7 @@ describe('S C H E M A  F O R M', () => {
     component.validate();
 
     component.updateComplete.then(() => {
-      component._touch = true;
+      component.touch = true;
       expect(component.canSubmit()).toBeTruthy();
       done();
     });

diff --git a/src/policy-studio/gv-design/gv-design.js b/src/policy-studio/gv-design/gv-design.js
@@ -982,6 +982,7 @@ export class GvDesign extends KeyboardElement(LitElement) {
   }
 
   _renderFlowStepForm(readonlyMode) {
+    const flowStepForm = this._getFlowStepForm();
     const values = this._currentFlowStep._values || this._currentFlowStep._initialValues;
 
     const groups = [
@@ -999,6 +1000,8 @@ export class GvDesign extends KeyboardElement(LitElement) {
                 .id="${FLOW_STEP_FORM_ID}"
                 .schema="${this._flowStepSchema}"
                 .icon="design:edit"
+                .touch="${flowStepForm?.touch}"
+                .dirty="${flowStepForm?._dirty}"
                 has-header
                 validate-on-render
                 .values="${values}"

diff --git a/src/policy-studio/gv-policy-studio/gv-policy-studio.js b/src/policy-studio/gv-policy-studio/gv-policy-studio.js
@@ -1093,6 +1093,7 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
   }
 
   _renderFlowStepForm(readonlyMode) {
+    const flowStepForm = this._getFlowStepForm();
     const values = this._currentFlowStep._values || this._currentFlowStep._initialValues;
 
     const groups = [
@@ -1110,6 +1111,8 @@ export class GvPolicyStudio extends KeyboardElement(LitElement) {
                 .id="${FLOW_STEP_FORM_ID}"
                 .schema="${this._flowStepSchema}"
                 .icon="design:edit"
+                .touch="${flowStepForm?.touch}"
+                .dirty="${flowStepForm?._dirty}"
                 has-header
                 validate-on-render
                 .values="${values}"