@kalisio/kdk 2.5.3 → 2.6.0

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

@@ -1,34 +1,70 @@
 <template>
-  <div>
-    <slot name="header" />
-    <div v-if="layers.length > 0">
-      <template v-for="layer in layers">
-        <component
-          :is="layerRenderer.component"
-          v-bind="layerRenderer.options"
-          :layer="layer"
-          @toggled="onLayerToggled"
-          @filter-toggled="onLayerFilterToggled"
-        />
+  <div v-if="props.layers.length > 0">
+    <k-layers-list :layers="filteredLayers" :options="options">
+      <template v-slot:header>
+        <div class="q-ma-sm">
+          <q-select
+            for="layer-model"
+            id="layer-model"
+            :placeholder="$t('KLayersSelector.SELECT_LAYERS')"
+            autocomplete="off"
+            v-model="model"
+            :options="selectOptions"
+            filled
+            use-input
+            use-chips
+            map-options
+            emit-value
+            multiple
+            clearable
+            @filter="filter"
+            @add="toggleLayer"
+            @remove="toggleLayer"
+            @clear="clear"
+          >
+            <template v-slot:prepend>
+              <q-icon name="las la-map-marker" />
+            </template>
+            <template v-slot:option="scope">
+              <q-item v-bind="scope.itemProps" :id="scope.opt.name">
+                <q-item-section avatar>
+                  <q-icon
+                    v-if="!scope.opt.iconUrl"
+                    :name="scope.opt.icon || 'las la-map-marker'"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label lines="1">
+                    {{ scope.opt.label }}
+                  </q-item-label>
+                  <q-item-label caption lines="2">
+                    {{ scope.opt.description }}
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </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('KLayersSelector.NO_LAYER_AVAILABLE')"
-        direction="horizontal"
-      />
-    </div>
-    <slot name="footer" />
+    </k-layers-list>
+  </div>
+  <div v-else class="row justify-center q-pa-sm">
+    <KStamp
+      icon="las la-exclamation-circle"
+      icon-size="sm"
+      :text="$t('KWeatherLayersSelector.NO_MODEL_AVAILABLE')"
+      text-size="0.9rem"
+      direction="horizontal"
+    />
   </div>
 </template>
 
 <script setup>
 import _ from 'lodash'
-import { computed } from 'vue'
-import { utils } from '../../../../core/client'
-import KStamp from '../../../../core/client/components/KStamp.vue'
+import { computed, ref } from 'vue'
+import { KStamp } from '../../../../core/client/components'
+import KLayersList from './KLayersList.vue'
+import { useCurrentActivity } from '../../composables'
 
 // Props
 const props = defineProps({
@@ -42,38 +78,50 @@ const props = defineProps({
   }
 })
 
+// Data
+const model = ref([])
+const selectOptions = ref(
+  props.layers.map((layer) => ({ label: layer.label, value: layer._id }))
+)
+const { CurrentActivity } = useCurrentActivity()
+const { layers } = CurrentActivity.value
+
 // Computed
-const layerRenderer = computed(() => {
-  return {
-    component: utils.loadComponent(_.get(props.options, 'renderer', 'catalog/KFilteredLayerItem')),
-    options: _.get(props.options, 'renderer.options', {})
-  }
-})
+const filteredLayers = computed(() =>
+  model.value
+    ? props.layers.filter((layer) => model.value.includes(layer._id))
+    : []
+)
 
 // Functions
-function toggleLayer (layer) {
+function toggleLayer (layerId) {
+  const layer = props.layers.find((l) => l._id === layerId.value)
   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])
-    }
+function clear () {
+  for (const layer of props.layers) {
+    if (layer?.isVisible) toggleLayer({ value: layer._id })
   }
-  await toggleLayer(layer)
+  model.value = []
 }
