@kalisio/kdk 2.5.2 → 2.6.0

package/map/client/components/styles/KStyleEditorSection.vue

@@ -1,44 +1,54 @@
 <template>
-  <div>
-    <q-expansion-item
-      v-model="isOpened"
-      group="editor"
-      header-class="bg-grey-2"
-      :dense="dense"
-    >
-      <template v-slot:header>
-        <q-item-section v-if="label">
-          {{ $t(label) }}
-        </q-item-section>
-        <q-item-section v-if="!isOpened" side>
-          <KStylePreview :style="style[type]" :type="type" />
-        </q-item-section>
-      </template>
-      <q-list v-hover="{ enter: onEnter }">
-        <slot />
-      </q-list>
-      <KStyleTip
-        v-model="showTip"
-        :style="style[type]"
-        :type="type"
-        target="#style-editor"
-        anchor="top right"
-        self="center middle"
-        no-parent-event
-        @update:model-value="onUpdated"
-      />
-    </q-expansion-item>
-
-  </div>
+  <q-expansion-item
+    ref="expansionItemRef"
+    v-model="isOpened"
+    group="editor"
+    header-class="bg-grey-2"
+    :dense="dense"
+    :disable="!isEnabled"
+    :class="{ 'k-disabled': !isEnabled }"
+  >
+    <template v-slot:header>
+      <q-item-section v-if="canBeDisabled" class="col-auto">
+        <q-checkbox
+          v-model="isEnabled"
+          size="xs"
+        />
+      </q-item-section>
+      <q-item-section v-if="label">
+        {{ $t(label) }}
+      </q-item-section>
+      <q-item-section v-if="!isOpened && isEnabled" side>
+        <KStylePreview :style="style[type]" :type="type" />
+      </q-item-section>
+    </template>
+    <q-list v-hover="{ enter: onEnter }">
+      <slot />
+    </q-list>
+    <KStyleTip
+      v-model="showTip"
+      :style="style[type]"
+      :type="type"
+      target="#style-editor"
+      anchor="top right"
+      self="center middle"
+      no-parent-event
+      @update:model-value="onUpdated"
+    />
+  </q-expansion-item>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import KStylePreview from './KStylePreview.vue'
 import KStyleTip from './KStyleTip.vue'
 
 // Props
