@kalisio/kdk 1.3.4 → 1.4.1

package/lib/map/client/components/catalog/KBaseLayersSelector.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="q-pl-xs q-pb-sm q-pr-sm">
+    <div v-if="layers.length > 0" class="full-width row">
+      <template v-for="layer in layers">
+        <div class="col-6 q-pa-xs" :key="layer.name">
+          <q-card
+            :id="getId(layer)"
+            v-ripple
+            class="k-layer-card"
+            v-bind:class="{ 'k-layer-card-active': selectedLayer === layer.name }"
+            @click="selectedLayer = layer"
+          >
+            <q-img :src="layer.iconUrl" :ratio="16/9">
+              <div
+                class="absolute all-pointer-events"
+                style="width: 100%; background-color: #00000099; padding: 4px"
+              >
+                <k-stamp
+                  :class="selectedLayer === layer.name ? 'text-secondary' : 'text-white'"
+                  :text="layer.name"
+                  :icon="selectedLayer === layer.name ? 'las la-check-circle': 'las la-circle'"
+                  text-size="0.8rem"
+                  icon-size="1.2rem"
+                  direction="horizontal" />
+              </div>
+              <q-tooltip
+                v-if="(layer.tooltip || layer.description) && $q.platform.is.desktop"
+                :delay="1200"
+                anchor="center left"
+                self="center right"
+                :offset="[20, 0]"
+              >
+                {{ layer.tooltip || layer.description }}
+              </q-tooltip>
+            </q-img>
+          </q-card>
+        </div>
+      </template>
+    </div>
+    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pb-sm">
+      <k-stamp icon="las la-exclamation-circle" icons-size="sm" :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')" direction="horizontal" />
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'k-base-layers-selector',
+  props: {
+    layers: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    selectedLayer: {
+      get: function () {
+        // active layer is the one visible
+        const visibleLayer = _.find(this.layers, { isVisible: true })
+        return visibleLayer ? visibleLayer.name : null
+      },
+      set: function (layer) {
+        // when defining the selected layer, just perform the action
+        // get will pickup the visible layer
+        const layerToUnselect = _.find(this.layers, { isVisible: true })
+        if (layerToUnselect) this.toggleLayer(layerToUnselect)
+        const unselectedLayerName = layerToUnselect ? layerToUnselect.name : undefined
+        const layerNameToSelect = layer.name
+        if (unselectedLayerName !== layerNameToSelect) {
+          const layerToSelect = _.find(this.layers, { name: layerNameToSelect })
+          if (layerToSelect) this.toggleLayer(layerToSelect)
+        }
+      }
+    }
+  },
+  methods: {
+    getId (layer) {
+      return _.kebabCase(layer.name)
+    },
+    toggleLayer (layer) {
+      const toggleAction = _.find(layer.actions, { id: 'toggle' })
+      if (toggleAction) toggleAction.handler()
+    }
+  },
+  beforeCreate () {
+    // Load the required components
+    this.$options.components['k-stamp'] = this.$load('frame/KStamp')
+  }
+}
+</script>
+
+<style lang="stylus">
+.k-layer-card:hover {
+  cursor: pointer;
+}
+.k-layer-card-active {
+  border: 1px solid var(--q-color-primary);
+}
+</style>

package/lib/map/client/components/catalog/KCatalog.vue

@@ -8,11 +8,12 @@
       <template v-for="category in layerCategories">
         <q-expansion-item
           v-if="isVisible(category)"
-          :key="category.name"
-          :id="category.name"
+          :key="getId(category)"
+          :id="getId(category)"
           :header-class="getColor(category)"
           :icon="getIcon(category)"
           :label="$t(category.name)"
+          :default-opened="getDefaultOpened(category)"
           expand-separator>
           <component
             :is="category.componentKey"
@@ -20,7 +21,7 @@
             :forecastModels="forecastModels"
             :forecastModelHandlers="forecastModelHandlers"
             :forecastModel="forecastModel"
-            :options="category.options || {}"></component>
+            :options="category.options || category"></component>
         </q-expansion-item>
       </template>
       <slot name="footer" />
