@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -22,162 +22,157 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
+import { ref, computed } from 'vue'
+import { i18n } from '../../../../core/client'
 import { KPanel, KForm } from '../../../../core/client/components'
+import { useCurrentActivity } from '../../composables'
 
-export default {
-  name: 'k-create-layer',
-  components: {
-    KPanel,
-    KForm
-  },
-  emits: [
-    'done'
-  ],
-  inject: ['kActivity'],
-  data () {
-    return {
-      schema: null,
-      featureIdFormKey: 1,
-      creating: false
-    }
-  },
-  computed: {
-    propertiesFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/create-layer-set-properties#',
-        type: 'object',
-        properties: {
-          name: {
-            type: 'string',
-            maxLength: 128,
-            minLength: 2,
-            field: {
-              component: 'form/KTextField',
-              label: 'KCreateLayer.NAME_FIELD_LABEL'
-            }
-          },
-          description: {
-            type: 'string',
-            field: {
-              component: 'form/KTextField',
-              label: 'KCreateLayer.DESCRIPTION_FIELD_LABEL'
-            }
-          },
-          schema: {
-            type: 'object',
-            field: {
-              component: 'form/KFileField',
-              label: 'KCreateLayer.CATALOG_SCHEMA_FIELD_LABEL',
-              mimeTypes: 'application/json'
-            }
-          }
-        },
-        required: ['name']
-      }
-    },
-    featureIdFormSchema () {
-      return {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/create-layer-set-feature-id#',
+// Emits
+const emit = defineEmits(['done'])
+
+// Data
+const { CurrentActivity } = useCurrentActivity()
+const propertiesForm = ref(null)
+const featureIdForm = ref(null)
+const schema = ref(null)
+const featureIdFormKey = ref(1)
+const creating = ref(false)
+
+// Computed
+const propertiesFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/create-layer-set-properties#',
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        maxLength: 128,
+        minLength: 2,
+        field: {
+          component: 'form/KTextField',
+          label: 'KCreateLayer.NAME_FIELD_LABEL'
+        }
+      },
+      description: {
+        type: ['string', 'null'],
+        field: {
+          component: 'form/KTextField',
+          label: 'KCreateLayer.DESCRIPTION_FIELD_LABEL'
+        }
+      },
+      schema: {
         type: 'object',
-        properties: {
-          featureId: {
-            type: 'string',
-            default: this.guessFeatureId(),
-            field: {
-              component: 'form/KSelectField',
-              label: 'KCreateLayer.FEATURE_ID_FIELD_LABEL',
-              options: this.getProperties()
-            }
-          }
-        },
-        required: []
-      }
-    },
-    buttons () {
-      return [{
-        id: 'close-action',
-        outline: true,
-        label: 'CLOSE',
-        renderer: 'form-button',
-        handler: this.onClose
-      }, {
-        id: 'create-layer-action',
-        label: this.$t('KCreateLayer.CREATE_BUTTON'),
-        loading: this.creating,
-        renderer: 'form-button',
-        handler: this.onCreate
-      }]
-    }
-  },
-  methods: {
-    onPropertiesFormFieldChanged (field, value) {
-      if (field === 'schema') {
-        this.schema = value
-        this.featureIdFormKey += 1
-      }
-    },
-    getProperties () {
-      if (this.schema) {
-        const properties = _.keys(_.get(this.schema, 'content.properties', {}))
-        return _.map(properties, prop => { return { label: prop, value: prop } })
+        field: {
+          component: 'form/KFileField',
+          label: 'KCreateLayer.CATALOG_SCHEMA_FIELD_LABEL',
+          mimeTypes: 'application/json'
+        }
       }
-      return []
     },
-    guessFeatureId () {
-      if (this.schema) {
-        const properties = _.keys(_.get(this.schema, 'content.properties', {}))
-        for (const prop of properties) {
-          if (prop.toLowerCase().includes('id', 'fid', 'featureid', '_id', 'objectid')) return prop
+    required: ['name']
+  }
+})
+const featureIdFormSchema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://kalisio.xyz/schemas/create-layer-set-feature-id#',
+    type: 'object',
+    properties: {
+      featureId: {
+        type: 'string',
+        default: guessFeatureId(),
+        field: {
+          component: 'form/KSelectField',
+          label: 'KCreateLayer.FEATURE_ID_FIELD_LABEL',
+          options: getProperties()
         }
       }
-      return ''
-    },
-    onClose () {
-      this.$emit('done')
     },
-    async onCreate () {
-      const propertiesResult = this.$refs.propertiesForm.validate()
-      const featureIdResult = this.$refs.featureIdForm.validate()
-      if (!propertiesResult.isValid || !featureIdResult.isValid) return
-      this.creating = true
-      // Create an empty layer
-      const engine = {
-        type: 'geoJson',
-        isVisible: true,
-        realtime: true
-      }
-      const newLayer = {
-        name: propertiesResult.values.name,
-        description: propertiesResult.values.description,
-        type: 'OverlayLayer',
-        icon: 'insert_drive_file',
-        scope: 'user',
-        isDataEditable: true, // Flag as editable
-        featureId: featureIdResult.values.featureId,
-        leaflet: engine,
-        // Avoid sharing reference to the same object although options are similar
-        // otherwise updating one will automatically update the other one
-        cesium: Object.assign({}, engine)
-      }
-      if (this.schema) {
-        Object.assign(newLayer, {
-          schema: {
-            name: this.schema.name,
-            content: this.schema.content
-          }
-        })
-      }
-      // Create the layer
-      await this.kActivity.addLayer(newLayer)
-      // Start editing
-      await this.kActivity.onEditLayerData(newLayer)
-      this.creating = false
-      this.$emit('done')
+    required: []
+  }
+})
+const buttons = computed(() => {
+  return [{
+    id: 'close-action',
+    outline: true,
+    label: 'CLOSE',
+    renderer: 'form-button',
+    handler: onClose
+  }, {
+    id: 'create-layer-action',
+    label: i18n.t('KCreateLayer.CREATE_BUTTON'),
+    loading: creating.value,
+    renderer: 'form-button',
+    handler: onCreate
+  }]
+})
+
+// Functions
+function onPropertiesFormFieldChanged (field, value) {
+  if (field === 'schema') {
+    schema.value = value
+    featureIdFormKey.value += 1
+  }
+}
+function getProperties () {
+  if (schema.value) {
+    const properties = _.keys(_.get(schema.value, 'content.properties', {}))
+    return _.map(properties, prop => { return { label: prop, value: prop } })
+  }
+  return []
+}
+function guessFeatureId () {
+  if (schema.value) {
+    const properties = _.keys(_.get(schema.value, 'content.properties', {}))
+    for (const prop of properties) {
+      if (prop.toLowerCase().includes('id', 'fid', 'featureid', '_id', 'objectid')) return prop
     }
   }
+  return ''
+}
+function onClose () {
+  emit('done')
+}
+async function onCreate () {
+  const propertiesResult = propertiesForm.value.validate()
+  const featureIdResult = featureIdForm.value.validate()
+  if (!propertiesResult.isValid || !featureIdResult.isValid) return
+  creating.value = true
+  // Create an empty layer
+  const engine = {
+    type: 'geoJson',
+    isVisible: true,
+    realtime: true
+  }
+  const newLayer = {
+    name: propertiesResult.values.name,
+    description: propertiesResult.values.description,
+    type: 'OverlayLayer',
+    icon: 'insert_drive_file',
+    scope: 'user',
+    isDataEditable: true, // Flag as editable
+    featureId: featureIdResult.values.featureId,
+    leaflet: engine,
+    // Avoid sharing reference to the same object although options are similar
+    // otherwise updating one will automatically update the other one
+    cesium: Object.assign({}, engine)
+  }
+  if (schema.value) {
+    Object.assign(newLayer, {
+      schema: {
+        name: schema.value.name,
+        content: schema.value.content
+      }
+    })
+  }
+  // Create the layer
+  await CurrentActivity.value.addLayer(newLayer)
+  // Start editing
+  await CurrentActivity.value.onEditLayerData(newLayer)
+  creating.value = false
+  emit('done')
 }
 </script>

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

