web-mojo 2.1.702 → 2.1.715

package/dist/chunks/{FormView-D0mZGFTl.js → FormView-sG1KQVJ8.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-7Fr4mkh7.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CPQTGurF.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -604,6 +604,10 @@ class FormBuilder {
       case "collection":
         fieldHTML = this.renderCollectionField(field);
         break;
+      case "collectionmultiselect":
+      case "collection-multiselect":
+        fieldHTML = this.renderCollectionMultiSelectField(field);
+        break;
       case "datepicker":
         fieldHTML = this.renderDatePickerField(field);
         break;
@@ -1671,6 +1675,59 @@ class FormBuilder {
       </div>
     `;
   }
+  /**
+   * Render collection multiselect field
+   * @param {Object} field - Field configuration
+   * @returns {string} Field HTML
+   */
+  renderCollectionMultiSelectField(field) {
+    const {
+      name,
+      label,
+      value = [],
+      required = false,
+      disabled = false,
+      Collection: _Collection,
+      collectionParams = {},
+      labelField = "name",
+      valueField = "id",
+      excludeIds = [],
+      size = 8,
+      maxHeight = null,
+      showSelectAll = true,
+      requiresActiveGroup = false,
+      help = field.helpText || field.help || ""
+    } = field;
+    this.getFieldId(name);
+    const error = this.errors[name];
+    const fieldValue = this.getFieldValue(name) ?? value;
+    return `
+      <div class="mojo-form-control">
+        ${label ? `<label class="${this.options.labelClass}">${this.escapeHtml(label)}${required ? '<span class="text-danger">*</span>' : ""}</label>` : ""}
+        <div class="collection-multiselect-placeholder"
+             data-field-name="${name}"
+             data-field-type="collectionmultiselect"
+             data-field-config='${JSON.stringify({
+      name,
+      value: fieldValue,
+      labelField,
+      valueField,
+      excludeIds,
+      size,
+      maxHeight,
+      showSelectAll,
+      disabled,
+      required,
+      requiresActiveGroup
+    })}'>
+          <input type="hidden" name="${name}" value="${this.escapeHtml(JSON.stringify(fieldValue))}">
+          <small class="form-text text-muted">This will be enhanced with CollectionMultiSelect component</small>
+        </div>
+        ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
+        ${error ? `<div class="${this.options.errorClass}">${this.escapeHtml(error)}</div>` : ""}
+      </div>
+    `;
+  }
   /**
    * Render enhanced date picker field
    * @param {Object} field - Field configuration
@@ -3213,6 +3270,257 @@ class CollectionSelectView extends View {
     return MOJOUtils.getNestedValue(item, fieldPath);
   }
 }
+class CollectionMultiSelectView extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "collection-multiselect-view",
+      template: `
+        <div class="mojo-form-control">
+          {{#label}}
+          <label class="form-label">
+            {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
+          </label>
+          {{/label}}
+          
+          {{#data.loading}}
+            <div class="text-center py-3">
+              <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          {{/data.loading}}
+          
+          {{^data.loading}}
+            {{#data.items.length}}
+              <div class="collection-multiselect-list border rounded" style="max-height: {{maxHeight}}px; overflow-y: auto;">
+                {{#data.items}}
+                  <div class="form-check px-3 py-2 border-bottom">
+                    <input class="form-check-input" 
+                           type="checkbox" 
+                           value="{{valueField}}" 
+                           id="{{fieldId}}_{{valueField}}"
+                           data-action="toggle-item"
+                           data-value="{{valueField}}"
+                           {{#isSelected}}checked{{/isSelected}}
+                           {{#disabled}}disabled{{/disabled}}>
+                    <label class="form-check-label w-100" for="{{fieldId}}_{{valueField}}">
+                      {{labelField}}
+                    </label>
+                  </div>
+                {{/data.items}}
+              </div>
+              
+              {{#showSelectAll}}
+                <div class="mt-2">
+                  <button type="button" class="btn btn-sm btn-outline-secondary me-2" data-action="select-all">
+                    Select All
+                  </button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary" data-action="deselect-all">
+                    Deselect All
+                  </button>
+                </div>
+              {{/showSelectAll}}
+            {{/data.items.length}}
+            
+            {{^data.items.length}}
+              <div class="text-muted text-center py-3 border rounded">
+                No items available
+              </div>
+            {{/^data.items.length}}
+          {{/data.loading}}
+          
+          {{#help}}
+            <div class="form-text">{{help}}</div>
+          {{/help}}
+          {{#error}}
+            <div class="invalid-feedback d-block">{{error}}</div>
+          {{/error}}
+        </div>
+      `,
+      ...options
+    });
+    this.name = options.name || "collection_multiselect";
+    this.label = options.label || "";
+    this.help = options.help || "";
+    this.error = options.error || "";
+    this.required = options.required || false;
+    this.disabled = options.disabled || false;
+    this.collection = options.collection;
+    this.collectionParams = options.collectionParams || {};
+    this.labelField = options.labelField || "name";
+    this.valueField = options.valueField || "id";
+    this.excludeIds = options.excludeIds || [];
+    this.requiresActiveGroup = options.requiresActiveGroup || false;
+    this.size = options.size || 8;
+    this.maxHeight = options.maxHeight || this.size * 42;
+    this.showSelectAll = options.showSelectAll !== false;
+    this.selectedValues = Array.isArray(options.value) ? options.value : [];
+    this.loading = false;
+    this.fieldId = options.fieldId || `field_${this.name}`;
+    this.setupCollection();
+  }
+  setupCollection() {
+    if (!this.collection) {
+      console.warn("CollectionMultiSelect: No collection provided");
+      return;
+    }
+    if (this.collectionParams && Object.keys(this.collectionParams).length > 0) {
+      this.collection.params = { ...this.collection.params, ...this.collectionParams };
+    }
+    if (this.requiresActiveGroup) {
+      const app = this.getApp();
+      if (app && app.activeGroup && app.activeGroup.id) {
+        this.collection.params.group = app.activeGroup.id;
+      }
+    }
+    this.collection.on("sync", () => {
+      this.loading = false;
+      this.render();
+    });
+    this.collection.on("error", (error) => {
+      this.loading = false;
+      console.error("CollectionMultiSelect: Collection fetch error", error);
+      this.render();
+    });
+    if (this.collection.isEmpty()) {
+      this.loading = true;
+      this.collection.fetch();
+    }
+  }
+  async getViewData() {
+    const filteredModels = this.collection ? this.collection.models.filter((model) => {
+      const modelId = MOJOUtils.getNestedValue(model, this.valueField);
+      return !this.excludeIds.includes(modelId);
+    }) : [];
+    const items = filteredModels.map((model) => {
+      const labelValue = this.getFieldValue(model, this.labelField);
+      const fieldValue = this.getFieldValue(model, this.valueField);
+      return {
+        labelField: labelValue,
+        valueField: fieldValue,
+        isSelected: this.selectedValues.includes(fieldValue),
+        disabled: this.disabled
+      };
+    });
+    return {
+      loading: this.loading,
+      items,
+      label: this.label,
+      help: this.help,
+      error: this.error,
+      required: this.required,
+      showSelectAll: this.showSelectAll && items.length > 0,
+      maxHeight: this.maxHeight,
+      fieldId: this.fieldId
+    };
+  }
+  /**
+   * Get field value from model or object, supporting dot notation
+   */
+  getFieldValue(item, fieldPath) {
+    if (!item || !fieldPath) return void 0;
+    if (typeof item.get === "function") {
+      const value = item.get(fieldPath);
+      if (value === void 0 && fieldPath.includes(".")) {
+        return MOJOUtils.getNestedValue(item, fieldPath);
+      }
+      return value;
+    }
+    return MOJOUtils.getNestedValue(item, fieldPath);
+  }
+  /**
+   * Handle checkbox toggle
+   */
+  async handleActionToggleItem(event, element) {
+    const value = element.getAttribute("data-value");
+    const isChecked = element.checked;
+    if (isChecked) {
+      if (!this.selectedValues.includes(value)) {
+        this.selectedValues.push(value);
+      }
+    } else {
+      this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    }
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Select all items
+   */
+  async handleActionSelectAll(event, element) {
+    event.preventDefault();
+    const checkboxes = this.element.querySelectorAll('input[type="checkbox"]:not(:disabled)');
+    checkboxes.forEach((cb) => {
+      const value = cb.getAttribute("data-value");
+      if (!this.selectedValues.includes(value)) {
+        this.selectedValues.push(value);
+      }
+      cb.checked = true;
+    });
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Deselect all items
+   */
+  async handleActionDeselectAll(event, element) {
+    event.preventDefault();
+    const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach((cb) => {
+      cb.checked = false;
+    });
+    this.selectedValues = [];
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Get the current selected values
+   */
+  getValue() {
+    return this.selectedValues;
+  }
+  /**
+   * Set the selected values
+   */
+  setValue(values) {
+    this.selectedValues = Array.isArray(values) ? values : [];
+    this.render();
+  }
+  /**
+   * Set the excluded IDs
+   */
+  setExcludeIds(ids) {
+    this.excludeIds = Array.isArray(ids) ? ids : [];
+    this.render();
+  }
+  /**
+   * Refresh the collection
+   */
+  async refresh() {
+    this.loading = true;
+    this.render();
+    await this.collection.fetch();
+  }
+  /**
+   * Get form value for form submission
+   */
+  getFormValue() {
+    return this.selectedValues;
+  }
+  /**
+   * Set form value from form data
+   */
+  setFormValue(value) {
+    this.setValue(value);
+  }
+}
 class DatePicker extends View {
   constructor(options = {}) {
     const {
@@ -4478,6 +4786,7 @@ class FormView extends View {
     this.initializeCustomComponents();
     this.initializeTagInputs();
     this.initializeCollectionSelects();
+    this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
     this.initializeDateRangePickers();
     this.initializePasswordFields();
@@ -4506,6 +4815,7 @@ class FormView extends View {
   initializeCustomComponents() {
     this.initializeTagInputs();
     this.initializeCollectionSelects();
+    this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
     this.initializeDateRangePickers();
     const componentContainers = this.element.querySelectorAll("[data-component]");
@@ -4622,6 +4932,43 @@ class FormView extends View {
       }
     });
   }
+  /**
+   * Initialize CollectionMultiSelect components
+   */
+  initializeCollectionMultiSelects() {
+    const collectionMultiSelectPlaceholders = this.element.querySelectorAll('[data-field-type="collectionmultiselect"]');
+    collectionMultiSelectPlaceholders.forEach((placeholder) => {
+      try {
+        const fieldName = placeholder.getAttribute("data-field-name");
+        const configData = placeholder.getAttribute("data-field-config");
+        const config = JSON.parse(configData);
+        const fieldConfig = this.getFormFieldConfig(fieldName);
+        if (!fieldConfig || !fieldConfig.Collection) {
+          return;
+        }
+        const collection = new fieldConfig.Collection();
+        if (fieldConfig.collectionParams) {
+          collection.params = { ...collection.params, ...fieldConfig.collectionParams };
+        }
+        const collectionMultiSelect = new CollectionMultiSelectView({
+          ...config,
+          collection,
+          containerId: null
+          // We'll mount directly
+        });
+        let value = MOJOUtils.getContextData(this.data, fieldName);
+        if (value) {
+          collectionMultiSelect.setFormValue(value);
+        }
+        collectionMultiSelect.render(true, placeholder);
+        this.customComponents.set(fieldName, collectionMultiSelect);
+        collectionMultiSelect.on("change", (data) => {
+          this.handleFieldChange(fieldName, data.value);
+        });
+      } catch (error) {
+      }
+    });
+  }
   /**
    * Initialize DatePicker components
    */
@@ -6219,4 +6566,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-D0mZGFTl.js.map
+//# sourceMappingURL=FormView-sG1KQVJ8.js.map