@kalisio/kdk 2.4.1 → 2.5.2

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

@@ -11,133 +11,201 @@
       :scrollToTop="false"
       :header="toolbar"
       header-class="full-width no-wrap"
+      @collection-refreshed="onCollectionRefreshed"
       @selection-changed="onViewSelected"
     />
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
 import logger from 'loglevel'
-import { Filter, Sorter, utils, i18n } from '../../../../core/client'
-import { KGrid, KPanel, KAction } from '../../../../core/client/components'
-import { useProject } from '../../composables'
+import { ref, computed } from 'vue'
+import { Filter, Sorter, 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'
 
-export default {
-  name: 'k-views-panel',
-  components: {
-    KGrid,
-    KPanel,
-    KAction
-  },
-  inject: ['kActivity'],
-  data () {
-    const viewActions = []
-    if (this.$can('create', 'catalog', this.kActivity.contextId)) {
-      viewActions.push({
-        id: 'view-overflowmenu',
-        component: 'menu/KMenu',
-        dropdownIcon: 'las la-ellipsis-v',
-        actionRenderer: 'item',
-        propagate: false,
-        dense: true,
-        content: [{
-          id: 'remove-view',
-          icon: 'las la-trash',
-          label: 'KViewsPanel.REMOVE_VIEW',
-          handler: (item) => this.removeView(item)
-        }]
-      })
-    }
-    return {
-      filter: Filter.get(),
-      sorter: Sorter.get(),
-      viewRenderer: {
-        component: 'catalog/KViewSelector',
-        class: 'col-12',
-        actions: viewActions
-      }
-    }
-  },
-  computed: {
-    baseQuery () {
-      return Object.assign({ type: 'Context' }, this.sorter.query)
-    },
-    filterQuery () {
-      const query = {}
-      if (this.project) Object.assign(query, { _id: { $in: _.map(this.project.views, '_id') } })
-      return Object.assign(query, this.filter.query)
+// 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())
+
+// Computed
+const baseQuery = computed(() => {
+  return Object.assign({ type: 'Context' }, sorter.query)
+})
+const filterQuery = computed(() => {
+  const query = {}
+  if (project.value) Object.assign(query, { _id: { $in: _.map(project.value.views, '_id') } })
+  Object.assign(query, filter.query)
+  return query
+})
+const toolbar = computed(() => {
+  return [
+    {
+      id: 'views-filter',
+      component: 'collection/KFilter'
     },
-    toolbar () {
-      return [
-        {
-          id: 'views-filter',
-          component: 'collection/KFilter'
-        },
-        {
-          component: 'collection/KSorter',
-          id: 'views-sorter',
-          tooltip: 'KViewsPanel.SORT_VIEWS',
-          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 } },
-            { icon: 'kdk:clockwise.png', value: { field: 'updatedAt', order: 1 } },
-            { icon: 'kdk:anticlockwise.png', value: { field: 'updatedAt', order: -1 } }
-          ]
-        }
+    {
+      component: 'collection/KSorter',
+      id: 'views-sorter',
+      tooltip: 'KViewsPanel.SORT_VIEWS',
+      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 } },
+        { icon: 'kdk:clockwise.png', value: { field: 'updatedAt', order: 1 } },
+        { icon: 'kdk:anticlockwise.png', value: { field: 'updatedAt', order: -1 } }
       ]
     }
-  },
-  methods: {
-    async onViewSelected (view, action) {
-      switch (action) {
-        case 'apply-view': {
-          this.kActivity.loadContext(view)
-          break
-        }
-        case 'set-home-view': {
-          if (!this.$can('update', 'catalog', this.kActivity.contextId)) return
-          // Get current home view
-          const response = await this.$api.getService('catalog').find({ query: { type: 'Context', isDefault: true } })
-          const currentHomeView = (response.data.length > 0 ? response.data[0] : null)
-          // Unset it
-          if (currentHomeView) await this.$api.getService('catalog').patch(currentHomeView._id, { isDefault: false })
-          // Then set new one if it's really a new one
-          if (!currentHomeView || (view._id !== currentHomeView._id)) {
-            await this.$api.getService('catalog').patch(view._id, { isDefault: true })
-          }
-          break
-        }
-        default:
-          logger.debug('invalid action ', action)
+  ]
+})
+
+// Functions
+async function getProject () {
+  const project = useProject()
+  await project.loadProject()
+  return project
+}
+function getViewRenderer () {
+  const viewActions = []
+  viewActions.push({
+    id: 'view-overflowmenu',
+    component: 'menu/KMenu',
+    dropdownIcon: 'las la-ellipsis-v',
+    actionRenderer: 'item',
+    propagate: false,
+    dense: true,
+    content: []
+  })
+  if (api.can('create', 'catalog')) {
+    viewActions[0].content.push({
+      id: 'remove-view',
+      icon: 'las la-trash',
+      label: 'KViewsPanel.REMOVE_VIEW',
+      handler: (item) => removeView(item)
+    })
+  }
+  return {
+    component: 'catalog/KViewSelector',
+    class: 'col-12',
+    actions: viewActions,
+    cachable: !_.isNil(project.value)
+  }
+}
+async function onCollectionRefreshed (items) {
+  const cachedViews = await LocalCache.getItem('views')
+  if (!cachedViews) return
+  // Update
+  _.forEach(items, (item) => {
+    item.isCached = _.has(cachedViews, item._id)
+  })
+}
+function getProjectLayers () {
+  const layers = (project.value
+    ? project.value.layers.map(layer => (layer._id
+      ? CurrentActivity.value.getLayerById(layer._id)
+      : CurrentActivity.value.getLayerByName(layer.name)))
+    : [])
+  return layers.filter(layer => !_.isNil(layer))
+}
+async function onViewSelected (view, action) {
+  switch (action) {
+    case 'apply-view': {
+      CurrentActivity.value.loadContext(view)
+      break
+    }
+    case 'set-home-view': {
+      if (!api.can('update', 'catalog')) return
+      // Get current home view
+      const response = await api.getService('catalog').find({ query: { type: 'Context', isDefault: true } })
+      const currentHomeView = (response.data.length > 0 ? response.data[0] : null)
+      // Unset it
+      if (currentHomeView) await api.getService('catalog').patch(currentHomeView._id, { isDefault: false })
+      // Then set new one if it's really a new one
+      if (!currentHomeView || (view._id !== currentHomeView._id)) {
+        await api.getService('catalog').patch(view._id, { isDefault: true })
       }
-    },
-    async removeView (view) {
-      const result = await utils.dialog({
-        title: i18n.t('KViewsPanel.REMOVE_DIALOG_TITLE', { view: view.name }),
-        message: i18n.t('KViewsPanel.REMOVE_DIALOG_MESSAGE', { view: view.name }),
+      break
+    }
+    case 'cache-view': {
+      // Select cache options
+      const center = CurrentActivity.value.getCenter()
+      Dialog.create({
+        title: i18n.t('KViewsPanel.CACHE_VIEW_DIALOG_TITLE'),
+        message: i18n.t('KViewsPanel.CACHE_VIEW_DIALOG_MESSAGE'),
         html: true,
-        ok: {
-          label: i18n.t('OK'),
-          flat: true
-        },
-        cancel: {
-          label: i18n.t('CANCEL'),
-          flat: true
+        component: 'KDialog',
+        componentProps: {
+          component: 'catalog/KCreateOfflineView',
+          zoomLevel: center.zoomLevel,
+          view,
+          okAction: {
+            id: 'ok-button',
+            label: 'OK',
+            handler: 'apply',
+            flat: true
+          },
+          cancelAction: 'CANCEL'
         }
+      }).onOk(async (values) => {
+        const dismiss = Notify.create({
+          group: 'views',
+          icon: 'las la-hourglass-half',
+          message: i18n.t('KViewsPanel.CACHING_VIEW'),
+          color: 'primary',
+          timeout: 0,
+          spinner: true
+        })
+        await cacheView(view, getProjectLayers(), {
+          contextId: Store.get('context'),
+          ...values
+        })
+        view.isCached = true
+        dismiss()
       })
-      if (!result.ok) return false
-      await this.$api.getService('catalog').remove(view._id)
+      break
     }
-  },
-  // Should be used with <Suspense> to ensure the project is loaded upfront
-  async setup () {
-    const project = useProject()
-    await project.loadProject()
-    // Expose
-    return {
-      ...project
+    case 'uncache-view': {
+      const dismiss = Notify.create({
+        group: 'views',
+        icon: 'las la-trash-alt',
+        message: i18n.t('KViewsPanel.UNCACHING_VIEW'),
+        color: 'primary',
+        timeout: 0,
+        spinner: true
+      })
+      await uncacheView(view, getProjectLayers(), {
+        contextId: Store.get('context')
+      })
+      view.isCached = false
+      dismiss()
+      break
     }
+    default:
+      logger.debug('invalid action ', action)
   }
 }
+async function removeView (view) {
+  const result = await utils.dialog({
+    title: i18n.t('KViewsPanel.REMOVE_DIALOG_TITLE', { view: view.name }),
+    message: i18n.t('KViewsPanel.REMOVE_DIALOG_MESSAGE', { view: view.name }),
+    html: true,
+    ok: {
+      label: i18n.t('OK'),
+      flat: true
+    },
+    cancel: {
+      label: i18n.t('CANCEL'),
+      flat: true
+    }
+  })
+  if (!result.ok) return false
+  await uncacheView(view, getProjectLayers())
+  await api.getService('catalog').remove(view._id)
+}
 </script>

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

@@ -32,98 +32,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
+import { computed, ref } from 'vue'
 import { KStamp } from '../../../../core/client/components'
 import KLayersSelector from './KLayersSelector.vue'
 
-export default {
-  name: 'k-weather-layers-selector',
-  components: {
-    KStamp,
-    KLayersSelector
+// Props
+const props = defineProps({
+  layers: {
+    type: Array,
+    default: () => []
   },
-  props: {
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    forecastModels: {
-      type: Array,
-      default: () => []
-    },
-    options: {
-      type: Object,
-      default: () => {}
-    }
+  forecastModels: {
+    type: Array,
+    default: () => []
   },
-  computed: {
-    models () {
-      return this.forecastModels.map(forecastModel => Object.assign({
-        value: forecastModel.name
-      }, _.pick(forecastModel, ['label', 'description', 'icon', 'iconUrl'])))
-    },
-    filteredLayers () {
-      if (this.mode === 'forecast') return this.filterForecastLayers()
-      return this.filterArchiveLayers()
-    }
-  },
-  data () {
-    return {
-      model: '',
-      mode: 'forecast'
-    }
-  },
-  methods: {
-    hideLayer (layer) {
-      if (layer.isVisible) {
-        const action = _.find(layer.actions, { name: 'toggle' })
-        if (action) action.handler()
-      }
-    },
-    filterForecastLayers () {
-      const forecastLayers = []
-      _.forEach(this.layers, (layer) => {
-        if (!layer.tags.includes('archive')) forecastLayers.push(layer)
-        else this.hideLayer(layer)
-      })
-      return forecastLayers
-    },
-    filterArchiveLayers () {
-      const archiveLayers = []
-      _.forEach(this.layers, (layer) => {
-        if (layer.tags.includes('archive')) {
-          if (_.has(layer, 'meteo_model')) {
-            // check layer supports the current model
-            // either with default model, or with a specific source
-            if (_.get(layer.meteo_model, 'default.model') === this.model ||
-                _.find(layer.meteo_model.sources, { model: this.model })) archiveLayers.push(layer)
-            else this.hideLayer(layer)
-          } else {
-            this.hideLayer(layer)
-          }
-        } else this.hideLayer(layer)
-      })
-      return archiveLayers
-    },
-    onModelChanged (model) {
-      const forecastModel = this.forecastModels.find(forecast => forecast.name === model)
-      if (forecastModel) {
-        const toggleAction = _.find(forecastModel.actions, { id: 'toggle' })
-        if (toggleAction) toggleAction.handler()
+  options: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// Data
+const model = ref('')
+const mode = ref('forecast')
+
+// Created
+let forecastModel = props.forecastModels.find(forecast => forecast.isDefault)
+if (!forecastModel) {
+  forecastModel = (props.forecastModels.length > 0 ? props.forecastModels[0] : '')
+}
+if (forecastModel) {
+  model.value = forecastModel.name
+  onModelChanged(forecastModel.name)
+}
+
+// Computed
+const models = computed(() => {
+  return props.forecastModels.map(forecastModel => Object.assign({
+    value: forecastModel.name
+  }, _.pick(forecastModel, ['label', 'description', 'icon', 'iconUrl'])))
+})
+const filteredLayers = computed(() => {
+  if (mode.value === 'forecast') return filterForecastLayers()
+  return filterArchiveLayers()
+})
+
+// Functions
+function hideLayer (layer) {
+  if (layer.isVisible) {
+    const action = _.find(layer.actions, { name: 'toggle' })
+    if (action) action.handler()
+  }
+}
+function filterForecastLayers () {
+  const forecastLayers = []
+  _.forEach(props.layers, (layer) => {
+    if (!layer.tags.includes('archive')) forecastLayers.push(layer)
+    else hideLayer(layer)
+  })
+  return forecastLayers
+}
+function filterArchiveLayers () {
+  const archiveLayers = []
+  _.forEach(props.layers, (layer) => {
+    if (layer.tags.includes('archive')) {
+      if (_.has(layer, 'meteo_model')) {
+        // check layer supports the current model
+        // either with default model, or with a specific source
+        if (_.get(layer.meteo_model, 'default.model') === model.value ||
+            _.find(layer.meteo_model.sources, { model: model.value })) archiveLayers.push(layer)
+        else hideLayer(layer)
+      } else {
+        hideLayer(layer)
       }
-    }
-  },
-  created () {
-    // Select default if any or first one
-    let forecastModel = this.forecastModels.find(forecast => forecast.isDefault)
-    if (!forecastModel) {
-      forecastModel = (this.forecastModels.length > 0 ? this.forecastModels[0] : '')
-    }
-    if (forecastModel) {
-      this.model = forecastModel.name
-      this.onModelChanged(forecastModel.name)
-    }
+    } else hideLayer(layer)
+  })
+  return archiveLayers
+}
+function onModelChanged (model) {
+  const forecastModel = props.forecastModels.find(forecast => forecast.name === model)
+  if (forecastModel) {
+    const toggleAction = _.find(forecastModel.actions, { id: 'toggle' })
+    if (toggleAction) toggleAction.handler()
   }
 }
 </script>

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

@@ -41,6 +41,15 @@
               v-model="selectedGeocoders"
               :geocoders="availableGeocoders"
             />
+            <div class="q-pl-sm q-pr-md" v-if="switchViewboxUsage">
+              <q-separator inset class=" q-mt-md q-mb-md"/>
+              <q-toggle
+                  v-model="useViewbox"
+                  size="xs"
+                  :label="$t('KLocationField.VIEWBOX')"
+                  @update:model-value="changeViewboxUsage"
+              />
+            </div>
           </q-popup-proxy>
         </KAction>
         <!-- geolocation -->
@@ -154,6 +163,9 @@ export default {
     },
     map () {
       return _.get(this.properties, 'field.map')
+    },
+    switchViewboxUsage () {
+      return _.get(this.properties, 'field.viewbox.selectable', false)
     }
   },
   methods: {
@@ -165,7 +177,7 @@ export default {
         abort()
         return
       }
-      const locations = await this.search(pattern)
+      const locations = await this.search(pattern, _.get(this.properties, 'field.limit', 25))
       update(() => {
         this.locations = locations
       })
@@ -180,24 +192,31 @@ export default {
     onLocationChanged (context, location) {
       this.model = location
       return true
+    },
+    changeViewboxUsage () {
+      this.setViewbox(this.useViewbox ? _.get(this.properties, 'field.viewbox.coordinates', []) : [])
     }
   },
   setup () {
     // Data
-    const { availableGeocoders, selectedGeocoders, setGeocoders, search, geolocate } = useLocation()
+    const { availableGeocoders, selectedGeocoders, setGeocoders, setViewbox, search, geolocate } = useLocation()
     const locations = ref([])
+    const useViewbox = ref(true)
     // Expose
     return {
       locations,
+      useViewbox,
       availableGeocoders,
       selectedGeocoders,
       setGeocoders,
+      setViewbox,
       geolocate,
       search
     }
   },
   mounted () {
     this.setGeocoders(_.get(this.properties, 'field.geocoders', []))
+    this.setViewbox(_.get(this.properties, 'field.viewbox.coordinates', []))
   }
 }
 </script>

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

@@ -97,7 +97,7 @@ export default {
       if (layer) {
         if (this.service.protocol === 'WFS') {
           try {
-            const desc = await wfs.DescribeFeatureType(this.service.baseUrl, this.service.version, layer.id, this.service.searchParams)
+            const desc = await wfs.DescribeFeatureType(this.service.baseUrl, this.service.version, layer.id, this.service.searchParams, this.service.headers)
             newModel.schema = wfs.generatePropertiesSchema(desc, layer.display)
             const decodedDesc = wfs.decodeFeatureType(desc)
             newModel.properties = decodedDesc.properties.map(prop => prop.name)