@@ -0,0 +1,100 @@
+<template>
+  <!--
+    Form section
+  -->
+  <KForm
+    ref="form"
+    :schema="schema"
+    @field-changed="onFieldChanged"
+    class="q-pa-sm"
+  />
+  {{ $t('KCreateOfflineView.NUMBER_OF_TILES') + n }}
+</template>
+
+<script setup>
+import SphericalMercator from '@mapbox/sphericalmercator'
+import { ref, computed } from 'vue'
+import KForm from '../../../../core/client/components/form/KForm.vue'
+
+// Props
+const props = defineProps({
+  zoomLevel: {
+    type: Number,
+    default: 8
+  },
+  view: {
+    type: Object,
+    required: true
+  }
+})
+
+// Data
+const form = ref(null)
+const n = ref(0)
+
+// Computed
+const schema = computed(() => {
+  return {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    $id: 'http://www.kalisio.xyz/schemas/offline-view.create.json#',
+    description: 'Map offline view creation schema',
+    type: 'object',
+    properties: {
+      minZoom: {
+        type: 'number',
+        default: props.zoomLevel,
+        field: {
+          component: 'form/KNumberField',
+          label: 'KCreateOfflineView.MIN_ZOOM_FIELD_LABEL'
+        }
+      },
+      maxZoom: {
+        type: 'number',
+        default: props.zoomLevel + 2,
+        field: {
+          component: 'form/KNumberField',
+          label: 'KCreateOfflineView.MAX_ZOOM_FIELD_LABEL'
+        }
+      },
+      nbConcurrentRequests: {
+        type: 'number',
+        default: 10,
+        field: {
+          component: 'form/KNumberField',
+          label: 'KCreateOfflineView.NB_CONCURRENT_REQUESTS_FIELD_LABEL'
+        }
+      }
+    },
+    required: ['minZoom', 'maxZoom', 'nbConcurrentRequests']
+  }
+})
+
+// Functions
+function updateNumberOfTiles (minZoom, maxZoom) {
+  n.value = 0
+  for (let z = minZoom; z <= maxZoom; z++) {
+    const sm = new SphericalMercator()
+    const tilesBounds = sm.xyz([props.view.west, props.view.south, props.view.east, props.view.north], z)
+    n.value += (tilesBounds.maxX - tilesBounds.minX + 1) * (tilesBounds.maxY - tilesBounds.minY + 1)
+  }
+}
+function onFieldChanged () {
+  const { minZoom, maxZoom } = form.value.values()
+  updateNumberOfTiles(minZoom, maxZoom)
+}
+async function apply () {
+  const { isValid, values } = form.value.validate()
+  if (isValid) {
+    return values
+  }
+  return isValid
+}
+
+// Immediate
+updateNumberOfTiles(props.zoomLevel, props.zoomLevel + 2)
+
+// Expose
+defineExpose({
+  apply
+})
+</script>

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

