=Working on the Options Meta still. Group fields also needed some changes

Jake Vanderwerf

11 hours ago f16cb88a3218ac7bb32e43f0e0a2542d35c7a01b

 assets/js/concise/FormController.js

@@ -371,7 +371,7 @@
         // Dependencies still need checking
         if (this.dependencies.has(field.dataset.field)) {
            let dependency = this.dependencies.get(field.dataset.field);
            dependency.items.forEach(item => {
            dependency.forEach(item => {
               this.checkFieldDependency(item, field.dataset.field);
            });
         }
@@ -387,7 +387,7 @@
      //Dependencies
      if (this.dependencies.has(field.dataset.field)) {
         let dependency = this.dependencies.get(field.dataset.field);
         dependency.items.forEach(item => {
         dependency.forEach(item => {
            this.checkFieldDependency(item, field.dataset.field);
         });
      }
@@ -460,6 +460,10 @@
               data: this.changes.get(form.id)?.changes??{},
            });
         }
         if (form.options.endpoint) {
            console.log('Submitting form...');
            await this.handleServerSave(form, this.collectFormData(form.form));
         }

      }

@@ -500,6 +504,10 @@
      if (form.options.cache) {
         this.scheduleBackup();
      }

      if (form.options.endpoint) {
         this.scheduleServerSave(form, changes);
      }
   }

   scheduleBackup() {
@@ -555,6 +563,37 @@
      this.changes.delete(formId);
   }

   scheduleServerSave(form, changes){

      window.debouncer.schedule(
         `form_${form.id}_server_save`,
         async () => {
            await this.handleServerSave(form, changes);
         },
         1500
      );
   }
   cancelServerSave(formId) {
      window.debouncer.cancel(`form_${formId}_server_save`);
   }
   async handleServerSave(form, changes) {
      this.cancelServerSave(form.id);

      if (window.jvbQueue) {
         changes.user = window.auth.getUser();
         window.jvbQueue.addToQueue({
            endpoint: form.options.endpoint,
            data: changes,
            headers: form.options.headers??{},
         });
      } else {
         await window.auth.fetch(jvbBase.api+form.options.endpoint, {
            body: changes,
            headers: form.options.headers??{},
         });
      }
   }


   /**
    * Register a form for handling
@@ -573,6 +612,7 @@
         ignore: [],
         ... options
      };

      //Bail if form already registered
      if (Object.hasOwn(form.dataset, 'formId') && this.forms.has(form.dataset.formId)) return;

@@ -591,9 +631,13 @@
         ui: window.uiFromSelectors(this.selectors.forms, form)
      };

      config.ui.fields = {};
      form.querySelectorAll('[data-field]').forEach((field) => {
         config.ui.fields[field.dataset.field] = field;
      });

      this.initializeFields(form, config);
      this.forms.set(formId, config);

      return config;
   }
   clearForm(formId) {
@@ -617,10 +661,10 @@
      }
      // Clean up dependencies for this form
      this.dependencies.forEach((dependency, fieldName) => {
         dependency.items = dependency.items.filter(item => item.form !== formId);
         dependency = dependency.filter(item => item.form !== formId);

         // Remove the dependency entry entirely if no items left
         if (dependency.items.length === 0) {
         if (dependency.length === 0) {
            this.dependencies.delete(fieldName);
         }
      });
@@ -1147,38 +1191,41 @@
         const requiredValue = field.dataset.dependsValue;
         const operator = field.dataset.dependsOperatior??'==';

         let formData = this.forms.get(form.dataset.formId);

         if (!this.dependencies.has(dependsOn)) {
            let element = document.querySelector(`[field="${dependsOn}"]`);
            if (element) {
               this.dependencies.set(dependsOn, {
                  element: element,
                  items: []
               });
            if (Object.hasOwn(formData.ui.fields, dependsOn)) {
               this.dependencies.set(dependsOn, []);
            }
         }
         let dependency = this.dependencies.get(dependsOn);
         dependency.items.push({
            field: field,
            form: form.dataset.formId,
            requiredValue: requiredValue,
            operator: operator
         });
         this.dependencies.set(dependsOn, dependency);
         this.checkFieldDependency(dependency, dependsOn);
         if (dependency) {
            dependency.push({
               field:   field,
               form: form.dataset.formId,
               requiredValue: requiredValue,
               operator: operator
            });
            this.dependencies.set(dependsOn, dependency);
         }

         this.checkFieldDependency(field, dependsOn);
      });
   }
   checkFieldDependency(dependentField, controlFieldName) {
      const form = this.getForm(dependentField);
      const controlField = this.dependencies.get(controlFieldName);
      if (!controlField) return;

      const controlValue = this.getFieldCheckedValue(controlField.element);

      const controlValue = this.getFieldValue(form.ui.fields[controlFieldName]);
      const shouldShow = this.evaluateCondition(
         controlValue,
         dependentField.requiredValue,
         dependentField.operator
         dependentField.dataset.dependsValue,
         dependentField.dataset.dependsOperatior
      );

      this.toggleFieldVisibility(dependentField.field, shouldShow);
      this.toggleFieldVisibility(dependentField, shouldShow);
   }
   evaluateCondition(value, requiredValue, operator) {
      const fieldStr = String(value || '');