@kalisio/kdk 2.4.1 → 2.5.1

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Forms section -->
-    <k-form
+    <KForm
       ref="fileForm"
       :schema="fileFormSchema"
       @field-changed="onFileFormFieldChanged"
@@ -22,147 +22,139 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
 import path from 'path-browserify'
+import { ref, computed } from 'vue'
 import { generatePropertiesSchema } from '../../utils'
+import { i18n } from '../../../../core/client'
 import { KPanel } from '../../../../core/client/components'
+import { useCurrentActivity } from '../../composables'
 import KForm from '../../../../core/client/components/form/KForm.vue'
 
-export default {
-  name: 'k-import-layer',
-  components: {
-    KPanel,
-    KForm
-  },
-  emits: [
-    'done'
-  ],
-  inject: ['kActivity'],
-  data () {
-    return {
-      importing: false,
-      filename: ''
-    }
-  },
-  computed: {
-    fileFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/import-layer-select-file#',
-        type: 'object',
-        properties: {
-          file: {
-            type: 'object',
-            field: {
-              component: 'form/KFileField',
-              label: 'KImportLayer.FILE_FIELD_LABEL',
-              mimeTypes: '.json,.geojson,.gpx,.kml',
-              maxSize: 1024 * 1024 * 1024
-            }
-          }
-        },
-        required: ['file']
-      }
-    },
-    propertiesFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/import-layer-set-properties#',
+// Emits
+const emit = defineEmits(['done'])
+
+// Data
+const { CurrentActivity } = useCurrentActivity()
+const fileForm = ref(null)
+const propertiesForm = ref(null)
+const importing = ref(false)
+const filename = ref('')
+let file = null
+
+// Computed
+const fileFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/import-layer-select-file#',
+    type: 'object',
+    properties: {
+      file: {
         type: 'object',
-        properties: {
-          name: {
-            type: 'string',
-            maxLength: 128,
-            minLength: 2,
-            default: this.filename,
-            field: {
-              component: 'form/KTextField',
-              label: 'KImportLayer.NAME_FIELD_LABEL'
-            }
-          },
-          description: {
-            type: 'string',
-            default: this.filename,
-            field: {
-              component: 'form/KTextField',
-              label: 'KImportLayer.DESCRIPTION_FIELD_LABEL'
-            }
-          },
-          featureId: {
-            type: 'string',
-            default: this.guessFeatureId(),
-            field: {
-              component: 'form/KSelectField',
-              label: 'KImportLayer.FEATURE_ID_FIELD_LABEL',
-              options: this.getProperties()
-            }
-          }
-        },
-        required: ['name']
-      }
-    },
-    buttons () {
-      return [{
-        id: 'close-action',
-        outline: true,
-        label: 'CLOSE',
-        renderer: 'form-button',
-        handler: this.onClose
-      }, {
-        id: 'import-layer-action',
-        label: this.$t('KImportLayer.IMPORT_BUTTON'),
-        loading: this.importing,
-        renderer: 'form-button',
-        handler: this.onImport
-      }]
-    }
-  },
-  methods: {
-    onFileFormFieldChanged (field, value) {
-      this.file = value
-      this.filename = path.basename(this.file.name, path.extname(this.file.name))
-      if (value) {
-        this.file.schema = generatePropertiesSchema(value.content, value.name)
-      }
-    },
-    getProperties () {
-      if (this.file) {
-        const properties = _.keys(_.get(this.file, 'schema.properties', {}))
-        return _.map(properties, prop => { return { label: prop, value: prop } })
+        field: {
+          component: 'form/KFileField',
+          label: 'KImportLayer.FILE_FIELD_LABEL',
+          mimeTypes: '.json,.geojson,.gpx,.kml',
+          maxSize: 1024 * 1024 * 1024
+        }
       }
-      return []
     },
-    guessFeatureId () {
-      if (this.file) {
-        const properties = _.keys(_.get(this.file, 'schema.properties', {}))
-        for (const prop of properties) {
-          if (_.indexOf(['id', 'fid', 'featureid', '_id', 'objectid'], prop.toLowerCase()) >= 0) return prop
+    required: ['file']
+  }
+})
+const propertiesFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/import-layer-set-properties#',
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        maxLength: 128,
+        minLength: 2,
+        default: filename.value,
+        field: {
+          component: 'form/KTextField',
+          label: 'KImportLayer.NAME_FIELD_LABEL'
+        }
+      },
+      description: {
+        type: ['string', 'null'],
+        default: filename.value,
+        field: {
+          component: 'form/KTextField',
+          label: 'KImportLayer.DESCRIPTION_FIELD_LABEL'
+        }
+      },
+      featureId: {
+        type: ['string', 'null'],
+        default: guessFeatureId(),
+        field: {
+          component: 'form/KSelectField',
+          label: 'KImportLayer.FEATURE_ID_FIELD_LABEL',
+          options: getProperties()
         }
       }
