web-mojo 2.1.1101 → 2.1.1102

package/dist/index.es.js

@@ -1,14 +1,14 @@
-import { B, a, V, b, c, d } from "./chunks/version-Be_W-mxT.js";
+import { B, a, V, b, c, d } from "./chunks/version-C11Oq51n.js";
 import { V as View, d as dataFormatter, a as Mustache } from "./chunks/Rest-DpbPbmra.js";
 import { D, b as b2, M, r } from "./chunks/Rest-DpbPbmra.js";
 import { G as GroupList, P as Page, T as ToastService, U as User, a as Group } from "./chunks/ContextMenu-Dfdrnd0f.js";
 import { C, b as b3, e, f, g, h, i, d as d2, c as c2 } from "./chunks/ContextMenu-Dfdrnd0f.js";
-import { D as Dialog, W as WebApp } from "./chunks/Dialog-DRf1-ZSd.js";
-import { E, R } from "./chunks/Dialog-DRf1-ZSd.js";
+import { D as Dialog, W as WebApp } from "./chunks/Dialog-e0j2Y7-Q.js";
+import { E, R } from "./chunks/Dialog-e0j2Y7-Q.js";
 import { C as C2, M as M2 } from "./chunks/Collection-CsAk0UhA.js";
-import { M as Member } from "./chunks/ChatView-oka6O6VS.js";
-import { Z, e as e2, d as d3, C as C3, a1, $, E as E2, j, i as i2, q, s, r as r2, w, y, x, t, v, u, F, f as f2, au, av, B as B2, I, A, z, G, N, O, D as D2, K, L, H, J, Y, a2, a7, a8, a4, a3, a5, a6, aa, ac, ab, a9, ad, ae, k, m, l, _, ag, af, aj, ah, ai, P, ao, as, ap, aq, ar, ak, al, am, at, an, V as V2, X, W, R as R2, U, Q, S, h as h2, g as g2, n, p, o, c as c3, b as b4, a as a10, T, aw, aB, aA, ax, ay, az, a0 } from "./chunks/ChatView-oka6O6VS.js";
-import { S as SimpleSearchView, T as TokenManager, a as TopNav } from "./chunks/TokenManager-CWi9-XBF.js";
+import { M as Member } from "./chunks/ChatView-CQf_AUAm.js";
+import { Z, e as e2, d as d3, C as C3, a1, $, E as E2, j, i as i2, q, s, r as r2, w, y, x, t, v, u, F, f as f2, au, av, B as B2, I, A, z, G, N, O, D as D2, K, L, H, J, Y, a2, a7, a8, a4, a3, a5, a6, aa, ac, ab, a9, ad, ae, k, m, l, _, ag, af, aj, ah, ai, P, ao, as, ap, aq, ar, ak, al, am, at, an, V as V2, X, W, R as R2, U, Q, S, h as h2, g as g2, n, p, o, c as c3, b as b4, a as a10, T, aw, aB, aA, ax, ay, az, a0 } from "./chunks/ChatView-CQf_AUAm.js";
+import { S as SimpleSearchView, T as TokenManager, a as TopNav } from "./chunks/TokenManager-CDOXxkjK.js";
 import { a as a11, L as L2 } from "./chunks/ListView-BGJG4GYH.js";
 import { default as default2 } from "./chunks/DataView-QXyfcg2M.js";
 import { F as F2, a as a12 } from "./chunks/FormView-DJBMpeMY.js";
@@ -252,6 +252,286 @@ const ConsoleSilencer = {
   LEVELS
 };
 const installConsoleSilencer = (options) => ConsoleSilencer.install(options);
