Refactor Form Submission and Field Management Logic

- Simplified the constructor in StoreFormSubmissionJob for improved readability.
- Enhanced the storeFile method to handle null and empty values more robustly, ensuring better validation of file names.
- Updated StorageFileNameParser to return null for empty file names, improving error handling.
- Refactored OpenForm.vue to optimize form initialization and prevent unnecessary reinitializations, enhancing performance.
- Introduced new methods for managing field groups and preventing recursive updates in OpenForm.vue, improving the overall user experience.
- Enhanced FormEditorSidebar.vue to utilize Pinia store for better state management and clarity.
- Improved FormFieldEdit.vue to prevent page jumps during field editing, ensuring a smoother user experience.
- Added new getters in working_form.js for better page management and navigation within forms.

These changes aim to enhance the maintainability and performance of the form handling logic, providing a more efficient and user-friendly experience.

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -107,7 +107,6 @@
 import { computed, ref, watch, onMounted } from 'vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
 import {handleDarkMode, useDarkMode} from "~/lib/forms/public-page.js"
-import { default as _has } from 'lodash/has'
 import { useRecordsStore } from '~/stores/records'
 import { useWorkingFormStore } from '~/stores/working_form'
 import { storeToRefs } from 'pinia'

client/components/open/forms/components/form-components/FormEditorSidebar.vue

@@ -25,6 +25,7 @@
 <script>
 import { computed } from "vue"
 import { useWorkingFormStore } from "../../../../../stores/working_form"
+import { storeToRefs } from 'pinia'
 import EditorRightSidebar from "../../../editors/EditorRightSidebar.vue"
 import FormFieldEdit from "../../fields/FormFieldEdit.vue"
 import AddFormBlock from "./AddFormBlock.vue"
@@ -35,13 +36,20 @@ export default {
   props: {},
   setup() {
     const workingFormStore = useWorkingFormStore()
+    
+    const editFieldIndex = computed(() => workingFormStore.selectedFieldIndex)
+    const form = storeToRefs(workingFormStore).content
+    const showEditFieldSidebar = computed(() => workingFormStore.showEditFieldSidebar)
+    const showAddFieldSidebar = computed(() => workingFormStore.showAddFieldSidebar)
+    
+    // The store now handles setting the page automatically in openSettingsForField
+    
     return {
       workingFormStore,
-      editFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
-      showEditFieldSidebar: computed(
-        () => workingFormStore.showEditFieldSidebar,
-      ),
-      showAddFieldSidebar: computed(() => workingFormStore.showAddFieldSidebar),
+      editFieldIndex,
+      form,
+      showEditFieldSidebar,
+      showAddFieldSidebar,
     }
   },
   data() {
@@ -51,15 +59,6 @@ export default {
     isOpen() {
       return this.form !== null && (this.showEditFieldSidebar || this.showAddFieldSidebar)
     },
-    form: {
-      get() {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set(value) {
-        this.workingFormStore.set(value)
-      },
-    },
   },
   watch: {},
   mounted() {},

client/components/open/forms/components/form-logic-components/ColumnCondition.vue

@@ -104,11 +104,11 @@ export default {
     },
     operators() {
       return Object.entries(this.available_filters[this.property.type].comparators)
-        .filter(([key, value]) => this.customValidation || (!this.customValidation && !value.custom_validation_only))
-        .map(([key]) => {
+        .filter(([filterKey, value]) => this.customValidation || (!this.customValidation && !value.custom_validation_only))
+        .map(([filterKey]) => {
           return {
-            value: key,
-            name: this.optionFilterNames(key),
+            value: filterKey,
+            name: this.optionFilterNames(filterKey),
           }
         })
     },