@kalisio/kdk 2.4.0 → 2.5.1

package/map/client/components/KEditLayerData.vue

@@ -1,85 +1,23 @@
 <template>
-  <k-action v-bind="$props" :toggled="isToggled" />
+  <KAction v-bind="props" :toggled="isToggled">
+  </KAction>
 </template>
 
-<script>
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { actionProps } from '../../../core/client/utils/utils.actions.js'
 import KAction from '../../../core/client/components/action/KAction.vue'
+import { useCurrentActivity } from '../composables/activity.js'
 
-export default {
-  name: 'k-edit-layer-data',
-  components: {
-    KAction
-  },
-  inject: ['kActivity'],
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    icon: {
-      type: String,
-      default: undefined
-    },
-    color: {
-      type: String,
-      default: 'grey-9'
-    },
-    size: {
-      type: String,
-      default: 'md'
-    },
-    flat: {
-      type: Boolean,
-      default: true
-    },
-    outline: {
-      type: Boolean,
-      default: false
-    },
-    badge: {
-      type: Object,
-      default: () => null
-    },
-    toggle: {
-      type: Object,
-      default: () => null
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    tooltip: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    context: {
-      type: Object,
-      default: () => null
-    },
-    handler: {
-      type: [Function],
-      default: null
-    },
-    renderer: {
-      type: String,
-      default: 'button',
-      validator: (value) => {
-        return ['button', 'form-button', 'item', 'fab'].includes(value)
-      }
-    }
-  },
-  computed: {
-    isToggled () {
-      return this.kActivity.isLayerEdited(this.context)
-    }
-  }
-}
+// Props
+const props = defineProps(_.omit(actionProps, ['toggle', 'url', 'handler', 'route', 'dialog']))
+
+// Data
+const { CurrentActivity } = useCurrentActivity({ selection: false, probe: false })
+
+// Computed
+const isToggled = computed(() => {
+  return CurrentActivity.value.isLayerEdited(props.context)
+})
 </script>

package/map/client/components/KFeatureEditor.vue

@@ -6,7 +6,6 @@
     :service="service"
     perspective="properties"
     :objectId="featureId"
-    :contextId="contextId"
     :schema-function="loadLayerSchema"
     @applied="onFeatureEdited"
     @closed="closeModal()"
