@kalisio/kdk 2.1.6 → 2.1.8

package/core/client/components/account/KResetPassword.vue

@@ -103,16 +103,22 @@ async function apply () {
     processing.value = false
   } catch (error) {
     processing.value = false
-    const type = _.get(error, 'errors.$className')
-    switch (type) {
-      case 'badParams':
-        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_BAD_PARAMS')
-        break
-      case 'resetExpired':
-        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_VERIFY_EXPIRED')
-        break
-      default:
-        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_DEFAULT')
+    // Translate the error if we have a specific message, ie a translation key exists
+    const translation = _.get(error, 'data.translation')
+    if (translation) {
+      message.value = i18n.tie('errors.' + translation.key, translation.params)
+    } else { // Otherwise use a message linked to the generic error type
+      const type = _.get(error, 'errors.$className')
+      switch (type) {
+        case 'badParams':
+          message.value = i18n.t('KResetPassword.ERROR_MESSAGE_BAD_PARAMS')
+          break
+        case 'resetExpired':
+          message.value = i18n.t('KResetPassword.ERROR_MESSAGE_VERIFY_EXPIRED')
+          break
+        default:
+          message.value = i18n.t('KResetPassword.ERROR_MESSAGE_DEFAULT')
+      }
     }
   }
   send.value = true

package/core/client/components/collection/KColumn.vue

@@ -140,6 +140,10 @@ const props = defineProps({
     type: String,
     default: 'smart'
   },
+  nbItemsPerPage: {
+    type: Number,
+    default: 12
+  },
   processor: {
     type: Function,
     default: undefined

package/core/client/components/collection/KHistory.vue

@@ -1,11 +1,13 @@
 <template>
   <KColumn
+    name="history-column"
     :service="service"
     :renderer="computedRenderer"
     :contextId="contextId"
     :baseQuery="baseQuery"
     :filterQuery="computedFilterQuery"
     :listStrategy="listStrategy"
+    :nbItemsPerPage="nbItemsPerPage"
     :processor="processor"
     :width="width"
     :height="height"
@@ -64,6 +66,10 @@ export default {
       type: String,
       default: 'smart'
     },
+    nbItemsPerPage: {
+      type: Number,
+      default: 12
+    },
     processor: {
       type: Function,
       default: undefined

package/core/client/components/media/KMediaBrowser.vue

@@ -15,7 +15,8 @@
       -->
     <template v-for="(media) in medias" :key="media.key">
       <q-carousel-slide :name="media.name" class="row justify-center items-center">
-        <k-image-viewer :ref="media.key" class="fit k-media-browser-slide" :source="media.uri" :interactive="media.isImage" @image-transformed="onImageTrasnformed" />
+        <!-- We use the uri as unique identifier to ensure the component is recreated -->
+        <k-image-viewer :ref="media.uri" class="fit k-media-browser-slide" :source="media.uri" :interactive="media.isImage" @image-transformed="onImageTransformed" />
       </q-carousel-slide>
     </template>
     <!--
@@ -48,14 +49,13 @@
 
 <script>
 import _ from 'lodash'
-import moment from 'moment'
 import { Dialog } from 'quasar'
 import mime from 'mime'
 import KPanel from '../KPanel.vue'
 import KImageViewer from '../media/KImageViewer.vue'
 import { Storage } from '../../storage.js'
 import { Events } from '../../events.js'
-import { createThumbnail, downloadAsBlob, dataUriToBlob } from '../../utils/index.js'
+import { downloadAsBlob } from '../../utils/index.js'
 
 export default {
   components: {
@@ -105,15 +105,6 @@ export default {
           handler: this.onRemoveMedia
         })
       }
-      if (this.canCapturePhoto()) {
-        actions.push({
-          id: 'capture-photo',
-          icon: 'las la-camera',
-          tooltip: this.$t('KMediaBrowser.ADD_PHOTO_LABEL'),
-          color: (this.hasMedia ? 'grey-5 ' : 'secondary'),
-          handler: this.onCapturePhoto
-        })
-      }
       actions.push({
         id: 'add-media',
         icon: 'las la-paperclip',
@@ -180,15 +171,12 @@ export default {
     }
   },
   methods: {
-    canCapturePhoto () {
-      if (!this.$q.platform.is.cordova) return false
-      return true
-    },
-    onImageTrasnformed () {
+    onImageTransformed () {
       this.currentMediaTransformed = true
     },
     onImageRestored () {
-      if (this.$refs[this.currentMedia.key]) this.$refs[this.currentMedia.key][0].restore()
+      // We use the uri as unique identifier to ensure the component is recreated
+      if (this.$refs[this.currentMedia.uri]) this.$refs[this.currentMedia.uri][0].restore()
       this.currentMediaTransformed = false
     },
     async onDownloadMedia () {
@@ -225,46 +213,19 @@ export default {
       this.currentMedia = media
       this.currentMedia.isImage = mimeType.startsWith('image/')
       this.currentMediaTransformed = false
-      // Download image the first time
-      if (!media.uri) {
-        // We only download images
-        if (mimeType === 'application/pdf') {
-          Object.assign(media, { uri: 'icons/kdk/pdf.png' })
-        } else {
-          const uri = await Storage.getObjectUrl({ key: media.key, context: this.context })
-          Object.assign(media, { uri })
-        }
+      // Get the uri of the target image
+      let uri
+      // We only display image preview not pdf preview
+      if (mimeType === 'application/pdf') {
+        uri = 'icons/kdk/pdf.png'
+      } else {
+        uri = await Storage.getPresignedUrl({ key: media.key, context: this.context, expiresIn: 60 })
+      }
+      if (media.uri !== uri) {
+        Object.assign(media, { uri })
         this.medias[index] = media
       }
     },
-    capturePhoto () {
-      navigator.camera.getPicture(this.onPhotoCaptured, null, {
-        correctOrientation: true,
-        quality: 75,
-        destinationType: navigator.camera.DestinationType.DATA_URL,
-        sourceType: navigator.camera.PictureSourceType.CAMERA
-      })
-    },
-    async onPhotoCaptured (photoDataUri) {
-      const name = moment().format('YYYYMMDD_HHmmss.jpg')
-      const key = this.prefix ? this.prefix + '/' + name : name
-      photoDataUri = 'data:image/jpg;base64,' + photoDataUri
-      createThumbnail(photoDataUri, 200, 200, 50, async thumbnailDataUri => {
-        // Store once everything has been computed
-        await Storage.upload({
-          file: name,
-          key,
-          blob: dataUriToBlob(photoDataUri),
-          context: this.context
-        }, { query: this.uploadQuery })
-        await Storage.upload({
-          file: name,
-          key: key + '.thumbnail',
-          blob: dataUriToBlob(thumbnailDataUri),
-          context: this.context
-        }, { query: this.uploadQuery })
-      })
-    },
     onRemoveMedia () {
       Dialog.create({
         title: this.$t('KMediaBrowser.REMOVE_DIALOG_TITLE', { media: this.currentMediaName }),

package/core/client/storage.js

@@ -98,5 +98,13 @@ export const Storage = {
     // Transform the query params
     url += `?${new URLSearchParams(query)}`
     return url
+  },
+  async getPresignedUrl (options) {
+    const { key, context } = options
+    // Ensure service is created
+    const service = this.getService(context)
+    // Get a presigned url
+    const { SignedUrl } = await service.create({ id: key, command: 'GetObject', ..._.omit(options, ['key', 'context']) })
+    return SignedUrl
   }
 }

package/map/client/mixins/map/mixin.edit-layers.js

@@ -8,6 +8,9 @@ import { bindLeafletEvents, unbindLeafletEvents } from '../../utils.map.js'
 const mapEditEvents = ['pm:create']
 const layerEditEvents = ['layerremove', 'pm:update', 'pm:dragend', 'pm:rotateend', 'pm:markerdragend']
 
+// The name of the edition helper pane where we put the various edit layers
+const editHelpersPaneName = 'editHelpersPane'
+
 export const editLayers = {
   emits: [
     'edit-start',
@@ -58,6 +61,8 @@ export const editLayers = {
       // Retrieve base options first
       const { onEachFeature } = this.getGeoJsonOptions(filteredOptions)
       return {
+        // Ensure it is on top of all others layers while editing
+        pane: 'popupPane',
         // Allow geoman edition
         pmIgnore: false,
         onEachFeature,
@@ -81,7 +86,15 @@ export const editLayers = {
       if (this.map.pm.globalDragModeEnabled()) this.map.pm.disableGlobalDragMode()
       if (this.map.pm.globalRemovalModeEnabled()) this.map.pm.disableGlobalRemovalMode()
       if (this.map.pm.globalRotateModeEnabled()) this.map.pm.disableGlobalRotateMode()
-      this.map.pm.setGlobalOptions({ layerGroup: this.map })
+      this.map.pm.setGlobalOptions({
+        layerGroup: this.map,
+        // Ensure it is on top of all others layers while editing
+        panes: {
+          layerPane: editHelpersPaneName,
+          vertexPane: editHelpersPaneName,
+          markerPane: editHelpersPaneName
+        }
+      })
 
       if (this.allowedLayerEditModes.indexOf(mode) === -1) return
 
@@ -112,7 +125,7 @@ export const editLayers = {
 
       this.layerEditMode = mode
     },
-    async startEditLayer (layer, { allowedEditModes = null, editMode = null } = {}) {
+    async startEditLayer (layer, { allowedEditModes = null, editMode = null, zIndex = -1 } = {}) {
       if (this.editedLayer) return
 
       const leafletLayer = this.getLeafletLayerByName(layer.name)
@@ -170,6 +183,12 @@ export const editLayers = {
       this.$engineEvents.on('layerremove', this.onRemoveFeatures)
       this.$engineEvents.on('pm:markerdragend', this.onPointMoveEnd)
 
+      // Make sure the special pane where we put our edition helper layers exists
+      let pane = this.map.getPane(editHelpersPaneName)
+      if (!pane) pane = this.map.createPane(editHelpersPaneName)
+      // Default to leaflet's popup pane (see https://leafletjs.com/reference.html#map-popuppane)
+      _.set(pane, 'style.zIndex', zIndex !== -1 ? zIndex : 700)
+
       if (editMode) this.setEditMode(editMode)
     },
     onEditStart (layer) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kalisio/kdk",
   "description": "Kalisio Development Kit",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "homepage": "https://github.com/kalisio/kdk",
   "type": "module",
   "keywords": [

package/coverage/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}

package/coverage/block-navigation.js

@@ -1,87 +0,0 @@
-/* eslint-disable */
-var jumpToCode = (function init() {
-    // Classes of code we would like to highlight in the file view
-    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
-
-    // Elements to highlight in the file listing view
-    var fileListingElements = ['td.pct.low'];
-
-    // We don't want to select elements that are direct descendants of another match
-    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
-
-    // Selecter that finds elements on the page to which we can jump
-    var selector =
-        fileListingElements.join(', ') +
-        ', ' +
-        notSelector +
-        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
-
-    // The NodeList of matching elements
-    var missingCoverageElements = document.querySelectorAll(selector);
-
-    var currentIndex;
-
-    function toggleClass(index) {
-        missingCoverageElements
-            .item(currentIndex)
-            .classList.remove('highlighted');
-        missingCoverageElements.item(index).classList.add('highlighted');
-    }
-
-    function makeCurrent(index) {
-        toggleClass(index);
-        currentIndex = index;
-        missingCoverageElements.item(index).scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'center'
-        });
-    }
-
-    function goToPrevious() {
-        var nextIndex = 0;
-        if (typeof currentIndex !== 'number' || currentIndex === 0) {
-            nextIndex = missingCoverageElements.length - 1;
-        } else if (missingCoverageElements.length > 1) {
-            nextIndex = currentIndex - 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    function goToNext() {
-        var nextIndex = 0;
-
-        if (
-            typeof currentIndex === 'number' &&
-            currentIndex < missingCoverageElements.length - 1
-        ) {
-            nextIndex = currentIndex + 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    return function jump(event) {
-        if (
-            document.getElementById('fileSearch') === document.activeElement &&
-            document.activeElement != null
-        ) {
-            // if we're currently focused on the search input, we don't want to navigate
-            return;
-        }
-
-        switch (event.which) {
-            case 78: // n
-            case 74: // j
-                goToNext();
-                break;
-            case 66: // b
-            case 75: // k
-            case 80: // p
-                goToPrevious();
-                break;
-        }
-    };
-})();
-window.addEventListener('keydown', jumpToCode);