@kalisio/kdk 2.4.1 → 2.5.2

package/core/client/composables/collection-timerange.js

@@ -0,0 +1,56 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, watchEffect, onBeforeMount, onBeforeUnmount } from 'vue'
+import { api } from '../api.js'
+import { listenToServiceEvents, unlistenToServiceEvents } from '../utils/utils.services.js'
+
+export function useCollectionTimeRange (options = {}) {
+  // Data
+  const timeRange = ref(null)
+  let serviceEventListeners
+
+  // Watch
+  watchEffect(() => refresh())
+
+  // Functions
+  function getService () {
+    const service = api.getService(options.service.value, options.contextId ? options.contextId.value : null)
+    if (!service) {
+      throw new Error('[KDK] Cannot retrieve target service ' + options.service.value)
+    }
+    return service
+  }
+  function getBaseQuery () {
+    return options.baseQuery ? options.baseQuery.value : {}
+  }
+  function getFilterQuery () {
+    return options.filterQuery ? options.filterQuery.value : {}
+  }
+  async function refresh () {
+    let start, end
+    const timeProperty = options.property ? options.property.value : 'createdAt'
+    // get start time
+    const startQuery = { $sort: {[timeProperty]: 1 }, $limit: 1 }
+    logger.debug(`[KDK] Get min timestamp on service '${options.service.value}' with query`, startQuery)
+    const startResponse = await getService().find({ query: _.merge({}, getBaseQuery(), getFilterQuery(), startQuery) })
+    if (_.size(startResponse.data) > 0) start = startResponse.data[0]
+    // get end time
+    const endQuery = { $sort: {[timeProperty]: -1 }, $limit: 1 }
+    logger.debug(`[KDK] Get max timestamp on service '${options.service.value}' with query`, endQuery)
+    const endResponse = await getService().find({ query: _.merge({}, getBaseQuery(), getFilterQuery(), endQuery) }) 
+    if (_.size(endResponse.data) > 0) end = endResponse.data[0]
+    timeRange.value = { start: _.get(start, timeProperty), end: _.get(end, timeProperty) }
+  }
+
+  // Hooks
+  onBeforeMount(() => {
+    serviceEventListeners = listenToServiceEvents(getService(), { all: refresh })
+  })
+  onBeforeUnmount(() => {
+    unlistenToServiceEvents(serviceEventListeners)
+  })
+
+  return {
+    timeRange
+  }
+}

package/core/client/composables/collection.js

@@ -3,6 +3,7 @@ import logger from 'loglevel'
 import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue'
 import { api } from '../api.js'
 import { getLocale } from '../utils/utils.locale.js'
