@kalisio/kdk 2.5.3 → 2.6.0

package/map/client/components/catalog/KCreateView.vue

@@ -18,6 +18,7 @@
 <script>
 import { KModal, KForm } from '../../../../core/client/components'
 import { baseModal } from '../../../../core/client/mixins'
+import { api } from '../../../../core/client/api.js'
 import { useProject } from '../../composables'
 
 export default {
@@ -97,9 +98,9 @@ export default {
           this.creating = true
           const createdView = await this.kActivity.saveContext(view)
           // Add view to current project ? Check if not coming from another planet first
-          if (this.project && (this.project.getPlanetApi() === this.$api)) {
+          if (this.project && (this.project.getPlanetApi() === api)) {
             this.project.views.push({ _id: createdView._id })
-            await this.$api.getService('projects').patch(this.project._id, {
+            await api.getService('projects').patch(this.project._id, {
               views: this.project.views
             })
           }

package/map/client/components/catalog/KFilteredLayerItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <KLayerItem v-if="!layer.filters"
+  <KLayerItem v-if="!layer?.filters && layer?.isVisible !== undefined"
     v-bind="$props"
     :layer="layer"
     @toggled="onToggled"
@@ -8,7 +8,7 @@
       <slot name="status" />
     </template>
   </KLayerItem>
-  <q-tree v-else
+  <q-tree v-else-if="layer?.label"
     :nodes="[layer]"
     node-key="label"
     label-key="label"
@@ -17,7 +17,7 @@
   >
     <template v-slot:default-header="prop">
       <!-- Layer rendering -->
-      <KLayerItem v-if="prop.node.name"
+      <KLayerItem v-if="prop.node.name && layer?.isVisible !== undefined"
         v-bind="$props"
         :layer="layer"
         @toggled="onToggled"
@@ -27,7 +27,7 @@
         </template>
       </KLayerItem>
       <!-- Filter rendering -->
-      <div v-else class="row items-center q-pl-md q-pr-sm no-wrap">
+      <div v-else class="row col items-center q-pl-md q-pr-sm no-wrap">
         <!-- Filter toggle -->
         <q-toggle
           :ref="onToggleRefCreated(prop.node)"
@@ -39,7 +39,8 @@
         />
         <div :class="{
             'text-primary': layer.isVisible,
-            'text-grey-6': layer.isDisabled || !layer.isVisible || !prop.node.isActive
+            'text-grey-6': layer.isDisabled || !layer.isVisible || !prop.node.isActive,
+            'col': true
           }"
         >
           {{ $tie(prop.node.label) }}
@@ -51,6 +52,13 @@
             {{ prop.node.tooltip || prop.node.description }}
           </q-tooltip>
         </div>
+        <!-- Filter actions -->
+        <KPanel
+          :id="`${layer.name}-${prop.node.label}-filter-actions`"
+          :content="filterActions"
+          :context="{ layer, filter: prop.node }"
+          :filter="{ id: { $nin: ['toggle', 'toggle-filter'] } }"
+        />
       </div>
     </template>
   </q-tree>
@@ -58,8 +66,9 @@
 
 <script setup>
 import _ from 'lodash'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import KLayerItem from './KLayerItem.vue'
+import KPanel from '../../../../core/client/components/KPanel.vue'
 
 // Props
 const props = defineProps({
@@ -75,6 +84,17 @@ const emit = defineEmits(['toggled', 'filter-toggled'])
 // Datas
 const filters = ref([])
 
+// Computed
+const filterActions = computed(() => {
+  const filterActions = _.cloneDeep(props.layer.actions)
+  _.forEach(filterActions, (action) => {
+    action.content = _.filter(action.content, (item) => {
+      return _.get(item, 'isFilterAction')
+    })
+  })
+  return filterActions
+})
+
 // Functions
 function onToggleRefCreated (node) {
   if (node) {

package/map/client/components/catalog/KImportLayer.vue

@@ -27,7 +27,7 @@ import _ from 'lodash'
 import path from 'path-browserify'
 import { ref, computed } from 'vue'
 import { generatePropertiesSchema } from '../../utils'
-import { i18n } from '../../../../core/client'
+import { Events, i18n } from '../../../../core/client'
 import { KPanel } from '../../../../core/client/components'
 import { useCurrentActivity } from '../../composables'
 import KForm from '../../../../core/client/components/form/KForm.vue'
@@ -56,7 +56,7 @@ const fileFormSchema = computed(() => {
           component: 'form/KFileField',
           label: 'KImportLayer.FILE_FIELD_LABEL',
           mimeTypes: '.json,.geojson,.gpx,.kml',
-          maxSize: 1024 * 1024 * 1024
+          maxFileSize: 1024 * 1024 * 1024
         }
       }
     },
@@ -147,7 +147,10 @@ async function onImport () {
   const fileResult = fileForm.value.validate()
   const propertiesResult = propertiesForm.value.validate()
   if (!fileResult.isValid || !propertiesResult.isValid) return
-  this.importing = true
+  if (CurrentActivity.value.hasLayer(propertiesResult.values.name)) {
+    Events.emit('error', { message: i18n.t('KImportLayer.LAYER_ALREADY_EXISTS', { layer: propertiesResult.values.name }) })
+  }
+  importing.value = true
   await CurrentActivity.value.addGeoJsonLayer({
     name: propertiesResult.values.name,
     description: propertiesResult.values.description,

package/map/client/components/catalog/KLayerCategories.vue

@@ -40,7 +40,7 @@
 
 <script>
 import _ from 'lodash'
-import { mixins as kCoreMixins } from '../../../../core/client'
+import { api, Store, mixins as kCoreMixins } from '../../../../core/client'
 import { KModal, KGrid, KAction, KPanel, KForm } from '../../../../core/client/components'
 
 export default {
@@ -195,8 +195,8 @@ export default {
   },
   data () {
     return {
-      filter: this.$store.get('filter'),
-      sorter: this.$store.get('sorter'),
+      filter: Store.get('filter'),
+      sorter: Store.get('sorter'),
       mode: 'list',
       count: undefined,
       savingCategory: false,
@@ -226,7 +226,7 @@ export default {
         category.type = 'Category'
         this.savingCategory = true
         try {
-          await this.$api.getService('catalog').create(category)
+          await api.getService('catalog').create(category)
           this.savingCategory = false
         } catch (error) {
           this.savingCategory = false
@@ -241,7 +241,7 @@ export default {
       if (result.isValid) {
         this.savingCategory = true
         try {
-          await this.$api.getService('catalog').patch(this.editedCategory._id, result.values)
+          await api.getService('catalog').patch(this.editedCategory._id, result.values)
           this.savingCategory = false
         } catch (error) {
           this.savingCategory = false
@@ -281,7 +281,7 @@ export default {
       this.editedCategory = category
     },
     removeCategory (category) {
-      this.$api.getService('catalog').remove(category._id)
+      api.getService('catalog').remove(category._id)
     }
   }
 }

package/map/client/components/catalog/KLayerItem.vue

@@ -30,13 +30,13 @@
     <q-space />
     <slot name="status">
       <q-icon name="las la-exclamation-circle" size="sm" color="warning" v-if="layer.isDisabled">
-        <q-tooltip>{{ $t('KLayersSelector.LAYER_DISABLED') }}</q-tooltip>
+        <q-tooltip>{{ $t('KLayersList.LAYER_DISABLED') }}</q-tooltip>
       </q-icon>
     </slot>
     <!-- Layer actions -->
     <KPanel
       :id="`${layer.name}-actions`"
-      :content="layer.actions"
+      :content="layerActions"
       :context="layer"
       :filter="{ id: { $nin: ['toggle', 'toggle-filter'] } }"
     />
@@ -74,6 +74,16 @@ const label = computed(() => {
   const label = _.get(props.layer, 'label')
   return Document.sanitizeHtml(label || _.get(props.layer, 'name'))
 })
+const layerActions = computed(() => {
+  const layerActions = _.cloneDeep(_.get(props.layer, 'actions', []))
+  _.forEach(layerActions, (action) => {
+    if (!_.has(action, 'content')) return
+    action.content = _.filter(action.content, (item) => {
+      return !_.get(item, 'isFilterAction')
+    })
+  })
+  return layerActions
+})
 
 // Functions
 function onToggled () {

package/map/client/components/catalog/KLayersList.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <slot name="header" />
+
+    <div v-if="layers && layers.length > 0">
+      <template v-for="(layer, index) in layers">
+        <div
+          v-if="layer"
+          :key="index"
+          class="draggable-layer"
+          :draggable="isDraggable()"
+          @dragstart="onDragStart($event, index, layer)"
+          @drop="onDrop($event, index)"
+          @dragover.prevent
+          @dragenter.prevent
+        >
+          <q-icon v-if="isDraggable()" name="las la-grip-lines" color="primary" text-color="black" class="drag-handle" />
+          <component
+            :is="layerRenderer.component"
+            v-bind="layerRenderer.options"
+            :layer="layer"
+            @toggled="onLayerToggled"
+            @filter-toggled="onLayerFilterToggled"
+            style="flex-grow: 1;"
+          />
+        </div>
+      </template>
+    </div>
+
+    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pa-sm">
+      <KStamp
+        icon="las la-exclamation-circle"
+        icon-size="sm"
+        :text="$t('KLayersList.NO_LAYER_AVAILABLE')"
+        direction="horizontal"
+      />
+    </div>
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed, ref } from 'vue'
+import { utils } from '../../../../core/client'
+import KStamp from '../../../../core/client/components/KStamp.vue'
+import { useCurrentActivity } from '../../composables'
+import { getCategories } from '../../utils.map'
+
+// Props
+const props = defineProps({
+  category: {
+    type: Object,
+    default: () => {}
+  },
+  layers: {
+    type: Array,
+    default: () => []
+  },
+  layersDraggable: {
+    type: [Boolean, Function],
+    default: () => false
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// Emits
+const emit = defineEmits(['orphan-layer-updated'])
+
+// Data
+const draggedIndex = ref(null)
+const { CurrentActivity } = useCurrentActivity()
+const { updateCategoriesOrder, updateLayersOrder } = CurrentActivity.value
+
+// Computed
+const layerRenderer = computed(() => ({
+  component: utils.loadComponent(_.get(props.options, 'renderer', 'catalog/KFilteredLayerItem')),
+  options: _.get(props.options, 'renderer.options', {})
+}))
+
+// Drag & Drop handlers
+function onDragStart (event, index, layer) {
+  draggedIndex.value = index
+  event.dataTransfer.dropEffect = 'move'
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('draggedIndex', draggedIndex.value)
+  event.dataTransfer.setData('layerName', layer?.name)
+  event.dataTransfer.setData('categoryID', props.category?._id)
+}
+
+async function onDrop (event, targetIndex) {
+  const layerName = event.dataTransfer.getData('layerName')
+  const layer = props.layers.find(layer => layer.name === layerName)
+  const sourceCategoryId = event.dataTransfer.getData('categoryID')
+  if (!props.category?._id) { // source and target are orphan layers
+    // WARNING: Need to use a string here as dataTransfer serialize to strings
+    if (sourceCategoryId !== 'undefined') return
+    emit('orphan-layer-updated', targetIndex, draggedIndex.value)
+    return
+  }
+  if (layerName && layerName.length > 0) { // source is layer
+    const isLayerFromCurrentCategory = props.category._id === sourceCategoryId
+    // Avoid mutating read-only prop
+    const categoryLayers = _.clone(props.category.layers)
+    if (isLayerFromCurrentCategory) { // reorder layers in category
+      const removedLayers = categoryLayers.splice(draggedIndex.value, 1)
+      if (removedLayers.length > 0) categoryLayers.splice(targetIndex, 0, removedLayers[0])
+      await updateLayersOrder(props.category._id, { layers: categoryLayers }, layer)
+    } else { // layer isn't from current category: move layer to current category
+      // WARNING: Need to use a string here as dataTransfer serialize to strings
+      if (sourceCategoryId === 'undefined') { // source is orphan layer
+        emit('orphan-layer-updated', -1, draggedIndex.value)
+        categoryLayers.splice(targetIndex, 0, layerName)
+        await updateLayersOrder(props.category._id, { layers: categoryLayers }, layer)
+      } else { // source isn't orphan layer
+        const sourceCategory = await getCategories({ query: { _id: sourceCategoryId } })
+        const sourceCategoryLayers = sourceCategory[0].layers
+        const removedLayers = sourceCategoryLayers.splice(draggedIndex.value, 1)
+        if (removedLayers.length > 0) categoryLayers.splice(targetIndex, 0, removedLayers[0])
+        await updateLayersOrder(props.category._id, { layers: categoryLayers }, layer)
+        await updateLayersOrder(sourceCategoryId, { layers: sourceCategoryLayers }, layer)
+      }
+    }
+  } else { // drag source is category: reorder categories with target layer's category
+    const sourceCategoryId = event.dataTransfer.getData('categoryID')
+    const targetCategoryId = props.category._id
+    await updateCategoriesOrder(sourceCategoryId, targetCategoryId)
+  }
+}
+
+// Layer toggle handling
+function toggleLayer (layer) {
+  const toggleAction = _.find(layer.actions, { id: 'toggle' })
+  if (toggleAction) toggleAction.handler()
+}
+
+async function onLayerToggled (layer) {
+  if (layer.isDisabled) return
+  if (props.options.exclusive) {
+    // Due to v-model the visible flag has already been changed on the layer
+    // Simply reset others layers before activating the new one to avoid any problem
+    const visibleLayers = _.filter(props.layers, { isVisible: true })
+    for (const visibleLayer of visibleLayers) {
+      if (visibleLayer !== layer) await toggleLayer(visibleLayer)
+    }
+  }
+  await toggleLayer(layer)
+}
+
+function toggleLayerFilter (layer, filter) {
+  const toggleFilterAction = _.find(layer.actions, { id: 'toggle-filter' })
+  if (toggleFilterAction) toggleFilterAction.handler(filter)
+}
+
+function onLayerFilterToggled (layer, filter) {
+  if (layer.isDisabled) return
+  toggleLayerFilter(layer, filter)
+}
+
+function isDraggable () {
+  return (typeof props.layersDraggable === 'function' ? props.layersDraggable(props.category) : props.layersDraggable)
+}
+</script>
+
+<style scoped>
+.draggable-layer {
+  display: flex;
+  align-items: center;
+}
+.drag-handle {
+  cursor: move;
+  margin-left: 16px;
+  font-size: 18px;
+  user-select: none;
+}
+</style>

package/map/client/components/catalog/KLayersPanel.vue

@@ -24,20 +24,45 @@
         />
       </slot>
       <!-- Orphan layers -->
-      <KLayersSelector
-        :layers="orphanLayers"
+      <KLayersList
+        :layers="filteredOrphanLayers"
+        :layersDraggable="layersDraggable"
         :options="orphanLayersOptions"
+        @orphanLayerUpdated="onOrphanLayerUpdated"
       />
       <!-- Categorized layers -->
-      <template v-for="category in filteredCategories">
+      <template v-for="(category, index) in filteredCategories">
         <KCategoryItem
           v-if="isCategoryVisible(category)"
           :key="getCategoryId(category)"
           :id="getCategoryId(category)"
           :category="category"
           :layers="layersByCategory[category.name]"
+          :layersDraggable="layersDraggable"
           :forecastModels="forecastModels"
-        />
+        >
+          <template v-slot:header>
+            <div
+              :key="index"
+              class="draggable-category"
+              :draggable="isDraggable(category)"
+              @dragstart="onDragStart($event, index, category)"
+              @drop="onDrop($event, index)"
+              @dragover.prevent
+              @dragenter.prevent
+            >
+              <q-item-section v-if="isDraggable(category)" avatar class="drag-handle">
+                <q-icon name="las la-bars" color="primary" text-color="black" size="20px" />
+              </q-item-section>
+
+              <q-icon v-else :name="getCategoryIcon(category)" color="primary" text-color="black" size="20px" style="margin-right: 16px;" />
+
+              <q-item-section>
+                {{ i18n.tie(category.name) }}
+              </q-item-section>
+            </div> 
+          </template>       
+        </KCategoryItem>
       </template>
       <!-- Custom content -->
       <slot name="after-content">
@@ -73,31 +98,36 @@ export default {
 <script setup>
 import _ from 'lodash'
 import sift from 'sift'
-import { ref, watchEffect, onMounted } from 'vue'
-import { utils as coreUtils } from '../../../../core/client'
-import { getLayersByCategory, getOrphanLayers } from '../../utils'
-import { useProject } from '../../composables'
-import KLayersSelector from './KLayersSelector.vue'
+import { ref, watchEffect } from 'vue'
+import { utils as coreUtils, i18n } from '../../../../core/client'
+import { useCurrentActivity, useProject } from '../../composables'
+import { getLayersByCategory } from '../../utils'
 import KCategoryItem from './KCategoryItem.vue'
+import KLayersList from './KLayersList.vue'
 
 // Props
 const props = defineProps({
-  layers: {
-    type: [Object, Array],
-    default: () => []
-  },
   layersFilter: {
     type: [Object, Function],
     default: () => {}
   },
-  layerCategories: {
-    type: Array,
-    default: () => []
+  orphanLayersFilter: {
+    type: [Object, Function],
+    // By default orphan layers are user/activity layers
+    default: () => ({ scope: { $in: ['user', 'activity'] } })
   },
   layerCategoriesFilter: {
     type: [Object, Function],
     default: () => {}
   },
+  layersDraggable: {
+    type: [Boolean, Function],
+    default: false
+  },
+  categoriesDraggable: {
+    type: [Boolean, Function],
+    default: () => false
+  },
   forecastModels: {
     type: Array,
     default: () => []
@@ -138,10 +168,13 @@ const props = defineProps({
 
 // Data
 const { hasProject } = useProject()
+const { CurrentActivity } = useCurrentActivity()
+const { forecastModels, updateCategoriesOrder, updateLayersOrder, updateOrphanLayersOrder } = CurrentActivity.value
 const orphanLayersOptions = { hideIfEmpty: true }
 const filteredCategories = ref([])
 const layersByCategory = ref({})
-const orphanLayers = ref([])
+const filteredOrphanLayers = ref([])
+const draggedIndex = ref(null)
 
 // Watch
 watchEffect(() => { refresh() })
@@ -150,36 +183,113 @@ watchEffect(() => { refresh() })
 function getCategoryId (category) {
   return _.kebabCase(category.name)
 }
+function getCategoryIcon (category) {
+  return _.get(category, 'icon.name', _.get(category, 'icon'), 'las la-bars')
+}
 function isCategoryVisible (category) {
-// Show a built-in category only if it has some layers.
-// Indeed, depending on the app configuration, none might be available for this category.
-// User-defined categories are visible by default, even if empty,
-// except if used inside a project as in this case having no layers means we don't want to use this category
+  const options = category.options || category
+  // Show a built-in category only if it has some layers.
+  // Indeed, depending on the app configuration, none might be available for this category.
+  // User-defined categories are visible by default, even if empty,
+  // except if used inside a project as in this case having no layers means we don't want to use this category.
+  // App might also force to hide it anyway with the hideIfEmpty option.
   const isEmpty = (layersByCategory.value[category.name].length === 0)
-  if (isEmpty) {
-    if (hasProject()) return false
-    else return !_.get(category, 'hideIfEmpty', !category._id)
-  }
-  return true
+  return (isEmpty ? !_.get(options, 'hideIfEmpty', !category._id || hasProject()) : true)
 }
 function refresh () {
+  const { layers, layerCategories, orphanLayers } = CurrentActivity.value
   // filter layers
   const layersFilter = (typeof props.layersFilter === 'object' ? sift(props.layersFilter) : props.layersFilter)
-  const filteredLayers = _.filter(props.layers, layersFilter)
+  const filteredLayers = _.filter(layers, layersFilter)
   // filter categories
   const categoriesFilter = (typeof props.layerCategoriesFilter === 'object' ? sift(props.layerCategoriesFilter) : props.layerCategoriesFilter)
-  filteredCategories.value = _.filter(props.layerCategories, categoriesFilter)
+  filteredCategories.value = _.filter(layerCategories, categoriesFilter)
   _.forEach(filteredCategories.value, category => {
-    const component = _.get(category, 'component', 'catalog/KLayersSelector')
+    const component = _.get(category, 'component', 'catalog/KLayersList')
     if (!category.componentInstance) category.componentInstance = coreUtils.loadComponent(component)
   })
-  // compute layers by categories and orphans layers
+  // compute layers by categories
   layersByCategory.value = getLayersByCategory(filteredLayers, filteredCategories.value)
-  orphanLayers.value = getOrphanLayers(filteredLayers, layersByCategory.value)
-}//, 100)
+  // filter orphan layers
+  const orphanLayersFilter = (typeof props.orphanLayersFilter === 'object' ? sift(props.orphanLayersFilter) : props.orphanLayersFilter)
+  filteredOrphanLayers.value = _.filter(_.filter(orphanLayers, layersFilter), orphanLayersFilter)
+}
 
-// Hooks
-onMounted(() => {
-  refresh()
-})
+async function onOrphanLayerUpdated (targetIndex, draggedIndex) {
+  const { orphanLayers } = CurrentActivity.value
+  const layer = filteredOrphanLayers.value[draggedIndex]
+  const targetLayer = (targetIndex >= 0 ? filteredOrphanLayers.value[targetIndex] : null)
+  const removedLayers = filteredOrphanLayers.value.splice(draggedIndex, 1)
+  // As orphan layers are filtered we might have a mismatch between activity list index and panel index
+  // so that we find the layer by name in the activity list to perform the same reordering
+  let orphanLayer
+  draggedIndex = _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === layer.name)
+  if (draggedIndex >= 0) {
+    orphanLayer = orphanLayers[draggedIndex]
+    orphanLayers.splice(draggedIndex, 1)
+  }
+  // If not -1 it means the orphan layer has been moved within the orphan layers list.
+  // Otherwise it has been moved to another category so that we only need to remove it from the list
+  if ((removedLayers.length > 0) && targetLayer) {
+    filteredOrphanLayers.value.splice(targetIndex, 0, removedLayers[0])
+    // As orphan layers are filtered we might have a mismatch between activity list index and panel index
+    // so that we find the layer by name in the activity list to perform the same reordering
+    targetIndex = _.findIndex(orphanLayers, orphanLayer => orphanLayer.name === targetLayer.name)
+    if (orphanLayer && (targetIndex >= 0)) orphanLayers.splice(targetIndex, 0, orphanLayer)
+  }
+  await updateOrphanLayersOrder(filteredOrphanLayers.value.map(layer => layer?._id || layer?.name), layer)
+}
+
+function onDragStart (event, index, category) {
+  draggedIndex.value = index
+  event.dataTransfer.dropEffect = 'move'
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('categoryID', category._id)
+}
+
+async function onDrop (event, targetIndex) {
+  const sourceCategoryId = event.dataTransfer.getData('categoryID')
+  const layerName = event.dataTransfer.getData('layerName')
+  const layers = _.flatten(_.values(layersByCategory.value)).concat(filteredOrphanLayers.value)
+  const layer = layers.find(layer => layer.name === layerName)
+  const draggedLayerIndex = event.dataTransfer.getData('draggedIndex')
+  if (layerName && layerName.length > 0) { // drag source is layer: change layer category
+    const currentCategoryLayers = filteredCategories.value[targetIndex]?.layers
+    // WARNING: Need to use a string here as dataTransfer serialize to strings
+    if (sourceCategoryId === 'undefined') { // source is orphan layer
+      onOrphanLayerUpdated(-1, draggedLayerIndex)
+      currentCategoryLayers.unshift(layerName)
+      await updateLayersOrder(filteredCategories.value[targetIndex]._id, { layers: currentCategoryLayers }, layer)
+    } else {
+      const sourceCategoryLayers = filteredCategories.value.find(category => category?._id === sourceCategoryId)?.layers
+      const removedLayers = sourceCategoryLayers.splice(draggedLayerIndex, 1)
+      if (removedLayers.length > 0) currentCategoryLayers.unshift(removedLayers[0])
+      await updateLayersOrder(filteredCategories.value[targetIndex]._id, { layers: currentCategoryLayers }, layer)
+      await updateLayersOrder(sourceCategoryId, { layers: sourceCategoryLayers }, layer)
+    }
+  } else { // drag source is category: reorder category
+    await updateCategoriesOrder(sourceCategoryId, filteredCategories.value[targetIndex]._id)
+  }
+}
+
+function isDraggable (category) {
+  return !!category._id && (typeof props.categoriesDraggable === 'function' ? props.categoriesDraggable(category) : props.categoriesDraggable)
+}
 </script>
+
+<style scoped>
+.draggable-category {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.drag-handle {
+  min-width: 0;
+  width: 1px;
+  cursor: move;
+  margin-left: 0px;
+  margin-right: 32px;
+  padding: 0px;
+  user-select: none;
+}
+</style>