@@ -38,10 +37,6 @@ export default {
     featureId: {
       type: String,
       required: true
-    },
-    contextId: {
-      type: String,
-      default: ''
     }
   },
   data () {
@@ -60,7 +55,7 @@ export default {
     async onFeatureEdited (updatedFeature) {
       // Save in DB or in memory
       if (this.layer._id) {
-        await this.kActivity.editFeaturesProperties(updatedFeature)
+        await this.kActivity.editFeaturesProperties(updatedFeature, this.layer)
       } else {
         await this.$api.getService(this.service).patch(updatedFeature._id, _.pick(updatedFeature, ['properties']))
       }
@@ -80,7 +75,7 @@ export default {
     // If not injected load it
     if (this.layerName) this.layer = this.kActivity.getLayerByName(this.layerName)
     else this.layer = await this.$api.getService('catalog').get(this.layerId)
-    this.service = _.get(this.layer, '_id') ? 'features' : 'features-edition'
+    this.service = _.get(this.layer, '_id') ? _.get(this.layer, 'service') : 'features-edition'
   },
   setup (props) {
     return {

package/map/client/components/KFeaturesChart.vue

@@ -95,10 +95,6 @@ export default {
     layerName: {
       type: String,
       default: ''
-    },
-    contextId: {
-      type: String,
-      default: ''
     }
   },
   computed: {
@@ -175,7 +171,7 @@ export default {
       let values = _.get(this.layer.schema, `content.properties.${this.selectedProperty.value}.field.options`)
       if (!values) {
         // Otherwise we need to make a DB query
-        values = await this.$api.getService(this.layer.service, this.contextId)
+        values = await this.$api.getService(this.layer.service)
           .find({ query: Object.assign({ $distinct: `properties.${this.selectedProperty.value}` }, this.layer.baseQuery) })
         // We don't have label in that case
         values = _.map(values, value => ({ value, label: (value || this.$t('KFeaturesChart.NULL_VALUE_LABEL')) }))
@@ -187,7 +183,7 @@ export default {
       this.values = await this.getPropertyValues()
       // Then count features for each value
       let data = await Promise.all(_.map(this.values, async value => {
-        const response = await this.$api.getService(this.layer.service, this.contextId)
+        const response = await this.$api.getService(this.layer.service)
           .find({ query: Object.assign({ $limit: 0, [`properties.${this.selectedProperty.value}`]: value.value }, this.layer.baseQuery) })
         return { value, count: response.total }
       }))

package/map/client/components/KFeaturesFilterEditor.vue

@@ -0,0 +1,300 @@
+<template>
+  <div id="filter-editor" class="column">
+    <!--
+      Title
+    -->
+      <div id="filter-editor-header" v-if="title">
+      <div class="ellipsis text-h6">
+        {{ $tie(title) }}
+      </div>
+    </div>
+    <div
+      id="filter-editor-content"
+      class="full-width column"
+    >
+      <!--
+        Name editor
+      -->
+      <KForm
+        ref="formRef"
+        :values="formValues"
+        :schema="formSchema"
+      />
+      <div id="filter-editor-rule">
+        <q-list>
+          <q-item v-if="!hasUniqueCondition">
+            <q-item-section>{{ $t('KFilterCondition.FILTER_WHEN') }}</q-item-section>
+          </q-item>
+          <template v-for="(condition, index) in conditions" :key="condition.id">
+            <KFilterCondition
+              :ref="(el) => conditionsRefs[index] = el"
+              :condition="condition"
+              :isFirst="index === 0"
+              :isUnique="hasUniqueCondition"
+              :layerId="layerId"
+              :layerName="layerName"
+              @onRemove="removeCondition"
+            />
+          </template>
+          <q-item>
+            <q-item-section class="row items-center">
+              <q-btn
+                id="add-condition"
+                icon="las la-plus"
+                :label="$t('KFeaturesFilterManager.ADD_CONDITION')"
+                outline
+                rounded
+                @click="addCondition"
+              />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <q-select for="filter-style-field" id="filter-style-field"
+        v-model="style"
+        :options="styleOptions"
+        :label="$t('KFeaturesFilterManager.STYLE_LABEL')"
+      >
+        <!-- Selected display -->
+        <template v-slot:selected-item="scope">
+          <q-item v-bind="scope.itemProps" class="q-ma-none q-pa-none">
+            <q-item-section class="col-auto q-mr-md"><q-item-label>{{ scope.opt.label }}</q-item-label></q-item-section>
+            <q-item-section v-if="scope.opt.data">
+              <div class="row items-center q-gutter-sm">
+                <KStylePreview :style="scope.opt.data.point" type="point" />
+                <KStylePreview :style="scope.opt.data.line" type="line" />
+                <KStylePreview :style="scope.opt.data.polygon" type="polygon" />
+              </div>
+            </q-item-section>
+          </q-item>
+        </template>
+        <!-- Options display -->
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section class="col-auto q-mr-md"><q-item-label>{{ scope.opt.label }}</q-item-label></q-item-section>
+            <q-item-section v-if="scope.opt.data">
+              <div class="row items-center q-gutter-sm">
+                <KStylePreview :style="scope.opt.data.point" type="point" />
+                <KStylePreview :style="scope.opt.data.line" type="line" />
+                <KStylePreview :style="scope.opt.data.polygon" type="polygon" />
+              </div>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <KStyleEditor
+        v-if="style && styleOptions.length > 0 && style.value === styleOptions[1].value"
+        ref="styleEditorRef"
+        v-model="styleValue"
+        class="q-pa-md"
+        hideButtons
+        @applied="onStyleApplied"
+      />
+    </div>
+    <!--
+      Buttons
+    -->
+    <div id="filter-editor-footer" class="row justify-end q-mt-md" v-if="!hideButtons">
+      <KPanel
+        id="filter-editor-buttons"
+        class="q-gutter-x-sm"
+        :content="buttons"
+        :action-renderer="'form-button'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { uid } from 'quasar'
+import { ref, computed, onMounted } from 'vue'
+import { api, i18n } from '../../../core/client'
+import { filterQueryToConditions } from '../utils'
+import KFilterCondition from './KFilterCondition.vue'
+import KStyleEditor from './styles/KStyleEditor.vue'
+import KStylePreview from './styles/KStylePreview.vue'
+
+// Props
+const props = defineProps({
+  filter: {
+    type: Object,
+    default: () => null
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  hideButtons: {
+    type: Boolean,
+    default: false
+  },
+  buttons: {
+    type: Array,
+    default: null
+  },
+  layerId: {
+    type: String,
+    default: ''
+  },
+  layerName: {
+    type: String,
+    default: ''
+  }
+})
+
+// Emits
+const emit = defineEmits(['canceled', 'applied'])
+
+// Data
+const formRef = ref(null)
+const styleEditorRef = ref(null)
+const conditionsRefs = ref([])
+let styles = []
+const styleOptions = ref(getStyleOptions())
+const conditions = ref(getConditions())
+const style = ref(null)
+let createdStyle = null
+const formSchema = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://kalisio.xyz/schemas/style-editor#',
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      minLength: 3,
+      maxLength: 256,
+      field: {
+        component: 'form/KTextField',
+        label: 'KFeaturesFilterManager.NAME_LABEL'
+      }
+    }
+  },
+  required: ['name']
+}
+
+// Computed
+const formValues = computed(() => {
+  if (_.isEmpty(props.filter)) return null
+  return { name: _.get(props.filter, 'label') }
+})
+const styleValue = computed(() => {
+  if (_.isEmpty(props.filter)) return null
+  return _.get(props.filter, 'style')
+})
+const buttons = computed(() => {
+  if (props.buttons !== null) return props.buttons
+  return [
+    {
+      id: 'close-button',
+      label: 'CANCEL',
+      renderer: 'form-button',
+      outline: true,
+      handler: () => emit('canceled')
+    },
+    {
+      id: 'apply-button',
+      label: 'APPLY',
+      renderer: 'form-button',
+      handler: apply
+    }
+  ]
+})
+const hasUniqueCondition = computed(() => {
+  return _.compact(conditions.value).length === 1
+})
+
+// Functions
+async function getStyles () {
+  const styles = await api.getService('styles').find()
+  return styles.data
+}
+function getStyleOptions () {
+  const options = [{ label: i18n.t('KFeaturesFilterManager.NONE'), value: null }, { label: i18n.t('KFeaturesFilterManager.NEW'), value: '+' }]
+  _.forEach(styles, style => {
+    options.push({ label: style.name, value: style._id, data: style })
+  })
+  return options
+}
+function getConditions () {
+  if (_.isEmpty(props.filter)) return [{ id: uid() }]
+  return filterQueryToConditions(_.get(props.filter, 'active'))
+}
+function getStyle () {
+  if (_.isEmpty(props.filter)) return styleOptions.value[0]
+  const style = _.find(styles, { _id: _.get(props.filter, 'style') })
+  if (!style) return styleOptions.value[0]
+  return { label: style.name, value: style._id, data: style }
+}
+function addCondition () {
+  conditions.value.push({ id: uid() })
+}
+function removeCondition (id) {
+  conditions.value = _.filter(conditions.value, condition => condition.id !== id)
+}
+function conditionsToQuery (conditions) {
+  const value = { ['properties.' + conditions[0].property]: { ['$' + conditions[0].comparisonOperator]: conditions[0].value } }
+  if (conditions.length < 2) return value
+  const query = {
+    ['$' + conditions[1].booleanOperator]: [
+      value,
+      conditionsToQuery(conditions.slice(1))
+    ]
+  }
+
+  return query
+}
+function onStyleApplied (style) {
+  createdStyle = style
+}
+async function apply () {
+  const formResult = formRef.value.validate()
+  if (!formResult.isValid) return
+
+  let areConditionsValid = true
+  const conditionsValues = []
+  _.forEach(conditionsRefs.value, condition => {
+    if (!condition) return
+    const result = condition.validate()
+    if (!result.isValid) {
+      areConditionsValid = false
+      return
+    }
+    conditionsValues.push(result.values)
+  })
+
+  if (!areConditionsValid) return
+
+  let styleResult = null
+  if (style.value.value === styleOptions.value[1].value) {
+    // Create a new style
+    styleResult = await styleEditorRef.value.apply()
+    if (!styleResult) return
+  }
+
+  const filter = {
+    id: _.get(props.filter, 'id'),
+    label: formResult.values.name,
+    description: _.join(_.map(conditionsValues, condition => condition.description), ''),
+    isActive: true,
+    active: conditionsToQuery(conditionsValues),
+    inactive: {},
+    style: styleResult ? _.get(createdStyle, '_id') : style.value.value
+  }
+
+  emit('applied', filter)
+  return true
+}
+
+onMounted(async () => {
+  styles = await getStyles()
+  styleOptions.value = getStyleOptions()
+  style.value = getStyle()
+})
+
+// Expose
+defineExpose({
+  apply
+})
+
+</script>

package/map/client/components/KFeaturesFilterManager.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="column">
+    <div id="filter-manager-header"
+      class="row items-center full-row q-px-md q-mt-md q-gutter-sm"
+    >
+      <KAction
+        v-if="viewMode === 'editor'"
+        id="back"
+        icon="las la-arrow-left"
+        tooltip="KFeaturesFilterManager.BACK"
+        class="col-auto"
+        :handler="onCanceled"
+      />
+      <div class="ellipsis text-h6 col">
+        {{ $tie('KFeaturesFilterManager.TITLE') + ' ' + layerName }}
+      </div>
+      <KPanel
+        id="filter-manager-toolbar"
+        :content="toolbar"
+      />
+    </div>
+    <div id="filter-manager-content">
+      <q-tab-panels v-model="viewMode" animated>
+        <q-tab-panel name="list">
+          <q-list separator v-if="filters.length">
+            <q-item v-for="item in filters" :key="item.id">
+              <q-item-section>
+                <q-item-label>{{ item.label }}</q-item-label>
+                <q-item-label caption>{{ item.description }}</q-item-label>
+              </q-item-section>
+              <q-item-section class="col-auto">
+                <KPanel
+                  id="filter-actions"
+                  :content="getPanelContent(item)"
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <div v-else class="column items-center full-row">
+            <KStamp
+              icon="las la-exclamation-circle"
+              icon-size="1.6rem"
+              :text="$t('KFeaturesFilterManager.NO_FILTERS')"
+              direction="horizontal"
+              class="q-pa-md"
+            />
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="editor">
+          <div class="full-width column">
+            <KFeaturesFilterEditor
+              ref="filterEditor"
+              :filter="filterToEdit"
+              :layerId="layerId"
+              :layerName="layerName"
+              :hideButtons="true"
+              @canceled="onCanceled"
+              @applied="onApplied"
+              class="col"
+            />
+          </div>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { uid } from 'quasar'
+import { ref, computed, onMounted } from 'vue'
+import { api } from '../../../core/client'
+import { useCurrentActivity } from '../composables'
+import { getDefaultStyleFromTemplates, generateStyleTemplates, filterQueryToConditions, DefaultStyle } from '../utils'
+import KFeaturesFilterEditor from './KFeaturesFilterEditor.vue'
+
+// Props
+const props = defineProps({
+  layerId: {
+    type: String,
+    default: ''
+  },
+  layerName: {
+    type: String,
+    default: ''
+  }
+})
+
+// Data
+const { CurrentActivity } = useCurrentActivity()
+const filterEditor = ref(null)
+const filterToEdit = ref(null)
+const viewMode = ref('list')
+let layer = null
+const filters = ref([])
+
+// Computed
+const toolbar = computed(() => {
+  if (viewMode.value === 'editor') return []
+  return [
+    {
+      id: 'add-filter',
+      icon: 'las la-plus-circle',
+      tooltip: 'KFeaturesFilterManager.CREATE',
+      size: '1rem',
+      handler: () => { editFilter() }
+    }
+  ]
+})
+
+// Functions
+async function getLayer () {
+  if (props.layerName) {
+    return CurrentActivity.value.getLayerByName(props.layerName)
+  } else {
+    return await api.getService('catalog').get(props.layerId)
+  }
+}
+function getFilters () {
+  const filters = _.clone(_.get(layer, 'filters', []))
+  _.forEach(filters, filter => { filter.id = uid() })
+  return filters
+}
+function getPanelContent (item) {
+  return [{
+    id: 'edit-filter',
+    tooltip: 'KFeaturesFilterManager.EDIT',
+    icon: 'las la-edit',
+    handler: () => editFilter(item)
+  }, {
+    id: 'remove-filter',
+    tooltip: 'KFeaturesFilterManager.REMOVE',
+    icon: 'las la-trash',
+    handler: () => removeFilter(item.id)
+  }]
+}
+function editFilter (filter) {
+  filterToEdit.value = filter || null
+  viewMode.value = 'editor'
+}
+function removeFilter (id) {
+  filters.value = filters.value.filter(filter => filter.id !== id)
+}
+function onApplied (filter) {
+  const targetIndex = _.get(filter, 'id') ? _.findIndex(filters.value, { id: filter.id }) : -1
+  if (targetIndex > -1) {
+    filters.value[targetIndex] = filter
+  } else {
+    Object.assign(filter, { id: uid() })
+    filters.value.push(filter)
+  }
+  viewMode.value = 'list'
+}
+function onCanceled () {
+  viewMode.value = 'list'
+}
+async function apply () {
+  if (viewMode.value === 'editor') {
+    filterEditor.value.apply()
+  } else {
+    // Apply styles
+    const styles = []
+    const styleService = api.getService('styles')
+    const validFilters = _.map(filters.value, filter => _.omit(filter, 'id'))
+    for (const filter of validFilters) {
+      if (!filter.style) continue
+      styles.push({
+        conditions: filterQueryToConditions(filter.active),
+        values: await styleService.get(filter.style)
+      })
+    }
+
+    const engineStyle = _.pick(_.get(CurrentActivity.value, 'activityOptions.engine', {}), ['point', 'line', 'polygon'])
+    const layerDefaultStyle = getDefaultStyleFromTemplates(_.get(layer, 'leaflet.style', {}))
+    const templates = generateStyleTemplates(_.merge({}, DefaultStyle, engineStyle, layerDefaultStyle), styles)
+    const result = Object.assign(
+      {},
+      { filters: validFilters },
+      _.mapKeys(templates, (value, key) => `leaflet.${key}`),
+      _.mapKeys(templates, (value, key) => `cesium.${key}`)
+    )
+    api.getService('catalog').patch(layer._id, result)
+    return true
+  }
+}
+
+onMounted(async () => {
+  layer = await getLayer()
+  filters.value = getFilters()
+})
+
+defineExpose({
+  apply
+})
+
+</script>

package/map/client/components/KFeaturesTable.vue

@@ -8,7 +8,6 @@
   >
     <KTable
       :service="service"
-      :contextId="contextId"
       :schema="schema"
       :item-actions="actions"
       :base-query="layer.baseQuery"
@@ -44,10 +43,6 @@ export default {
     layerName: {
       type: String,
       default: ''
-    },
-    contextId: {
-      type: String,
-      default: ''
     }
   },
   data () {