-function toggleLayerFilter (layer, filter) {
-  const toggleFilterAction = _.find(layer.actions, { id: 'toggle-filter' })
-  if (toggleFilterAction) toggleFilterAction.handler(filter)
+function filter (val, update, abort) {
+  update(() => {
+    const needle = val.toLowerCase()
+    selectOptions.value = props.layers
+      .filter((layer) => layer.label.toLowerCase().indexOf(needle) > -1)
+      .map((layer) => ({ label: layer.label, value: layer._id }))
+  })
 }
-function onLayerFilterToggled (layer, filter) {
-  if (layer.isDisabled) return
-  toggleLayerFilter(layer, filter)
+
+// set default layers from layer.leaflet.isVisible property
+if (props.layers.length > 0) {
+  for (const layer of props.layers) {
+    const layerObject = layers[layer.name]
+    if (layerObject) {
+      const isLayerVisible = _.get(layerObject, 'isVisible')
+      if (isLayerVisible && !model.value.includes(layer._id)) model.value.push(layer._id)
+    }
+  }
 }
 </script>

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

@@ -66,15 +66,6 @@ export default {
   },
   methods: {
     async apply () {
-      // We at least needs a background layer
-      // FIXME: how to do this as we only have IDs here
-      /*
-      const layers = this.form.values().layers
-      if (!_.find(layers, { type: 'BaseLayer'})) {
-        this.$notify({ type: 'negative', message: this.$t('KProjectEditor.BACKGROUND_LAYER_REQUIRED') })
-        return
-      }
-      */
       this.processing = true
       if (await baseEditor.methods.apply.call(this)) {
         this.processing = false

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

@@ -28,6 +28,7 @@
 <script>
 import { KPanel, KAction } from '../../../../core/client/components'
 import { baseItem } from '../../../../core/client/mixins'
+import { api } from '../../../../core/client/api.js'
 
 export default {
   name: 'k-project-selector',
@@ -39,14 +40,14 @@ export default {
   computed: {
     projectActions () {
       const projectActions = []
-      if (this.$can('update', 'projects', this.item)) {
+      if (api.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)) {
+        if (api.can('remove', 'projects', this.item)) {
           content.push({
             id: 'remove-project',
             icon: 'las la-trash',

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

@@ -6,7 +6,7 @@
       :nb-items-per-page="20"
       :append-items="true"
       :base-query="baseQuery"
-      :filter-query="filter.query"
+      :filter-query="filterQuery"
       :dense="true"
       :scrollToTop="false"
       :header="toolbar"
@@ -17,11 +17,12 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useCurrentActivity } from '../../composables'
-import { Filter, Sorter, utils, i18n, api } from '../../../../core/client'
+import { utils, i18n, api } from '../../../../core/client'
 import { KGrid } from '../../../../core/client/components'
 import { uncacheView } from '../../utils'
 
@@ -29,23 +30,34 @@ import { uncacheView } from '../../utils'
 const router = useRouter()
 const route = useRoute()
 const { CurrentActivity } = useCurrentActivity()
-const filter = ref(Filter.get())
-const sorter = Sorter.get()
 const projectRenderer = ref({
   component: 'catalog/KProjectSelector',
   class: 'col-12'
 })
+const baseQuery = ref({ $sort: { name: 1 } })
+const searchString = ref('')
 
 // Computed
-const baseQuery = computed(() => Object.assign({}, sorter.query))
+const filterQuery = computed(() => {
+  const query = {}
+  if (!_.isEmpty(searchString.value)) {
+    query.name = { $regex: searchString.value }
+  }
+  return query
+})
 const toolbar = computed(() => {
   return [
     {
       id: 'projects-filter',
-      component: 'collection/KFilter'
+      component: 'collection/KItemsFilter',
+      class: 'col',
+      value: searchString.value,
+      onSearch: (value) => {
+        searchString.value = value
+      }
     },
     {
-      component: 'collection/KSorter',
+      component: 'collection/KItemsSorter',
       id: 'projects-sorter',
       tooltip: 'KProjectsPanel.SORT_PROJECTS',
       options: [
@@ -53,7 +65,10 @@ const toolbar = computed(() => {
         { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } },
         { icon: 'kdk:clockwise.png', value: { field: 'updatedAt', order: 1 } },
         { icon: 'kdk:anticlockwise.png', value: { field: 'updatedAt', order: -1 } }
-      ]
+      ],
+      onOptionChanged: (option) => {
+        baseQuery.value = { $sort: { [option.field]: option.order } }
+      }
     }
   ]
 })

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

@@ -21,38 +21,45 @@
 import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, computed } from 'vue'
-import { Filter, Sorter, utils, i18n, api, LocalCache, Store } from '../../../../core/client'
+import { utils, i18n, api, LocalCache, Store } from '../../../../core/client'
 import { KGrid } from '../../../../core/client/components'
 import { useCurrentActivity, useProject } from '../../composables'
 import { cacheView, uncacheView } from '../../utils/utils.offline.js'
 import { Dialog, Notify } from 'quasar'
 
 // Data
-const filter = Filter.get()
-const sorter = Sorter.get()
 const { CurrentActivity } = useCurrentActivity()
 const { project: loadedProject } = await getProject()
 const project = ref(loadedProject)
 const viewRenderer = ref(getViewRenderer())
+const searchString = ref('')
+const sortQuery = ref({ $sort: { name: 1 } })
 
 // Computed
 const baseQuery = computed(() => {
-  return Object.assign({ type: 'Context' }, sorter.query)
+  return Object.assign({ type: 'Context' }, sortQuery.value)
 })
 const filterQuery = computed(() => {
   const query = {}
   if (project.value) Object.assign(query, { _id: { $in: _.map(project.value.views, '_id') } })
-  Object.assign(query, filter.query)
+  if (!_.isEmpty(searchString.value)) {
+    Object.assign(query, { name: { $regex: searchString.value } })
+  }
   return query
 })
 const toolbar = computed(() => {
   return [
     {
       id: 'views-filter',
-      component: 'collection/KFilter'
+      component: 'collection/KItemsFilter',
+      class: 'col',
+      value: searchString.value,
+      onSearch: (value) => {
+        searchString.value = value
+      }
     },
     {
-      component: 'collection/KSorter',
+      component: 'collection/KItemsSorter',
       id: 'views-sorter',
       tooltip: 'KViewsPanel.SORT_VIEWS',
       options: [
@@ -60,7 +67,10 @@ const toolbar = computed(() => {
         { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } },
         { icon: 'kdk:clockwise.png', value: { field: 'updatedAt', order: 1 } },
         { icon: 'kdk:anticlockwise.png', value: { field: 'updatedAt', order: -1 } }
-      ]
+      ],
+      onOptionChanged: (option) => {
+        sortQuery.value = { $sort: { [option.field]: option.order } }
+      }
     }
   ]
 })

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="forecastModels.length > 0">
-    <k-layers-selector :layers="filteredLayers" :options="options">
+    <k-layers-list :layers="filteredLayers" :options="options">
       <template v-slot:header>
         <div class="q-ma-sm">
           <q-select for="forecast-model" id="forecast-model" v-model="model" :options="models" filled map-options emit-value @update:model-value="onModelChanged">
@@ -25,7 +25,7 @@
           </q-select>
         </div>
       </template>
-    </k-layers-selector>
+    </k-layers-list>
   </div>
   <div v-else class="row justify-center q-pa-sm">
     <KStamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KWeatherLayersSelector.NO_MODEL_AVAILABLE')" text-size="0.9rem" direction="horizontal" />
@@ -36,7 +36,7 @@
 import _ from 'lodash'
 import { computed, ref } from 'vue'
 import { KStamp } from '../../../../core/client/components'
-import KLayersSelector from './KLayersSelector.vue'
+import KLayersList from './KLayersList.vue'
 
 // Props
 const props = defineProps({

package/map/client/components/form/KDirectionField.vue

@@ -64,7 +64,7 @@
       :error-message="errorLabel"
       :error="hasError"
       :disable="disabled"
-      :clearable="clearable"
+      :clearable="isClearable()"
       bottom-slots
       borderless
       @clear="onCleared">
@@ -111,14 +111,11 @@ export default {
     },
     labelMode () {
       return _.get(this.properties.field, 'labelMode', 'from')
-    },
-    clearable () {
-      return _.get(this.properties.field, 'clearable', false)
     }
   },
   methods: {
-    emptyModel () {
-      return null
+    isClearable () {
+      return _.get(this.properties.field, 'clearable', false)
     },
     onCleared () {
       this.model = null

package/map/client/components/form/KLayerCategoryField.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { mixins as kCoreMixins } from '../../../../core/client'
+import { api, mixins as kCoreMixins } from '../../../../core/client'
 
 export default {
   name: 'k-category-field',
@@ -49,7 +49,7 @@ export default {
   },
   async created () {
     // Build the list of available categories
-    const response = await this.$api.getService('catalog').find({ query: { type: 'Category' } })
+    const response = await api.getService('catalog').find({ query: { type: 'Category' } })
     this.availableCategories = response.data
   }
 }

package/map/client/components/form/KOwsServiceField.vue

@@ -55,7 +55,7 @@
       </template>
     </q-select>
     <!-- Header -->
-    <div class="row" v-if="showHeader">
+    <div class="row" v-if="unhautorized">
       <q-input class="col"
         :for="properties.name + '-header-key-field'"
         :id="properties.name + '-header-key-field'"
@@ -80,9 +80,8 @@
 
 <script>
 import _ from 'lodash'
-import fetch from 'node-fetch'
 import xml2js from 'xml2js'
-import { mixins as kCoreMixins } from '../../../../core/client'
+import { api, mixins as kCoreMixins } from '../../../../core/client'
 import { KAction } from '../../../../core/client/components'
 import * as wms from '../../../common/wms-utils'
 import * as wfs from '../../../common/wfs-utils'
@@ -99,7 +98,7 @@ export default {
     return {
       request: '',
       availableServices: [],
-      showHeader: false,
+      unhautorized: false,
       headerKey: '',
       headerValue: '',
       loading: false
@@ -127,38 +126,37 @@ export default {
       let response = null
       this.loading = true
       if (request) {
-        try {
-          // Check if related to registered service in cas we need headers
-          const service = _.find(this.availableServices, { request })
-          const url = new URL(request)
-          response = await this.probeEndpoint(url, _.get(service, 'headers', {}))
-          if (response) {
-            // make sure WFS server supports GeoJSON output
-            if (response.protocol === 'WFS' && !response.geoJsonOutputFormat) {
-              this.error = 'KOwsServiceField.WFS_MISSING_GEOJSON_SUPPORT'
-            } else {
-              this.model = response
-              this.error = ''
-            }
+        // Check if related to registered service in case we need headers
+        const service = _.find(this.availableServices, { request })
+        const url = new URL(request)
+        response = await this.probeEndpoint(url, _.get(service, 'headers', {}))
+        if (response) {
+          // make sure WFS server supports GeoJSON output
+          if (response.protocol === 'WFS' && !response.geoJsonOutputFormat) {
+            this.error = 'KOwsServiceField.WFS_MISSING_GEOJSON_SUPPORT'
+          } else {
+            this.model = response
+            this.error = ''
           }
-        } catch (error) {
-          this.error = 'KOwsServiceField.INVALID_URL'
+        } else if (this.unhautorized) {
+          // Remove any previous headers as token might have expired or so
+          _.unset(service, 'headers')
         }
       }
       this.loading = false
-      if (this.model) this.onChanged()
+      if (this.model && !this.error) this.onChanged()
     },
     async onAddService () {
       // Delete the available layers before saving the service
       const service = _.cloneDeep(this.model)
       delete service.availableLayers
       // Save the service
-      await this.$api.getService('catalog').create(service)
+      await api.getService('catalog').create(service)
       // Refresh the list of available services
       this.refreshAvailableServices()
     },
     async onDeleteService (service) {
-      await this.$api.getService('catalog').remove(service._id)
+      await api.getService('catalog').remove(service._id)
       // Refresh the list of available services
       this.refreshAvailableServices()
       // Clear
@@ -197,9 +195,11 @@ export default {
           }
           const resp = await fetch(query, { redirect: 'follow', headers: result.headers })
           if ((resp.status === 401) || (resp.status === 403)) {
-            this.showHeader = true
+            this.unhautorized = true
             this.error = 'KOwsServiceField.UNAUTHORIZED_MESSAGE'
             return null
+          } else {
+            this.unhautorized = false
           }
           const txt = await resp.text()
           caps = await xml2js.parseStringPromise(txt, { tagNameProcessors: [xml2js.processors.stripPrefix] })
@@ -241,6 +241,7 @@ export default {
           result.availableLayers = decoded.availableLayers
           result.version = this.findQueryParameter(url.searchParams, 'VERSION')
           if (!result.version) result.version = decoded.version
+          if (decoded.getMapUrl) result.getMapUrl = decoded.getMapUrl
         } else if (result.protocol === 'WFS') {
           const decoded = await wfs.discover(result.baseUrl, result.searchParams, result.headers, caps)
           result.availableLayers = decoded.availableLayers
@@ -275,7 +276,7 @@ export default {
     },
     async refreshAvailableServices () {
       // Retrieve the list of the available services
-      const response = await this.$api.getService('catalog').find({ query: { type: 'Service' } })
+      const response = await api.getService('catalog').find({ query: { type: 'Service' } })
       this.availableServices = response.data
     }
   },

package/map/client/components/form/KSelectLayersField.vue

@@ -7,7 +7,7 @@
       :error-message="errorLabel"
       :error="hasError"
       :disable="disabled"
-      :clearable="clearable"
+      :clearable="isClearable()"
       hide-bottom-space
       bottom-slots
       borderless
@@ -54,9 +54,6 @@ export default {
   },
   inheritAttrs: false,
   computed: {
-    clearable () {
-      return _.get(this.properties.field, 'clearable', false)
-    },
     layerTree () {
       const tree = []
       const userLayers = { id: 'userLayers', label: this.$t('LAYERS_LABEL'), layers: [] }
@@ -102,6 +99,9 @@ export default {
     emptyModel () {
       return []
     },
+    isClearable () {
+      return _.get(this.properties.field, 'clearable', false)
+    },
     fill (value) {
       kCoreMixins.baseField.methods.fill.call(this, value)
       // As we keep track of ID/name depending on if a layer comes from local/global catalog we need to process both

package/map/client/components/form/KSelectViewsField.vue

@@ -7,7 +7,7 @@
     :error-message="errorLabel"
     :error="hasError"
     :disable="disabled"
-    :clearable="clearable"
+    :clearable="isClearable()"
     hide-bottom-space
     bottom-slots
     borderless
@@ -63,9 +63,6 @@ export default {
   },
   inheritAttrs: false,
   computed: {
-    clearable () {
-      return _.get(this.properties.field, 'clearable', false)
-    },
     viewTree () {
       const tree = []
       if (this.views.length > 0) {
@@ -86,6 +83,9 @@ export default {
     emptyModel () {
       return []
     },
+    isClearable () {
+      return _.get(this.properties.field, 'clearable', false)
+    },
     fill (value) {
       kCoreMixins.baseField.methods.fill.call(this, value)
       this.selectedViews = _.map(this.model, '_id')

package/map/client/components/legend/KLayerLegend.vue

@@ -42,6 +42,15 @@ const legends = computed(() => {
   const result = []
   let layerLegends = props.layer.legend || []
   if (!Array.isArray(layerLegends)) layerLegends = [layerLegends]
+  // Check if layer has filters with own legend
+  if (Array.isArray(props.layer.filters)) {
+    props.layer.filters.forEach((filter) => {
+      // Include when filter is active and has a legend
+      if (!filter.isActive || !filter.legend) { return }
+      const filterLegends = Array.isArray(filter.legend) ? filter.legend : [filter.legend]
+      layerLegends.push(...filterLegends)
+    })
+  }
   layerLegends.forEach(legend => {
     const minZoom = _.get(legend, 'minZoom', _.get(props.layer, `${props.engine}.minZoom`, 0))
     const maxZoom = _.get(legend, 'maxZoom', _.get(props.layer, `${props.engine}.maxZoom`, 99))
@@ -50,9 +59,9 @@ const legends = computed(() => {
     const hasMinZoom = _.isNumber(minZoom)
     const hasMaxZoom = _.isNumber(maxZoom)
     const inMinZoomRange = (hasMinZoom ? props.zoom >= minZoom : true)
-    const inMaxZoomRange = (hasMaxZoom ? props.zoom <= maxZoom : true)
+    const inMaxZoomRange = (hasMaxZoom ? props.zoom < maxZoom : true)
     if (inMinZoomRange && inMaxZoomRange) {
-      logger.debug(`[KDK] Register '${props.layer.name}'`)
+      logger.debug(`[KDK] Rendering '${props.layer.name}' legend`)
       const renderer = props.renderers[legend.type]
       if (!renderer) {
         logger.warn(`[KDK] Cannot find any renderer for the layer's legend of type of ${legend.type}`)