Track and handle hidden fields on publish forms to fix sometimes, `…

…required_if`, etc. rules (#5101)
statamic · Jan 25, 2022 · 7e06a58 · 7e06a58
1 parent 13721c5
commit 7e06a58
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 48 deletions.
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
@@ -117,7 +117,7 @@
 
                 <publish-container
                     v-if="fields"
-                    name="publishContainer"
+                    :name="publishContainer"
                     :blueprint="fieldset"
                     :values="values"
                     :meta="meta"
@@ -185,9 +185,14 @@
 import EditorActions from './EditorActions.vue';
 import FocalPointEditor from './FocalPointEditor.vue';
 import PublishFields from '../../publish/Fields.vue';
+import HasHiddenFields from '../../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         EditorActions,
         FocalPointEditor,
@@ -332,7 +337,7 @@ export default {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
 
-            this.$axios.patch(url, this.values).then(response => {
+            this.$axios.patch(url, this.visibleValues).then(response => {
                 this.$emit('saved', response.data.asset);
                 this.$toast.success(__('Saved'));
                 this.saving = false;

diff --git a/resources/js/components/data-list/HasHiddenFields.js b/resources/js/components/data-list/HasHiddenFields.js
@@ -0,0 +1,17 @@
+export default {
+
+    computed: {
+
+        hiddenFields() {
+            return this.$store.state.publish[this.publishContainer].hiddenFields;
+        },
+
+        visibleValues() {
+            return _.omit(this.values, (_, handle) => {
+                return this.hiddenFields[handle];
+            });
+        },
+
+    }
+
+}
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
@@ -257,11 +257,13 @@ import PublishActions from './PublishActions';
 import SaveButtonOptions from '../publish/SaveButtonOptions';
 import RevisionHistory from '../revision-history/History';
 import HasPreferences from '../data-list/HasPreferences';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
     mixins: [
         HasPreferences,
+        HasHiddenFields,
     ],
 
     components: {
@@ -464,7 +466,7 @@ export default {
         performSaveRequest() {
             // Once the hook has completed, we need to make the actual request.
             // We build the payload here because the before hook may have modified values.
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 _blueprint: this.fieldset.handle,
                 _localized: this.localizedFields,
             }};

diff --git a/resources/js/components/field-conditions/ValidatorMixin.js b/resources/js/components/field-conditions/ValidatorMixin.js
@@ -9,9 +9,14 @@ export default {
 
     methods: {
         showField(field) {
-            let validator = new Validator(field, this.values, this.$store, this.storeName);
+            let passes = new Validator(field, this.values, this.$store, this.storeName).passesConditions();
 
-            return validator.passesConditions();
+            this.$store.commit(`publish/${this.storeName}/setHiddenField`, {
+                handle: field.handle,
+                hidden: ! passes,
+            });
+
+            return passes;
         }
     }
 }
diff --git a/resources/js/components/field-validation/Rules.js b/resources/js/components/field-validation/Rules.js
@@ -283,6 +283,10 @@ export default [
         value: 'size:',
         example: 'size:value'
     },
+    {
+        label: 'Sometimes',
+        value: 'sometimes',
+    },
     {
         label: 'Starts With',
         value: 'starts_with:',

diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
@@ -85,9 +85,14 @@
 
 <script>
 import SiteSelector from '../SiteSelector.vue';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         SiteSelector
     },
@@ -193,7 +198,7 @@ export default {
             this.saving = true;
             this.clearErrors();
 
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 blueprint: this.fieldset.handle,
                 _localized: this.localizedFields,
             }};

diff --git a/resources/js/components/publish/Container.vue b/resources/js/components/publish/Container.vue
@@ -96,6 +96,7 @@ export default {
                 state: {
                     blueprint: initial.blueprint,
                     values: initial.values,
+                    hiddenFields: {},
                     meta: initial.meta,
                     localizedFields: initial.localizedFields,
                     site: initial.site,
@@ -112,6 +113,9 @@ export default {
                     setValues(state, values) {
                         state.values = values;
                     },
+                    setHiddenField(state, field) {
+                        state.hiddenFields[field.handle] = field.hidden;
+                    },
                     setMeta(state, meta) {
                         state.meta = meta;
                     },

diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
@@ -235,11 +235,13 @@ import PublishActions from './PublishActions.vue';
 import SaveButtonOptions from '../publish/SaveButtonOptions';
 import RevisionHistory from '../revision-history/History.vue';
 import HasPreferences from '../data-list/HasPreferences';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
     mixins: [
         HasPreferences,
+        HasHiddenFields,
     ],
 
     components: {
@@ -419,7 +421,7 @@ export default {
         },
 
         performSaveRequest() {
-            const payload = { ...this.values, ...{
+            const payload = { ...this.visibleValues, ...{
                 _blueprint: this.fieldset.handle,
                 published: this.published,
                 _localized: this.localizedFields,

diff --git a/resources/js/components/users/PublishForm.vue b/resources/js/components/users/PublishForm.vue
@@ -54,9 +54,14 @@
 
 <script>
 import ChangePassword from './ChangePassword.vue';
+import HasHiddenFields from '../data-list/HasHiddenFields';
 
 export default {
 
+    mixins: [
+        HasHiddenFields,
+    ],
+
     components: {
         ChangePassword,
     },
@@ -103,7 +108,7 @@ export default {
         save() {
             this.clearErrors();
 
-            this.$axios[this.method](this.actions.save, this.values).then(response => {
+            this.$axios[this.method](this.actions.save, this.visibleValues).then(response => {
                 this.title = response.data.title;
                 if (!this.isCreating) this.$toast.success(__('Saved'));
                 this.$refs.container.saved();

diff --git a/src/Fields/Field.php b/src/Fields/Field.php
@@ -17,6 +17,7 @@ class Field implements Arrayable
     protected $value;
     protected $parent;
     protected $parentField;
+    protected $filled = false;
 
     public function __construct($handle, array $config)
     {
@@ -29,7 +30,8 @@ public function newInstance()
         return (new static($this->handle, $this->config))
             ->setParent($this->parent)
             ->setParentField($this->parentField)
-            ->setValue($this->value);
+            ->setValue($this->value)
+            ->setFilled($this->filled);
     }
 
     public function setHandle(string $handle)
@@ -168,6 +170,11 @@ public function isFilterable()
         return (bool) $this->get('filterable');
     }
 
+    public function isFilled()
+    {
+        return (bool) $this->filled;
+    }
+
     public function toPublishArray()
     {
         return array_merge($this->preProcessedConfig(), [
@@ -194,13 +201,28 @@ public function toBlueprintArray()
         ];
     }
 
+    public function setFilled($filled)
+    {
+        $this->filled = $filled;
+
+        return $this;
+    }
+
     public function setValue($value)
     {
         $this->value = $value;
 
         return $this;
     }
 
+    public function fillValue($value)
+    {
+        $this->value = $value;
+        $this->filled = true;
+
+        return $this;
+    }
+
     public function value()
     {
         return $this->value;

diff --git a/src/Fields/Fields.php b/src/Fields/Fields.php
@@ -15,7 +15,6 @@ class Fields
     protected $fields;
     protected $parent;
     protected $parentField;
-    protected $trackMissingValues = false;
 
     public function __construct($items = [], $parent = null, $parentField = null)
     {
@@ -59,13 +58,6 @@ public function setParentField($field)
         return $this;
     }
 
-    public function setTrackMissingValues($trackMissingValues)
-    {
-        $this->trackMissingValues = $trackMissingValues;
-
-        return $this;
-    }
-
     public function items()
     {
         return $this->items;
@@ -92,8 +84,7 @@ public function newInstance()
             ->setParent($this->parent)
             ->setParentField($this->parentField)
             ->setItems($this->items)
-            ->setFields($this->fields)
-            ->setTrackMissingValues($this->trackMissingValues);
+            ->setFields($this->fields);
     }
 
     public function localizable()
@@ -128,9 +119,9 @@ public function toPublishArray()
     public function addValues(array $values)
     {
         $fields = $this->fields->map(function ($field) use ($values) {
-            return $field->newInstance()->setValue(
-                Arr::get($values, $field->handle(), $this->trackMissingValues ? new MissingValue : null)
-            );
+            return Arr::has($values, $field->handle())
+                ? $field->newInstance()->fillValue(Arr::get($values, $field->handle()))
+                : $field->newInstance();
         });
 
         return $this->newInstance()->setFields($fields);
@@ -139,28 +130,15 @@ public function addValues(array $values)
     public function values()
     {
         return $this->fields->mapWithKeys(function ($field) {
-            return [$field->handle() => $this->getFieldValue($field)];
+            return [$field->handle() => $field->value()];
         });
     }
 
     public function validatableValues()
     {
-        $values = $this->values();
-
-        if ($this->trackMissingValues) {
-            return $values->reject(function ($value, $handle) {
-                return $this->fields->get($handle)->value() instanceof MissingValue;
-            });
-        }
-
-        return $values;
-    }
-
-    protected function getFieldValue($field)
-    {
-        return $field->value() instanceof MissingValue
-            ? null
-            : $field->value();
+        return $this->values()->filter(function ($value, $handle) {
+            return $this->fields->get($handle)->isFilled();
+        });
     }
 
     public function process()

diff --git a/src/Fields/MissingValue.php b/src/Fields/MissingValue.php
diff --git a/src/Http/Controllers/FormController.php b/src/Http/Controllers/FormController.php
@@ -39,7 +39,7 @@ public function submit(Request $request, $form)
             return Str::startsWith($key, '_');
         })->all();
 
-        $fields = $fields->setTrackMissingValues(true)->addValues($values);
+        $fields = $fields->addValues($values);
 
         $submission = $form->makeSubmission()->data($values);