Betterify Alpine implementation

aerni · May 13, 2024 · 884b4d6 · 884b4d6
1 parent 5f5399f
commit 884b4d6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/resources/dist/js/livewire-forms.js b/resources/dist/js/livewire-forms.js
diff --git a/resources/js/alpine/form.js b/resources/js/alpine/form.js
@@ -1,9 +1,13 @@
-import FieldConditions from '../../../vendor/statamic/cms/resources/js/frontend/components/FieldConditions.js';
+import FieldConditions from '../../../vendor/statamic/cms/resources/js/frontend/components/FieldConditions.js'
 
 export default () => ({
     fields: {},
+    sections: {},
 
-    conditions: new FieldConditions,
+    processForm() {
+        this.fields = this.processFields(this.$wire.fields)
+        this.sections = this.processSections(this.fields)
+    },
 
     processFields(fields) {
         const values = Object.entries(fields).reduce((fields, [key, field]) => {
@@ -12,8 +16,8 @@ export default () => ({
             return fields
         }, {})
 
-        this.fields = Object.entries(fields).reduce((fields, [key, field]) => {
-            const passesConditions = this.conditions.showField(field.properties.conditions, values)
+        return Object.entries(fields).reduce((fields, [key, field]) => {
+            const passesConditions = new FieldConditions().showField(field.properties.conditions, values)
 
             fields[key] = {
                 visible: passesConditions && !field.properties.hidden,
@@ -27,36 +31,40 @@ export default () => ({
         }, {})
     },
 
-    fieldsBySection(section) {
-        return Object.entries(this.fields).reduce((sections, [key, field]) => {
-            let section = field.section;
-
-            if (! sections[section]) {
-                sections[section] = {};
+    processSections(fields) {
+        const visibleFieldsBySection = Object.entries(fields).reduce((sections, [key, field]) => {
+            if (field.section) {
+                sections[field.section] = sections[field.section] || []
+                sections[field.section].push(field.visible)
             }
 
-            sections[section][key] = field;
+            return sections
+        }, {})
+
+        const sectionVisibility = Object.fromEntries(
+            Object.entries(visibleFieldsBySection).map(([section, visibilities]) => [
+                section,
+                visibilities.every(Boolean),
+            ])
+        )
 
-            return sections;
-        }, {})[section];
+        if (JSON.stringify(sectionVisibility) !== JSON.stringify(this.$wire.stepVisibility)) {
+            this.$wire.stepVisibility = sectionVisibility
+            this.$wire.$refresh()
+        }
+
+        return sectionVisibility
     },
 
     showField(field) {
         return this.fields[field].visible
     },
 
     showSection(section) {
-        return Object.entries(this.fieldsBySection(section)).some(([field]) => this.fields[field].visible)
+        return this.sections[section]
     },
 
     showStep(step) {
-        let visible = this.showSection(step)
-
-        if (this.$wire.stepVisibility[step] !== visible) {
-            this.$wire.stepVisibility[step] = visible
-            this.$wire.$refresh()
-        }
-
-        return visible
+        return this.sections[step]
     },
 })
diff --git a/resources/views/default.blade.php b/resources/views/default.blade.php
@@ -1,6 +1,6 @@
 <form
     x-data="form"
-    x-effect="processFields($wire.fields)"
+    x-effect="processForm"
     x-cloak
     wire:submit="submit"
 >

diff --git a/resources/views/default/layouts/step.blade.php b/resources/views/default/layouts/step.blade.php
@@ -1,5 +1,4 @@
 <section
-    x-show="showStep('{{ $step->handle() }}')"
     wire:key="{{ $step->id() }}"
     class="flex flex-col p-8 bg-white border rounded-lg gap-y-8"
 

diff --git a/src/Livewire/Concerns/WithSteps.php b/src/Livewire/Concerns/WithSteps.php
@@ -141,11 +141,12 @@ protected function stepIsVisible(string $handle): bool
         return $this->stepVisibility[$handle] ?? true;
     }
 
-    public function updatedStepVisibility(bool $visible, string $key): void
+    public function updatedStepVisibility($value): void
     {
         /* Remove validation errors of hidden steps. */
-        if (! $visible) {
-            $this->steps->firstWhere(fn ($step) => $step->handle() === $key)->resetErrorBag();
-        }
+        collect($this->stepVisibility)
+            ->filter(fn ($value) => $value === false)
+            ->each(fn ($visible, $handle) => $this->steps->firstWhere(fn ($step) => $step->handle() === $handle)->resetErrorBag());
+
     }
 }