@vcmap/ui 5.0.0-rc.24 → 5.0.0-rc.25

package/src/i18n/de.js

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Inhalte',
+    empty: 'Aktuell sind keine Einträge verfügbar.',
     search: {
       placeholder: 'Elemente suchen',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Springe zur Startansicht',
   },
   categoryManager: {
-    title: 'Komponenten',
-    tooltip: 'Komponenten',
+    title: 'Mein Arbeitsbereich',
+    tooltip: 'Mein Arbeitsbereich',
+  },
+  collectionManager: {
     more: 'Weitere anzeigen...',
     empty: 'Es gibt noch keine Einträge.',
   },

package/src/i18n/en.js

@@ -14,6 +14,7 @@ const messages = {
   },
   content: {
     title: 'Content',
+    empty: 'Currently there are no entries available.',
     search: {
       placeholder: 'Search elements',
     },
@@ -41,8 +42,10 @@ const messages = {
     homeButton: 'Go to starting view',
   },
   categoryManager: {
-    title: 'Components',
-    tooltip: 'Components',
+    title: 'My Workspace',
+    tooltip: 'My Workspace',
+  },
+  collectionManager: {
     more: 'Show more...',
     empty: 'There are no entries yet.',
   },

package/src/i18n/i18nCollection.js

@@ -103,8 +103,7 @@ class I18nCollection extends IndexedCollection {
   async parseItems(configArray, moduleId) {
     if (Array.isArray(configArray)) {
       configArray.forEach((item) => {
-        item[moduleIdSymbol] = moduleId;
-        this.add(item);
+        this.add({ ...item, [moduleIdSymbol]: moduleId });
       });
     }
   }

package/src/init.js

@@ -3,7 +3,6 @@ import { check, checkMaybe, is } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
 import { vuetify } from './vuePlugins/vuetify.js';
-import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
 import VcsUiApp from './vcsUiApp.js';
 
 /**
@@ -45,10 +44,9 @@ export const VcsUiAppConfigPattern = {
 export default async function initApp(mountTarget) {
   check(mountTarget, String);
   const app = new VcsUiApp();
-  const i18n = createVueI18n();
   new Vue({
     vuetify,
-    i18n,
+    i18n: app.vueI18n,
     render: (h) =>
       h(VcsAppComponentWrapper, {
         props: {
@@ -57,7 +55,6 @@ export default async function initApp(mountTarget) {
       }),
   }).$mount(mountTarget);
 
-  setupI18n(app, i18n);
   return app;
 }
 

package/src/legend/vcsLegend.vue

@@ -22,7 +22,7 @@
                 </v-icon>
                 {{ $t(entry.title) }}
               </div>
-              <VcsActionButtonList small :actions="entry.actions" />
+              <VcsActionButtonList :actions="entry.actions" />
             </div>
           </template>
         </v-expansion-panel-header>

package/src/manager/buttonManager.js

@@ -5,10 +5,20 @@ import { check, checkMaybe } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { ActionPattern } from '../components/lists/VcsActionList.vue';
 
+/**
+ * @param {number} weightA
+ * @param {number} weightB
+ * @returns {number}
+ */
+export function sortByWeight(weightA, weightB) {
+  return weightB - weightA;
+}
+
 /**
  * @typedef ButtonComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {VcsAction} action Action performed by button.
+ * @property {number} [weight=0] Optional weight affecting the displaying order
  */
 
 /**
@@ -16,6 +26,7 @@ import { ActionPattern } from '../components/lists/VcsActionList.vue';
  * @property {string} id
  * @property {string|vcsAppSymbol} owner
  * @property {VcsAction} action
+ * @property {number} weight
  */
 
 /**
@@ -86,6 +97,7 @@ class ButtonManager {
    */
   add(buttonComponentOptions, owner) {
     checkMaybe(buttonComponentOptions.id, String);
+    checkMaybe(buttonComponentOptions.weight, Number);
     check(buttonComponentOptions.action, ActionPattern);
     check(owner, [String, vcsAppSymbol]);
 
@@ -109,6 +121,9 @@ class ButtonManager {
       get action() {
         return reactive(buttonComponentOptions.action);
       },
+      get weight() {
+        return buttonComponentOptions.weight || 0;
+      },
     };
 
     this._buttonComponents.set(id, buttonComponent);

package/src/manager/{categoryManager/CategoryComponent.vue → collectionManager/CollectionComponent.vue}

@@ -1,47 +1,42 @@
 <template>
-  <v-expansion-panel class="px-2" @change="active = !active">
-    <v-expansion-panel-header hide-actions>
+  <v-expansion-panel @change="active = !active">
+    <v-expansion-panel-header hide-actions class="px-2">
       <template #default="{ open }">
         <div class="d-flex justify-space-between">
           <div class="d-flex align-center">
             <v-icon class="mr-1" :class="{ rotate: !open }">
               mdi-chevron-down
             </v-icon>
-            {{ $t(category.title) }}
+            {{ $t(title) }}
           </div>
-          <VcsActionButtonList
-            v-if="category.actions?.length > 0"
-            :actions="category.actions"
-            small
-            class="float-end"
-          />
+          <VcsActionButtonList v-if="actions?.length > 0" :actions="actions" />
         </div>
       </template>
     </v-expansion-panel-header>
     <v-expansion-panel-content class="pb-1">
       <vcs-list
-        :items="category.items.slice(0, 10)"
-        :draggable="category.draggable"
-        :selectable="category.selectable"
-        :single-select="category.singleSelect"
+        :items="items.slice(0, 10)"
+        :draggable="draggable"
+        :selectable="selectable"
+        :single-select="singleSelect"
         v-model="selection"
         :show-title="false"
-        @itemMoved="move"
+        @item-moved="move"
       />
-      <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
-        <VcsButton @click="openCategoryItemWindow" small>
-          {{ $t('categoryManager.more') }}
+      <v-sheet v-if="items.length > 10" class="ma-2 pl-2">
+        <VcsButton @click="openCollectionComponentList">
+          {{ $t('collectionManager.more') }}
         </VcsButton>
       </v-sheet>
-      <v-sheet v-else-if="category.items.length === 0" class="ma-2 pl-2">
-        {{ $t('categoryManager.empty') }}
+      <v-sheet v-else-if="items.length === 0" class="ma-2 pl-2">
+        {{ $t('collectionManager.empty') }}
       </v-sheet>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 
 <script>
-  import { computed, inject, ref } from 'vue';
+  import { inject, ref } from 'vue';
   import {
     VIcon,
     VExpansionPanel,
@@ -54,11 +49,15 @@
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
-  import CategoryComponentList from './CategoryComponentList.vue';
   import { WindowSlot } from '../window/windowManager.js';
+  import CollectionComponentList from './CollectionComponentList.vue';
 
+  /**
+   * Renders the first ten items of a collectionComponent in a List. Uses CollectionComponentList to render more items.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
   export default {
-    name: 'CategoryComponent',
+    name: 'CollectionComponent',
     components: {
       VcsActionButtonList,
       VcsButton,
@@ -69,45 +68,37 @@
       VSheet,
       VIcon,
     },
-    props: {
-      category: {
-        type: Object,
-        required: true,
-      },
-    },
-    setup(props) {
+    setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const windowId = `${props.category.id}-category-list`;
-      const active = ref(false);
-
-      const selection = computed({
-        get() {
-          return props.category.selection;
-        },
-        set(value) {
-          // eslint-disable-next-line vue/no-mutating-props
-          props.category.selection = value;
-        },
-      });
-
-      const { collection } = app.categories.getByKey(
-        props.category.categoryName,
-      );
       /**
-       * index of the first item within the collection
-       * @type {ComputedRef<number>}
+       * @type {CollectionComponent}
        */
-      const collectionItemOffset = computed(() => {
-        return [...collection].findIndex(
-          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
-        );
-      });
+      const collectionComponent = inject('collectionComponent');
+      const windowId = `${collectionComponent.id}-list`;
+      const active = ref(false);
 
       return {
-        selection,
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        actions: collectionComponent.getActions(),
+        move({ item, targetIndex }) {
+          if (collectionComponent.collection instanceof IndexedCollection) {
+            const collectionItem = collectionComponent.collection.getByKey(
+              item.name,
+            );
+            collectionComponent.collection.moveTo(
+              collectionItem,
+              targetIndex, // collectionItemOffset.value for paginated lists?
+            );
+          }
+        },
         active,
-        openCategoryItemWindow() {
+        openCollectionComponentList() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {
               app.windowManager.bringWindowToTop(windowId);
@@ -116,13 +107,12 @@
             app.windowManager.add(
               {
                 id: windowId,
-                component: CategoryComponentList,
+                component: CollectionComponentList,
                 props: {
-                  category: props.category,
                   windowId,
                 },
                 provides: {
-                  selection,
+                  collectionComponent,
                 },
                 slot: WindowSlot.DYNAMIC_LEFT,
               },
@@ -130,15 +120,6 @@
             );
           }
         },
-        move({ item, targetIndex }) {
-          if (collection instanceof IndexedCollection) {
-            const collectionItem = collection.getByKey(item.id);
-            collection.moveTo(
-              collectionItem,
-              targetIndex + collectionItemOffset.value,
-            );
-          }
-        },
       };
     },
   };
@@ -148,4 +129,14 @@
   .rotate {
     transform: rotate(-90deg);
   }
+  .v-icon {
+    font-size: 16px;
+  }
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+    }
+  }
 </style>

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -0,0 +1,62 @@
+<template>
+  <vcs-list
+    :items="items"
+    :draggable="draggable"
+    :selectable="selectable"
+    :single-select="singleSelect"
+    v-model="selection"
+    :title="title"
+    @item-moved="move"
+  />
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import { IndexedCollection } from '@vcmap/core';
+  import VcsList from '../../components/lists/VcsList.vue';
+
+  /**
+   * Renders the items of a CollectionComponent in a List.
+   * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionComponentList',
+    components: {
+      VcsList,
+    },
+    props: {
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+
+      return {
+        title: collectionComponent.title,
+        items: collectionComponent.items,
+        selection: collectionComponent.selection,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        move({ item, targetIndex }) {
+          if (collectionComponent.collection instanceof IndexedCollection) {
+            const collectionItem = collectionComponent.collection.getByKey(
+              item.id,
+            );
+            collectionComponent.collection.moveTo(
+              collectionItem,
+              targetIndex, // collectionItemOffset.value for paginated lists?
+            );
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped></style>

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full">
+    <slot>
+      <collection-component />
+    </slot>
+  </div>
+</template>
+
+<script>
+  import { inject, provide } from 'vue';
+  import CollectionComponent from './CollectionComponent.vue';
+
+  /**
+   * Provides a CollectionComponent of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   * @vue-data {slot} [#default] - Slot rendering collection component.
+   */
+  export default {
+    name: 'CollectionManagerProvider',
+    components: {
+      CollectionComponent,
+    },
+    props: {
+      componentId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      /**
+       * @type {CollectionManager}
+       */
+      const collectionManager = inject('collectionManager');
+      const collectionComponent = collectionManager.get(props.componentId);
+      provide('collectionComponent', collectionComponent);
+    },
+  };
+</script>