+class GroupSearchView extends SimpleSearchView {
+  constructor(options = {}) {
+    super({
+      ...options,
+      className: `group-search-view ${options.className || ""}`.trim()
+    });
+    this.showKind = options.showKind !== void 0 ? options.showKind : true;
+    this.parentField = options.parentField || "parent";
+    this.kindField = options.kindField || "kind";
+    this.expandedNodes = /* @__PURE__ */ new Set();
+    this.treeData = [];
+    this.flattenedItems = [];
+    this.autoExpandRoot = options.autoExpandRoot !== void 0 ? options.autoExpandRoot : true;
+    this.autoExpandAll = options.autoExpandAll || false;
+    this.indentSize = options.indentSize || 20;
+    this.showLines = options.showLines !== void 0 ? options.showLines : true;
+  }
+  /**
+   * Build tree hierarchy from flat list
+   */
+  buildTreeHierarchy(items) {
+    if (!items || items.length === 0) {
+      return [];
+    }
+    const itemsById = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      if (!itemsById.has(item.id)) {
+        itemsById.set(item.id, {
+          ...item,
+          children: [],
+          level: 0,
+          hasChildren: false,
+          isExpanded: false
+        });
+      }
+      const parentObj = item[this.parentField];
+      if (parentObj && parentObj.id && !itemsById.has(parentObj.id)) {
+        itemsById.set(parentObj.id, {
+          ...parentObj,
+          children: [],
+          level: 0,
+          hasChildren: false,
+          isExpanded: false
+        });
+      }
+    });
+    const rootItems = [];
+    itemsById.forEach((treeItem, itemId) => {
+      const originalItem = items.find((i3) => i3.id === itemId) || treeItem;
+      const parentId = originalItem[this.parentField]?.id;
+      if (parentId && itemsById.has(parentId)) {
+        const parent = itemsById.get(parentId);
+        parent.children.push(treeItem);
+        parent.hasChildren = true;
+        if (this.autoExpandAll || this.autoExpandRoot && parent.level === 0) {
+          this.expandedNodes.add(parent.id);
+          parent.isExpanded = true;
+        }
+      } else {
+        rootItems.push(treeItem);
+        if (this.autoExpandRoot) {
+          this.expandedNodes.add(treeItem.id);
+          treeItem.isExpanded = true;
+        }
+      }
+    });
+    const calculateLevels = (nodes, level = 0) => {
+      nodes.forEach((node) => {
+        node.level = level;
+        node.isExpanded = this.expandedNodes.has(node.id);
+        if (node.children.length > 0) {
+          node.children.sort((a13, b5) => (a13.name || "").localeCompare(b5.name || ""));
+          calculateLevels(node.children, level + 1);
+        }
+      });
+    };
+    rootItems.sort((a13, b5) => (a13.name || "").localeCompare(b5.name || ""));
+    calculateLevels(rootItems);
+    return rootItems;
+  }
+  /**
+   * Flatten tree structure for rendering
+   */
+  flattenTree(nodes, result = []) {
+    nodes.forEach((node, index2) => {
+      node._isLastChild = index2 === nodes.length - 1;
+      result.push(node);
+      if (node.isExpanded && node.children.length > 0) {
+        this.flattenTree(node.children, result);
+      }
+    });
+    return result;
+  }
+  /**
+   * Update filtered items with tree structure
+   */
+  updateFilteredItems() {
+    if (!this.collection) {
+      this.filteredItems = [];
+      this.treeData = [];
+      this.flattenedItems = [];
+      return;
+    }
+    const items = this.collection.toJSON();
+    let filteredItems = items;
+    if (this.searchValue && this.searchValue.trim()) {
+      const searchTerm = this.searchValue.toLowerCase().trim();
+      filteredItems = items.filter((item) => {
+        return this.searchFields.some((field) => {
+          const value = this.getNestedValue(item, field);
+          return value && value.toString().toLowerCase().includes(searchTerm);
+        });
+      });
+    }
+    this.treeData = this.buildTreeHierarchy(filteredItems);
+    this.flattenedItems = this.flattenTree(this.treeData);
+    this.filteredItems = this.flattenedItems;
+    this.updateResultsView();
+  }
+  /**
+   * Toggle node expansion
+   */
+  toggleNode(itemId) {
+    if (this.expandedNodes.has(itemId)) {
+      this.expandedNodes.delete(itemId);
+    } else {
+      this.expandedNodes.add(itemId);
+    }
+    this.updateFilteredItems();
+  }
+  /**
+   * Handle expand/collapse button clicks
+   */
+  async handleActionToggleNode(event, element) {
+    event.preventDefault();
+    event.stopPropagation();
+    const itemId = parseInt(element.getAttribute("data-item-id"));
+    if (!isNaN(itemId)) {
+      this.toggleNode(itemId);
+    }
+  }
+  /**
+   * Get tree-specific item template
+   */
+  getDefaultItemTemplate() {
+    return `
+            <div class="tree-item-content">
+                <div class="tree-item-name">{{name}}</div>
+                {{#showKind}}
+                <div class="tree-item-kind">{{kind}}</div>
+                {{/showKind}}
+            </div>
+        `;
+  }
+  /**
+   * Process item template with tree structure
+   */
+  processItemTemplate(item) {
+    const indent = item.level * this.indentSize;
+    const hasChildren = item.hasChildren;
+    const isExpanded = item.isExpanded;
+    let expandIcon = "";
+    if (hasChildren) {
+      const iconClass = isExpanded ? "bi-chevron-down" : "bi-chevron-right";
+      expandIcon = `
+                <button class="tree-expand-btn" 
+                        type="button"
+                        data-action="toggle-node" 
+                        data-item-id="${item.id}"
+                        aria-label="${isExpanded ? "Collapse" : "Expand"}">
+                    <i class="bi ${iconClass}"></i>
+                </button>
+            `;
+    } else {
+      expandIcon = '<span class="tree-expand-spacer"></span>';
+    }
+    let content = this.itemTemplate;
+    content = content.replace(/\{\{(\w+)\}\}/g, (match, prop) => {
+      if (prop === "showKind") {
+        return this.showKind ? "true" : "";
+      }
+      return this.getNestedValue(item, prop) || "";
+    });
+    if (this.showKind) {
+      content = content.replace(/\{\{#showKind\}\}(.*?)\{\{\/showKind\}\}/gs, "$1");
+    } else {
+      content = content.replace(/\{\{#showKind\}\}.*?\{\{\/showKind\}\}/gs, "");
+    }
+    let treeConnector = "";
+    if (this.showLines && item.level > 0) {
+      const isLastChild = item._isLastChild || false;
+      const connectorClass = isLastChild ? "tree-connector-last" : "tree-connector";
+      treeConnector = `<span class="${connectorClass}"></span>`;
+    }
+    return `
+            <div class="tree-item-wrapper" data-tree-level="${item.level}">
+                <div class="tree-indent" style="width: ${indent}px;">
+                    ${treeConnector}
+                </div>
+                <div class="tree-item-expand">
+                    ${expandIcon}
+                </div>
+                <div class="tree-item-body flex-grow-1">
+                    ${content}
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Expand all nodes
+   */
+  expandAll() {
+    const expandRecursive = (nodes) => {
+      nodes.forEach((node) => {
+        if (node.hasChildren) {
+          this.expandedNodes.add(node.id);
+          expandRecursive(node.children);
+        }
+      });
+    };
+    expandRecursive(this.treeData);
+    this.updateFilteredItems();
+  }
+  /**
+   * Collapse all nodes
+   */
+  collapseAll() {
+    this.expandedNodes.clear();
+    this.updateFilteredItems();
+  }
+  /**
+   * Expand to specific node (and all parents)
+   */
+  expandToNode(nodeId) {
+    const findAndExpandParents = (nodes, targetId, parents = []) => {
+      for (const node of nodes) {
+        if (node.id === targetId) {
+          parents.forEach((parent) => {
+            this.expandedNodes.add(parent.id);
+          });
+          this.expandedNodes.add(node.id);
+          return true;
+        }
+        if (node.children.length > 0) {
+          if (findAndExpandParents(node.children, targetId, [...parents, node])) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    if (findAndExpandParents(this.treeData, nodeId)) {
+      this.updateFilteredItems();
+    }
+  }
+  /**
+   * Get all root items
+   */
+  getRootItems() {
+    return this.treeData;
+  }
+  /**
+   * Get children of a specific node
+   */
+  getNodeChildren(nodeId) {
+    const findNode = (nodes, targetId) => {
+      for (const node of nodes) {
+        if (node.id === targetId) {
+          return node.children;
+        }
+        if (node.children.length > 0) {
+          const found = findNode(node.children, targetId);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return findNode(this.treeData, nodeId) || [];
+  }
+}
 class Sidebar extends View {
   constructor(options = {}) {
     super({
@@ -299,7 +579,7 @@ class Sidebar extends View {
       }
     }
     this.initializeTooltips();
-    this.searchView = new SimpleSearchView({
+    this.searchView = new GroupSearchView({
       noAppend: true,
       showExitButton: true,
       headerText: "Select Group",
@@ -350,28 +630,36 @@ class Sidebar extends View {
    */
   async showGroupSearchDialog() {
     const collection = new GroupList();
-    const searchView = new SimpleSearchView({
+    const searchView = new GroupSearchView({
       Collection: GroupList,
       collection,
       // Pass the collection instance
-      itemTemplate: `
-            <div class="p-3 border-bottom">
-                <div class="fw-semibold text-dark">{{name}}</div>
-                <small class="text-muted">#{{id}}  {{kind}}</small>
-            </div>
-            `,
       searchFields: ["name"],
-      headerText: "Select Group",
+      headerText: null,
       searchPlaceholder: "Search groups...",
-      headerIcon: "bi-building",
-      showExitButton: false
+      headerIcon: null,
+      maxHeight: Math.min(600, window.innerHeight - 200),
+      showExitButton: false,
+      showKind: true,
+      // Show kind badges (default: true)
+      parentField: "parent",
+      // Field containing parent object
+      kindField: "kind",
+      // Field containing kind/type
+      autoExpandRoot: true,
+      // Auto-expand root items (default: true)
+      autoExpandAll: false,
+      // Auto-expand all nodes (default: false)
+      indentSize: 20,
+      // Pixels per level (default: 20)
+      showLines: true
     });
     this.groupSelectorDialog = new Dialog({
-      title: "Select Group",
       body: searchView,
       size: "md",
-      scrollable: true,
+      header: null,
       noBodyPadding: true,
+      scrollable: false,
       buttons: [],
       closeButton: true
     });