-      return undefined
     },
-    onClose () {
-      this.$emit('done')
-    },
-    async onImport () {
-      const fileResult = this.$refs.fileForm.validate()
-      const propertiesResult = this.$refs.propertiesForm.validate()
-      if (!fileResult.isValid || !propertiesResult.isValid) return
-      this.importing = true
-      await this.kActivity.addGeoJsonLayer({
-        name: propertiesResult.values.name,
-        description: propertiesResult.values.description,
-        schema: { name: this.file.name, content: this.file.schema },
-        featureId: propertiesResult.values.featureId
-      }, this.file.content)
-      this.importing = false
-      this.$emit('done')
+    required: ['name']
+  }
+})
+const buttons = computed(() => {
+  return [{
+    id: 'close-action',
+    outline: true,
+    label: 'CLOSE',
+    renderer: 'form-button',
+    handler: onClose
+  }, {
+    id: 'import-layer-action',
+    label: i18n.t('KImportLayer.IMPORT_BUTTON'),
+    loading: importing.value,
+    renderer: 'form-button',
+    handler: onImport
+  }]
+})
+
+// Functions
+function onFileFormFieldChanged (field, value) {
+  file = value
+  filename.value = path.basename(file.name, path.extname(file.name))
+  if (value) {
+    file.schema = generatePropertiesSchema(value.content, value.name)
+  }
+}
+function getProperties () {
+  if (file) {
+    const properties = _.keys(_.get(file, 'schema.properties', {}))
+    return _.map(properties, prop => { return { label: prop, value: prop } })
+  }
+  return []
+}
+function guessFeatureId () {
+  if (file) {
+    const properties = _.keys(_.get(file, 'schema.properties', {}))
+    for (const prop of properties) {
+      if (_.indexOf(['id', 'fid', 'featureid', '_id', 'objectid'], prop.toLowerCase()) >= 0) return prop
     }
-  },
-  created () {
-    // Set data
-    this.file = null
   }
+  return ''
+}
+function onClose () {
+  emit('done')
+}
+async function onImport () {
+  const fileResult = fileForm.value.validate()
+  const propertiesResult = propertiesForm.value.validate()
+  if (!fileResult.isValid || !propertiesResult.isValid) return
+  this.importing = true
+  await CurrentActivity.value.addGeoJsonLayer({
+    name: propertiesResult.values.name,
+    description: propertiesResult.values.description,
+    schema: { name: file.name, content: file.schema },
+    featureId: propertiesResult.values.featureId
+  }, file.content)
+  importing.value = false
+  emit('done')
 }
 </script>

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

@@ -1,16 +1,21 @@
 <template>
-  <div :id="id" class="full-width row items-center q-pl-md q-pr-sm no-wrap">
+  <div :id="id" class="full-width row items-center q-px-sm no-wrap">
     <!-- Layer toggle -->
-    <q-toggle v-model="layer.isVisible" :disable="layer.isDisabled" size="xs" @update:modelValue="onToggled" />
+    <q-toggle v-if="togglable"
+      v-model="layer.isVisible"
+      :disable="layer.isDisabled"
+      size="xs"
+      @update:modelValue="onToggled"
+    />
     <!-- Layer name -->
     <div
-      class="row ellipsis-2-lines"
+      class="row ellipsis-3-lines"
       :class="{
         'text-primary': layer.isVisible,
         'text-grey-6': layer.isDisabled
       }"
     >
-      {{ layer.label || layer.name }}
+      <span v-html="label" />
       <q-badge v-if="layer.badge" v-bind="layer.badge">
         <q-icon v-if="layer.badge.icon" v-bind="layer.badge.icon" />
       </q-badge>
@@ -23,9 +28,11 @@
       </q-tooltip>
     </div>
     <q-space />