@@ -95,6 +96,9 @@ export default {
     }
   },
   methods: {
+    getId (category) {
+      return _.kebabCase(category.name)
+    },
     isVisible (category) {
       // User-defined categories are always visible, even if empty
       // Built-in categories only if not empty as depending on the configuration
@@ -107,6 +111,14 @@ export default {
     getIcon (category) {
       return _.get(category, 'icon.name', _.get(category, 'icon', 'las la-layer-group'))
     },
+    getDefaultOpened (category) {
+      // if category explicitely specify default opened state, use that
+      if (_.has(category, 'options.open')) return category.options.open
+      // otherwise, defaut open when there's only one category
+      // return this.layerCategories.length === 1
+      // robin: to not break existing apps, just return false when options.open is not defined
+      return false
+    },
     categorize () {
       this.layerCategories.forEach(category => {
         const component = _.get(category, 'component', 'catalog/KLayersSelector')

package/lib/map/client/components/catalog/KConnectLayer.vue

@@ -5,14 +5,13 @@
     <k-form ref="layerForm" :key="layerFormKey" :schema="getLayerFormSchema()" @field-changed="onLayerFormFieldChanged" />
     <k-form ref="propertiesForm" :key="propertiesFormKey" :schema="getPropertiesFormSchema()" />
     <!-- Buttons section -->
-    <div class="row justify-end">
-      <k-action
-        id="connect-layer-action"
-        :label="$t('KConnectLayer.CONNECT_BUTTON')"
+    <q-card-actions align="right">
+      <k-panel
+        id="modal-buttons"
+        :content="getButtons()"
         renderer="form-button"
-        :loading="connecting"
-        @triggered="onConnect" />
-    </div>
+        v-bind:class="{ 'q-gutter-x-md' : $q.screen.gt.xs, 'q-gutter-x-sm': $q.screen.lt.sm }" />
+    </q-card-actions>
   </div>
 </template>
 
@@ -32,6 +31,21 @@ export default {
     }
   },
   methods: {
+    getButtons () {
+      return [{
+        id: 'close-action',
+        outline: true,
+        label: 'CLOSE',
+        renderer: 'form-button',
+        handler: this.onClose
+      }, {
+        id: 'connect-layer-action',
+        label: this.$t('KConnectLayer.CONNECT_BUTTON'),
+        loading: this.connecting,
+        renderer: 'form-button',
+        handler: this.onConnect
+      }]
+    },
     getServiceFormSchema () {
       return {
         $schema: 'http://json-schema.org/draft-06/schema#',
@@ -155,6 +169,9 @@ export default {
       }
       return ''
     },
+    onClose () {
+      this.$emit('done')
+    },
     async onConnect () {
       const layerResult = this.$refs.layerForm.validate()
       const propertiesResult = this.$refs.propertiesForm.validate()
@@ -246,15 +263,17 @@ export default {
         // could not find candidate, fallback using first available
         if (!pickedFormat) pickedFormat = supportedFormats[0]
 
-        const restUrl = wmts.buildLeafletUrl(this.service.baseUrl, this.layer, {
+        const url = wmts.buildLeafletUrl(this.service.baseUrl, this.layer, {
+          version: this.service.version,
           style: style,
           crs: '3857',
           format: pickedFormat,
-          searchParams: this.service.searchParams
+          searchParams: this.service.searchParams,
+          useKvpEncoding: this.service.getTileUseKvpEncoding
         })
         newLayer.cesium = {
           type: 'WebMapTileService',
-          url: restUrl.replace('{z}', '{TileMatrix}').replace('{x}', '{TileCol}').replace('{y}', '{TileRow}'),
+          url: url.replace('{z}', '{TileMatrix}').replace('{x}', '{TileCol}').replace('{y}', '{TileRow}'),
           format: pickedFormat,
           layer: this.layer.id,
           style: style,
@@ -262,7 +281,7 @@ export default {
         }
         newLayer.leaflet = {
           type: 'tileLayer',
-          source: restUrl
+          source: url
         }
 
         // add legend url if available in the style
@@ -292,6 +311,7 @@ export default {
   created () {
     // Load the required components
     this.$options.components['k-action'] = this.$load('frame/KAction')
+    this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-form'] = this.$load('form/KForm')
     // Required data
     this.service = null

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

@@ -4,14 +4,13 @@
     <k-form ref="propertiesForm" :schema="getPropertiesFormSchema()" @field-changed="onPropertiesFormFieldChanged" />
     <k-form ref="featureIdForm" :key="featureIdFormKey" :schema="getFeatureIdFormSchema()" />
     <!-- Buttons section -->
-    <div class="row justify-end">
-      <k-action
-        id="create-layer-action"
-        :label="$t('KCreateLayer.CREATE_BUTTON')"
+    <q-card-actions align="right">
+      <k-panel
+        id="modal-buttons"
+        :content="getButtons()"
         renderer="form-button"
-        :loading="creating"
-        @triggered="onCreate" />
-    </div>
+        v-bind:class="{ 'q-gutter-x-md' : $q.screen.gt.xs, 'q-gutter-x-sm': $q.screen.lt.sm }" />
+    </q-card-actions>
   </div>
 </template>
 
@@ -29,6 +28,21 @@ export default {
     }
   },
   methods: {
+    getButtons () {
+      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
+      }]
+    },
     getPropertiesFormSchema () {
       return {
         $schema: 'http://json-schema.org/draft-06/schema#',
@@ -60,7 +74,7 @@ export default {
             }
           }
         },
-        required: ['name', 'schema']
+        required: ['name']
       }
     },
     getFeatureIdFormSchema () {
@@ -79,7 +93,7 @@ export default {
             }
           }
         },
-        required: ['featureId']
+        required: []
       }
     },
     onPropertiesFormFieldChanged (field, value) {
@@ -104,6 +118,9 @@ export default {
       }
       return ''
     },
+    onClose () {
+      this.$emit('done')
+    },
     async onCreate () {
       const propertiesResult = this.$refs.propertiesForm.validate()
       const featureIdResult = this.$refs.featureIdForm.validate()
@@ -121,15 +138,20 @@ export default {
         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),
-        schema: {
-          name: this.schema.name,
-          content: this.schema.content
-        }
+        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)
@@ -143,6 +165,7 @@ export default {
     // Load the required components
     this.$options.components['k-form'] = this.$load('form/KForm')
     this.$options.components['k-action'] = this.$load('frame/KAction')
+    this.$options.components['k-panel'] = this.$load('frame/KPanel')
   }
 }
 </script>

package/lib/map/client/components/catalog/KImportLayer.vue

@@ -4,14 +4,13 @@
     <k-form ref="fileForm" :schema="getFileFormSchema()" @field-changed="onFileFormFieldChanged" />
     <k-form ref="propertiesForm" :key="propertiesFormKey" :schema="getPropertiesFormSchema()" />
     <!-- Buttons section -->
-    <div class="q-pt-md row justify-end">
-      <k-action
-        id="import-layer-action"
-        :label="$t('KImportLayer.IMPORT_BUTTON')"
+    <q-card-actions align="right">
+      <k-panel
+        id="modal-buttons"
+        :content="getButtons()"
         renderer="form-button"
-        :loading="importing"
-        @triggered="onImport" />
-    </div>
+        v-bind:class="{ 'q-gutter-x-md' : $q.screen.gt.xs, 'q-gutter-x-sm': $q.screen.lt.sm }" />
+    </q-card-actions>
   </div>
 </template>
 
@@ -30,6 +29,21 @@ export default {
     }
   },
   methods: {
+    getButtons () {
+      return [{
+        id: 'close-action',
+        outline: true,
+        label: 'CLOSE',
+        renderer: 'form-button',
+        handler: this.onClose
+      }, {
+        id: 'import-layer-action',
+        label: this.$t('KImportLayer.IMPORT_BUTTON'),
+        loading: this.importing,
+        renderer: 'form-button',
+        handler: this.onImport
+      }]
+    },
     getFileFormSchema () {
       return {
         $schema: 'http://json-schema.org/draft-06/schema#',
@@ -113,6 +127,9 @@ export default {
       }
       return ''
     },
+    onClose () {
+      this.$emit('done')
+    },
     async onImport () {
       const fileResult = this.$refs.fileForm.validate()
       const propertiesResult = this.$refs.propertiesForm.validate()
@@ -132,6 +149,7 @@ export default {
         type: 'OverlayLayer',
         icon: 'insert_drive_file',
         scope: 'user',
+        isDataEditable: true, // Flag as editable
         featureId: propertiesResult.values.featureId,
         leaflet: engine,
         // Avoid sharing reference to the same object although options are similar
@@ -146,7 +164,8 @@ export default {
       // Assign the features to the layer
       await this.kActivity.updateLayer(newLayer.name, geoJson)
       // Zoom to it
-      this.kActivity.zoomToLayer(newLayer.name)
+      if (geoJson.bbox) this.kActivity.zoomToBBox(geoJson.bbox)
+      else this.kActivity.zoomToLayer(newLayer.name)
       this.importing = false
       this.$emit('done')
     }
@@ -155,6 +174,7 @@ export default {
     // Load the required components
     this.$options.components['k-form'] = this.$load('form/KForm')
     this.$options.components['k-action'] = this.$load('frame/KAction')
+    this.$options.components['k-panel'] = this.$load('frame/KPanel')
     // Set data
     this.file = null
   }

package/lib/map/client/components/catalog/KLayerCategories.vue

@@ -1,14 +1,14 @@
 <template>
   <k-modal
-    id="layer-categorie-modal"
-    :title="$t('KLayerCategories.TITLE')"
+    ref="modal"
+    id="layer-categories-modal"
+    :title="title"
+    :toolbar="toolbar"
+    :buttons="buttons"
     v-model="isModalOpened"
     @opened="$emit('opened')"
     @closed="$emit('closed')">
-    <div slot="modal-content">
-      <q-card-section v-show="hasToolbar">
-        <k-panel id="layer-categories-toolbar" :content="toolbar" :mode="mode" class="no-wrap" />
-      </q-card-section>
+    <div slot="modal-content" id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
         <k-list
           style="min-height: 50px; min-width: 200px"
@@ -20,30 +20,10 @@
           @collection-refreshed="refreshCategories" />
       </q-card-section>
       <q-card-section id="layer-category-add" v-if="mode === 'add'">
-        <div class="colum q-gutter-y-md">
-          <k-form ref="addForm" :schema="categorySchema" style="min-width: 300px" />
-          <div class="q-pa-sm row justify-end">
-            <q-btn
-              :loading="savingCategory"
-              color="accent"
-              id="create-layer-category"
-              :label="$t('KLayerCategories.ADD_BUTTON')"
-              @click="onAdd" />
-          </div>
-        </div>
+        <k-form ref="addForm" :schema="categorySchema" style="min-width: 300px" />
       </q-card-section>
       <q-card-section id="layer-category-edit" v-if="mode === 'edit'">
-        <div class="colum q-gutter-y-md">
-          <k-form ref="editForm" :schema="categorySchema" style="min-width: 300px" />
-          <div class="q-pa-sm row justify-end">
-            <q-btn
-              :loading="savingCategory"
-              color="accent"
-              id="edit-layer-category"
-              :label="$t('KLayerCategories.EDIT_BUTTON')"
-              @click="onEdit" />
-          </div>
-        </div>
+        <k-form ref="editForm" :schema="categorySchema" style="min-width: 300px" />
       </q-card-section>
     </div>
   </k-modal>
@@ -68,9 +48,79 @@ export default {
     baseQuery () {
       return Object.assign({ type: 'Category' }, this.sorter.query)
     },
-    hasToolbar () {
-      if (this.mode === 'list') return (this.count > 0) || (this.filter.patern !== '')
-      return (this.count > 0)
+    title () {
+      if (this.mode === 'add') {
+        return this.$t('KLayerCategories.ADD_TITLE')
+      } else if (this.mode === 'edit') {
+        return this.$t('KLayerCategories.UPDATE_TITLE')
+      } else {
+        return this.$t('KLayerCategories.TITLE')
+      }
+    },
+    toolbar () {
+      if (this.mode === 'list') {
+        return [
+          {
+            component: 'collection/KSorter',
+            id: 'layer-categories-sorter-options',
+            tooltip: 'KLayerCategories.SORT',
+            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/KFilter', style: 'max-width: 200px;' },
+          { component: 'QSpace' },
+          {
+            id: 'add-layer-category',
+            icon: 'las la-plus-circle',
+            tooltip: 'KLayerCategories.CREATE_CATEGORY',
+            size: '1rem',
+            handler: () => { this.mode = 'add' }
+          }
+        ]
+      } else {
+        return []
+      }
+    },
+    buttons () {
+      const buttons = []
+      buttons.push({
+        id: 'close-button',
+        label: 'CLOSE',
+        renderer: 'form-button',
+        handler: () => this.$refs.modal.close(),
+        outline: (this.mode !== 'list')
+      })
+      if ((this.mode !== 'list') && (this.count > 0)) {
+        buttons.push({
+          id: 'back-button',
+          label: 'KLayerCategories.BACK_BUTTON',
+          renderer: 'form-button',
+          outline: true,
+          handler: () => { this.mode = 'list' }
+        })
+      }
+      if (this.mode === 'add') {
+        buttons.push({
+          id: 'create-layer-category',
+          label: 'KLayerCategories.ADD_BUTTON',
+          renderer: 'form-button',
+          loading: this.savingCategory,
+          handler: this.onAdd
+        })
+      } else if (this.mode === 'edit') {
+        buttons.push({
+          id: 'edit-layer-category',
+          label: 'KLayerCategories.EDIT_BUTTON',
+          renderer: 'form-button',
+          loading: this.savingCategory,
+          handler: this.onEdit
+        })
+      }
+      return buttons
     },
     hasLayers () {
       return this.layers.length > 0
@@ -137,32 +187,6 @@ export default {
       sorter: this.$store.get('sorter'),
       mode: 'list',
       count: 0,
-      toolbar: {
-        list: [
-          {
-            component: 'collection/KSorter',
-            id: 'layer-categories-sorter-options',
-            tooltip: 'KLayerCategories.SORT',
-            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/KFilter', style: 'max-width: 200px;' },
-          { component: 'QSpace' },
-          { id: 'add-layer-category', icon: 'las la-plus-circle', tooltip: 'KLayerCategories.CREATE_CATEGORY', size: '1rem', handler: () => { this.mode = 'add' } }
-        ],
-        edit: [
-          { id: 'list-layer-categories', icon: 'las la-arrow-left', label: 'KLayerCategories.CATEGORY_LIST', handler: () => { this.mode = 'list' } },
-          { component: 'QSpace' }
-        ],
-        add: [
-          { id: 'list-layer-categories', icon: 'las la-arrow-left', label: 'KLayerCategories.CATEGORY_LIST', handler: () => { this.mode = 'list' } },
-          { component: 'QSpace' }
-        ]
-      },
       savingCategory: false,
       categoryRenderer: {
         component: 'collection/KItem',
@@ -213,12 +237,12 @@ export default {
         this.mode = 'list'
       }
     },
-    refreshCategories (data) {
-      this.count = data.items.length
+    refreshCategories (items) {
+      this.count = items.length
       if (this.count > 0) {
         // Add the list of layers as description
-        data.items.forEach(category => {
-          category.description = category.layers.join(',')
+        items.forEach(category => {
+          if (!_.isEmpty(category.layers)) category.description = category.layers.join(',')
         })
       } else {
         if (!this.filter.pattern) this.mode = 'add'
@@ -236,7 +260,7 @@ export default {
       this.$api.getService('catalog').remove(category._id)
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-modal'] = this.$load('frame/KModal')
     this.$options.components['k-action'] = this.$load('frame/KAction')