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

package/src/components/tables/VcsTable.vue

@@ -1,117 +1,40 @@
 <template>
-  <v-card>
-    <VcsTreeviewSearchbar
-      v-if="showSearchbar"
-      :placeholder="$t(searchbarPlaceholder)"
-      v-model="search"
-    />
-    <v-data-table
-      dense
-      item-key="key"
-      :headers="translatedHeaders"
-      :items="items"
-      :items-per-page.sync="itemsPerPageRef"
-      :page.sync="page"
-      :search="search"
-      :custom-filter="handleFilter"
-      hide-default-footer
-      class="vcs-table rounded-0"
-    >
-      <!-- eslint-disable-next-line -->
-      <template #item.key="{ item }">
-        <td
-          :title="$t(item.key)"
-          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-          :style="{'max-width': headers[0].width }"
+  <VcsDataTable
+    :items="items"
+    :headers="headers"
+    item-key="key"
+    v-bind="$attrs"
+  >
+    <!-- eslint-disable-next-line -->
+    <template #item.key="{ item }">
+      <td
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{ 'max-width': headers[0].width }"
+      >
+        {{ $t(item.key) }}
+      </td>
+    </template>
+    <!-- eslint-disable-next-line -->
+    <template #item.value="{ item }">
+      <td
+        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
+        :style="{ 'max-width': headers[1].width }"
+      >
+        <span
+          :class="{
+            'single-line': !/\s/.test(item.value),
+            'multi-line': /\s/.test(item.value),
+          }"
         >
-          {{ $t(item.key) }}
-        </td>
-      </template>
-      <!-- eslint-disable-next-line -->
-      <template #item.value="{ item }">
-        <td
-          :title="$t(item.value)"
-          class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-          :style="{'max-width': headers[1].width }"
-        >
-          <span :class="{ 'single-line': !/\s/.test(item.value), 'multi-line': /\s/.test(item.value), }">
-            {{ $t(item.value) }}
-          </span>
-        </td>
-      </template>
-      <template #footer v-if="items.length > itemsPerPageRef">
-        <v-divider />
-        <v-container class="pa-2 vcs-pagination-bar">
-          <v-row
-            dense
-            no-gutters
-            justify="center"
-          >
-            <v-menu offset-y dense>
-              <template #activator="{ on, attrs }">
-                <VcsButton
-                  small
-                  color="primary"
-                  v-bind="attrs"
-                  v-on="on"
-                >
-                  {{ itemsPerPageRef }}
-                  <v-icon>mdi-chevron-down</v-icon>
-                </VcsButton>
-              </template>
-              <v-list>
-                <v-list-item
-                  v-for="(number, index) in itemsPerPageArray"
-                  :key="index"
-                  @click="updateItemsPerPage(number)"
-                  style="min-height: auto; height: 24px; text-align: right;"
-                >
-                  <v-list-item-title>{{ number }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-            <span class="mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
-            <span class="mx-2">
-              {{ itemsFrom }} - {{ itemsTo }} {{ $t('components.vcsTable.ofItems') }} {{ numberOfItems }}
-            </span>
-            <VcsButton
-              small
-              icon="mdi-chevron-left"
-              @click="formerPage"
-              tooltip="components.vcsTable.formerPage"
-              :disabled="page < 2"
-              class="ml-1"
-            />
-            <VcsButton
-              small
-              icon="mdi-chevron-right"
-              @click="nextPage"
-              tooltip="components.vcsTable.nextPage"
-              :disabled="page > numberOfPages - 1"
-              class="ml-1"
-            />
-          </v-row>
-        </v-container>
-      </template>
-    </v-data-table>
-  </v-card>
+          {{ $t(item.value) }}
+        </span>
+      </td>
+    </template>
+  </VcsDataTable>
 </template>
 <script>
-  import { getCurrentInstance, ref, computed } from 'vue';
-  import {
-    VCard,
-    VDivider,
-    VContainer,
-    VDataTable,
-    VList,
-    VListItem,
-    VListItemTitle,
-    VMenu,
-    VIcon,
-    VRow,
-  } from 'vuetify/lib';
-  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
+  import { computed } from 'vue';
+  import VcsDataTable from './VcsDataTable.vue';
 
   /**
    * @typedef {Object} TableItem
@@ -125,14 +48,20 @@
    * @param {string} [parent]
    * @returns {Array<TableItem>}
    */
-  export function attributesToItems(attributes, items = [], parent = undefined) {
+  export function attributesToItems(
+    attributes,
+    items = [],
+    parent = undefined,
+  ) {
     const nestedKey = (key, nested) => (nested ? `${nested}.${key}` : key);
     Object.entries(attributes).forEach(([key, value]) => {
       if (value instanceof Object) {
         attributesToItems(value, items, nestedKey(key, parent));
       } else {
         const item = { key: nestedKey(key, parent), value };
-        if (parent) { item.group = parent; }
+        if (parent) {
+          item.group = parent;
+        }
         items.push(item);
       }
     });
@@ -140,34 +69,16 @@
   }
 
   /**
-   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table }
+   * @description A table view for feature attributes using VcsDataTable
    * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
-   * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
-   * @vue-prop {string} [searchbarPlaceholder='Search'] - placeholder for searchbar
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
-   * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
-   * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
-   * @vue-computed {number} numberOfPages - number of pages depending on number of items, search and itemsPerPage.
-   * @vue-computed {number} itemsFrom - index of first item shown on current page.
-   * @vue-computed {number} itemsTo - index of last item shown on current page.
    */
   export default {
     name: 'VcsTable',
     components: {
-      VcsButton,
-      VcsTreeviewSearchbar,
-      VCard,
-      VDataTable,
-      VContainer,
-      VDivider,
-      VRow,
-      VMenu,
-      VIcon,
-      VList,
-      VListItem,
-      VListItemTitle,
+      VcsDataTable,
     },
     props: {
       featureId: {
@@ -185,29 +96,8 @@
           { text: 'components.vcsTable.value', value: 'value', width: '160px' },
         ],
       },
-      itemsPerPage: {
-        type: Number,
-        default: 10,
-      },
-      itemsPerPageArray: {
-        type: Array,
-        default: () => [5, 10, 15],
-      },
-      showSearchbar: {
-        type: Boolean,
-        default: true,
-      },
-      searchbarPlaceholder: {
-        type: String,
-        default: 'components.vcsTable.searchbarPlaceholder',
-      },
     },
     setup(props) {
-      const vm = getCurrentInstance().proxy;
-      /**
-       * @type {Ref<UnwrapRef<string>>}
-       */
-      const search = ref('');
       /**
        * @type {ComputedRef<Array<TableItem>>}
        */
@@ -218,165 +108,38 @@
         });
       });
 
