web-mojo 2.1.715 → 2.1.758

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

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CPQTGurF.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CYCNA3GB.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -3282,35 +3282,32 @@ class CollectionMultiSelectView extends View {
             {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
           </label>
           {{/label}}
-          
-          {{#data.loading}}
+
+          {{#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>
+          {{/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>
-                {{/data.items}}
+                {{/items}}
               </div>
-              
+
               {{#showSelectAll}}
                 <div class="mt-2">
                   <button type="button" class="btn btn-sm btn-outline-secondary me-2" data-action="select-all">
@@ -3321,15 +3318,15 @@ class CollectionMultiSelectView extends View {
                   </button>
                 </div>
               {{/showSelectAll}}
-            {{/data.items.length}}
-            
-            {{^data.items.length}}
+            {{/items.length}}
+
+            {{^items.length}}
               <div class="text-muted text-center py-3 border rounded">
                 No items available
               </div>
-            {{/^data.items.length}}
-          {{/data.loading}}
-          
+            {{/^items.length}}
+          {{/loading}}
+
           {{#help}}
             <div class="form-text">{{help}}</div>
           {{/help}}
@@ -3357,8 +3354,14 @@ class CollectionMultiSelectView extends View {
     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}`;
-    this.setupCollection();
+  }
+  onInit() {
+    if (this.collection) {
+      this.setupCollection();
+    }
   }
   setupCollection() {
     if (!this.collection) {
@@ -3374,46 +3377,43 @@ class CollectionMultiSelectView extends View {
         this.collection.params.group = app.activeGroup.id;
       }
     }
-    this.collection.on("sync", () => {
-      this.loading = false;
-      this.render();
+    this.collection.on("fetch:start", () => {
+      this.loading = true;
+      this.render(false);
     });
-    this.collection.on("error", (error) => {
+    this.collection.on("fetch:end", () => {
       this.loading = false;
-      console.error("CollectionMultiSelect: Collection fetch error", error);
-      this.render();
+      this.updateItems();
+      this.render(false);
     });
-    if (this.collection.isEmpty()) {
-      this.loading = true;
+    if (!this.collection.isEmpty()) {
+      this.updateItems();
+    }
+  }
+  onAfterMount() {
+    if (this.collection && this.collection.isEmpty()) {
       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) => {
+  /**
+   * 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 {
-        labelField: labelValue,
-        valueField: fieldValue,
-        isSelected: this.selectedValues.includes(fieldValue),
+        label: labelValue,
+        value: fieldValue,
+        index,
+        isSelected: this.selectedValues.some((v) => v == 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
@@ -3430,18 +3430,48 @@ class CollectionMultiSelectView extends View {
     return MOJOUtils.getNestedValue(item, fieldPath);
   }
   /**
-   * Handle checkbox toggle
+   * Handle item toggle with shift-click range selection support
    */
-  async handleActionToggleItem(event, element) {
+  handleActionToggleItem(event, element) {
     const value = element.getAttribute("data-value");
-    const isChecked = element.checked;
-    if (isChecked) {
-      if (!this.selectedValues.includes(value)) {
-        this.selectedValues.push(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 {
-      this.selectedValues = this.selectedValues.filter((v) => v !== value);
+      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
@@ -3452,14 +3482,13 @@ class CollectionMultiSelectView extends View {
    */
   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);
+    this.selectedValues = this.items.filter((item) => !item.disabled).map((item) => item.value);
+    this.items.forEach((item) => {
+      if (!item.disabled) {
+        item.isSelected = true;
       }
-      cb.checked = true;
     });
+    this.render(false);
     this.emit("change", {
       value: this.selectedValues,
       name: this.name
@@ -3470,11 +3499,11 @@ class CollectionMultiSelectView extends View {
    */
   async handleActionDeselectAll(event, element) {
     event.preventDefault();
-    const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
-    checkboxes.forEach((cb) => {
-      cb.checked = false;
-    });
     this.selectedValues = [];
+    this.items.forEach((item) => {
+      item.isSelected = false;
+    });
+    this.render(false);
     this.emit("change", {
       value: this.selectedValues,
       name: this.name
@@ -3491,6 +3520,7 @@ class CollectionMultiSelectView extends View {
    */
   setValue(values) {
     this.selectedValues = Array.isArray(values) ? values : [];
+    this.updateItems();
     this.render();
   }
   /**
@@ -3498,14 +3528,13 @@ class CollectionMultiSelectView extends View {
    */
   setExcludeIds(ids) {
     this.excludeIds = Array.isArray(ids) ? ids : [];
+    this.updateItems();
     this.render();
   }
   /**
    * Refresh the collection
    */
   async refresh() {
-    this.loading = true;
-    this.render();
     await this.collection.fetch();
   }
   /**
@@ -4966,6 +4995,7 @@ class FormView extends View {
           this.handleFieldChange(fieldName, data.value);
         });
       } catch (error) {
+        console.error("CollectionMultiSelect initialization failed:", error);
       }
     });
   }
@@ -6566,4 +6596,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-sG1KQVJ8.js.map
+//# sourceMappingURL=FormView-a7Rl2bmm.js.map