web-mojo 2.1.294 → 2.1.337

package/dist/chunks/{FormView-GJqUOJqR.js → FormView-CglUjQ3E.js}

@@ -1,7 +1,8 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CKLwTH9q.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-ekvGNIXB.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
+    this.structureOnly = config.structureOnly || false;
     this.fields.forEach((field) => {
       if (field.cols && !field.columns) {
         field.columns = field.cols;
@@ -1473,6 +1474,9 @@ class FormBuilder {
    * @returns {*} Field value
    */
   getFieldValue(name) {
+    if (this.structureOnly) {
+      return "";
+    }
     return MOJOUtils.getContextData(this.data, name);
   }
   /**
@@ -4108,6 +4112,8 @@ class FormView extends View {
       errors = {},
       fileHandling = "base64",
       // 'base64' | 'multipart'
+      autosaveModelField = false,
+      // Auto-save model on field changes
       ...viewOptions
     } = options;
     super({
@@ -4121,12 +4127,15 @@ class FormView extends View {
     this.errors = errors;
     this.loading = false;
     this.fileHandling = fileHandling;
+    this.autosaveModelField = autosaveModelField;
     this.customComponents = /* @__PURE__ */ new Map();
+    this.fieldStatusManagers = /* @__PURE__ */ new Map();
     this.data = this.prepareFormData();
     this.formConfig = formConfig || { fields: fields || [] };
     this.formBuilder = new FormBuilder({
       ...this.formConfig,
-      data: this.data,
+      structureOnly: true,
+      // Only generate structure, FormView will control values
       errors
     });
   }
@@ -4158,12 +4167,49 @@ class FormView extends View {
     return this.formBuilder.buildFormHTML();
   }
   /**
-   * Initialize form after rendering
+   * Called after form is rendered to populate values and initialize
    */
   async onAfterRender() {
     await super.onAfterRender();
+    this.data = this.prepareFormData();
+    this.populateFormValues();
+    this.initializeFormComponents();
+  }
+  /**
+   * Populate all form fields with current data values
+   */
+  populateFormValues() {
+    if (!this.element || !this.formConfig?.fields) return;
+    this.formConfig.fields.forEach((field) => {
+      if (field.type === "group" && field.fields) {
+        field.fields.forEach((groupField) => {
+          this.populateFieldValue(groupField);
+        });
+      } else {
+        this.populateFieldValue(field);
+      }
+    });
+  }
+  /**
+   * Populate a single field with its value from data
+   */
+  populateFieldValue(fieldConfig) {
+    if (!fieldConfig.name || !this.element) return;
+    const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
+    if (!fieldElement) return;
+    const value = MOJOUtils.getContextData(this.data, fieldConfig.name);
+    this.setFieldValue(fieldElement, fieldConfig, value);
+  }
+  /**
+   * Initialize form components after rendering
+   */
+  initializeFormComponents() {
     this.initializeImageFields();
     this.initializeCustomComponents();
+    this.initializeTagInputs();
+    this.initializeCollectionSelects();
+    this.initializeDatePickers();
+    this.initializeDateRangePickers();
     this.initializePasswordFields();
   }
   /**
@@ -4317,24 +4363,59 @@ class FormView extends View {
    */
   handleFieldChange(fieldName, value) {
     this.data[fieldName] = value;
-    if (this.model && this.options.allowModelChange) {
+    if (this.autosaveModelField && this.model) {
+      this.handleFieldSave(fieldName, value);
+    } else if (this.model && this.options.allowModelChange) {
+      this._isFormDrivenChange = true;
       this.model.set(fieldName, value);
     }
     this.emit("field:change", { field: fieldName, value });
   }
   /**
-   * Refresh form data and rebuild FormBuilder
-   * Call this when model or data changes
+   * Handle saving individual field changes to the model
+   * @param {string} fieldName - Name of the field being saved
+   * @param {*} value - New value to save
+   */
+  async handleFieldSave(fieldName, value) {
+    if (!this.model) return;
+    const statusManager = this.getFieldStatusManager(fieldName);
+    try {
+      statusManager.showStatus("saving");
+      this._isFormDrivenChange = true;
+      if (typeof this.model.save === "function") {
+        await this.model.save({ [fieldName]: value });
+      } else {
+        this.model.set(fieldName, value);
+      }
+      statusManager.showStatus("saved");
+    } catch (error) {
+      console.error("Field save error:", error);
+      statusManager.showStatus("error", { message: error.message });
+    }
+  }
+  /**
+   * Get or create a field status manager for a specific field
+   * @param {string} fieldName - Name of the field
+   * @returns {FieldStatusManager} Status manager instance
+   */
+  getFieldStatusManager(fieldName) {
+    if (!this.fieldStatusManagers.has(fieldName)) {
+      const fieldElement = this.element.querySelector(`[name="${fieldName}"]`);
+      if (fieldElement) {
+        const statusManager = new FieldStatusManager(fieldElement);
+        this.fieldStatusManagers.set(fieldName, statusManager);
+      }
+    }
+    return this.fieldStatusManagers.get(fieldName);
+  }
+  /**
+   * Refresh form data and repopulate values
+   * Call this when model or data changes externally
    */
   refreshForm() {
     this.data = this.prepareFormData();
-    this.formBuilder = new FormBuilder({
-      ...this.formConfig,
-      data: this.data,
-      errors: this.errors
-    });
     if (this.element) {
-      this.render();
+      this.populateFormValues();
     }
   }
   /**
@@ -4519,12 +4600,9 @@ class FormView extends View {
   async onChangeValidateField(event, element) {
     const fieldName = element.name;
     if (fieldName) {
+      const value = element.value;
+      this.handleFieldChange(fieldName, value);
       this.validateField(fieldName);
-      this.emit("change", {
-        field: fieldName,
-        value: element.value,
-        form: this
-      });
     }
   }
   /**
@@ -4533,15 +4611,11 @@ class FormView extends View {
   async onChangeToggleSwitch(event, element) {
     const fieldName = element.getAttribute("data-field");
     if (fieldName) {
-      this.data[fieldName] = element.checked;
+      const value = element.checked;
+      this.handleFieldChange(fieldName, value);
       this.emit("switch:toggle", {
         field: fieldName,
-        checked: element.checked,
-        form: this
-      });
-      this.emit("change", {
-        field: fieldName,
-        value: element.checked,
+        checked: value,
         form: this
       });
     }
@@ -4637,21 +4711,21 @@ class FormView extends View {
    * Handle range value changes
    */
   async onChangeRangeChanged(event, element) {
+    const fieldName = element.name;
+    const value = element.value;
     const targetId = element.getAttribute("data-target");
     if (targetId) {
       const valueDisplay = this.element.querySelector(`#${targetId}`);
       if (valueDisplay) {
-        valueDisplay.textContent = element.value;
+        valueDisplay.textContent = value;
       }
     }
+    if (fieldName) {
+      this.handleFieldChange(fieldName, value);
+    }
     this.emit("range:changed", {
-      field: element.name,
-      value: element.value,
-      form: this
-    });
-    this.emit("change", {
-      field: element.name,
-      value: element.value,
+      field: fieldName,
+      value,
       form: this
     });
   }
@@ -4815,9 +4889,114 @@ class FormView extends View {
     }
   }
   _onModelChange() {
+    this.data = this.prepareFormData();
     if (this.isMounted()) {
-      this.refreshForm();
+      if (!this._isFormDrivenChange) {
+        this.syncFormWithModel();
+      }
+      this._isFormDrivenChange = false;
+    }
+  }
+  /**
+   * Sync form field values with current model data without full rebuild
+   */
+  syncFormWithModel() {
+    if (!this.model || !this.element) return;
+    if (this.formDataMatchesModelData(this.data)) {
+      return;
+    }
+    this.populateFormValues();
+  }
+  /**
+   * Compare current form values with new model data
+   * @param {Object} newModelData - New data from model
+   * @returns {boolean} True if form and model data match
+   */
+  formDataMatchesModelData(newModelData) {
+    if (!this.formConfig?.fields || !this.element) return true;
+    for (const field of this.formConfig.fields) {
+      if (field.type === "group" && field.fields) {
+        for (const groupField of field.fields) {
+          if (!this.fieldValueMatchesModel(groupField, newModelData)) {
+            return false;
+          }
+        }
+      } else {
+        if (!this.fieldValueMatchesModel(field, newModelData)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  /**
+   * Check if a single field's current value matches the model data
+   * @param {Object} fieldConfig - Field configuration
+   * @param {Object} modelData - Model data to compare against
+   * @returns {boolean} True if field value matches model
+   */
+  fieldValueMatchesModel(fieldConfig, modelData) {
+    if (!fieldConfig.name) return true;
+    const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
+    if (!fieldElement) return true;
+    const currentValue = this.getFieldCurrentValue(fieldElement, fieldConfig);
+    const modelValue = MOJOUtils.getContextData(modelData, fieldConfig.name);
+    return this.valuesAreDifferent(currentValue, modelValue) === false;
+  }
+  /**
+   * Get current value from a form field element
+   */
+  getFieldCurrentValue(fieldElement, fieldConfig) {
+    switch (fieldConfig.type) {
+      case "checkbox":
+        return fieldElement.checked;
+      case "switch":
+        return fieldElement.checked;
+      case "radio":
+        const checkedRadio = this.element.querySelector(`[name="${fieldConfig.name}"]:checked`);
+        return checkedRadio ? checkedRadio.value : "";
+      case "select":
+        return fieldElement.multiple ? Array.from(fieldElement.selectedOptions).map((opt) => opt.value) : fieldElement.value;
+      case "file":
+      case "image":
+        return null;
+      // Don't sync file fields
+      default:
+        return fieldElement.value;
+    }
+  }
+  /**
+   * Set value on a form field element
+   */
+  setFieldValue(fieldElement, fieldConfig, newValue) {
+    switch (fieldConfig.type) {
+      case "checkbox":
+      case "switch":
+        fieldElement.checked = Boolean(newValue);
+        break;
+      case "radio":
+        const radioOption = this.element.querySelector(`[name="${fieldConfig.name}"][value="${newValue}"]`);
+        if (radioOption) {
+          radioOption.checked = true;
+        }
+        break;
+      case "select":
+        if (fieldElement.multiple && Array.isArray(newValue)) {
+          Array.from(fieldElement.options).forEach((option) => {
+            option.selected = newValue.includes(option.value);
+          });
+        } else {
+          fieldElement.value = newValue || "";
+        }
+        break;
+      case "file":
+      case "image":
+        break;
+      default:
+        fieldElement.value = newValue || "";
+        break;
     }
+    fieldElement.dispatchEvent(new Event("change", { bubbles: true }));
   }
   /**
    * Set defaults (updates defaults and rebuilds form)
@@ -4896,6 +5075,7 @@ class FormView extends View {
     console.log("Saving changed data via model:", changes);
     console.log("Data type:", changes instanceof FormData ? "FormData (multipart)" : "Object (JSON/base64)");
     try {
+      this._isFormDrivenChange = true;
       const result = await this.model.save(changes);
       console.log("Model save result:", result);
       return result;
@@ -5400,6 +5580,108 @@ class FormView extends View {
     }
   }
 }
+class FieldStatusManager {
+  constructor(fieldElement) {
+    this.fieldElement = fieldElement;
+    this.statusContainer = this.findOrCreateStatusContainer();
+    this.timeouts = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Find existing status container or create one
+   */
+  findOrCreateStatusContainer() {
+    let container = this.fieldElement.parentElement.querySelector(".field-status");
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "field-status";
+      container.innerHTML = `
+        <div class="spinner-border spinner-border-sm text-primary d-none" data-status="saving" role="status">
+          <span class="visually-hidden">Saving...</span>
+        </div>
+        <i class="bi bi-check-circle text-success d-none" data-status="saved"></i>
+        <i class="bi bi-exclamation-circle text-danger d-none" data-status="error"></i>
+      `;
+      this.fieldElement.parentElement.appendChild(container);
+    }
+    return container;
+  }
+  /**
+   * Show a status indicator
+   * @param {string} type - Status type: 'saving', 'saved', 'error'
+   * @param {object} options - Additional options
+   */
+  showStatus(type, options = {}) {
+    this.clearTimeout(type);
+    this.hideAllStatuses();
+    const indicator = this.statusContainer.querySelector(`[data-status="${type}"]`);
+    if (indicator) {
+      indicator.classList.remove("d-none");
+      indicator.classList.add("d-inline-block", "show");
+      if (type === "saved") {
+        this.setTimeout(type, () => this.hideStatus(type), 2500);
+      } else if (type === "error") {
+        if (options.message) {
+          indicator.title = options.message;
+        }
+        this.setTimeout(type, () => this.hideStatus(type), 6e3);
+      }
+    }
+  }
+  /**
+   * Hide a specific status indicator
+   * @param {string} type - Status type to hide
+   */
+  hideStatus(type) {
+    const indicator = this.statusContainer.querySelector(`[data-status="${type}"]`);
+    if (indicator) {
+      indicator.classList.remove("show");
+      indicator.classList.add("hide");
+      setTimeout(() => {
+        indicator.classList.add("d-none");
+        indicator.classList.remove("d-inline-block", "hide");
+        indicator.title = "";
+      }, 300);
+    }
+  }
+  /**
+   * Hide all status indicators
+   */
+  hideAllStatuses() {
+    const indicators = this.statusContainer.querySelectorAll("[data-status]");
+    indicators.forEach((indicator) => {
+      indicator.classList.add("d-none");
+      indicator.classList.remove("d-inline-block", "show", "hide");
+      indicator.title = "";
+    });
+  }
+  /**
+   * Set a timeout for auto-hiding status
+   * @param {string} type - Status type
+   * @param {function} callback - Callback to execute
+   * @param {number} delay - Delay in milliseconds
+   */
+  setTimeout(type, callback, delay) {
+    const timeoutId = setTimeout(callback, delay);
+    this.timeouts.set(type, timeoutId);
+  }
+  /**
+   * Clear a specific timeout
+   * @param {string} type - Status type
+   */
+  clearTimeout(type) {
+    if (this.timeouts.has(type)) {
+      clearTimeout(this.timeouts.get(type));
+      this.timeouts.delete(type);
+    }
+  }
+  /**
+   * Clean up all timeouts
+   */
+  destroy() {
+    this.timeouts.forEach((timeoutId) => clearTimeout(timeoutId));
+    this.timeouts.clear();
+  }
+}
 const FormView$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   FormView,
@@ -5410,4 +5692,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-GJqUOJqR.js.map
+//# sourceMappingURL=FormView-CglUjQ3E.js.map