-      /**
-       * @param {any} value
-       * @param {string|undefined} filter
-       * @param {TableItem} item
-       * @returns {boolean}
-       */
-      const handleFilter = (value, filter, item) => {
-        if (filter) {
-          const q = filter.toLocaleLowerCase();
-          return [item.key, item.value].some((i) => {
-            const content = i.toString();
-            const translated = vm.$t(content);
-            return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
-          });
-        }
-        return true;
-      };
-
-      /**
-       * @type {ComputedRef<TableItem[]>}
-       */
-      const filteredItems = computed(() => items.value.filter(item => handleFilter(item.value, search.value, item)));
-      const numberOfItems = computed(() => filteredItems.value.length);
-
-      /**
-       * @type {ComputedRef<Array<{text: string, value: string}>>}
-       */
-      const translatedHeaders = computed(() => {
-        return props.headers.map((hd) => {
-          hd.text = vm.$t(hd.text);
-          return hd;
-        });
-      });
-
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
-      const itemsPerPageRef = ref(props.itemsPerPage);
-      const numberOfPages = computed(() => {
-        return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
-      });
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
-      const page = ref(1);
-      const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 1);
-      const itemsTo = computed(() => {
-        const last = page.value * itemsPerPageRef.value;
-        return last < numberOfItems.value ? last : numberOfItems.value;
-      });
-
       return {
-        search,
-        page,
         items,
-        filteredItems,
-        itemsPerPageRef,
-        itemsFrom,
-        itemsTo,
-        numberOfPages,
-        numberOfItems,
-        nextPage() {
-          if (page.value + 1 <= numberOfPages.value) {
-            page.value += 1;
-          }
-        },
-        formerPage() {
-          if (page.value - 1 >= 1) {
-            page.value -= 1;
-          }
-        },
-        updateItemsPerPage(number) {
-          itemsPerPageRef.value = number;
-        },
-        handleFilter,
-        translatedHeaders,
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/shades.scss';
-
-.single-line {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.multi-line {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  height: auto;
-  max-height: 96px;
-}
-
-.noBorder {
-  border-bottom: none !important;
-}
-
-::v-deep {
-  .vcs-table {
-    tbody tr {
-      &:hover {
-        background-color: transparent !important;
-      }
-      &:nth-child(odd) {
-        background-color: var(--v-base-lighten4) !important;
-      }
-    }
-    td {
-      font-size: 14px !important;
-      &.v-data-table__mobile-row {
-        justify-content: left;
-        height: 27px;
-        min-height: auto;
-      }
-    }
-    th.sortable {
-      padding: 0 8px;
-      span {
-        vertical-align: middle;
-        padding: 0 4px 0 0;
-      }
-    }
-    &.theme--light {
-      thead tr th {
-        color: map-get($shades, 'black') !important;
-      }
-    }
-    &.theme--dark {
-      thead tr th {
-        color: map-get($shades, 'white') !important;
-      }
-    }
+  .single-line {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .v-data-table__mobile-row__cell {
-    td.vcs-table.overflow-max-width {
-      max-width: 260px;
-    }
+  .multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: auto;
+    max-height: 96px;
   }
-  .v-btn.vcs-button--small {
-    height: 100% !important;
-    display: block;
+
+  .noBorder {
+    border-bottom: none !important;
   }
-}
 
-.vcs-pagination-bar {
-  .vcs-button-wrap {
-    height: 25px;
-    border: 1px solid;
-    padding: 0 4px;
-    border-radius: 4px;
-    &:hover {
-      border: 1px solid var(--v-primary-base);
+  ::v-deep {
+    .v-data-table__mobile-row__cell {
+      td.vcs-table.overflow-max-width {
+        max-width: 260px;
+      }
     }
   }
-}
 </style>

package/src/contentTree/LayerTree.vue

@@ -28,10 +28,9 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const { id } = props.windowState;
-      const open = app.contentTree.getTreeOpenStateRef(id);
+      const open = app.contentTree.getTreeOpenStateRef(props.windowState.id);
       return {
-        tree: app.contentTree.getComputedVisibleTree(id),
+        tree: app.contentTree.getComputedVisibleTree(props.windowState.id),
         open,
       };
     },

package/src/contentTree/contentTreeCollection.js

@@ -1,5 +1,9 @@
 // eslint-disable-next-line max-classes-per-file
-import { IndexedCollection, makeOverrideCollection, getObjectFromClassRegistry } from '@vcmap/core';
+import {
+  IndexedCollection,
+  makeOverrideCollection,
+  getObjectFromClassRegistry,
+} from '@vcmap/core';
 import { v4 as uuid } from 'uuid';
 import { computed, ref } from 'vue';
 import ContentTreeItem from './contentTreeItem.js';
@@ -56,7 +60,10 @@ class ContentTreeCollection extends IndexedCollection {
     this._listeners = [
       this.added.addEventListener((child) => {
         recreateTree();
-        this._weightListeners.set(child.name, child.weightChanged.addEventListener(recreateTree));
+        this._weightListeners.set(
+          child.name,
+          child.weightChanged.addEventListener(recreateTree),
+        );
       }),
       this.removed.addEventListener((child) => {
         recreateTree();
@@ -71,7 +78,10 @@ class ContentTreeCollection extends IndexedCollection {
      * @type {SubContentTreeItem}
      * @private
      */
-    this._defaultSubtreeItem = new SubContentTreeItem({ name: 'Content', icon: '$vcsLayers', title: 'content.title' }, app);
+    this._defaultSubtreeItem = new SubContentTreeItem(
+      { name: 'Content', icon: '$vcsLayers', title: 'content.title' },
+      app,
+    );
     /**
      * @type {import("vue").Ref<Map<string, TreeViewItem>>}
      * @private
@@ -95,7 +105,9 @@ class ContentTreeCollection extends IndexedCollection {
    */
   _clearSubTrees() {
     this._subTreeViewItems.value.clear();
-    this._subTreeListeners.forEach((cb) => { cb(); });
+    this._subTreeListeners.forEach((cb) => {
+      cb();
+    });
   }
 
   /**
@@ -104,7 +116,8 @@ class ContentTreeCollection extends IndexedCollection {
    * @returns {function():void}
    * @private
    */
-  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) { // TODO make configurable?
+  _createSubtreeActionButton(subTreeViewItem, slot = WindowSlot.STATIC) {
+    // TODO make configurable?
     const id = uuid();
     const app = this._app;
     const { action, destroy } = createToggleAction(
@@ -181,21 +194,24 @@ class ContentTreeCollection extends IndexedCollection {
       const childMaps = [...children.values()];
       childMaps.forEach(setChildren);
       treeViewItem.children.splice(0);
-      treeViewItem.children.push(...childMaps.map(c => c.treeViewItem));
+      treeViewItem.children.push(...childMaps.map((c) => c.treeViewItem));
       return treeViewItem;
     };
 
-    const topLevelItems = [...baseTreeMap.values()]
-      .map(setChildren);
+    const topLevelItems = [...baseTreeMap.values()].map(setChildren);
     const defaultSubTreeViewItem = this._defaultSubtreeItem.getTreeViewItem();
     defaultSubTreeViewItem.children.splice(0);
-    defaultSubTreeViewItem.children.push(...topLevelItems.filter(i => !i[subTreeSymbol]));
+    defaultSubTreeViewItem.children.push(
+      ...topLevelItems.filter((i) => !i[subTreeSymbol]),
+    );
     const subTrees = [
       defaultSubTreeViewItem,
-      ...topLevelItems.filter(i => i[subTreeSymbol]),
+      ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
 
-    this._subTreeListeners = subTrees.map(subTree => this._createSubtreeActionButton(subTree));
+    this._subTreeListeners = subTrees.map((subTree) =>
+      this._createSubtreeActionButton(subTree),
+    );
   }
 
   /**
@@ -251,11 +267,13 @@ class ContentTreeCollection extends IndexedCollection {
     if (subTree) {
       if (subTree === this._subTreeViewItems.value.values().next().value) {
         const subTreeNames = [...this._subTreeViewItems.value.values()]
-          .filter(s => s !== subTree)
-          .map(s => s.name);
-        return this._array.filter(i => !subTreeNames.some(name => i.name.startsWith(name)));
+          .filter((s) => s !== subTree)
+          .map((s) => s.name);
+        return this._array.filter(
+          (i) => !subTreeNames.some((name) => i.name.startsWith(name)),
+        );
       }
-      return this._array.filter(i => i.name.startsWith(subTree.name));
+      return this._array.filter((i) => i.name.startsWith(subTree.name));
     }
     return [];
   }
@@ -268,9 +286,11 @@ class ContentTreeCollection extends IndexedCollection {
     const subTree = this._getSubTree(id);
     if (subTree) {
       if (!subTree[subTreeOpenStateSymbol]) {
-        subTree[subTreeOpenStateSymbol] = ref(this.getChildrenForSubTree(id)
-          .filter(i => i.initOpen)
-          .map(i => i.name));
+        subTree[subTreeOpenStateSymbol] = ref(
+          this.getChildrenForSubTree(id)
+            .filter((i) => i.initOpen)
+            .map((i) => i.name),
+        );
       }
       return subTree[subTreeOpenStateSymbol];
     }
@@ -280,8 +300,12 @@ class ContentTreeCollection extends IndexedCollection {
   destroy() {
     this._clearSubTrees();
     this._defaultSubtreeItem.destroy();
-    this._listeners.forEach((cb) => { cb(); });
-    this._weightListeners.forEach((cb) => { cb(); });
+    this._listeners.forEach((cb) => {
+      cb();
+    });
+    this._weightListeners.forEach((cb) => {
+      cb();
+    });
     this._weightListeners.clear();
     super.destroy();
   }
@@ -306,13 +330,15 @@ export function createContentTreeCollection(app) {
 
   const overrideCollection = makeOverrideCollection(
     collection,
-    () => app.dynamicContextId,
+    () => app.dynamicModuleId,
     null,
-    config => getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
+    (config) =>
+      getObjectFromClassRegistry(app.contentTreeClassRegistry, config, app),
     ContentTreeItem,
   );
 
-  const originalParseItems = overrideCollection.parseItems.bind(overrideCollection);
+  const originalParseItems =
+    overrideCollection.parseItems.bind(overrideCollection);
   overrideCollection.parseItems = async function parseItems(...args) {
     this._suspendListeners = true;
     await originalParseItems(...args);