@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/src/components/tables/VcsTable.vue

@@ -19,19 +19,19 @@
     >
       <!-- eslint-disable-next-line -->
       <template #item.key="{ item }">
-        <td class="vcs-table">
+        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.key)">
           {{ $t(item.key) }}
         </td>
       </template>
       <!-- eslint-disable-next-line -->
       <template #item.value="{ item }">
-        <td class="vcs-table">
+        <td class="vcs-table px-2 overflow-max-width" :title="$t(item.value)">
           {{ $t(item.value) }}
         </td>
       </template>
       <template #footer>
         <v-divider />
-        <v-container class="pa-2" v-if="items.length > itemsPerPageRef">
+        <v-container class="pa-2 vcs-pagination-bar accent" v-if="items.length > itemsPerPageRef">
           <v-row
             dense
             no-gutters
@@ -55,20 +55,23 @@
                   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="grey--text mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
-            <span class="grey--text mx-2">{{ itemsFrom }} - {{ itemsTo }} of {{ items.length }}</span>
+            <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="mx-2"
+              class="ml-1"
             />
             <VcsButton
               small
@@ -76,7 +79,7 @@
               @click="nextPage"
               tooltip="components.vcsTable.nextPage"
               :disabled="page > numberOfPages - 1"
-              class="mx-1"
+              class="ml-1"
             />
           </v-row>
         </v-container>
@@ -86,6 +89,18 @@
 </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';
 
@@ -116,17 +131,35 @@
   }
 
   /**
-   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props|vuetify v-data-table }
+   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table }
    * @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<{key:string,value:string}>} items - from attributes derived table items
+   * @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 },
+    components: {
+      VcsButton,
+      VcsTreeviewSearchbar,
+      VCard,
+      VDataTable,
+      VContainer,
+      VDivider,
+      VRow,
+      VMenu,
+      VIcon,
+      VList,
+      VListItem,
+      VListItemTitle,
+    },
     props: {
       featureId: {
         type: String,
@@ -162,7 +195,13 @@
     },
     setup(props) {
       const vm = getCurrentInstance().proxy;
-
+      /**
+       * @type {Ref<UnwrapRef<string>>}
+       */
+      const search = ref('');
+      /**
+       * @type {ComputedRef<Array<TableItem>>}
+       */
       const items = computed(() => {
         return attributesToItems({
           featureId: props.featureId,
@@ -170,6 +209,33 @@
         });
       });
 
+      /**
+       * @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);
@@ -177,42 +243,33 @@
         });
       });
 
+      /**
+       * @type {Ref<UnwrapRef<number>>}
+       */
       const itemsPerPageRef = ref(props.itemsPerPage);
       const numberOfPages = computed(() => {
-        return Math.ceil(items.value.length / itemsPerPageRef.value);
+        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 < items.value.length ? last : items.value.length;
+        return last < numberOfItems.value ? last : numberOfItems.value;
       });
 