@@ -27,12 +27,6 @@ export default {
   },
   mixins: [baseModal],
   inject: ['kActivity'],
-  props: {
-    contextId: {
-      type: String,
-      default: ''
-    }
-  },
   data () {
     return {
       creating: false
@@ -74,7 +68,7 @@ export default {
             }
           },
           description: {
-            type: 'string',
+            type: ['string', 'null'],
             maxLength: 256,
             field: {
               component: 'form/KTextField',
@@ -120,7 +114,7 @@ export default {
   },
   // Should be used with <Suspense> to ensure the project is loaded upfront
   async setup (props) {
-    const project = useProject({ contextId: props.contextId })
+    const project = useProject()
     await project.loadProject({ populate: false })
     // Expose
     return {

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

@@ -1,18 +1,47 @@
 <template>
-  <k-layer-item v-if="!layer.filters" v-bind="$props" :layer="layer"/>
-  <q-tree v-else :nodes="[layer]"
-    dense node-key="label" label-key="label" children-key="filters">
+  <KLayerItem v-if="!layer.filters"
+    v-bind="$props"
+    :layer="layer"
+    @toggled="onToggled"
+  >
+    <template v-slot:status>
+      <slot name="status" />
+    </template>
+  </KLayerItem>
+  <q-tree v-else
+    :nodes="[layer]"
+    node-key="label"
+    label-key="label"
+    children-key="filters"
+    dense
+  >
     <template v-slot:default-header="prop">
       <!-- Layer rendering -->
-      <k-layer-item v-if="prop.node.name" v-bind="$props" :layer="layer" @toggled="onToggled"/>
+      <KLayerItem v-if="prop.node.name"
+        v-bind="$props"
+        :layer="layer"
+        @toggled="onToggled"
+      >
+        <template v-slot:status>
+          <slot name="status" />
+        </template>
+      </KLayerItem>
       <!-- Filter rendering -->
       <div v-else class="row items-center q-pl-md q-pr-sm no-wrap">
         <!-- Filter toggle -->
-        <q-toggle v-model="prop.node.isActive" :disable="layer.isDisabled" size="xs" @update:modelValue="onFilterToggled(prop.node)" />
+        <q-toggle
+          :ref="onToggleRefCreated(prop.node)"
+          v-model="prop.node.isActive"
+          :color="layer.isVisible ? 'primary' : 'grey-5'"
+          :disable="layer.isDisabled || !layer.isVisible"
+          size="xs"
+          @update:modelValue="onFilterToggled(prop.node)"
+        />
         <div :class="{
             'text-primary': layer.isVisible,
-            'text-grey-6': layer.isDisabled
-          }">
+            'text-grey-6': layer.isDisabled || !layer.isVisible || !prop.node.isActive
+          }"
+        >
           {{ $tie(prop.node.label) }}
           <q-tooltip
             v-if="(prop.node.tooltip || prop.node.description) && $q.platform.is.desktop" :delay="1000"
@@ -27,27 +56,45 @@
   </q-tree>
 </template>
 
-<script>
+<script setup>
+import _ from 'lodash'
+import { ref } from 'vue'
 import KLayerItem from './KLayerItem.vue'
 
-export default {
-  name: 'k-filtered-layer-item',
-  components: {
-    KLayerItem
-  },
-  props: {
-    layer: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  methods: {
-    onToggled () {
-      this.$emit('toggled', this.layer)
-    },
-    onFilterToggled (filter) {
-      this.$emit('filter-toggled', this.layer, filter)
+// Props
+const props = defineProps({
+  layer: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// Emits
+const emit = defineEmits(['toggled', 'filter-toggled'])
+
+// Datas
+const filters = ref([])
+
+// Functions
+function onToggleRefCreated (node) {
+  if (node) {
+    if (!_.find(filters.value, filter => {
+      return node.label === filter.label
+    })) filters.value.push(node)
+  }
+}
+function onToggled () {
+  emit('toggled', props.layer)
+  if (props.layer.isVisible) {
+    const areFiltersInactive = _.every(filters.value, { isActive: false })
+    if (areFiltersInactive) {
+      for (const filter of filters.value) filter.isActive = true
     }
   }
 }
+function onFilterToggled (filter) {
+  emit('filter-toggled', props.layer, filter)
+  const areFiltersInactive = _.every(filters.value, { isActive: false })
+  if (areFiltersInactive) emit('toggled', props.layer)
+}
 </script>