@kalisio/kdk 2.4.1 → 2.5.2

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

@@ -16,122 +16,100 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import logger from 'loglevel'
-import { Filter, Sorter, utils, i18n } from '../../../../core/client'
-import { KGrid, KPanel, KAction } from '../../../../core/client/components'
+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 { KGrid } from '../../../../core/client/components'
+import { uncacheView } from '../../utils'
 
-export default {
-  name: 'k-projects-panel',
-  components: {
-    KGrid,
-    KPanel,
-    KAction
-  },
-  inject: ['kActivity'],
-  computed: {
-    baseQuery () {
-      return Object.assign({}, this.sorter.query)
+// Data
+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'
+})
+
+// Computed
+const baseQuery = computed(() => Object.assign({}, sorter.query))
+const toolbar = computed(() => {
+  return [
+    {
+      id: 'projects-filter',
+      component: 'collection/KFilter'
     },
-    toolbar () {
-      return [
-        {
-          id: 'projects-filter',
-          component: 'collection/KFilter'
-        },
-        {
-          component: 'collection/KSorter',
-          id: 'projects-sorter',
-          tooltip: 'KProjectsPanel.SORT_PROJECTS',
-          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: 'projects-sorter',
+      tooltip: 'KProjectsPanel.SORT_PROJECTS',
+      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 } }
       ]
     }
-  },
-  data () {
-    const projectActions = []
-    if (this.$can('update', 'projects', this.kActivity.contextId)) {
-      const content = [{
-        id: 'edit-project',
-        icon: 'las la-file-alt',
-        label: 'KProjectsPanel.EDIT_PROJECT',
-        handler: (item) => this.editProject(item)
-      }]
-      if (this.$can('remove', 'projects', this.kActivity.contextId)) {
-        content.push({
-          id: 'remove-project',
-          icon: 'las la-trash',
-          label: 'KProjectsPanel.REMOVE_PROJECT',
-          handler: (item) => this.removeProject(item)
-        })
-      }
-      projectActions.push({
-        id: 'project-overflowmenu',
-        component: 'menu/KMenu',
-        dropdownIcon: 'las la-ellipsis-v',
-        actionRenderer: 'item',
-        propagate: false,
-        dense: true,
-        content
+  ]
+})
+
+// Functions
+async function onProjectSelected (project, action) {
+  switch (action) {
+    case 'open-project': {
+      router.push({
+        name: route.name,
+        query: Object.assign({ project: project._id }, route.query),
+        params: Object.assign({}, route.params)
       })
+      break
     }
-    return {
-      filter: Filter.get(),
-      sorter: Sorter.get(),
-      projectRenderer: {
-        component: 'catalog/KProjectSelector',
-        class: 'col-12',
-        actions: projectActions
-      }
+    case 'edit-project': {
+      editProject(project)
+      break
     }
-  },
-  methods: {
-    async onProjectSelected (project, action) {
-      switch (action) {
-        case 'open-project': {
-          this.$router.push({
-            name: this.$route.name,
-            query: Object.assign({ project: project._id }, this.$route.query),
-            params: Object.assign({}, this.$route.params)
-          })
-          break
-        }
-        default:
-          logger.debug('invalid action ', action)
-      }
-    },
-    editProject (project) {
-      this.$router.push({
-        name: 'edit-map-project',
-        query: this.$route.query,
-        params: Object.assign(this.$route.params, {
-          objectId: project._id,
-          contextId: this.contextId
-        })
-      })
+    case 'remove-project': {
+      removeProject(project)
+      break
+    }
+    default:
+      logger.debug('invalid action ', action)
+  }
+}
+function editProject (project) {
+  router.push({
+    name: 'edit-map-project',
+    query: route.query,
+    params: Object.assign(route.params, {
+      objectId: project._id
+    })
+  })
+}
+async function removeProject (project) {
+  const result = await utils.dialog({
+    title: i18n.t('KProjectsPanel.REMOVE_DIALOG_TITLE', { project: project.name }),
+    message: i18n.t('KProjectsPanel.REMOVE_DIALOG_MESSAGE', { project: project.name }),
+    html: true,
+    ok: {
+      label: i18n.t('OK'),
+      flat: true
     },
-    async removeProject (project) {
-      const result = await utils.dialog({
-        title: i18n.t('KProjectsPanel.REMOVE_DIALOG_TITLE', { project: project.name }),
-        message: i18n.t('KProjectsPanel.REMOVE_DIALOG_MESSAGE', { project: project.name }),
-        html: true,
-        ok: {
-          label: i18n.t('OK'),
-          flat: true
-        },
-        cancel: {
-          label: i18n.t('CANCEL'),
-          flat: true
-        }
-      })
-      if (!result.ok) return false
-      await this.$api.getService('projects').remove(project._id)
+    cancel: {
+      label: i18n.t('CANCEL'),
+      flat: true
     }
+  })
+  if (!result.ok) return false
+  const catalogService = api.getService('catalog')
+  for (const viewId of project.views) {
+    const view = await catalogService.get(viewId._id)
+    uncacheView(view, project, CurrentActivity)
   }
+  await api.getService('projects').remove(project._id)
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Forms section -->
-    <k-form
+    <KForm
       ref="layersForm"
       :schema="layersFormSchema"
       :values="project"
@@ -18,79 +18,66 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { api, i18n } from '../../../../core/client'
 import { KForm, KPanel } from '../../../../core/client/components'
 import { useProject } from '../../composables'
 
-export default {
-  name: 'k-select-layers',
-  components: {
-    KForm,
-    KPanel
-  },
-  emits: [
-    'done'
-  ],
-  inject: ['kActivity'],
-  props: {
-    contextId: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    layersFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/select-layers#',
-        type: 'object',
-        properties: {
-          layers: {
-            type: 'array',
-            field: {
-              component: 'form/KSelectLayersField',
-              label: 'KSelectLayers.LAYERS_FIELD_LABEL'
-            }
-          }
-        },
-        required: ['layers']
+// Data
+const layersForm = ref(null)
+const { project, projectId } = await getProject()
+
+// Emits
+const emit = defineEmits(['done'])
+
+// Computed
+const layersFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/select-layers#',
+    type: 'object',
+    properties: {
+      layers: {
+        type: 'array',
+        field: {
+          component: 'form/KSelectLayersField',
+          label: 'KSelectLayers.LAYERS_FIELD_LABEL'
+        }
       }
     },
-    buttons () {
-      return [{
-        id: 'close-action',
-        outline: true,
-        label: 'CLOSE',
-        renderer: 'form-button',
-        handler: this.onClose
-      }, {
-        id: 'select-layers-action',
-        label: this.$t('KSelectLayers.SELECT_BUTTON'),
-        renderer: 'form-button',
-        handler: this.onSelect
-      }]
-    }
-  },
-  methods: {
-    onClose () {
-      this.$emit('done')
-    },
-    async onSelect () {
-      const layersResult = this.$refs.layersForm.validate()
-      if (!layersResult.isValid) return
-      const projectService = this.$api.getService('projects', this.contextId)
-      await projectService.patch(this.projectId, { layers: layersResult.values.layers })
-      this.$emit('done')
-    }
-  },
-  // Should be used with <Suspense> to ensure the project is loaded upfront
-  async setup (props) {
-    const project = useProject({ contextId: props.contextId })
-    await project.loadProject({ populate: false })
-    // Expose
-    return {
-      ...project
-    }
+    required: ['layers']
   }
+})
+const buttons = computed(() => {
+  return [{
+    id: 'close-action',
+    outline: true,
+    label: 'CLOSE',
+    renderer: 'form-button',
+    handler: onClose
+  }, {
+    id: 'select-layers-action',
+    label: i18n.t('KSelectLayers.SELECT_BUTTON'),
+    renderer: 'form-button',
+    handler: onSelect
+  }]
+})
+
+// Functions
+async function getProject () {
+  const project = useProject()
+  await project.loadProject({ populate: false })
+  return project
+}
+function onClose () {
+  emit('done')
+}
+async function onSelect () {
+  const layersResult = layersForm.value.validate()
+  if (!layersResult.isValid) return
+  const projectService = api.getService('projects')
+  await projectService.patch(projectId.value, { layers: layersResult.values.layers })
+  emit('done')
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Forms section -->
-    <k-form
+    <KForm
       ref="viewsForm"
       :schema="viewsFormSchema"
       :values="project"
@@ -18,79 +18,66 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { api, i18n } from '../../../../core/client'
 import { KForm, KPanel } from '../../../../core/client/components'
 import { useProject } from '../../composables'
 
-export default {
-  name: 'k-select-views',
-  components: {
-    KForm,
-    KPanel
-  },
-  emits: [
-    'done'
-  ],
-  inject: ['kActivity'],
-  props: {
-    contextId: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    viewsFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/select-views#',
-        type: 'object',
-        properties: {
-          views: {
-            type: 'array',
-            field: {
-              component: 'form/KSelectViewsField',
-              label: 'KSelectViews.VIEWS_FIELD_LABEL'
-            }
-          }
-        },
-        required: ['views']
+// Data
+const viewsForm = ref(null)
+const { project, projectId } = await getProject()
+
+// Emits
+const emit = defineEmits(['done'])
+
+// Computed
+const viewsFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/select-views#',
+    type: 'object',
+    properties: {
+      views: {
+        type: 'array',
+        field: {
+          component: 'form/KSelectViewsField',
+          label: 'KSelectViews.VIEWS_FIELD_LABEL'
+        }
       }
     },
-    buttons () {
-      return [{
-        id: 'close-action',
-        outline: true,
-        label: 'CLOSE',
-        renderer: 'form-button',
-        handler: this.onClose
-      }, {
-        id: 'select-views-action',
-        label: this.$t('KSelectViews.SELECT_BUTTON'),
-        renderer: 'form-button',
-        handler: this.onSelect
-      }]
-    }
-  },
-  methods: {
-    onClose () {
-      this.$emit('done')
-    },
-    async onSelect () {
-      const viewsResult = this.$refs.viewsForm.validate()
-      if (!viewsResult.isValid) return
-      const projectService = this.$api.getService('projects', this.contextId)
-      await projectService.patch(this.projectId, { views: viewsResult.values.views })
-      this.$emit('done')
-    }
-  },
-  // Should be used with <Suspense> to ensure the project is loaded upfront
-  async setup (props) {
-    const project = useProject({ contextId: props.contextId })
-    await project.loadProject({ populate: false })
-    // Expose
-    return {
-      ...project
-    }
+    required: ['views']
   }
+})
+const buttons = computed(() => {
+  return [{
+    id: 'close-action',
+    outline: true,
+    label: 'CLOSE',
+    renderer: 'form-button',
+    handler: onClose
+  }, {
+    id: 'select-views-action',
+    label: i18n.t('KSelectViews.SELECT_BUTTON'),
+    renderer: 'form-button',
+    handler: onSelect
+  }]
+})
+
+// Functions
+async function getProject () {
+  const project = useProject()
+  await project.loadProject({ populate: false })
+  return project
+}
+function onClose () {
+  emit('done')
+}
+async function onSelect () {
+  const viewsResult = viewsForm.value.validate()
+  if (!viewsResult.isValid) return
+  const projectService = api.getService('projects')
+  await projectService.patch(projectId.value, { views: viewsResult.values.views })
+  emit('done')
 }
 </script>

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

@@ -27,13 +27,14 @@
       <!-- View actions -->
       <KPanel
         :id="`${item.name}-actions`"
-        :content="itemActions"
+        :content="cachable ? viewActions : itemActions"
         :context="item" />
     </div>
   </div>
 </template>
 
 <script>
+import _ from 'lodash'
 import { KPanel, KAction } from '../../../../core/client/components'
 import { baseItem } from '../../../../core/client/mixins'
 
@@ -43,8 +44,37 @@ export default {
     KPanel,
     KAction
   },
-  mixins: [baseItem]
+  mixins: [baseItem],
+  props: {
+    cachable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    viewActions () {
+      const itemActions = _.cloneDeep(this.itemActions)
+      const viewActions = _.get(itemActions, '[0].content', [])
+      if (this.item.isCached) {
+        viewActions.push({
+          id: 'uncache-view',
+          icon: 'wifi',
+          label: 'KViewsPanel.UNCACHE_VIEW',
+          handler: (item) => this.$emit('item-selected', item, 'uncache-view')
+        })
+      } else {
+        viewActions.push({
+          id: 'cache-view',
+          icon: 'wifi_off',
+          label: 'KViewsPanel.CACHE_VIEW',
+          handler: (item) => this.$emit('item-selected', item, 'cache-view')
+        })
+      }
+      return itemActions
+    }
+  }
 }
+
 </script>
 
 <style lang="scss" scoped>