-    <q-icon name="las la-exclamation-circle" size="sm" color="warning" v-if="layer.isDisabled">
-      <q-tooltip>{{ $t('KLayersSelector.LAYER_DISABLED') }}</q-tooltip>
-    </q-icon>
+    <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-icon>
+    </slot>
     <!-- Layer actions -->
     <KPanel
       :id="`${layer.name}-actions`"
@@ -36,35 +43,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
-import { utils } from '../../../../core/client'
+import { computed } from 'vue'
+import { Document } from '../../../../core/client/document.js'
 import { KPanel } from '../../../../core/client/components'
 
-export default {
-  components: {
-    KPanel
-  },
-  props: {
-    layer: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    id () {
-      const name = _.kebabCase(this.layer.name)
-      if (_.startsWith(name, 'layers-')) return name
-      return 'layers-' + name
-    },
-    icon () {
-      return utils.getIconName(this.layer, 'icon')
-    }
+// Props
+const props = defineProps({
+  layer: {
+    type: Object,
+    default: () => {}
   },
-  methods: {
-    onToggled () {
-      this.$emit('toggled', this.layer)
-    }
+  togglable: {
+    type: Boolean,
+    default: true
   }
+})
+
+// Emits
+const emit = defineEmits(['toggled'])
+
+// Computed
+const id = computed(() => {
+  const name = _.kebabCase(_.get(props.layer, 'name'))
+  if (_.startsWith(name, 'layers-')) return name
+  return 'layers-' + name
+})
+const label = computed(() => {
+  const label = _.get(props.layer, 'label')
+  return Document.sanitizeHtml(label || _.get(props.layer, 'name'))
+})
+
+// Functions
+function onToggled () {
+  emit('toggled', props.layer)
 }
 </script>

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

@@ -16,24 +16,36 @@
       Content
     -->
     <q-scroll-area class="col">
-      <!--q-list dense-->
-        <!-- Orphan layers -->
-        <KLayersSelector
-          :layers="orphanLayers"
-          :options="orphanLayersOptions"
+      <!-- Custom content -->
+      <slot name="before-content">
+        <KPanel
+          :content="beforeContent"
+          :class="beforeContentClass"
+        />
+      </slot>
+      <!-- Orphan layers -->
+      <KLayersSelector
+        :layers="orphanLayers"
+        :options="orphanLayersOptions"
+      />
+      <!-- Categorized layers -->
+      <template v-for="category in filteredCategories">
+        <KCategoryItem
+          v-if="isCategoryVisible(category)"
+          :key="getCategoryId(category)"
+          :id="getCategoryId(category)"
+          :category="category"
+          :layers="layersByCategory[category.name]"
+          :forecastModels="forecastModels"
+        />
+      </template>
+      <!-- Custom content -->
+      <slot name="after-content">
+        <KPanel
+          :content="afterContent"
+          :class="afterContentClass"
         />
-        <!-- Categorized layers -->
-        <template v-for="category in filteredCategories">
-          <KCategoryItem
-            v-if="isCategoryVisible(category)"
-            :key="getCategoryId(category)"
-            :id="getCategoryId(category)"
-            :category="category"
-            :layers="layersByCategory[category.name]"
-            :forecastModels="forecastModels"
-          />
-        </template>
-      <!--/q-list-->
+      </slot>
     </q-scroll-area>
     <!--
       Footer
@@ -98,6 +110,22 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  beforeContent: {
+    type: [Array, Object],
+    default: () => null
+  },
+  beforeContentClass: {
+    type: String,
+    default: undefined
+  },
+  afterContent: {
+    type: [Array, Object],
+    default: () => null
+  },
+  afterContentClass: {
+    type: String,
+    default: undefined
+  },
   footer: {
     type: [Array, Object],
     default: () => null

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

@@ -13,66 +13,67 @@
       </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('KLayersSelector.NO_LAYER_AVAILABLE')" direction="horizontal" />
+      <KStamp
+        icon="las la-exclamation-circle"
+        icon-size="sm"
+        :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')"
+        direction="horizontal"
+      />
     </div>
     <slot name="footer" />
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
+import { computed } from 'vue'
 import { utils } from '../../../../core/client'
-import { KStamp } from '../../../../core/client/components'
+import KStamp from '../../../../core/client/components/KStamp.vue'
 
-export default {
-  name: 'k-layers-selector',
-  components: {
-    KStamp
+// Props
+const props = defineProps({
+  layers: {
+    type: Array,
+    default: () => []
   },
-  props: {
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    options: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    layerRenderer () {
-      return {
-        component: utils.loadComponent(_.get(this.options, 'renderer', 'catalog/KFilteredLayerItem')),
-        options: _.get(this.options, 'renderer.options', {})
-      }
-    }
-  },
-  methods: {
-    toggleLayer (layer) {
-      const toggleAction = _.find(layer.actions, { id: 'toggle' })
-      if (toggleAction) toggleAction.handler()
-    },
-    async onLayerToggled (layer) {
-      if (layer.isDisabled) return
-      if (this.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(this.layers, { isVisible: true })
-        for (let i = 0; i < visibleLayers.length; i++) {
-          const visibleLayer = visibleLayers[i]
-          if (visibleLayer !== layer) await this.toggleLayer(visibleLayers[i])
-        }
-      }
-      await this.toggleLayer(layer)
-    },
-    toggleLayerFilter (layer, filter) {
-      const toggleFilterAction = _.find(layer.actions, { id: 'toggle-filter' })
-      if (toggleFilterAction) toggleFilterAction.handler(filter)
-    },
-    onLayerFilterToggled (layer, filter) {
-      if (layer.isDisabled) return
-      this.toggleLayerFilter(layer, filter)
+  options: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// Computed
+const layerRenderer = computed(() => {
+  return {
+    component: utils.loadComponent(_.get(props.options, 'renderer', 'catalog/KFilteredLayerItem')),
+    options: _.get(props.options, 'renderer.options', {})
+  }
+})
+
+// Functions
+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 (let i = 0; i < visibleLayers.length; i++) {
+      const visibleLayer = visibleLayers[i]
+      if (visibleLayer !== layer) await toggleLayer(visibleLayers[i])
     }
   }
+  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)
 }
 </script>

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

@@ -11,11 +11,11 @@
       </q-tabs>
       <div>
         <q-tab-panels v-model="mode" animated>
-          <q-tab-panel name="select-layers" v-if="modes.includes('select-layers')" :contextId="contextId">
-            <Suspense><k-select-layers :contextId="contextId" @done="closeModal" /></Suspense>
+          <q-tab-panel name="select-layers" v-if="modes.includes('select-layers')">
+            <Suspense><k-select-layers @done="closeModal" /></Suspense>
           </q-tab-panel>
-          <q-tab-panel name="select-views" v-if="modes.includes('select-views')" :contextId="contextId">
-            <Suspense><k-select-views :contextId="contextId" @done="closeModal" /></Suspense>
+          <q-tab-panel name="select-views" v-if="modes.includes('select-views')">
+            <Suspense><k-select-views @done="closeModal" /></Suspense>
           </q-tab-panel>
         </q-tab-panels>
       </div>
@@ -38,10 +38,6 @@ export default {
   },
   mixins: [kCoreMixins.baseModal],
   props: {
-    contextId: {
-      type: String,
-      default: ''
-    },
     defaultMode: {
       type: String,
       default: 'select-layers'

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

@@ -19,7 +19,7 @@
       <!-- Project actions -->
       <KPanel
         :id="`${item.name}-actions`"
-        :content="itemActions"
+        :content="projectActions"
         :context="item" />
     </div>
   </div>
@@ -35,7 +35,38 @@ export default {
     KPanel,
     KAction
   },
-  mixins: [baseItem]
+  mixins: [baseItem],
+  computed: {
+    projectActions () {
+      const projectActions = []
+      if (this.$can('update', 'projects', this.item)) {
+        const content = [{
+          id: 'edit-project',
+          icon: 'las la-file-alt',
+          label: 'KProjectSelector.EDIT_PROJECT',
+          handler: (item) => this.$emit('item-selected', item, 'edit-project')
+        }]
+        if (this.$can('remove', 'projects', this.item)) {
+          content.push({
+            id: 'remove-project',
+            icon: 'las la-trash',
+            label: 'KProjectSelector.REMOVE_PROJECT',
+            handler: (item) => this.$emit('item-selected', item, 'remove-project')
+          })
+        }
+        projectActions.push({
+          id: 'project-overflowmenu',
+          component: 'menu/KMenu',
+          dropdownIcon: 'las la-ellipsis-v',
+          actionRenderer: 'item',
+          propagate: false,
+          dense: true,
+          content
+        })
+      }
+      return projectActions
+    }
+  }
 }
 </script>