@kalisio/kdk 2.4.1 → 2.5.2

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

@@ -1,66 +1,89 @@
 <template>
-  <q-select
-    :for="properties.name + '-field'"
-    :id="properties.name + '-field'"
-    ref="select"
-    v-model="request"
-    :label="label"
-    fill-input
-    autocomplete="off"
-    hide-selected
-    clearable
-    emit-value
-    use-input
-    new-value-mode="add-unique"
-    :error-message="errorLabel"
-    :error="hasError"
-    bottom-slots
-    :options="availableServices"
-    option-label="name"
-    option-value="request"
-    :loading="loading"
-    @clear="onCleared"
-    @update:model-value="onUpdated">
-    <template v-slot:append>
-      <k-action v-if="canAddService" id="add-service" icon="add_circle" color="grey-7" :handler="onAddService" />
-    </template>
-    <!-- Options -->
-    <template v-slot:option="scope">
-      <q-item v-bind="scope.itemProps">
-        <q-item-section avatar>
-          <q-badge dense>{{ scope.opt.protocol }}</q-badge>
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>{{ scope.opt.baseUrl }}</q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <k-action id="delete-service" icon="las la-trash" :propagate="false" @triggered="onDeleteService(scope.opt)" />
-        </q-item-section>
-      </q-item>
-    </template>
-    <!-- Helper -->
-    <template v-if="hasHelper" v-slot:append>
-      <k-action
-        :id="properties.name + '-helper'"
-        :label="helperLabel"
-        :icon="helperIcon"
-        :tooltip="helperTooltip"
-        :url="helperUrl"
-        :dialog="helperDialog"
-        :context="helperContext"
-        @dialog-confirmed="onHelperDialogConfirmed"
-        color="primary"
+  <div>
+    <q-select
+      :for="properties.name + '-field'"
+      :id="properties.name + '-field'"
+      ref="select"
+      v-model="request"
+      :label="label"
+      fill-input
+      autocomplete="off"
+      hide-selected
+      clearable
+      emit-value
+      use-input
+      new-value-mode="add-unique"
+      :error-message="errorLabel"
+      :error="hasError"
+      bottom-slots
+      :options="availableServices"
+      option-label="name"
+      option-value="request"
+      :loading="loading"
+      @clear="onCleared"
+      @update:model-value="onUpdated">
+      <template v-slot:append>
+        <k-action v-if="canAddService" id="add-service" icon="add_circle" color="grey-7" :handler="onAddService" />
+      </template>
+      <!-- Options -->
+      <template v-slot:option="scope">
+        <q-item v-bind="scope.itemProps">
+          <q-item-section avatar>
+            <q-badge dense>{{ scope.opt.protocol }}</q-badge>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>{{ scope.opt.baseUrl }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <k-action id="delete-service" icon="las la-trash" :propagate="false" @triggered="onDeleteService(scope.opt)" />
+          </q-item-section>
+        </q-item>
+      </template>
+      <!-- Helper -->
+      <template v-if="hasHelper" v-slot:append>
+        <k-action
+          :id="properties.name + '-helper'"
+          :label="helperLabel"
+          :icon="helperIcon"
+          :tooltip="helperTooltip"
+          :url="helperUrl"
+          :dialog="helperDialog"
+          :context="helperContext"
+          @dialog-confirmed="onHelperDialogConfirmed"
+          color="primary"
+        />
+      </template>
+    </q-select>
+    <!-- Header -->
+    <div class="row" v-if="showHeader">
+      <q-input class="col"
+        :for="properties.name + '-header-key-field'"
+        :id="properties.name + '-header-key-field'"
+        type="text"
+        v-model="headerKey"
+        :label="$t('KOwsServiceField.HEADER_KEY')"
+        :input-class="inputClass"
+        clearable
       />
-    </template>
-  </q-select>
+      <q-input class="col"
+        :for="properties.name + '-header-value-field'"
+        :id="properties.name + '-header-value-field'"
+        type="text"
+        v-model="headerValue"
+        :label="$t('KOwsServiceField.HEADER_VALUE')"
+        :input-class="inputClass"
+        clearable
+      />
+    </div>
+  </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import { mixins as kCoreMixins } from '../../../../core/client'
-import { KAction } from '../../../../core/client/components'
 import fetch from 'node-fetch'
 import xml2js from 'xml2js'
+import { 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'
 import * as wmts from '../../../common/wmts-utils'
@@ -76,6 +99,9 @@ export default {
     return {
       request: '',
       availableServices: [],
+      showHeader: false,
+      headerKey: '',
+      headerValue: '',
       loading: false
     }
   },
@@ -83,6 +109,9 @@ export default {
     canAddService () {
       if (!this.model) return false
       return !_.find(this.availableServices, { request: this.model.request })
+    },
+    inputClass () {
+      return _.get(this.properties, 'field.inputClass', 'text-weight-regular')
     }
   },
   methods: {
@@ -99,8 +128,10 @@ export default {
       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)
+          response = await this.probeEndpoint(url, _.get(service, 'headers', {}))
           if (response) {
             // make sure WFS server supports GeoJSON output
             if (response.protocol === 'WFS' && !response.geoJsonOutputFormat) {
@@ -134,7 +165,7 @@ export default {
       this.model = null
       this.request = ''
     },
-    async probeEndpoint (url) {
+    async probeEndpoint (url, headers = {}) {
       const result = {
         type: 'Service',
         name: undefined,
@@ -156,12 +187,20 @@ export default {
         if (url.protocol === 'http:' || url.protocol === 'https:') {
           result.request = url.href
           result.baseUrl = `${url.protocol}//${url.host}${url.pathname}`
+          result.headers = headers
           result.name = result.baseUrl
           for (const [k, v] of url.searchParams) result.searchParams[k] = v
           // fetch content and try to convert to json
           const query = url.href
-
-          const resp = await fetch(query, { redirect: 'follow' })
+          if (this.headerKey && this.headerValue) {
+            Object.assign(result.headers, { [this.headerKey]: this.headerValue })
+          }
+          const resp = await fetch(query, { redirect: 'follow', headers: result.headers })
+          if ((resp.status === 401) || (resp.status === 403)) {
+            this.showHeader = true
+            this.error = 'KOwsServiceField.UNAUTHORIZED_MESSAGE'
+            return null
+          }
           const txt = await resp.text()
           caps = await xml2js.parseStringPromise(txt, { tagNameProcessors: [xml2js.processors.stripPrefix] })
           // look for SERVICE=xxx
@@ -198,25 +237,25 @@ export default {
         }
 
         if (result.protocol === 'WMS') {
-          const decoded = await wms.discover(result.baseUrl, result.searchParams, caps)
+          const decoded = await wms.discover(result.baseUrl, result.searchParams, result.headers, caps)
           result.availableLayers = decoded.availableLayers
           result.version = this.findQueryParameter(url.searchParams, 'VERSION')
           if (!result.version) result.version = decoded.version
         } else if (result.protocol === 'WFS') {
-          const decoded = await wfs.discover(result.baseUrl, result.searchParams, caps)
+          const decoded = await wfs.discover(result.baseUrl, result.searchParams, result.headers, caps)
           result.availableLayers = decoded.availableLayers
           result.version = this.findQueryParameter(url.searchParams, 'VERSION')
           if (!result.version) result.version = decoded.version
           result.geoJsonOutputFormat = decoded.geoJsonOutputFormat
         } else if (result.protocol === 'WMTS') {
-          const decoded = await wmts.discover(result.baseUrl, result.searchParams, caps)
+          const decoded = await wmts.discover(result.baseUrl, result.searchParams, result.headers, caps)
           result.availableLayers = decoded.availableLayers
           result.version = this.findQueryParameter(url.searchParams, 'VERSION')
           if (!result.version) result.version = decoded.version
           result.getTileUseKvpEncoding = decoded.getTileUseKvpEncoding
         // } else if (result.service === 'WCS') {
         } else if (result.protocol === 'TMS') {
-          const decoded = await tms.discover(result.baseUrl, result.searchParams, caps)
+          const decoded = await tms.discover(result.baseUrl, result.searchParams, result.headers, caps)
           result.availableLayers = decoded.availableLayers
           result.version = decoded.version
         }

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

@@ -131,7 +131,7 @@ export default {
   setup (props) {
     // Use global catalog
     const { layers, getLayers, categories, getCategories, layersByCategory, orphanLayers } =
-      useCatalog()
+      useCatalog({ context: 'global' })
     // Use local catalog if any
     const {
       layers: contextLayers, getLayers: getContextLayers, categories: contextCategories, getCategories: getContextCategories,

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

@@ -105,7 +105,7 @@ export default {
   },
   setup (props) {
     // Use global catalog
-    const { views, getViews } = useCatalog()
+    const { views, getViews } = useCatalog({ context: 'global' })
     // Use local catalog
     const { views: contextViews, getViews: getContextViews } = useCatalog({ context: Store.get('context') })
 

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

@@ -12,7 +12,6 @@
         :options="options"
         use-input
         hide-dropdown-icon
-        clearable
         @update:model-value='onChanged'
         @filter="onAutocomplete"
         emit-value

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

@@ -94,7 +94,7 @@ const planetApi = project && typeof project.getPlanetApi === 'function' ? projec
 // Use target catalog according to project
 const { getSublegends: getProjectSublegends } = useCatalog({ project, planetApi })
 // Use global catalog
-const { getSublegends } = useCatalog()
+const { getSublegends } = useCatalog({ context: 'global' })
 // Use local catalog if any
 const { getSublegends: getContextSublegends } = useCatalog({ context: Store.get('context') })
 
@@ -114,15 +114,15 @@ watch([() => props.sublegends, () => props.sublegendsFromCatalog], async () => {
   if (props.sublegendsFromCatalog) {
     sublegends.value = await getSublegends()
     if (project) {
-      sublegends.value = sublegends.value.concat(await getProjectSublegends())
+      sublegends.value = _.uniqBy(_.concat(sublegends.value, await getProjectSublegends()), 'name')
     }
     if (Store.get('context')) {
-      sublegends.value = sublegends.value.concat(await getContextSublegends())
+      sublegends.value = _.uniqBy(_.concat(sublegends.value, await getContextSublegends()), 'name')
     }
   } else {
     sublegends.value = []
   }
-  sublegends.value = sublegends.value.concat(props.sublegends)
+  sublegends.value = _.uniqBy(_.concat(sublegends.value, props.sublegends), 'name')
   // register legend translations
   _.forEach(sublegends.value, legend => {
     if (legend.i18n) i18n.registerTranslation(legend.i18n)

package/map/client/components/location/KLocationCardSection.vue

@@ -13,12 +13,20 @@
         :minHeight="24"
         :maxHeight="204"
         :dense="true"
+        :class="{ 'cursor-pointer': renderer === 'tip'}"
       />
       <!-- Map  -->
       <KLocationMap
+        v-if="renderer === 'map'"
         v-model="feature"
         style="min-height: 120px"
       />
+      <KLocationTip
+        v-else-if="renderer === 'tip'"
+        :location="feature"
+        anchor="bottom left"
+        self="top left"
+      />
     </div>
     <div v-else style="height: 142px">
       <div class="absolute-center">
@@ -36,6 +44,7 @@ import _ from 'lodash'
 import { ref, watch } from 'vue'
 import { utils as coreUtils } from '../../../../core.client'
 import KLocationMap from './KLocationMap.vue'
+import KLocationTip from './KLocationTip.vue'
 
 // Props
 const props = defineProps({
@@ -47,6 +56,13 @@ const props = defineProps({
     type: String,
     default: 'name'
   },
+  renderer: {
+    type: String,
+    default: 'map',
+    validator: (value) => {
+      return _.isNil(value) || ['map', 'tip'].includes(value)
+    }
+  },
   ...coreUtils.CardSectionProps
 })
 

package/map/client/components/location/KLocationMap.vue

@@ -65,7 +65,7 @@ export default {
         if (component === 'location') {
           components.push({
             id: 'location',
-            icon: 'img:icons/kdk/center-on-feature.svg',
+            icon: 'img:kdk/center-on-feature.svg',
             tooltip: 'KLocationMap.RECENTER_MAP',
             label: _.get(this.modelValue, 'properties.name', _.get(this.modelValue, 'name', '')),
             handler: this.recenter
@@ -173,7 +173,7 @@ export default {
       const type = _.get(this.location, 'geometry.type')
       if (type === 'Point') {
         const coordinates = _.get(this.location, 'geometry.coordinates')
-        const style = _.get(this.engineOptions, 'style.location.point')
+        const style = _.get(this.location, 'style', _.get(this.engineOptions, 'style.location.point'))
         this.locationLayer = createMarkerFromPointStyle([coordinates[1], coordinates[0]],
           Object.assign({ interactive: this.draggable, draggable: this.draggable, pmIgnore: true }, style))
         if (this.draggable) this.locationLayer.on('dragend', this.onLocationDragged)
@@ -250,6 +250,7 @@ export default {
       if (container) {
         if (!this.mapReady) {
           // setup map
+          logger.debug('[KDK] Create location map with viewer options', this.engineOptions.viewer)
           this.setupMap(container, this.engineOptions.viewer)
           this.mapReady = true
           // setup base layer

package/map/client/components/location/KLocationSearch.vue

@@ -4,6 +4,7 @@
     id="location-search"
     v-model="location"
     :label="computedLabel"
+    :autofocus="autofocus"
     clearable
     use-input
     hide-dropdown-icon
@@ -20,13 +21,21 @@
     <!-- Extra actions -->
     <template v-slot:append>
       <div class="q-pl-xs row items-center">
+        <!-- viewbox filtering -->
+        <KAction
+          id="viewbox-search"
+          icon="pageview"
+          tooltip="KLocationSearch.ENABLE_VIEWBOX"
+          size="0.85rem"
+          :toggle="{ tooltip: 'KLocationSearch.DISABLE_VIEWBOX' }"
+          @toggled="onViewboxToggled"
+        />
         <!-- geocoders filtering -->
         <KAction
           v-if="hasGeocoders"
           id="configure"
-          tooltip="KLocationSearch.FILTER"
           icon="las la-sliders-h"
-          color="grey-7"
+          tooltip="KLocationSearch.FILTER_GEOCODERS"
           size="0.8rem"
           dense
         >
@@ -54,7 +63,11 @@
             {{ $tie(`Geocoders.${scope.opt.properties.source}`) }}
           </q-chip>
         </q-item-section>
-        <KLocationTip :location="scope.opt" />
+        <KLocationTip
+          :location="scope.opt"
+          anchor="center end"
+          self="center middle"
+        />
       </q-item>
     </template>
     <!-- No options -->
@@ -99,14 +112,25 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  geolocation: {
-    type: Boolean,
-    default: false
+  viewbox: {
+    type: Array,
+    default: () => null
+  },
+  limit: {
+    type: Number,
+    default: 25,
+    validator: (value) => {
+      return value > 0 && value < 500
+    }
   },
   editor: {
     type: Object,
     default: () => null
   },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -117,9 +141,10 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 // Data
+const { availableGeocoders, selectedGeocoders, setGeocoders, setViewbox, search: searchLocation } = useLocation()
 const location = ref(props.modelValue)
 const locations = ref([])
-const { availableGeocoders, selectedGeocoders, setGeocoders, search: searchLocation } = useLocation()
+const useViewbox = ref(false)
 
 // Computed
 const computedLabel = computed(() => {
@@ -138,11 +163,20 @@ async function onSearch (pattern, update, abort) {
     abort()
     return
   }
-  const result = await searchLocation(pattern)
+  const result = await searchLocation(pattern, props.limit)
   update(() => {
     locations.value = result
   })
 }
+function onViewboxToggled () {
+  if (useViewbox.value) {
+    useViewbox.value = false
+    setViewbox(null)
+  } else {
+    useViewbox.value = true
+    setViewbox(props.viewbox)
+  }
+}
 function onLocationChanged () {
   emit('update:modelValue', location.value)
 }
@@ -151,4 +185,8 @@ function onLocationChanged () {
 watch(() => props.geocoders, (geocoders) => {
   setGeocoders(geocoders)
 }, { immediate: true })
+watch(() => props.viewbox, (viewbox) => {
+  if (useViewbox.value) setViewbox(viewbox)
+  else setViewbox(null)
+}, { immediate: true })
 </script>

package/map/client/components/location/KLocationTimeLineCard.vue

@@ -31,6 +31,8 @@
             </div>
           </div>
           <KDescriptionCardSection
+            v-if="!dense  || hasDescription || hasDescriptionActions"
+            v-bind="descriptionOptions"
             :item="item"
             :actions="descriptionActions"
             :dense="dense"
@@ -39,12 +41,15 @@
         <div v-if="!dense" class="q-pl-sm q-pb-sm col-4">
           <div v-if="item.location" class="fit column relative-position">
             <KLocationMap
+              v-bind="locationOptions"
               v-model="item.location"
-              :tools="[]"
               class="col k-location-map"
             />
-            <div class="full-width ellipsis text-caption k-location-map-caption">
-              {{ item.location.properties.name }}
+            <div
+              v-if="locationName"
+              class="full-width ellipsis text-caption k-location-map-caption"
+            >
+              {{ locationName }}
             </div>
             <KPanel
               :content="locationActions"
@@ -88,6 +93,14 @@ export default {
       type: [Array, Object],
       default: () => null
     },
+    descriptionOptions: {
+      type: Object,
+      default: () => null
+    },
+    locationOptions: {
+      type: Object,
+      default: () => null
+    },
     sections: {
       type: Object,
       default: () => null
@@ -109,9 +122,18 @@ export default {
     }
   },
   computed: {
+    hasDescription () {
+      return !_.isEmpty(this.item.description)
+    },
     descriptionActions () {
       return _.filter(this.itemActions, { scope: 'description' })
     },
+    hasDescriptionActions () {
+      return !_.isEmpty(this.descriptionActions)
+    },
+    locationName () {
+      return _.get(this.item, 'location.properties.name')
+    },
     locationActions () {
       return _.filter(this.itemActions, { scope: 'location' })
     }

package/map/client/components/location/KLocationTip.vue

@@ -1,15 +1,18 @@
 <template>
   <q-tooltip
-    anchor="center end"
-    self="center middle"
-    class="q-pa-none"
+    v-model="showTip"
+    :target="target"
+    :anchor="anchor"
+    :self="self"
+    :offset="offset"
     :delay="delay"
-    :hide-delay="150"
-    :transition-duration="150"
+    :no-parent-event="noParentEvent"
+    class="q-pa-none"
     style="border-radius: 100px; border: 1px solid var(--q-primary);"
   >
     <KLocationMap
-      v-model="feature"
+      v-model="locationModel"
+      :engine-options="engineOptions"
       style="min-width: 200px; min-height: 200px;"
     />
     <q-icon name="target" class="fixed-center" />
@@ -17,23 +20,67 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
+import config from 'config'
 import { computed } from 'vue'
 import KLocationMap from './KLocationMap.vue'
 
 // Props
 const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
   location: {
     type: Object,
-    required: true
+    default: () => null
+  },
+  target: {
+    type: [Boolean, String],
+    default: true
+  },
+  anchor: {
+    type: String,
+    default: 'bottom middle'
+  },
+  self: {
+    type: String,
+    default: 'top middle'
+  },
+  offset: {
+    type: Array,
+    default: [14, 14]
   },
   delay: {
     type: Number,
     default: 500
+  },
+  noParentEvent: {
+    type: Boolean,
+    default: false
   }
 })
 
-// Data
-const feature = computed(() => {
-  return props.location
+// Emit
+const emit = defineEmits(['update:modelValue'])
+
+// Computed
+const showTip = computed({
+  get: function () {
+    return props.modelValue
+  },
+  set: function (value) {
+    emit('update:modelValue', value)
+  }
+})
+const locationModel = computed({
+  get: function () {
+    return props.location
+  }
+})
+const engineOptions = computed(() => {
+  const options = _.cloneDeep(_.get(config, 'engines.leaflet'))
+  _.set(options, 'viewer.scale', false)
+  return options
 })
 </script>