web-mojo 2.1.703 → 2.1.758

package/dist/chunks/{FormView-DV_HKp0B.js → FormView-a7Rl2bmm.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-BxWFN9k7.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CYCNA3GB.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,286 @@ 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}}
+
+          {{#loading}}
+            <div class="text-center py-3">
+              <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </div>
+          {{/loading}}
+
+          {{^loading}}
+            {{#items.length}}
+              <div class="collection-multiselect-list border rounded p-3" style="max-height: {{maxHeight}}px; overflow-y: auto; background: #fff;">
+                {{#items}}
+                  <div class="d-flex align-items-center mb-2 py-1 px-2 rounded {{^disabled}}hover-bg{{/disabled}}" 
+                       style="cursor: {{^disabled}}pointer{{/disabled}}{{#disabled}}not-allowed{{/disabled}}; user-select: none; transition: background-color 0.15s;"
+                       data-action="{{^disabled}}toggle-item{{/disabled}}"
+                       data-value="{{value}}"
+                       data-index="{{index}}"
+                       {{#disabled}}data-disabled="true"{{/disabled}}>
+                    <i class="bi {{#isSelected}}bi-check-square-fill text-primary{{/isSelected}}{{^isSelected}}bi-square{{/isSelected}} me-2" 
+                       style="font-size: 1.25rem;"></i>
+                    <span {{#disabled}}class="text-muted"{{/disabled}}>{{label}}</span>
+                  </div>
+                {{/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}}
+            {{/items.length}}
+
+            {{^items.length}}
+              <div class="text-muted text-center py-3 border rounded">
+                No items available
+              </div>
+            {{/^items.length}}
+          {{/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.items = [];
+    this.lastClickedIndex = -1;
+    this.fieldId = options.fieldId || `field_${this.name}`;
+  }
+  onInit() {
+    if (this.collection) {
+      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("fetch:start", () => {
+      this.loading = true;
+      this.render(false);
+    });
+    this.collection.on("fetch:end", () => {
+      this.loading = false;
+      this.updateItems();
+      this.render(false);
+    });
+    if (!this.collection.isEmpty()) {
+      this.updateItems();
+    }
+  }
+  onAfterMount() {
+    if (this.collection && this.collection.isEmpty()) {
+      this.collection.fetch();
+    }
+  }
+  /**
+   * Update items array from collection
+   */
+  updateItems() {
+    const filteredModels = this.collection.models.filter((model) => {
+      const modelId = this.getFieldValue(model, this.valueField);
+      return !this.excludeIds.some((id) => id == modelId);
+    });
+    this.items = filteredModels.map((model, index) => {
+      const labelValue = this.getFieldValue(model, this.labelField);
+      const fieldValue = this.getFieldValue(model, this.valueField);
+      return {
+        label: labelValue,
+        value: fieldValue,
+        index,
+        isSelected: this.selectedValues.some((v) => v == fieldValue),
+        disabled: this.disabled
+      };
+    });
+  }
+  /**
+   * 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 item toggle with shift-click range selection support
+   */
+  handleActionToggleItem(event, element) {
+    const value = element.getAttribute("data-value");
+    const clickedIndex = parseInt(element.getAttribute("data-index"), 10);
+    const numValue = Number(value);
+    const typedValue = !isNaN(numValue) && String(numValue) === value ? numValue : value;
+    if (event.shiftKey && this.lastClickedIndex !== -1 && this.lastClickedIndex !== clickedIndex) {
+      const isCurrentlySelected = this.selectedValues.some((v) => v == typedValue);
+      const shouldSelect = !isCurrentlySelected;
+      const start = Math.min(this.lastClickedIndex, clickedIndex);
+      const end = Math.max(this.lastClickedIndex, clickedIndex);
+      for (let i = start; i <= end; i++) {
+        const item = this.items[i];
+        if (item && !item.disabled) {
+          const itemNumValue = Number(item.value);
+          const itemTypedValue = !isNaN(itemNumValue) && String(itemNumValue) === String(item.value) ? itemNumValue : item.value;
+          if (shouldSelect) {
+            if (!this.selectedValues.some((v) => v == itemTypedValue)) {
+              this.selectedValues.push(itemTypedValue);
+            }
+            item.isSelected = true;
+          } else {
+            this.selectedValues = this.selectedValues.filter((v) => v != itemTypedValue);
+            item.isSelected = false;
+          }
+        }
+      }
+    } else {
+      const isCurrentlySelected = this.selectedValues.some((v) => v == typedValue);
+      if (isCurrentlySelected) {
+        this.selectedValues = this.selectedValues.filter((v) => v != typedValue);
+      } else {
+        this.selectedValues.push(typedValue);
+      }
+      const item = this.items.find((i) => i.value == value);
+      if (item) {
+        item.isSelected = !isCurrentlySelected;
+      }
+    }
+    this.lastClickedIndex = clickedIndex;
+    this.render(false);
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Select all items
+   */
+  async handleActionSelectAll(event, element) {
+    event.preventDefault();
+    this.selectedValues = this.items.filter((item) => !item.disabled).map((item) => item.value);
+    this.items.forEach((item) => {
+      if (!item.disabled) {
+        item.isSelected = true;
+      }
+    });
+    this.render(false);
+    this.emit("change", {
+      value: this.selectedValues,
+      name: this.name
+    });
+  }
+  /**
+   * Deselect all items
+   */
+  async handleActionDeselectAll(event, element) {
+    event.preventDefault();
+    this.selectedValues = [];
+    this.items.forEach((item) => {
+      item.isSelected = false;
+    });
+    this.render(false);
+    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.updateItems();
+    this.render();
+  }
+  /**
+   * Set the excluded IDs
+   */
+  setExcludeIds(ids) {
+    this.excludeIds = Array.isArray(ids) ? ids : [];
+    this.updateItems();
+    this.render();
+  }
+  /**
+   * Refresh the collection
+   */
+  async refresh() {
+    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 +4815,7 @@ class FormView extends View {
     this.initializeCustomComponents();
     this.initializeTagInputs();
     this.initializeCollectionSelects();
+    this.initializeCollectionMultiSelects();
     this.initializeDatePickers();
     this.initializeDateRangePickers();
     this.initializePasswordFields();
@@ -4506,6 +4844,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 +4961,44 @@ 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) {
+        console.error("CollectionMultiSelect initialization failed:", error);
+      }
+    });
+  }
   /**
    * Initialize DatePicker components
    */
@@ -6219,4 +6596,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-DV_HKp0B.js.map
+//# sourceMappingURL=FormView-a7Rl2bmm.js.map