+import { listenToServiceEvents, unlistenToServiceEvents } from '../utils/utils.services.js'
 
 export function useCollection (options) {
   _.defaults(options, {
@@ -24,6 +25,7 @@ export function useCollection (options) {
   const nbTotalItems = ref(0)
   const currentPage = ref(1)
   let itemListener = null
+  let serviceEventListeners
 
   // Computed
   const nbPages = computed(() => {
@@ -75,12 +77,12 @@ export function useCollection (options) {
           setCollectionItems(response.features)
         } else if (options.appendItems.value) {
           // Append the response ensuring there is no duplicates
-          setCollectionItems(_.unionBy(response.data, items.value, '_id'))
+          const newItems = _.unionBy(response.data, items.value, '_id')
           // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
           const sortQuery = _.get(getCollectionBaseQuery(), '$sort')
           if (sortQuery) {
             // By default orderBy is case sensitive while using collation we want to perform case insensitive sort
-            setCollectionItems(_.orderBy(items.value,
+            setCollectionItems(_.orderBy(newItems,
               // Sort function for each sort property
               _.map(_.keys(sortQuery), property => {
                 return item => {
@@ -90,6 +92,8 @@ export function useCollection (options) {
               }),
               // Sort order for each sort property
               _.map(_.values(sortQuery), value => { return value > 0 ? 'asc' : 'desc' })))
+          } else {
+            setCollectionItems(newItems)
           }
         } else {
           setCollectionItems(response.data)
@@ -131,7 +135,7 @@ export function useCollection (options) {
     // In this case we need to reset the full collection as Rx only tracks changes on the current page
     updatedItems = (Array.isArray(updatedItems) ? updatedItems : [updatedItems])
     // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
-    updatedItems = _.intersectionWith(items.value, updatedItems, (item1, item2) => (item1._id.toString() === item2._id.toString()))
+    updatedItems = _.intersectionWith(items.value, updatedItems, (item1, item2) => item1._id && item2._id && (item1._id.toString() === item2._id.toString()))
     if (updatedItems.length > 0) resetCollection()
   }
 
@@ -147,10 +151,11 @@ export function useCollection (options) {
 
   onBeforeMount(() => {
     if (options.appendItems.value) {
-      const service = getService()
-      service.on('patched', onItemsUpdated)
-      service.on('updated', onItemsUpdated)
-      service.on('removed', onItemsUpdated)
+      serviceEventListeners = listenToServiceEvents(getService(), {
+        patched: onItemsUpdated,
+        updated: onItemsUpdated,
+        removed: onItemsUpdated
+      })
     }
   })
 
@@ -158,10 +163,7 @@ export function useCollection (options) {
   onBeforeUnmount(() => {
     unsubscribe()
     if (options.appendItems.value) {
-      const service = getService()
-      service.off('patched', onItemsUpdated)
-      service.off('updated', onItemsUpdated)
-      service.off('removed', onItemsUpdated)
+      unlistenToServiceEvents(serviceEventListeners)
     }
   })
 

package/core/client/composables/context.js

@@ -0,0 +1,92 @@
+import logger from 'loglevel'
+import { useRouter } from 'vue-router'
+import { readonly } from 'vue'
+import { Dialog } from 'quasar'
+import { Context } from '../context.js'
+import { i18n } from '../i18n.js'
+import { listenToServiceEvents, unlistenToServiceEvents } from '../utils/utils.services.js'
+
+export function useContext (options) {
+  // Data
+  const router = useRouter()
+  const fallbackRoute = options?.fallbackRoute || 'home'
+  let serviceEventListeners
+
+  // Functions
+  function getService () {
+    return Context.getService()
+  }
+  async function setContext (objectOrId) {
+      // clear context if any
+    let context = Context.get()
+    if (context) untrack()
+    // set context
+    if (_.isString(objectOrId)) {
+      // load context
+      const service = Context.getService()
+      try {
+        logger.debug(`[KDK] Setting context to '${objectOrId}'`)
+        context = await service.get(objectOrId)
+      } catch (error) {
+        logger.debug(`[KDK] cannot get event with id ${objectOrId}: ${error}`)
+        setTimeout(() => router.push({ name: fallbackRoute }), 2000)
+      }
+    } else if (_.isObject(objectOrId)) {
+      // assign context
+      logger.debug(`[KDK] Setting context to '${objectOrId._id}'`)
+      context = objectOrId
+    } else {
+      // raise an error
+      logger.error('[KDK] Setting context: invalid parameter', objectOrId)
+      return
+    }
+    Context.set(context)
+    track()    
+  }
+  function clearContext () {
+    if (Context.get()) untrack()
+    Context.set(null)
+  }
+  function track () {
+    serviceEventListeners = listenToServiceEvents(Context.getService(), {
+      patched: onPatched,
+      removed: onRemoved
+    })
+  }
+  function untrack () {
+    unlistenToServiceEvents(serviceEventListeners)
+  }
+  function onPatched (data) {
+    const context = Context.get()
+    if (context._id === data._id) {
+      Object.assign(context, _.omit(data, ['_id']))
+    }
+  }
+  function onRemoved (data) {
+    const context = Context.get()    
+    if (context._id === data._id) {
+      Dialog.create({
+        title: i18n.t('ALERT'),
+        message: i18n.t('composables.context.REMOVED_MESSAGE'),
+        persistent: true,
+        position: 'bottom',
+        html: true,
+        backdropFilter: 'blur(4px)',
+        ok: {
+          label: i18n.t('OK'),
+          flat: true
+        }
+      }).onOk(async () => {
+        router.push({ name: fallbackRoute })
+      })
+    }
+  }
+
+  // Expose
+  return {
+    Context: readonly(Context.getRef('store')),
+    getService,
+    setContext,
+    clearContext
+  }
+}

package/core/client/composables/errors.js

@@ -0,0 +1,83 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { Events } from '../events.js'
+import { i18n } from '../i18n.js'
+
+export function useErrors () {
+  // Data
+  const $q = useQuasar()
+  const Route = useRoute()
+
+  // Functions
+  function showError (error) {
+    // Check if this error is a quiet one or not
+    if (error.ignore) {
+      // In this case simply log
+      logger.error(error)
+      return
+    }
+    const notification = { type: 'negative', message: error.message || error.error_message || error.error, html: true }
+    // Check if user can retry to avoid this error
+    if (error.retryHandler) {
+      notification.actions = [{
+        label: this.$t('RETRY'),
+        handler: error.retryHandler
+      }]
+      // Increase timeout so that user has a chance to retry
+      notification.timeout = 20000
+    }
+    $q.notify(notification)
+  }
+  function showRouteError (route) {
+    // We handle error on any page with query string
+    if (route.query && (route.query.error_message || route.query.error)) {
+      showError(route.query)
+    }
+    // OAuth login is using token set as route param like 'access_token=jwt'.
+    // However in case of error it will be like 'error=message' instead.
+    else if (route.params && route.params.token && route.params.token.startsWith('error=')) {
+      showError({ message: route.params.token.split('=')[1] })
+    }
+  }
+
+  // Watch
+  watch(Route, (to, from) => showRouteError(to))
+
+  // Hooks
+  onMounted(() => {
+    showRouteError(Route)
+    Events.on('error-hook', hook => {
+      // Forward to global error handler if not a "normal" error, ie an expired token
+      if (_.get(hook.error, 'data.name') !== 'TokenExpiredError') {
+        Events.emit('error', hook.error)
+      }
+    })
+    Events.on('error', error => {
+      // Translate the message if a translation key exists
+      const translation = _.get(error, 'data.translation')
+      if (translation) {
+        error.message = i18n.tie('errors.' + translation.key, translation.params)
+        if (translation.keys) {
+          translation.keys.forEach(key => {
+            error.message += '<br/>' + i18n.tie('errors.' + key, translation.params)
+          })
+        }
+      } else {
+        // Overwrite the message using error code
+        if (error.code) {
+          error.message = i18n.tie('errors.' + error.code)
+        }
+      }
+      showError(error)
+    })
+  })
+
+  // Expose
+  return {
+    showError,
+    showRouteError
+  }
+}

package/core/client/composables/index.js

@@ -1,6 +1,10 @@
 export * from './activity.js'
+export * from './collection-counter.js'
+export * from './collection-filter.js'
+export * from './collection-timerange.js'
 export * from './collection.js'
-export * from './counter.js'
+export * from './context.js'
+export * from './errors.js'
 export * from './layout.js'
 export * from './messages.js'
 export * from './pwa.js'

package/core/client/composables/layout.js

@@ -4,22 +4,24 @@ export function useLayout () {
 
   // functions
   function configureLayout (configuration, context) {
-    if (configuration.view) Layout.setView(configuration.view)
-    if (configuration.padding) Layout.setPadding(configuration.padding)
-    if (configuration.header) Layout.setHeader(configuration.header, context)
-    if (configuration.footer) Layout.setFooter(configuration.footer, context)
-    if (configuration.page) Layout.setPage(configuration.page, context)
-    if (configuration.stickies) Layout.setStickies(configuration.stickies, context)
-    if (configuration.fab) Layout.setFab(configuration.fab, context)
+    if (_.has(configuration, 'view')) Layout.setView(configuration.view)
+    if (_.has(configuration, 'padding')) Layout.setPadding(configuration.padding)
+    if (_.has(configuration, 'header')) Layout.setHeader(configuration.header, context)
+    if (_.has(configuration, 'footer')) Layout.setFooter(configuration.footer, context)
+    if (_.has(configuration, 'page')) Layout.setPage(configuration.page, context)
+    if (_.has(configuration, 'stickies')) Layout.setStickies(configuration.stickies, context)
+    if (_.has(configuration, 'fab')) Layout.setFab(configuration.fab, context)
     Layout.placements.forEach(placement => {
       if (_.has(configuration, `panes.${placement}`)) Layout.setPane(placement, _.get(configuration, `panes.${placement}`), context)
       if (_.has(configuration, `windows.${placement}`)) Layout.setWindow(placement, _.get(configuration, `windows.${placement}`), context)
     })
     // for backward compatibility
-    if (configuration.leftPane) Layout.setPane('left', configuration.leftPane, context)
-    if (configuration.rightPane) Layout.setPane('right', configuration.rightPane, context)
-    if (configuration.topPane) Layout.setPane('top', configuration.topPane, context)
-    if (configuration.bottomPane) Layout.setPane('bottom', configuration.bottomPane, context)
+    if (_.has(configuration, 'leftPane')) Layout.setPane('left', configuration.leftPane, context)
+    if (_.has(configuration, 'rightPane')) Layout.setPane('right', configuration.rightPane, context)
+    if (_.has(configuration, 'topPane')) Layout.setPane('top', configuration.topPane, context)
+    if (_.has(configuration, 'bottomPane')) Layout.setPane('bottom', configuration.bottomPane, context)
+    // apply mode
+    if (_.has(configuration, 'mode')) Layout.setMode(configuration.mode)
   }
   function clearLayout () {
     Layout.clearFocus()
@@ -34,6 +36,7 @@ export function useLayout () {
       Layout.clearPane(placement)
       Layout.clearWindow(placement)
     })
+    Layout.clearMode()
   }
   function setLayoutMode (mode) {
     if (mode) Layout.setMode(mode)

package/core/client/composables/messages.js

@@ -1,11 +1,11 @@
 import { api } from '../api.js'
 
-export function useMessages (contextId) {
-  const messagesService = api.getService('messages', contextId)
+export function useMessages () {
+  const messagesService = api.getService('messages')
 
   // Functions
-  async function createMessage (message) {
-    return messagesService.create(message)
+  async function createMessage (message, query) {
+    return messagesService.create(message, { query })
   }
 
   // Expose

package/core/client/composables/pwa.js

@@ -5,54 +5,47 @@ import { useQuasar } from 'quasar'
 import { Events } from '../events.js'
 import { i18n } from '../i18n.js'
 import { LocalStorage } from '../local-storage.js'
+import { Platform } from '../platform.js'
 import { InstallPwaPrompt, installFFDesktopPrompt, installSafariPrompt, installDefaultPrompt } from '../utils/utils.pwa.js'
 
-export function usePwa () {
+export function usePwa (options = { updateTimeout: 5000 }) {
   // Data
   const $q = useQuasar()
   const installKey = 'install'
-  const changelogKey = 'appChangelog'
 
   // Functions
   function install () {
-    if (config.buildMode !== 'pwa' || window.matchMedia('(display-mode: standalone)').matches) return
-    // Install prompt can be avoided, eg in tests
+    // check for basic conditions before prompting
+    const isNotPWA = config.buildMode !== 'pwa'
+    const isPWAInstalled = window.matchMedia('(display-mode: standalone)').matches
+    const withinIframe = _.get(Platform, 'within.iframe', false)
+    if (isNotPWA || isPWAInstalled || withinIframe) return
+    // install prompt can be avoided, eg in tests
     if (!LocalStorage.get(installKey, true)) return
-    // Take care of install prompt
+    // take care of install prompt
     if (InstallPwaPrompt) installDefaultPrompt()
-    // Take care of iOS
+    // take care of iOS
     if ($q.platform.is.ios) installSafariPrompt()
-    // Take care of Firefox desktop
+    // take care of Firefox desktop
     if ($q.platform.is.firefox && $q.platform.is.desktop) installFFDesktopPrompt()
   }
   function update (registration) {
-    // Refresh the page once the update has been applied
+    // refresh the page once the update has been applied
     registration.waiting.addEventListener('statechange', (event) => {
       if (event.target.state === 'activated') {
         window.location.reload()
       }
     })
-    const changelog = _.get(config, changelogKey)
-    $q.dialog({
-      title: i18n.t('composables.pwa.UPDATE_TITLE'),
-      message: changelog ? i18n.t('composables.pwa.UPDATE_MESSAGE', { changelog }) : undefined,
+    $q.notify({
+      message: i18n.t('composables.pwa.UPDATE_MESSAGE'),
+      type: 'info',
       html: true,
-      cancel: {
-        id: 'ignore-button',
-        label: i18n.t('composables.pwa.IGNORE'),
-        color: 'primary',
-        outline: true
-      },
-      ok: {
-        id: 'update-button',
-        label: i18n.t('composables.pwa.UPDATE'),
-        color: 'primary'
-      },
-      persistent: true,
-      position: 'bottom'
-    }).onOk(() => {
-      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+      timeout: options.updateTimeout,
+      spinner: true
     })
+    setTimeout(() => {
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }, options.updateTimeout)
   }
 
   // Hooks

package/core/client/composables/schema.js

@@ -21,7 +21,7 @@ export function useSchema () {
       schema.value = _.cloneDeep(schemaModule.default)
     } else {
       // clone the schema object
-      logger.trace('setting schema ', schemaNameOrObject.$id)
+      logger.trace('[KDK] setting schema ', schemaNameOrObject.$id)
       schema.value = _.cloneDeep(schemaNameOrObject)
     }
     // filter ther schema

package/core/client/composables/screen.js

@@ -1,23 +1,35 @@
-import { ref, watch, readonly } from 'vue'
+import _ from 'lodash'
+import { ref, computed, readonly } from 'vue'
 import { useQuasar } from 'quasar'
-import { Fullscreen, toggleFullscreen } from '../utils/utils.screen.js'
+import { Fullscreen, toggleFullscreen, lockOrientation } from '../utils/utils.screen.js'
 
 const Orientation = ref(null)
 
-export function useScreen () {
+export function useScreen (options = {}) {
   // Data
   const $q = useQuasar()
+  const denseBreakpoint = _.get(options, 'dense', 'sm')
+  const wideBreakpoint = _.get(options, 'wide', 'sm')
 
-  // Watch
-  watch(() => [$q.screen.width, $q.screen.height], () => {
-    Orientation.value = $q.screen.width >= $q.screen.height ? 'landscape' : 'portrait'
-  }, { immediate: true})
+  // Computed
+  const dense = computed(() => {
+    return $q.screen.lt[denseBreakpoint]
+  })
+  const wide = computed(() => {
+    return $q.screen.gt[wideBreakpoint]
+  })
+  const orientation = computed(() => {
+    return $q.screen.width >= $q.screen.height ? 'landscape' : 'portrait'
+  })
 
   // Expose
   return {
     Screen: readonly($q.screen),
-    Orientation: readonly(Orientation),
+    dense,
+    wide,
+    orientation,
     Fullscreen: readonly(Fullscreen),
-    toggleFullscreen
+    toggleFullscreen,
+    lockOrientation
   }
 }

package/core/client/composables/selection.js

@@ -4,14 +4,15 @@ import { useStore } from './store.js'
 export function useSelection (name, options = {}) {
   // Item comparator
   const comparator = options.matches || _.matches
-  // data
+  
   // selection store
   const { store, set, get, has } = useStore(`selections.${name}`)
 
-  // functions
+  // Functions
   // Single selection will rely on the lastly selected item only
   // Multiple selection mode will rely on all items
   function clearSelection () {
+    if (!isSelectionEnabled()) return
     // Do not force an update if not required
     // We set a new array so that deeply watch is not required
     if (hasSelectedItem()) set('items', [])
@@ -28,6 +29,12 @@ export function useSelection (name, options = {}) {
   function isMultipleSelectionMode () {
     return get('mode') !== 'single'
   }
+  function setSelectionEnabled (enabled = true) {
+    return set('enabled', enabled)
+  }
+  function isSelectionEnabled () {
+    return get('enabled')
+  }
   function getSelectionFilter () {
     return get('filter')
   }
@@ -35,6 +42,7 @@ export function useSelection (name, options = {}) {
     return set('filter', filter)
   }
   function selectItem (item) {
+    if (!isSelectionEnabled()) return
     const filter = getSelectionFilter()
     if (filter && !filter(item)) return
     const items = get('items')
@@ -43,6 +51,7 @@ export function useSelection (name, options = {}) {
     if (!selected) set('items', items.concat([item]))
   }
   function unselectItem (item) {
+    if (!isSelectionEnabled()) return
     const items = get('items')
     // We set a new array so that deeply watch is not required
     _.remove(items, comparator(item))
@@ -62,13 +71,14 @@ export function useSelection (name, options = {}) {
   }
 
   // Initialize on first call
-  if (!_.has(store, 'items')) {
+  if (!has('items')) {
     // We set a new array so that deeply watch is not required
     set('items', [])
     set('mode', 'single')
+    set('enabled', true)
   }
 
-  // expose
+  // Expose
   return {
     selection: store,
     clearSelection,
@@ -76,6 +86,8 @@ export function useSelection (name, options = {}) {
     setSelectionMode,
     isSingleSelectionMode,
     isMultipleSelectionMode,
+    setSelectionEnabled,
+    isSelectionEnabled,
     getSelectionFilter,
     setSelectionFilter,
     selectItem,

package/core/client/composables/session.js

@@ -1,5 +1,4 @@
 import _ from 'lodash'
-import logger from 'loglevel'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useQuasar, Loading } from 'quasar'
@@ -77,13 +76,15 @@ export function useSession (options = {}) {
     }
     // Display it only the first time the error appears because multiple attempts will be tried
     if (!pendingReconnection && !ignoreReconnectionError) {
-      Events.emit('disconnected')
-      logger.error(new Error('Socket has been disconnected'))
-      // Disconnect prompt can be avoided, eg in tests
-      if (!LocalStorage.get(disconnectKey, true)) return
       // This will ensure any operation in progress will not keep a "dead" loading indicator
       // as this error might appear under-the-hood without notifying service operations
       Loading.hide()
+      // Disconnect prompt can be avoided, eg in tests
+      if (!LocalStorage.get(disconnectKey, true)) {
+        // We flag however that we are waiting for reconnection to avoid emitting the event multiple times
+        pendingReconnection = true
+        return
+      }
       pendingReconnection = $q.dialog({
         title: i18n.t('composables.session.ALERT'),
         message: i18n.t('composables.session.DISCONNECT'),
@@ -115,13 +116,13 @@ export function useSession (options = {}) {
   function onReconnect () {
     // Dismiss pending reconnection error message if any
     if (pendingReconnection) {
-      pendingReconnection.hide()
+      // If reconnection prompt is avoided we simply have a boolean flag instead of a dismiss dialog function
+      if (typeof pendingReconnection.hide === 'function') pendingReconnection.hide()
       pendingReconnection = null
     }
     ignoreReconnectionError = false
     // Display it only the first time the reconnection occurs because multiple attempts will be tried
     if (!pendingReload) {
-      Events.emit('reconnected')
       // Reconnect prompt can be avoided, eg in tests
       if (!LocalStorage.get(reconnectKey, true)) return
       pendingReload = $q.dialog({
@@ -173,6 +174,11 @@ export function useSession (options = {}) {
     }
     // Then redirection
     Events.on('user-abilities-changed', redirect)
+    api.on('logout', () => {
+      // Used to automatically redirect when the user has requested a logout from another client
+      // We don't use redirect() here as in this case the user is already logout and it would redirect to login instead
+      router.push({ name: 'logout' })
+    })
 
     try {
       await restoreSession()

package/core/client/composables/store.js

@@ -21,7 +21,8 @@ export function useStore (name, initialStore) {
     _.set(store, path, value)
   }
   function get (path, defaultValue) {
-    return _.get(store, path, defaultValue)
+    // If no path is given return the whole store object
+    return (path ? _.get(store, path, defaultValue) : store)
   }
   function unset (path) {
     _.unset(store, path)