-defineProps({
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
   label: {
     type: String,
     required: true
@@ -57,10 +67,19 @@ defineProps({
   dense: {
     type: Boolean,
     default: false
+  },
+  canBeDisabled: {
+    type: Boolean,
+    default: true
   }
 })
 
+// Emits
+const emit = defineEmits(['update:model-value'])
+
 // Data
+const expansionItemRef = ref(null)
+const isEnabled = ref(props.modelValue)
 const isOpened = ref(false)
 const showTip = ref(false)
 
@@ -68,6 +87,14 @@ const showTip = ref(false)
 watch(isOpened, (value) => {
   setTimeout(() => { showTip.value = value }, 500)
 })
+watch(() => props.modelValue, (value) => {
+  isEnabled.value = value
+  if (!value) isOpened.value = false
+})
+watch(isEnabled, (value) => {
+  emit('update:model-value', value)
+  removeQuasarDisabledClass()
+})
 
 // Functions
 function onEnter () {
@@ -76,4 +103,26 @@ function onEnter () {
 function onUpdated (value) {
   if (showTip.value !== value) showTip.value = value
 }
+// Quasar "disabled" css class apply a "not-allowed" cursor, but we don't want that on the checkbox
+// So we need to remove this class and apply a custom class that mimic the style, but without the cursor property
+function removeQuasarDisabledClass () {
+  if (isEnabled.value) return
+  if (expansionItemRef.value) {
+    setTimeout(() => {
+      const target = expansionItemRef.value.$el.querySelector('.disabled')
+      if (target) target.classList.remove('disabled')
+    }, 100)
+  }
+}
+
+onMounted(() => {
+  removeQuasarDisabledClass()
+})
 </script>
+
+<style lang="scss">
+.k-disabled {
+  opacity: 0.6 !important;
+  outline: 0 !important;
+}
+</style>

package/map/client/components/styles/KStyleManager.vue

@@ -2,7 +2,7 @@
   <div class="column">
     <div id="style-manager-header"
       v-if="title || (toolbar && toolbar.length)"
-      class="q-px-md q-mt-md"
+      class="full-width"
     >
       <div v-if="title" class="ellipsis text-h6">
         {{ $tie(title) }}
@@ -10,54 +10,28 @@
       <KPanel
         id="style-manager-toolbar"
         :content="toolbar"
+        class="q-pr-sm no-wrap"
       />
-      <QSeparator inset />
+      <div class="row justify-center q-mt-xs">
+        <KTagSelection :selection="tagsSelection" @selection-changed="onTagSelectionChanged" />
+      </div>
     </div>
     <div id="style-manager-content">
       <q-tab-panels v-model="viewMode" animated>
-        <q-tab-panel name="list">
+        <q-tab-panel name="list" class="q-pa-none">
           <KGrid
             service="styles"
             :append-items="true"
             :base-query="baseQuery"
             :filter-query="filterQuery"
+            :nb-items-per-page="24"
+            :renderer="renderer"
             class="fit"
-            :renderer="{
-              component: 'styles/KStylePreviewItem',
-              options: {
-                avatar: false
-              },
-              actions: [
-                {
-                  id: 'apply-to-layer',
-                  component: 'menu/KMenu',
-                  icon: 'las la-layer-group',
-                  tooltip: 'KStyleManager.APPLY_TO_LAYER',
-                  actionRenderer: 'item',
-                  content: layerMenuContent
-                },
-                {
-                  id: 'apply-to-selection',
-                  icon: 'las la-object-group',
-                  tooltip: 'KStyleManager.APPLY_TO_SELECTION',
-                  handler: applyToSelection
-                },
-                {
-                  id: 'edit-style',
-                  icon: 'las la-edit',
-                  tooltip: 'KStyleManager.EDIT',
-                  handler: editStyle
-                },
-                {
-                  id: 'delete-style',
-                  icon: 'las la-trash',
-                  tooltip: 'KStyleManager.DELETE',
-                  handler: { name: 'removeItem', params: ['confirm'] }
-                },
-              ],
-              dense: true,
-              class: 'col-12'
-            }"
+          />
+          <KFollower
+            :follower="follower"
+            targetId="left-window-magnet"
+            anchor="bottom-right"
           />
         </q-tab-panel>
         <q-tab-panel name="editor">
@@ -79,12 +53,14 @@
 <script setup>
 import _ from 'lodash'
 import sift from 'sift'
-import { computed, ref } from 'vue'
-import { Filter, Sorter } from '@kalisio/kdk/core.client'
+import { computed, ref, onMounted } from 'vue'
 import { useCurrentActivity } from '../../composables/activity.js'
 import { isLayerStyleEditable, editLayerStyle, updateLayerWithFiltersStyle } from '../../utils/utils.layers.js'
 import { editFeaturesStyle } from '../../utils/utils.features.js'
+import { getTagsFilterOptions } from '../../../../core/client/utils/utils.tags.js'
 import KGrid from '../../../../core/client/components/collection/KGrid.vue'
+import KFollower from '../../../../core/client/components/KFollower.vue'
+import KTagSelection from '../../../../core/client/components/tags/KTagSelection.vue'
 import KStyleEditor from './KStyleEditor.vue'
 
 // Props
@@ -100,49 +76,129 @@ const { getSelectedFeaturesByLayer, CurrentActivity } = useCurrentActivity()
 const styleEditor = ref(null)
 const style = ref(null)
 const viewMode = ref('list')
+const baseQuery = ref({ $sort: { name: 1 } })
+const searchString = ref('')
+const tagsOptions = ref([])
+const tagsSelection = ref([])
+const follower = {
+  component: 'layout/KFab',
+  direction: 'up',
+  alignment: 'right',
+  content: [{
+    id: 'create-style',
+    icon: 'las la-plus',
+    tooltip: 'KStyleManager.CREATE_STYLE',
+    handler: editStyle
+  }]
+}
 
 // Computed
-const baseQuery = computed(() => {
-  return Object.assign({}, Sorter.get().query)
-})
 const filterQuery = computed(() => {
-  return Object.assign({}, Filter.get().query)
+  const query = {}
+  if (!_.isEmpty(searchString.value)) {
+    query.name = { $regex: searchString.value }
+  }
+  if (!_.isEmpty(tagsSelection.value)) {
+    query['tags.name'] = { $in: _.map(tagsSelection.value, el => el.name) }
+  }
+  return query
 })
 const toolbar = computed(() => {
   if (viewMode.value === 'editor') return []
   return [
     {
-      component: 'collection/KSorter',
+      component: 'tags/KTagFilter',
+      id: 'style-manager-tags-filter',
+      class: 'q-ml-sm',
+      selection: tagsSelection.value,
+      alignment: 'left',
+      options: tagsOptions.value,
+      onSelectionChanged: onTagSelectionChanged
+    },
+    {
+      component: 'collection/KItemsFilter',
+      class: 'col',
+      value: searchString.value,
+      onSearch: (value) => {
+        searchString.value = value
+      }
+    },
+    {
+      component: 'collection/KItemsSorter',
       id: 'style-manager-sorter-options',
       tooltip: 'KStyleManager.SORT',
       options: [
         { icon: 'las la-sort-alpha-down', value: { field: 'name', order: 1 }, default: true },
         { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } }
-      ]
-    },
-    { component: 'collection/KFilter', style: 'max-width: 200px;' },
-    { component: 'QSpace' },
-    {
-      id: 'add-style',
-      icon: 'las la-plus-circle',
-      tooltip: 'KStyleManager.CREATE_STYLE',
-      size: '1rem',
-      handler: () => { editStyle() }
+      ],
+      onOptionChanged: (option) => {
+        baseQuery.value = { $sort: { [option.field]: option.order } }
+      }
     }
   ]
 })
-const layerMenuContent = computed(() => {
+const renderer = computed(() => {
   const visibleLayers = CurrentActivity.value.getLayers().filter(sift({ isVisible: true, scope: 'user' }))
-  return _.map(visibleLayers, layer => {
+  const layerMenuContent = _.map(visibleLayers, layer => {
     return {
       id: 'apply-style-to-layer',
       label: layer.name,
       handler: (styleToApply) => applyToLayer(layer, styleToApply.item)
     }
   })
+  return {
+    component: 'styles/KStylePreviewItem',
+    options: {
+      avatar: false
+    },
+    actions: [
+      {
+        id: 'apply-to-layer',
+        component: 'menu/KMenu',
+        icon: 'las la-layer-group',
+        tooltip: 'KStyleManager.APPLY_TO_LAYER',
+        actionRenderer: 'item',
+        dense: true,
+        content: layerMenuContent
+      },
+      {
+        id: 'apply-to-selection',
+        icon: 'las la-object-group',
+        tooltip: 'KStyleManager.APPLY_TO_SELECTION',
+        handler: applyToSelection
+      },
+      {
+        id: 'style-menu',
+        component: 'menu/KMenu',
+        dropdownIcon: 'las la-ellipsis-v',
+        actionRenderer: 'item',
+        propagate: false,
+        dense: true,
+        content: [
+          {
+            id: 'edit-style',
+            icon: 'las la-edit',
+            label: 'KStyleManager.EDIT',
+            handler: editStyle
+          },
+          {
+            id: 'delete-style',
+            icon: 'las la-trash',
+            label: 'KStyleManager.DELETE',
+            handler: { name: 'removeItem', params: ['confirm'] }
+          }
+        ]
+      }
+    ],
+    dense: true,
+    class: 'col-12'
+  }
 })
 
 // Functions
+function onTagSelectionChanged (selection) {
+  tagsSelection.value = selection
+}
 async function applyToLayer (layer, styleToApply) {
   await editLayerStyle(layer, styleToApply)
   if (CurrentActivity.value.isInMemoryLayer(layer)) {
@@ -154,7 +210,13 @@ function applyToSelection (styleToApply) {
   _.forEach(getSelectedFeaturesByLayer(), layer => {
     if (isLayerStyleEditable(layer.layer)) {
       _.forEach(layer.features, f => {
-        _.set(f, 'style', _.get(styleToApply, ['item', _.get(type, f.geometry.type, 'point')], null))
+        let geometryType = f.geometry.type
+        if (_.has(f, 'properties.entityStyle')) {
+          // Walls and corridors must be treated as polygons in style editor
+          if (_.has(f, 'properties.entityStyle.wall')) geometryType = 'Polygon'
+          else if (_.has(f, 'properties.entityStyle.corridor')) geometryType = 'Polygon'
+        }
+        _.set(f, 'style', _.get(styleToApply, ['item', _.get(type, geometryType, 'point')], null))
       })
       if (CurrentActivity.value.isInMemoryLayer(layer.layer)) {
         CurrentActivity.value.resetLayer(layer.layer)
@@ -170,7 +232,6 @@ function editStyle (styleToEdit) {
 }
 function onApplied (style) {
   viewMode.value = 'list'
-
   // Update layers with filters that use this style
   const layers = _.filter(CurrentActivity.value?.getLayers ? CurrentActivity.value.getLayers() : [], layer =>
     _.get(layer, 'scope') === 'user' &&
@@ -180,4 +241,9 @@ function onApplied (style) {
 function onCanceled () {
   viewMode.value = 'list'
 }
+
+// Hooks
+onMounted(async () => {
+  tagsOptions.value = await getTagsFilterOptions('styles')
+})
 </script>

package/map/client/components/styles/KStylePreview.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import _ from 'lodash'
 import { computed } from 'vue'
+import { getShapeFromPointStyle, getShapeFromLineStyle, getShapeFromPolygonStyle } from '../../utils/utils.style.js'
 import KShape from '../../../../core/client/components/media/KShape.vue'
 import KStyleTip from './KStyleTip.vue'
 
@@ -35,30 +35,14 @@ const props = defineProps({
 
 // Computed
 const shapeOptions = computed(() => {
-  const size = props.dense ? ['20px', '20px'] : ['24px', '24px']
-  // Point
-  if (props.type === 'point') {
-    let stroke = _.get(props.style, 'stroke')
-    if (stroke) {
-      let width = _.get(stroke, 'width', 1)
-      if (width > 1) width = width / 4
-      stroke = { stroke: { width } }
-    }
-    return _.merge({}, props.style, { size }, stroke)
-  }
-  // Line
-  if (props.type === 'line') {
-    let width = _.get(props.style, 'width', 1)
-    if (width > 1) width = width / 4
-    return { shape: 'polyline', stroke: _.merge({}, props.style, { width }) }
-  }
-  // Polygon
-  let stroke = _.get(props.style, 'stroke')
-  if (stroke) {
-    let width = _.get(stroke, 'width', 1)
-    if (width > 1) width = width / 4
-    stroke = { stroke: { width } }
+  const size = props.dense ? [20, 20] : [24, 24]
+  switch (props.type) {
+    case 'point':
+      return getShapeFromPointStyle(props.style, size)
+    case 'line':
+      return getShapeFromLineStyle(props.style, size)
+    default:
+      return getShapeFromPolygonStyle(props.style, size)
   }
-  return _.merge({}, props.style, { shape: 'polygon' }, { size }, stroke)
 })
 </script>

package/map/client/components/styles/KStylePreviewItem.vue

@@ -3,6 +3,7 @@
     v-bind="$props"
     :actions="itemActions"
     :dense="dense"
+    class="items-center k-style-preview-item"
   >
     <template v-slot:item-content>
       <div
@@ -10,7 +11,14 @@
         :class="{ 'q-gutter-x-sm': dense, 'q-gutter-x-md': !dense }"
       >
         <div class="text-subtitle2">
-          {{ name }}
+          <div>
+            {{ name }}
+          </div>
+          <div>
+            <span v-for="tag in tags">
+              <q-badge class="q-mx-xs" :style="'background-color: ' + tag.color" :text-color="getTextColor(tag)">{{ tag.name }}</q-badge>
+            </span>
+          </div>
         </div>
         <div
           class="row item-baseline no-wrap"
@@ -27,6 +35,7 @@
 
 <script>
 import { mixins as kdkCoreMixins } from '../../../../core/client'
+import { getContrastColor } from '../../../../core/client/utils/utils.colors.js'
 import KItem from '../../../../core/client/components/collection/KItem.vue'
 import KStylePreview from './KStylePreview.vue'
 
@@ -46,6 +55,9 @@ export default {
     name () {
       return this.item.name
     },
+    tags () {
+      return this.item.tags || []
+    },
     pointStyle () {
       return this.item.point
     },
@@ -62,7 +74,16 @@ export default {
     },
     hasSystemScope () {
       return this.item.scope === 'system'
+    },
+    getTextColor (tag) {
+      return getContrastColor(tag.color ? tag.color : 'white')
     }
   }
 }
 </script>
+
+<style lang="scss">
+  .k-style-preview-item:hover {
+    background: $grey-3 !important;
+  }
+</style>

package/map/client/components/tools/KSearchTool.vue

@@ -64,7 +64,7 @@ async function createLocationLayer () {
       type: 'geoJson',
       isVisible: true,
       realtime: true,
-      interactive: false,
+      interactive: true,
       style,
       popup: { template: '<%= properties.name %>' }
     },

package/map/client/components/widget/KElevationProfile.vue

@@ -6,13 +6,16 @@
 
 <script>
 import _ from 'lodash'
+import config from 'config'
 import logger from 'loglevel'
-import { getCssVar, copyToClipboard, exportFile } from 'quasar'
+import { getCssVar, copyToClipboard, exportFile, Notify } from 'quasar'
 import along from '@turf/along'
 import length from '@turf/length'
 import flatten from '@turf/flatten'
 import { Units } from '../../../../core/client/units'
 import { Store } from '../../../../core/client/store'
+import { Events } from '../../../../core/client/events'
+import { api } from '../../../../core/client/api.js'
 import { KChart, KPanel, KStamp } from '../../../../core/client/components'
 import { useCurrentActivity, useHighlight } from '../../composables'
 import { fetchProfileDataset, fetchElevation, extractElevation } from '../../elevation-utils.js'
@@ -342,7 +345,7 @@ export default {
       const geometry = _.get(this.feature, 'geometry.type')
       if (geometry !== 'LineString' && geometry !== 'MultiLineString') {
         logger.warn('[KDK] the selected feature has an invald geometry')
-        this.$notify({ type: 'negative', message: this.$t('KElevationProfile.INVALID_GEOMETRY') })
+        Notify.create({ type: 'negative', message: this.$t('KElevationProfile.INVALID_GEOMETRY') })
         return
       }
       this.highlight(this.feature, false)
@@ -354,10 +357,10 @@ export default {
       const chartWidth = window.size[0]
 
       // Setup the request url options
-      const endpoint = this.$store.get('capabilities.api.gateway') + '/elevation'
+      const endpoint = Store.get('capabilities.api.gateway') + '/elevation'
       const headers = { 'Content-Type': 'application/json' }
       // Add the Authorization header if jwt is defined
-      const jwt = await this.$api.get('storage').getItem(this.$config('gatewayJwt'))
+      const jwt = await api.get('storage').getItem(config.gatewayJwt)
       if (jwt) headers.Authorization = 'Bearer ' + jwt
 
       const dismiss = this.$q.notify({
@@ -392,7 +395,7 @@ export default {
         terrainDataset = dataset
         this.profile = geojson
       } catch (error) {
-        this.$notify({ type: 'negative', message: this.$t('errors.NETWORK_ERROR') })
+        Notify.create({ type: 'negative', message: this.$t('errors.NETWORK_ERROR') })
       }
 
       dismiss()
@@ -406,9 +409,9 @@ export default {
       if (this.profile) {
         try {
           await copyToClipboard(JSON.stringify(this.profile))
-          this.$notify({ type: 'positive', message: this.$t('KElevationProfile.PROFILE_COPIED') })
+          Notify.create({ type: 'positive', message: this.$t('KElevationProfile.PROFILE_COPIED') })
         } catch (error) {
-          this.$notify({ type: 'negative', message: this.$t('KElevationProfile.CANNOT_COPY_PROFILE') })
+          Notify.create({ type: 'negative', message: this.$t('KElevationProfile.CANNOT_COPY_PROFILE') })
           logger.error(error)
         }
       }
@@ -417,8 +420,8 @@ export default {
       if (this.profile) {
         const file = this.title + '.geojson'
         const status = exportFile(file, JSON.stringify(this.profile))
-        if (status) this.$notify({ type: 'positive', message: this.$t('KElevationProfile.PROFILE_EXPORTED', { file }) })
-        else this.$notify({ rtpe: 'negative', message: this.$t('KElevationProfile.CANNOT_EXPORT_PROFILE') })
+        if (status) Notify.create({ type: 'positive', message: this.$t('KElevationProfile.PROFILE_EXPORTED', { file }) })
+        else Notify.create({ rtpe: 'negative', message: this.$t('KElevationProfile.CANNOT_EXPORT_PROFILE') })
       }
     }
   },
@@ -429,17 +432,17 @@ export default {
     this.debouncedRefresh = _.debounce(this.refresh, 100)
 
     // Setup listeners
-    this.$events.on('units-default-length-changed', this.debouncedRefresh)
-    this.$events.on('units-default-altitude-changed', this.debouncedRefresh)
-    if (this.layerStorePath) { this.$events.on(`${_.kebabCase(this.layerStorePath)}-changed`, this.debouncedRefresh) }
-    if (this.featureStorePath) { this.$events.on(`${_.kebabCase(this.featureStorePath)}-changed`, this.debouncedRefresh) }
+    Events.on('units-default-length-changed', this.debouncedRefresh)
+    Events.on('units-default-altitude-changed', this.debouncedRefresh)
+    if (this.layerStorePath) { Events.on(`${_.kebabCase(this.layerStorePath)}-changed`, this.debouncedRefresh) }
+    if (this.featureStorePath) { Events.on(`${_.kebabCase(this.featureStorePath)}-changed`, this.debouncedRefresh) }
   },
   beforeUnmount () {
     // Release listeners
-    this.$events.off('units-default-length-changed', this.debouncedRefresh)
-    this.$events.off('units-default-altitude-changed', this.debouncedRefresh)
-    if (this.layerStorePath) { this.$events.off(`${_.kebabCase(this.layerStorePath)}-changed`, this.debouncedRefresh) }
-    if (this.featureStorePath) { this.$events.off(`${_.kebabCase(this.featureStorePath)}-changed`, this.debouncedRefresh) }
+    Events.off('units-default-length-changed', this.debouncedRefresh)
+    Events.off('units-default-altitude-changed', this.debouncedRefresh)
+    if (this.layerStorePath) { Events.off(`${_.kebabCase(this.layerStorePath)}-changed`, this.debouncedRefresh) }
+    if (this.featureStorePath) { Events.off(`${_.kebabCase(this.featureStorePath)}-changed`, this.debouncedRefresh) }
   },
   setup (props) {
     return {

package/map/client/components/widget/KInformationBox.vue

@@ -22,7 +22,7 @@
 <script>
 import _ from 'lodash'
 import logger from 'loglevel'
-import { copyToClipboard, exportFile } from 'quasar'
+import { copyToClipboard, exportFile, Notify } from 'quasar'
 import { KView, KPanel, KStamp } from '../../../../core/client/components'
 import { generatePropertiesSchema } from '../../utils'
 import { useCurrentActivity, useHighlight } from '../../composables'
@@ -108,9 +108,9 @@ export default {
       if (this.feature) {
         try {
           await copyToClipboard(JSON.stringify(this.feature.properties))
-          this.$notify({ type: 'positive', message: this.$t('KInformationBox.PROPERTIES_COPIED') })
+          Notify.create({ type: 'positive', message: this.$t('KInformationBox.PROPERTIES_COPIED') })
         } catch (error) {
-          this.$notify({ type: 'negative', message: this.$t('KInformationBox.CANNOT_COPY_PROPERTIES') })
+          Notify.create({ type: 'negative', message: this.$t('KInformationBox.CANNOT_COPY_PROPERTIES') })
           logger.error(error)
         }
       }
@@ -125,8 +125,8 @@ export default {
                       _.get(this.layer, 'properties.name')
         const file = name + '.geojson'
         const status = exportFile(file, JSON.stringify(this.feature))
-        if (status) this.$notify({ type: 'negative', message: this.$t('KInformationBox.FEATURE_EXPORTED', { file }) })
-        else this.$notify({ type: 'negative', message: this.$t('KInformationBox.CANNOT_EXPORT_FEATURE') })
+        if (status) Notify.create({ type: 'negative', message: this.$t('KInformationBox.FEATURE_EXPORTED', { file }) })
+        else Notify.create({ type: 'negative', message: this.$t('KInformationBox.CANNOT_EXPORT_FEATURE') })
       }
     }
   },