-      /**
-       * @param {any} value
-       * @param {string} search
-       * @param {TableItem} item
-       * @returns {boolean}
-       */
-      // eslint-disable-next-line default-param-last
-      const handleFilter = (value, search = '', item) => {
-        const q = search.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 {
-        search: ref(''),
+        search,
         page,
         items,
+        filteredItems,
         itemsPerPageRef,
         itemsFrom,
         itemsTo,
         numberOfPages,
+        numberOfItems,
         nextPage() {
           if (page.value + 1 <= numberOfPages.value) {
             page.value += 1;
@@ -233,13 +290,47 @@
   };
 </script>
 
-<style lang="scss"  scoped>
-.vcs-table {
-  td {
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+<style lang="scss" scoped>
+::v-deep{
+  .vcs-table {
+    td {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &.overflow-max-width{
+        max-width: 160px;
+      }
+      &.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;
+      }
+    }
+  }
+  .v-data-table__mobile-row__cell{
+    td.vcs-table.overflow-max-width{
+      max-width: 260px;
+    }
+  }
+  .v-btn.vcs-button--small{
+    height: 100% !important;
+    display: block;
+  }
+}
+.vcs-pagination-bar{
+  .vcs-button-wrap{
+    height: 25px;
+    border: 1px solid lightgrey;
+    padding: 0 4px;
+    background-color: var(--v-basic-base);
+    border-radius: 4px;
   }
 }
 </style>

package/src/contentTree/LayerTree.vue

@@ -3,7 +3,7 @@
     v-if="tree && tree.length"
     :items="tree"
     :open.sync="open"
-    :has-searchbar="true"
+    :show-searchbar="true"
     :searchbar-placeholder="'content.search.placeholder'"
     item-children="visibleChildren"
   />

package/src/contentTree/contentTreeItem.js

@@ -7,30 +7,30 @@ import { createStateRefAction, StateActionState } from '../actions/stateRefActio
 
 /**
  * @typedef {Object} ContentTreeItemOptions
- * @property {string} name
+ * @property {string} name - name of the item defining the structure within the tree using dot notation.
  * @property {string} [title] - may be unset, if set from object properties later on. required otherwise
  * @property {string} [tooltip] - may be unset or set from object properties later on.
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display
- * @property {number} [weight]
- * @property {string} [infoUrl]
- * @property {boolean} [initOpen=false]
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon - an icon URL or element to display.
+ * @property {number} [weight] - optional weighting of the item. higher weights come first.
+ * @property {string} [infoUrl] - optional info url providing link with additional information.
+ * @property {boolean} [initOpen=false] - groups being initially open or not.
  */
 
 /**
  * A readonly rendering interface of a ContentTreeItem.
  * @typedef {Object} TreeViewItem
  * @property {string} name
- * @property {boolean} visible
- * @property {boolean} clickable
- * @property {boolean} disabled
- * @property {StateActionState} state
- * @property {string} title
+ * @property {boolean} visible - Whether to display this item or not.
+ * @property {boolean} clickable - Whether this item reacts to click events, e.g. with visual feedback
+ * @property {boolean} disabled - Whether this item should be displayed as disabled.
+ * @property {StateActionState} state - The state of this item. NONE if this item cannot have a state.
+ * @property {string} title - The title to be displayed
  * @property {string} [tooltip]
- * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} icon
+ * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
  * @property {Array<VcsAction>} actions
  * @property {Array<TreeViewItem>} children
  * @property {Array<TreeViewItem>} visibleChildren - computed property
- * @property {function():Promise<void>} clicked
+ * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
  */
 
 /**
@@ -376,7 +376,7 @@ class ContentTreeItem {
    * GoToExtent: 8
    * The default weight is set to always push new actions past these.
    * @param {VcsAction} action
-   * @param {number} [weight=0]
+   * @param {number} [weight=11]
    */
   addAction(action, weight = 11) {
     check(action.name, String);

package/src/contentTree/subContentTreeItem.js

@@ -6,7 +6,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 export const subTreeSymbol = Symbol('SubTree');
 
 /**
- * A sub tree item. Subtrees are rendered in their own (not the main content tree).
+ * A subtree item. Subtrees are rendered in their own (not the main content tree).
  * They will receive their own toggle button in the nav bar.
  * Only toplevel items can be content tree items (with a name which does not have a .)
  * @class

package/src/contentTree/vcsObjectContentTreeItem.js

@@ -9,7 +9,7 @@ import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js'
 
 /**
  * An abstract class for VcsObject based items.
- * It handle the overriding/setting of its own values based on
+ * It handles the overriding/setting of its own values based on
  * the VcsObjects properties bag.
  * @class
  * @template {VcsObjectContentTreeItemProperties} T

package/src/featureInfo/AddressBalloonComponent.vue

@@ -31,6 +31,14 @@
 </template>
 <script>
 
+  import {
+    VIcon,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import BalloonComponent from './BalloonComponent.vue';
 
   /**
@@ -38,7 +46,15 @@
    */
   export default {
     name: 'AddressBalloonComponent',
-    components: { BalloonComponent },
+    components: {
+      BalloonComponent,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+    },
   };
 </script>
 

package/src/featureInfo/BalloonComponent.vue

@@ -1,40 +1,43 @@
 <template>
   <v-card
-    class="mx-auto"
+    class="mx-auto mb-1 elevation-0"
     max-width="400"
     v-if="position"
   >
     <slot name="balloon-header" :attrs="{...$props, ...$attrs}">
-      <v-list-item two-line>
+      <v-list-item class="px-2 pr-1 align-start">
         <v-list-item-avatar
           tile
-          size="40"
+          size="20"
+          class="mr-2 align-self-start"
         >
           <v-icon color="primary">
             $vcsInfo
           </v-icon>
         </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title class="text-h5">
-            {{ title }}
+        <v-list-item-content class="py-2 pr-1 align-self-start">
+          <v-list-item-title class="text-h6">
+            {{ $t(balloonTitle) }}
           </v-list-item-title>
-          <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
+          <v-list-item-subtitle v-if="balloonSubtitle">
+            {{ $t(balloonSubtitle) }}
+          </v-list-item-subtitle>
         </v-list-item-content>
         <VcsButton
           @click.stop="close"
           small
           icon="mdi-close-thick"
-          class="mb-8"
+          tooltip="components.close"
         />
       </v-list-item>
     </slot>
 
     <v-divider />
 
-    <v-card class="overflow-y-auto" max-height="250">
+    <v-card class="overflow-y-auto py-2 elevation-0" max-height="250">
       <slot :attrs="{...$props, ...$attrs}">
         <v-list v-for="(value, name, index) in attributes" :key="`attribute-${index}`">
-          <v-list-item>
+          <v-list-item class="px-2">
             <v-list-item-content>
               <v-list-item-title>
                 {{ name }}
@@ -50,6 +53,16 @@
 <script>
 
   import { inject, onMounted, onUnmounted, watch } from 'vue';
+  import {
+    VCard, VDivider,
+    VIcon,
+    VList,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemSubtitle,
+    VListItemTitle,
+  } from 'vuetify/lib';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
 
@@ -57,8 +70,8 @@
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
    * Scrollable, if more than 6 attributes are provided.
    * @vue-prop {string} featureId - feature's id
-   * @vue-prop {string} title - balloon title
-   * @vue-prop {string} subtitle - balloon subtitle
+   * @vue-prop {string} balloonTitle - balloon title
+   * @vue-prop {string} balloonSubtitle - balloon subtitle
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
@@ -66,17 +79,28 @@
    */
   export default {
     name: 'BalloonComponent',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VCard,
+      VList,
+      VListItem,
+      VListItemAvatar,
+      VIcon,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VDivider,
+    },
     props: {
       featureId: {
         type: String,
         required: true,
       },
-      title: {
+      balloonTitle: {
         type: String,
         required: true,
       },
-      subtitle: {
+      balloonSubtitle: {
         type: String,
         required: true,
       },
@@ -125,16 +149,28 @@
   };
 </script>
 
-<style>
-.balloon:before {
-  content: "";
-  position: absolute;
-  bottom: -20px;
-  left: 40px;
-  border-width: 20px 20px 0;
-  border-style: solid;
-  border-color: white transparent;
-  display: block;
-  width: 0;
-}
+<style lang="scss">
+  .balloon hr:first-child {
+    display: none;
+  }
+  .balloon:after {
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    left: 40px;
+    border-width: 20px 20px 0;
+    border-style: solid;
+    display: block;
+    width: 0;
+  }
+  .v-sheet.theme--light.balloon:after{
+    border-color: #FFFFFF transparent;
+  }
+  .v-sheet.theme--dark.balloon:after{
+    border-color: #1E1E1E transparent;
+  }
+  .balloon .v-list-item .v-list-item__title,
+  .balloon .v-list-item .v-list-item__subtitle {
+    line-height: 18px;
+  }
 </style>

package/src/featureInfo/balloonFeatureInfoView.js

@@ -26,14 +26,14 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
 
 /**
  * @typedef {FeatureInfoViewOptions} BalloonFeatureInfoViewOptions
- * @property {string} [title] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
- * @property {string} [subtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonTitle] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonSubtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
  */
 
 /**
  * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
- * @property {string} title
- * @property {string} subtitle
+ * @property {string} balloonTitle
+ * @property {string} balloonSubtitle
  * @property {import("ol/coordinate").Coordinate} position
  */
 
@@ -87,12 +87,12 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @type {string}
      */
-    this.title = options.title;
+    this.balloonTitle = options.balloonTitle;
 
     /**
      * @type {string}
      */
-    this.subtitle = options.subtitle;
+    this.balloonSubtitle = options.balloonSubtitle;
   }
 
   /**
@@ -105,11 +105,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     return {
       ...properties,
       position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
-      title: this.title ?
-        extractNestedKey(this.title, properties.attributes, this.title) :
+      balloonTitle: this.balloonTitle != null ?
+        extractNestedKey(this.balloonTitle, properties.attributes, this.balloonTitle) :
         properties.layerProperties.title,
-      subtitle: this.subtitle ?
-        extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
+      balloonSubtitle: this.balloonSubtitle != null ?
+        extractNestedKey(this.balloonSubtitle, properties.attributes, this.balloonSubtitle) :
         properties.featureId,
     };
   }
@@ -138,11 +138,11 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
    */
   toJSON() {
     const config = super.toJSON();
-    if (this.title) {
-      config.title = this.title;
+    if (this.balloonTitle) {
+      config.balloonTitle = this.balloonTitle;
     }
-    if (this.subtitle) {
-      config.subtitle = this.subtitle;
+    if (this.balloonSubtitle) {
+      config.balloonSubtitle = this.balloonSubtitle;
     }
     return config;
   }

package/src/featureInfo/balloonHelper.js

@@ -99,6 +99,10 @@ export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosi
 
     const map = app.maps.activeMap;
     if (map instanceof CesiumMap) {
+      if (!position[2]) {
+        const [position3D] = await map.getHeightFromTerrain([position]);
+        position[2] = position3D[2];
+      }
       const wgs84Position = Projection.mercatorToWgs84(position);
       const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
       listeners.push(map.getScene().postRender.addEventListener((scene) => {