package/src/manager/collectionManager/CollectionManager.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-container class="pa-0">
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="componentIds.length > 0"
+      class="rounded-0"
+    >
+      <collection-component-provider
+        v-for="componentId in componentIds"
+        :component-id="componentId"
+        :key="componentId"
+      />
+    </v-expansion-panels>
+  </v-container>
+</template>
+
+<script>
+  import { inject, ref } from 'vue';
+  import { VExpansionPanels, VContainer } from 'vuetify/lib';
+  import CollectionComponentProvider from './CollectionComponentProvider.vue';
+
+  /**
+   * Renders the all managed CollectionComponents of a CollectionManager.
+   * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
+   */
+  export default {
+    name: 'CollectionManager',
+    components: {
+      VExpansionPanels,
+      VContainer,
+      CollectionComponentProvider,
+    },
+    setup() {
+      const collectionManager = inject('collectionManager');
+      const componentIds = ref(collectionManager.componentIds);
+
+      return {
+        componentIds,
+      };
+    },
+  };
+</script>

package/src/manager/collectionManager/categoryManager.js

@@ -0,0 +1,83 @@
+import { moduleIdSymbol } from '@vcmap/core';
+import { vcsAppSymbol } from '../../pluginHelper.js';
+import CollectionManager from './collectionManager.js';
+
+/**
+ * Manages all requested category collections.
+ * Provides an API to add/remove collectionsComponents.
+ * @implements {VcsComponentManager<CollectionComponent, CollectionComponentOptions>}
+ * @extends CollectionManager
+ */
+class CategoryManager extends CollectionManager {
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  /**
+   * @param {import("@vcmap/ui").VcsUiApp} app
+   */
+  constructor(app) {
+    super();
+
+    /**
+     * @type {import("@vcmap/ui").VcsUiApp}
+     * @private
+     */
+    this._app = app;
+    /**
+     * @type {string}
+     * @private
+     */
+    this._dynamicModuleId = this._app.dynamicModuleId;
+
+    this._dynamicModuleIdFilter = (item) =>
+      item[moduleIdSymbol] === this._dynamicModuleId;
+
+    this.addFilterFunction(this._dynamicModuleIdFilter, vcsAppSymbol);
+
+    this._categoryListeners = [
+      this._app.dynamicModuleIdChanged.addEventListener((id) => {
+        this._dynamicModuleId = id;
+        this.reset();
+      }),
+      this._app.categories.removed.addEventListener((category) => {
+        const collectionComponents = this.getCollection(category.collection);
+        collectionComponents.forEach(({ id }) => this.remove(id));
+      }),
+    ];
+  }
+
+  /**
+   * Requests a new or existing category and adds its collection to this manager.
+   * The collectionComponent's id is always the category's name.
+   * Returns requested category and its corresponding collectionComponent.
+   * @param {import("@vcmap/core").CategoryOptions} options
+   * @param {string|symbol} owner
+   * @param {CollectionComponentUiOptions} collectionComponentOptions
+   * @return {{ collectionComponent:CollectionComponent,category:import("@vcmap/core").Category }}
+   */
+  async requestCategory(options, owner, collectionComponentOptions = {}) {
+    const category = await this._app.categories.requestCategory(options);
+    const id = category.name;
+    if (this.has(id)) {
+      const collectionComponent = this.get(id);
+      return { collectionComponent, category };
+    }
+    const collectionComponent = this.add(
+      {
+        ...collectionComponentOptions,
+        id,
+        title: collectionComponentOptions.title ?? category.title ?? id,
+        collection: category.collection,
+      },
+      owner,
+    );
+    return { collectionComponent, category };
+  }
+
+  destroy() {
+    super.destroy();
+    this._categoryListeners.forEach((cb) => cb());
+  }
+}
+
+export default CategoryManager;