@vcmap/ui 6.2.2 → 6.2.4

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default WMSGroupContentTreeItem;
 export type WMSGroupContentTreeItemOptions = import('./contentTreeItem.js').ContentTreeItemOptions & {
     layerName: string;
+    loadOnStartup?: boolean;
     showWhenNotSupported?: boolean;
     setWMSLayersExclusive?: boolean;
     hideStyleSelector?: boolean;
@@ -15,18 +16,41 @@ export type WMSEntry = {
     name: string;
     active: import("vue").Ref<boolean>;
     activeStyle: import("vue").Ref<string>;
-    title: string;
-    extent: import("@vcmap/core").Extent;
-    styles: Array<WMSStyleEntry>;
+    title?: string | undefined;
+    extent?: import("@vcmap/core").Extent | undefined;
+    styles?: WMSStyleEntry[] | undefined;
+};
+export type SerializedWMSLegend = {
+    url: string;
+    width: number;
+    height: number;
+};
+export type SerializedWMSStyle = {
+    name: string;
+    title?: string | undefined;
+    legend?: SerializedWMSLegend[] | undefined;
+};
+export type SerializedWMSLayer = {
+    name: string;
+    title?: string | undefined;
+    /**
+     * Layer extent, in WGS84 coordinates
+     */
+    extent?: number[] | undefined;
+    styles?: SerializedWMSStyle[] | undefined;
+};
+export type SerializedWMSCapabilities = {
+    layers: Array<SerializedWMSLayer>;
 };
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
- * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
- * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * { layerName: string, loadOnStartup?: boolean, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
  * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [loadOnStartup=false] - optional flag to load the capabilities on startup, will be loaded on click otherwise. Leads to an inherent "initOpen" flag  if not true.
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
  * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
- * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ * @property {string[]} [allowedWMSLayers] - The list of layers to be shown, other available layers will not be shown.
  */
 /**
  * @typedef {Object} WMSStyleEntry
@@ -39,9 +63,33 @@ export type WMSEntry = {
  * @property {string} name
  * @property {import("vue").Ref<boolean>} active
  * @property {import("vue").Ref<string>} activeStyle
- * @property {string} title
- * @property {import("@vcmap/core").Extent} extent
- * @property {Array<WMSStyleEntry>} styles
+ * @property {string} [title]
+ * @property {import("@vcmap/core").Extent} [extent]
+ * @property {Array<WMSStyleEntry>} [styles]
+ */
+/**
+ * @typedef {Object} SerializedWMSLegend
+ * @property {string} url
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} SerializedWMSStyle
+ * @property {string} name
+ * @property {string} [title]
+ * @property {SerializedWMSLegend[]} [legend]
+ */
+/**
+ * @typedef {Object} SerializedWMSLayer
+ * @property {string} name
+ * @property {string} [title]
+ * @property {number[]} [extent] Layer extent, in WGS84 coordinates
+ * @property {SerializedWMSStyle[]} [styles]
+ */
+/**
+ * @description The serialized form of WMS Capabilities are used in the configuration to avoid fetching the capabilities on every startup.
+ * @typedef {Object} SerializedWMSCapabilities
+ * @property {Array<SerializedWMSLayer>} layers
  */
 /**
  * A WMSGroupItem, will take over a WMSLayer and request the Capabilities of the layer to show all available
@@ -61,6 +109,11 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _layerName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _loadOnStartup;
     /**
      * @type {boolean}
      * @private
@@ -115,6 +168,12 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _pauseStateChangedListener;
+    /**
+     * Flag to track if children have been loaded
+     * @type {boolean}
+     * @private
+     */
+    private _childrenLoaded;
     /**
      * readonly access, do not manipulate the entries directly.
      * @type {Array<WMSEntry>}
@@ -157,6 +216,12 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _setStateFromLayer;
+    /**
+     * Loads WMS entries and creates child items
+     * @returns {Promise<void>}
+     * @private
+     */
+    private _loadWMSChildren;
     /**
      * @returns {Promise<void>}
      * @private

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -2,6 +2,7 @@ import { markVolatile } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { ref } from 'vue';
 import { parseBoolean } from '@vcsuite/parsers';
+import { is } from '@vcsuite/check';
 import deepEqual from 'fast-deep-equal';
 import WMSCapabilities from 'ol/format/WMSCapabilities';
 import { StateActionState } from '../actions/stateRefAction.js';
@@ -10,6 +11,90 @@ import WmsChildContentTreeItem from './wmsChildContentTreeItem.js';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { legendSymbol } from '../legend/legendHelper.js';
 
+/**
+ *
+ * @param {string} src The OnlineRessource property of the legend
+ * @param {number} width The width of the image
+ * @param {string} title The title of the layer.
+ * @returns {import('../legend/legendHelper.js').StyleLegendItem}
+ */
+function parseLegend(src, width, title) {
+  if (width < 25) {
+    return {
+      type: 'StyleLegendItem',
+      colNr: 1,
+      rows: [{ type: 'IconLegendRow', title, image: { src } }],
+    };
+  }
+  return { type: 'ImageLegendItem', popoutBtn: true, src };
+}
+
+/**
+ *
+ * @param {SerializedWMSCapabilities} capabilities
+ * @returns {WMSEntry[]}
+ */
+function parseSerializedCapabilities(capabilities) {
+  if (capabilities?.layers?.length > 0) {
+    return capabilities.layers
+      .filter((layer) => {
+        if (!is(layer, { name: String })) {
+          getLogger(this.className).warn(
+            `Ignoring WMS Layer without name in layer ${this._layerName}`,
+          );
+          return false;
+        }
+        return true;
+      })
+      .map((layer) => {
+        const styles = layer.styles
+          ?.filter((s) => {
+            if (!is(s, { name: String })) {
+              getLogger(this.className).warn(
+                `Ignoring WMS Style without name in layer ${this._layerName}`,
+              );
+              return false;
+            }
+            return true;
+          })
+          .map((s) => ({
+            name: s.name,
+            title: s.title,
+            legend:
+              s.legend
+                ?.filter((l) => {
+                  if (!is(l, { url: String, width: Number, height: Number })) {
+                    getLogger(this.className).warn(
+                      `Ignoring invalid WMS Legend in style ${s.name} in layer ${this._layerName}`,
+                    );
+                    return false;
+                  }
+                  return true;
+                })
+                .map((l) => parseLegend(l.url, l.width, s.title || '')) || [],
+          }));
+
+        const wmsEntry = {
+          name: layer.name,
+          active: ref(false),
+          activeStyle: ref(''),
+        };
+        if (layer.title) {
+          wmsEntry.title = layer.title;
+        }
+        if (layer.extent) {
+          wmsEntry.extent = layer.extent;
+        }
+        if (styles?.length > 0) {
+          wmsEntry.styles = styles;
+        }
+        return wmsEntry;
+      });
+  } else {
+    return [];
+  }
+}
+
 /**
  * @param {string} rawUrl
  * @param {Record<string, string>} parameters
@@ -49,27 +134,9 @@ async function getWMSEntries(rawUrl, parameters) {
             title: style.Title,
             legend: style.LegendURL?.filter(
               (legend) => legend.OnlineResource,
-            ).map((legend) => {
-              const src = legend.OnlineResource;
-              if (legend.size[0] < 25) {
-                return {
-                  type: 'StyleLegendItem',
-                  colNr: 1,
-                  rows: [
-                    {
-                      type: 'IconLegendRow',
-                      title: layer.Title,
-                      image: { src },
-                    },
-                  ],
-                };
-              }
-              return {
-                type: 'ImageLegendItem',
-                src,
-                popoutBtn: true,
-              };
-            }),
+            ).map((legend) =>
+              parseLegend(legend.OnlineResource, legend.size[0], layer.Title),
+            ),
           };
         }) ?? [];
       return {
@@ -112,12 +179,13 @@ function createWMSChildContentTreeItem(
 
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
- * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
- * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * { layerName: string, loadOnStartup?: boolean, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
  * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [loadOnStartup=false] - optional flag to load the capabilities on startup, will be loaded on click otherwise. Leads to an inherent "initOpen" flag  if not true.
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
  * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
- * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ * @property {string[]} [allowedWMSLayers] - The list of layers to be shown, other available layers will not be shown.
  */
 
 /**
@@ -132,9 +200,34 @@ function createWMSChildContentTreeItem(
  * @property {string} name
  * @property {import("vue").Ref<boolean>} active
  * @property {import("vue").Ref<string>} activeStyle
- * @property {string} title
- * @property {import("@vcmap/core").Extent} extent
- * @property {Array<WMSStyleEntry>} styles
+ * @property {string} [title]
+ * @property {import("@vcmap/core").Extent} [extent]
+ * @property {Array<WMSStyleEntry>} [styles]
+ */
+
+/**
+ * @typedef {Object} SerializedWMSLegend
+ * @property {string} url
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} SerializedWMSStyle
+ * @property {string} name
+ * @property {string} [title]
+ * @property {SerializedWMSLegend[]} [legend]
+ */
+/**
+ * @typedef {Object} SerializedWMSLayer
+ * @property {string} name
+ * @property {string} [title]
+ * @property {number[]} [extent] Layer extent, in WGS84 coordinates
+ * @property {SerializedWMSStyle[]} [styles]
+ */
+/**
+ * @description The serialized form of WMS Capabilities are used in the configuration to avoid fetching the capabilities on every startup.
+ * @typedef {Object} SerializedWMSCapabilities
+ * @property {Array<SerializedWMSLayer>} layers
  */
 
 /**
@@ -154,7 +247,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
    * @param {import("../vcsUiApp.js").default} app
    */
   constructor(options, app) {
-    super(options, app);
+    super({ initOpen: !options.loadOnStartup, ...options }, app);
 
     /**
      * @type {string}
@@ -162,6 +255,12 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._loadOnStartup = parseBoolean(options.loadOnStartup, false);
+
     /**
      * @type {boolean}
      * @private
@@ -180,7 +279,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       false,
     );
     // if WMSLayers should be handled exclusive, the item should handle like a NodeContentTreeItem.
-    this.clickable = !this._setWMSLayersExclusive;
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
 
     /**
      * @type {boolean}
@@ -188,9 +287,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._hideStyleSelector = parseBoolean(options.hideStyleSelector, false);
 
-    this.state = this._setWMSLayersExclusive
-      ? StateActionState.NONE
-      : StateActionState.INACTIVE;
+    this.state =
+      this._setWMSLayersExclusive || !this._loadOnStartup
+        ? StateActionState.NONE
+        : StateActionState.INACTIVE;
 
     /**
      * @type {boolean}
@@ -238,6 +338,13 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._pauseStateChangedListener = false;
 
+    /**
+     * Flag to track if children have been loaded
+     * @type {boolean}
+     * @private
+     */
+    this._childrenLoaded = false;
+
     this._setup();
   }
 
@@ -421,6 +528,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     this._listeners.splice(0);
     this._availableWMSEntries = [];
     this._legendSet = false;
+    this._childrenLoaded = false;
+
+    // Reset clickable state based on initial configuration
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
   }
 
   /**
@@ -463,6 +574,90 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     }
   }
 
+  /**
+   * Loads WMS entries and creates child items
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _loadWMSChildren() {
+    if (this._childrenLoaded || !this._layer) {
+      return;
+    }
+
+    this.state = StateActionState.LOADING;
+    this.clickable = !this._setWMSLayersExclusive;
+
+    try {
+      let availableWMSEntries = [];
+      if (this._layer.properties.capabilities) {
+        availableWMSEntries = parseSerializedCapabilities(
+          this._layer.properties.capabilities,
+        );
+      } else {
+        availableWMSEntries = await getWMSEntries(
+          this._layer.url,
+          this._layer.parameters,
+        );
+      }
+      // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
+      if (!this._layer) {
+        return;
+      }
+      this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
+        return this._allowedWMSLayers
+          ? this._allowedWMSLayers.includes(wmsEntry.name)
+          : true;
+      });
+      const childItems = this._availableWMSEntries.map((wmsEntry) =>
+        createWMSChildContentTreeItem(
+          this._app,
+          wmsEntry,
+          this.name,
+          this._hideStyleSelector,
+        ),
+      );
+      childItems.forEach((childItem) => {
+        this._app.contentTree.add(childItem);
+        childItem.disabled = this.disabled;
+        this._listeners.push(
+          childItem.clickedEvent.addEventListener(() => {
+            this._handleChildClickedEvent(childItem);
+          }),
+          childItem.styleSelected.addEventListener((style) => {
+            this._handleStyleSelectedEvent(childItem, style);
+          }),
+        );
+      });
+      this._childItems = childItems;
+      // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
+      if (this._layer.properties.legend) {
+        this._legendSet = true;
+      }
+      // we need to get the Initial State from the Layer, to set the correct State to the children.
+      this._setStateFromLayer();
+      // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
+      this._setState();
+      this._setLegend();
+      this._childrenLoaded = true;
+
+      // Update clickable state after children are loaded
+      if (!this._setWMSLayersExclusive) {
+        this.clickable = true;
+      }
+    } catch (e) {
+      // if the layer is not there it has been removed while fetching the capabilities.
+      if (this._layer) {
+        this._layer.deactivate();
+        this.visible = false;
+        this._invalid = true;
+      }
+      getLogger(this.className).error(
+        `An error occured while fetching the ${this._layerName} capabilities:`,
+        e,
+      );
+    }
+  }
+
   /**
    * @returns {Promise<void>}
    * @private
@@ -489,7 +684,6 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       if (this._showWhenNotSupported) {
         this.disabled = !isSupported;
       }
-      this.state = StateActionState.LOADING;
       this.setPropertiesFromObject(this._layer);
 
       this._listeners.push(
@@ -517,67 +711,19 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
           }
         }),
       );
-      try {
-        const availableWMSEntries = await getWMSEntries(
-          this._layer.url,
-          this._layer.parameters,
-        );
-        // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
-        if (!this._layer) {
-          return;
-        }
-        this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
-          return this._allowedWMSLayers
-            ? this._allowedWMSLayers.includes(wmsEntry.name)
-            : true;
-        });
-        const childItems = this._availableWMSEntries.map((wmsEntry) => {
-          return createWMSChildContentTreeItem(
-            this._app,
-            wmsEntry,
-            this.name,
-            this._hideStyleSelector,
-          );
-        });
-        childItems.forEach((childItem) => {
-          this._app.contentTree.add(childItem);
-          childItem.disabled = this.disabled;
-          this._listeners.push(
-            childItem.clickedEvent.addEventListener(() => {
-              this._handleChildClickedEvent(childItem);
-            }),
-            childItem.styleSelected.addEventListener((style) => {
-              this._handleStyleSelectedEvent(childItem, style);
-            }),
-          );
-        });
-        this._childItems = childItems;
-        // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
-        if (this._layer.properties.legend) {
-          this._legendSet = true;
-        }
-        // we need to get the Initial State from the Layer, to set the correct State to the children.
-        this._setStateFromLayer();
-        // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
-        this._setState();
-        this._setLegend();
-      } catch (e) {
-        // if the layer is not there it has been removed while fetching the capabilities.
-        if (this._layer) {
-          this._layer.deactivate();
-          this.visible = false;
-          this._invalid = true;
-        }
-        getLogger(this.className).error(
-          `An error occured while fetching the ${this._layerName} capabilities:`,
-          e,
-        );
+
+      if (this._loadOnStartup) {
+        await this._loadWMSChildren();
       }
     }
   }
 
   async clicked() {
     await super.clicked();
+    if (!this._childrenLoaded) {
+      await this._loadWMSChildren();
+      return;
+    }
     if (this.state === StateActionState.NONE || this._setWMSLayersExclusive) {
       return;
     }
@@ -591,12 +737,28 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     await this._setStateToLayer();
   }
 
+  /**
+   * Returns a readonly TreeViewItem used for rendering the current item.
+   * @returns {import('./contentTreeItem.js').TreeViewItem}
+   */
+  getTreeViewItem() {
+    const item = super.getTreeViewItem();
+    item.forceNodeDisplay = !this._loadOnStartup;
+    return item;
+  }
   /**
    * @returns {WMSGroupContentTreeItemOptions}
    */
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    const defaultInitOpen = !this._loadOnStartup;
+    if (this.initOpen !== defaultInitOpen) {
+      config.initOpen = this.initOpen;
+    }
+    if (this._loadOnStartup) {
+      config.loadOnStartup = this._loadOnStartup;
+    }
     if (this._showWhenNotSupported) {
       config.showWhenNotSupported = this._showWhenNotSupported;
     }

package/src/i18n/de.d.ts

@@ -527,6 +527,7 @@ declare namespace messages {
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
+        export let hideWindow: string;
         export let zoomToFeatureAction: string;
         export let zoomToAll: string;
         export let zoomToAllMobile: string;

package/src/i18n/de.js

@@ -372,6 +372,7 @@ const messages = {
     tooltip: 'Suche',
     select: 'Suchergebnis auswählen',
     placeholder: 'Suche nach Adresse oder Ort/Sehenswürdigkeit',
+    hideWindow: 'Suche ausblenden',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
     zoomToAll: 'Auf alle Ergebnisse zoomen',
     zoomToAllMobile: 'Auf alle zoomen',

package/src/i18n/en.d.ts

@@ -527,6 +527,7 @@ declare namespace messages {
         export let select: string;
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
+        export let hideWindow: string;
         export let zoomToFeatureAction: string;
         export let zoomToAllMobile: string;
         export let zoomToAll: string;

package/src/i18n/en.js

@@ -372,6 +372,7 @@ const messages = {
     tooltip: 'Search',
     select: 'Select result item',
     placeholder: 'Search for address or landmark/point of interest',
+    hideWindow: 'Hide search',
     zoomToFeatureAction: 'Zoom to result',
     zoomToAllMobile: 'Zoom to all',
     zoomToAll: 'Zoom to all',

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -9,9 +9,9 @@
       :show-title="false"
       @item-moved="move"
     />
-    <v-sheet v-if="page && pageSize && totalCount && items.length !== 0">
+    <v-sheet v-if="page && pageSize && totalCount > pageSize">
       <v-pagination
-        class="px-2"
+        class="px-4"
         v-model="page"
         :length="Math.ceil(totalCount / pageSize)"
         density="compact"
@@ -35,7 +35,7 @@
   import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { moveItem } from './CollectionComponentList.vue';
+  import { moveItem } from '../../components/lists/dragHelper.js';
 
   /**
    * @description
@@ -137,7 +137,7 @@
           return actions.value;
         }),
         move(event) {
-          moveItem(collectionComponent, event);
+          moveItem(collectionComponent.collection, event);
         },
         openCollectionComponentList() {
           emit('openList', collectionComponent.id);

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -36,34 +36,12 @@
 
 <script>
   import { computed, inject } from 'vue';
-  import { IndexedCollection } from '@vcmap/core';
   import { VSheet } from 'vuetify/components';
   import { createSelectionActions } from '../../components/lists/listHelper.js';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
-
-  /**
-   * Moves an item to a new position.
-   * New position is derived from a target item in the collection.
-   * This ensures correct movement, if rendered list is only a subset of the collection.
-   * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
-   * @param {import("../../components/lists/dragHelper.js").ItemMovedEvent} event
-   */
-  export function moveItem(
-    collectionComponent,
-    { item, targetItem, position },
-  ) {
-    const { collection } = collectionComponent;
-    if (collection instanceof IndexedCollection) {
-      const collectionItem = collection.getByKey(item.name);
-      const keyProperty = collection.uniqueKey;
-      const targetIndexCol = [...collection].findIndex(
-        (i) => i[keyProperty] === targetItem.name,
-      );
-      collection.moveTo(collectionItem, targetIndexCol + position);
-    }
-  }
+  import { moveItem } from '../../components/lists/dragHelper.js';
 
   /**
    * @description
@@ -124,7 +102,7 @@
           return actions.value;
         }),
         move(event) {
-          moveItem(collectionComponent, event);
+          moveItem(collectionComponent.collection, event);
         },
         closeList() {
           emit('closeList', collectionComponent.id);