@kalisio/kdk 2.3.2 → 2.4.0

package/core/client/components/time/KAbsoluteTimeRange.vue

@@ -1,183 +1,83 @@
 <template>
-  <div class="row justify-start items-center q-pl-sm q-pr-sm no-wrap">
-    <div id="start-date" class="k-datetime text-body2">
-      {{ formattedStartDate }}
-      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_DATE_LABEL') }}</q-tooltip>
-      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
-        <q-date
-          id="start-date-popup"
-          v-model="startDate"
-          :mask="dateFormat"
-          :title="startDate"
-          :options="checkStartDate"
-          @update:model-value="onTimeRangeChanged"
-        />
-      </q-popup-proxy>
-    </div>
-    <div>&nbsp;</div>
-    <div id="start-time" class="k-datetime text-body2">
-      {{ formattedStartTime }}
-      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_START_TIME_LABEL') }}</q-tooltip>
-      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
-        <q-time
-          id="start-time-popup"
-          v-model="startTime"
-          :mask="hourFormat"
-          :options="checkStartTime"
-          @update:model-value="onTimeRangeChanged"
-        />
-      </q-popup-proxy>
-    </div>
-    <div>&nbsp;-&nbsp;</div>
-    <div id="end-date" class="k-datetime text-body2">
-      {{ formattedEndDate }}
-      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_DATE_LABEL') }}</q-tooltip>
-      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
-        <q-date
-          id="end-date-popup"
-          v-model="endDate"
-          :mask="dateFormat"
-          :title="endDate"
-          :options="checkEndDate"
-          @update:model-value="onTimeRangeChanged"
-        />
-      </q-popup-proxy>
-    </div>
-    <div>&nbsp;</div>
-    <div id="end-time" class="k-datetime text-body2">
-      {{ formattedEndTime }}
-      <q-tooltip>{{ $t('KAbsoluteTimeRange.PICK_END_TIME_LABEL') }}</q-tooltip>
-      <q-popup-proxy ref="popup" transition-show="scale" transition-hide="scale">
-        <q-time
-          id="end-time-popup"
-          v-model="endTime"
-          :mask="hourFormat"
-          :options="checkEndTime"
-          @update:model-value="onTimeRangeChanged"
-        />
-      </q-popup-proxy>
-    </div>
-  </div>
+  <KDateTimeRange
+    v-model="dateTimeRangeModel"
+    :options="dateTimeRangeOptions"
+    :min="props.min"
+    :max="props.max"
+    :dense="props.dense"
+    :disabled="props.disabled"
+  />
 </template>
 
-<script>
-import moment from 'moment'
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import KDateTimeRange from './KDateTimeRange.vue'
+import { Events } from '../../events'
 import { Time } from '../../time'
+import moment from 'moment'
 
-const dateFormat = 'DD/MM/YYYY'
-const hourFormat = 'HH:mm'
-const checkDateFormat = 'YYYY/MM/DD'
-
-// Convert from moment date/time to quasar format in local time zone
-function toQuasarDate (date) {
-  return Time.convertToLocal(date).format(dateFormat)
-}
-function toQuasarTime (date) {
-  return Time.convertToLocal(date).format(hourFormat)
-}
-// Convert from quasar format in local time zone to moment date/time
-function fromQuasarDate (date, format) {
-  return (Time.getFormatTimezone()
-    ? moment.tz(date, format, Time.getFormatTimezone())
-    : moment(date, format))
-}
-function fromQuasarTime (time, format) {
-  return (Time.getFormatTimezone()
-    ? moment.tz(time, format, Time.getFormatTimezone())
-    : moment(time, format))
-}
-
-export default {
-  name: 'k-absolute-time-range',
-  props: {
-    dense: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    const { start, end } = Time.getRange()
-    return {
-      dateFormat,
-      hourFormat,
-      checkDateFormat,
-      startDate: toQuasarDate(start),
-      startTime: toQuasarTime(start),
-      endDate: toQuasarDate(end),
-      endTime: toQuasarTime(end)
+const props = defineProps({
+  min: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
     }
   },
-  computed: {
-    start () {
-      const date = fromQuasarDate(this.startDate, this.dateFormat)
-      const time = fromQuasarTime(this.startTime, this.hourFormat)
-      date.set({ hour: time.hour(), minute: time.minute() })
-      return date.utc()
-    },
-    formattedStartDate () {
-      return Time.format(this.start, 'date.short')
-    },
-    formattedStartTime () {
-      return Time.format(this.start, 'time.long')
-    },
-    end () {
-      const date = fromQuasarDate(this.endDate, this.dateFormat)
-      const time = fromQuasarTime(this.endTime, this.hourFormat)
-      date.set({ hour: time.hour(), minute: time.minute() })
-      return date.utc()
-    },
-    formattedEndDate () {
-      return Time.format(this.end, 'date.short')
-    },
-    formattedEndTime () {
-      return Time.format(this.end, 'time.long')
+  max: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
     }
   },
-  methods: {
-    checkStartDate (date) {
-      date = fromQuasarDate(date, this.checkDateFormat)
-      const time = fromQuasarTime(this.startTime, this.hourFormat)
-      date.set({ hour: time.hour(), minute: time.minute() })
-      return date.utc().isBefore(this.end)
-    },
-    checkStartTime (hour, minute) {
-      const date = fromQuasarDate(this.startDate, this.dateFormat)
-      date.set({ hour, minute })
-      return date.utc().isBefore(this.end)
-    },
-    checkEndDate (date) {
-      date = fromQuasarDate(date, this.checkDateFormat)
-      const time = fromQuasarTime(this.endTime, this.hourFormat)
-      date.set({ hour: time.hour(), minute: time.minute() })
-      return date.utc().isAfter(this.start)
-    },
-    checkEndTime (hour, minute) {
-      const date = fromQuasarDate(this.endDate, this.dateFormat)
-      date.set({ hour, minute })
-      return date.utc().isAfter(this.start)
-    },
-    onTimeRangeChanged () {
-      Time.patchRange({ start: this.start, end: this.end })
-    },
-    onTimeRangeUpdated () {
-      const { start, end } = Time.getRange()
-      this.startDate = toQuasarDate(start)
-      this.startTime = toQuasarTime(start)
-      this.endDate = toQuasarDate(end)
-      this.endTime = toQuasarTime(end)
-    }
-  },
-  created () {
-    this.$events.on('time-range-changed', () => this.onTimeRangeUpdated())
+  disabled: {
+    type: Boolean,
+    default: false
   },
-  beforeUnmount () {
-    this.$events.off('time-range-changed', () => this.onTimeRangeUpdated())
+  dense: {
+    type: Boolean,
+    default: true
   }
-}
-</script>
+})
+
+// Data
+const { start, end } = Time.getRange()
+const dateTimeRangeModel = ref({
+  start: start.toISOString(),
+  end: end.toISOString()
+})
+const dateTimeRangeOptions = ref({
+  separator: '-',
+  date: {
+    format: 'DD/MM/YYYY'
+  }
+})
+
+// Watch
+watch(dateTimeRangeModel, (newDateTimeRange, oldDateTimeRange) => {
+  Time.patchRange({
+    start: moment(newDateTimeRange.start),
+    end: moment(newDateTimeRange.end)
+  })
+})
 
-<style lang="scss">
-  .k-datetime:hover {
-    cursor: pointer;
+// Functions
+function onTimeRangeUpdated () {
+  const { start, end } = Time.getRange()
+  dateTimeRangeModel.value = {
+    start: start.toISOString(),
+    end: end.toISOString()
   }
-</style>
+}
+
+// Hooks
+onMounted(() => {
+  Events.on('time-range-changed', onTimeRangeUpdated)
+})
+onBeforeUnmount(() => {
+  Events.off('time-range-changed', onTimeRangeUpdated)
+})
+</script>

package/core/client/composables/activity.js

@@ -4,8 +4,8 @@ import { ref, shallowRef, readonly, onBeforeUnmount } from 'vue'
 import { useStore } from './store.js'
 import { useSelection } from './selection.js'
 
-const kActivity = shallowRef(null)
-const kActivityName = ref(null)
+const CurrentActivity = shallowRef(null)
+const CurrentActivityName = ref(null)
 
 export function useActivity (name, options = {}) {
   _.defaults(options, { selection: true })
@@ -18,9 +18,9 @@ export function useActivity (name, options = {}) {
 
   // functions
   function setCurrentActivity (activity) {
-    if (kActivity.value === activity) return
-    kActivityName.value = activity ? name : null
-    kActivity.value = activity
+    if (CurrentActivity.value === activity) return
+    CurrentActivityName.value = activity ? name : null
+    CurrentActivity.value = activity
   }
 
   // expose
@@ -31,7 +31,7 @@ export function useActivity (name, options = {}) {
   }
   if (options.selection) {
     Object.assign(expose, {
-      ...useSelection(kActivityName.value)
+      ...useSelection(name)
     })
   }
 
@@ -46,12 +46,14 @@ export function useCurrentActivity (options = {}) {
 
   // expose
   const expose = {
-    kActivity: readonly(kActivity),
-    kActivityName: readonly(kActivityName)
+    CurrentActivity: readonly(CurrentActivity),
+    kActivity: readonly(CurrentActivity),
+    CurrentActivityName: readonly(CurrentActivityName),
+    kActivityName: readonly(CurrentActivityName)
   }
-  if (kActivityName.value) {
-    const activityState = useStore(`store.${kActivityName.value}.state`)
-    const activityOptions = useStore(`store.${kActivityName.value}.options`)
+  if (CurrentActivityName.value) {
+    const activityState = useStore(`store.${CurrentActivityName.value}.state`)
+    const activityOptions = useStore(`store.${CurrentActivityName.value}.options`)
 
     Object.assign(expose, {
       state: activityState.store,
@@ -59,7 +61,7 @@ export function useCurrentActivity (options = {}) {
     })
     if (options.selection) {
       Object.assign(expose, {
-        ...useSelection(kActivityName.value)
+        ...useSelection(CurrentActivityName.value)
       })
     }
   }

package/core/client/composables/collection.js

@@ -20,7 +20,7 @@ export function useCollection (options) {
   })
 
   // Data
-  const items = ref([])
+  const items = ref(null)
   const nbTotalItems = ref(0)
   const currentPage = ref(1)
   let itemListener = null
@@ -118,6 +118,8 @@ export function useCollection (options) {
   }, options.refreshThrottle.value, { leading: false })
 
   function resetCollection () {
+    // Do not reset the collection since it is initializing 
+    if (_.isNil(items.value)) return
     // Reset pagination and start again refreshing the collection
     if (options.appendItems.value) setCollectionItems([])
     currentPage.value = 1

package/core/client/composables/counter.js

@@ -0,0 +1,51 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, watchEffect, onBeforeMount, onBeforeUnmount } from 'vue'
+import { api } from '../api.js'
+
+export function useCounter (options) {
+  logger.trace(`[KDK] Counter created with options ${options}`)
+  
+  // Data
+  const counter = ref(0)
+
+  // 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 () {
+    const query = _.merge(getBaseQuery(), getFilterQuery(), { $limit: 0 })
+    logger.trace(`[KDK] Count service ${options.service.value} with query ${query}`)
+    const response = await getService().find({ query })
+    counter.value = response.total
+  }
+
+  // Hooks
+  onBeforeMount(async () => {
+    const service = getService()
+    service.on('created', refresh)
+    service.on('removed', refresh)
+  })
+  onBeforeUnmount(() => {
+    const service = getService()
+    service.off('created', refresh)
+     service.off('removed', refresh)
+  })
+
+  return {
+    counter
+  }
+}

package/core/client/composables/index.js

@@ -1,9 +1,12 @@
 export * from './activity.js'
 export * from './collection.js'
+export * from './counter.js'
 export * from './layout.js'
+export * from './messages.js'
 export * from './pwa.js'
 export * from './session.js'
 export * from './schema.js'
+export * from './screen.js'
 export * from './selection.js'
 export * from './store.js'
 export * from './version.js'

package/core/client/composables/layout.js

@@ -4,9 +4,12 @@ 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)
     Layout.placements.forEach(placement => {
       if (_.has(configuration, `panes.${placement}`)) Layout.setPane(placement, _.get(configuration, `panes.${placement}`), context)
@@ -19,16 +22,23 @@ export function useLayout () {
     if (configuration.bottomPane) Layout.setPane('bottom', configuration.bottomPane, context)
   }
   function clearLayout () {
+    Layout.clearFocus()
+    Layout.clearView()
+    Layout.clearPadding()
     Layout.clearHeader()
     Layout.clearFooter()
     Layout.clearPage()
+    Layout.clearStickies()
     Layout.clearFab()
     Layout.placements.forEach(placement => {
       Layout.clearPane(placement)
       Layout.clearWindow(placement)
     })
   }
-
+  function setLayoutMode (mode) {
+    if (mode) Layout.setMode(mode)
+  }
+  
   // immediate
   const additionalFunctions = {}
   Layout.placements.forEach(placement => {
@@ -42,9 +52,10 @@ export function useLayout () {
   
   // expose
   return {
-    layout: Layout,
+    Layout,
     configureLayout,
     clearLayout,
+    setLayoutMode,
     ...additionalFunctions
   }
 }

package/core/client/composables/messages.js

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

package/core/client/composables/pwa.js

@@ -15,7 +15,7 @@ export function usePwa () {
 
   // Functions
   function install () {
-    if (window.matchMedia('(display-mode: standalone)').matches) return
+    if (config.buildMode !== 'pwa' || window.matchMedia('(display-mode: standalone)').matches) return
     // Install prompt can be avoided, eg in tests
     if (!LocalStorage.get(installKey, true)) return
     // Take care of install prompt

package/core/client/composables/schema.js

@@ -16,19 +16,19 @@ export function useSchema () {
   async function compile (schemaNameOrObject, propertiesFilter) {
     if (typeof schemaNameOrObject === 'string') {
       // load the schema file
-      logger.debug('loading schema ', schemaNameOrObject)
+      logger.trace('[KDK] Loading schema ', schemaNameOrObject)
       const schemaModule = await import(`@schemas/${schemaNameOrObject}.json`)
-      schema.value = schemaModule.default
+      schema.value = _.cloneDeep(schemaModule.default)
     } else {
       // clone the schema object
-      logger.debug('setting schema ', schemaNameOrObject.$id)
+      logger.trace('setting schema ', schemaNameOrObject.$id)
       schema.value = _.cloneDeep(schemaNameOrObject)
     }
     // filter ther schema
     if (propertiesFilter) {
       let properties = propertiesFilter
       if (typeof propertiesFilter === 'string') properties = _.split(propertiesFilter, ',')
-      logger.debug('filtering schema with ', properties)
+      logger.trace('[KDK] Filtering schema with ', properties)
       _.forOwn(schema.value.properties, (value, key) => {
         if (!properties.includes(key)) delete schema.value.properties[key]
       })
@@ -38,12 +38,12 @@ export function useSchema () {
       schema.value.required = _.intersection(schema.value.required, properties)
     }
     // compile the schema
-    logger.debug('compiling schema ', schema.value.$id)
+    logger.trace('[KDK] Compiling schema ', schema.value.$id)
     validator.value = Schema.register(schema.value)
   }
   function validate (values) {
     if (!validator.value) {
-      logger.error('validator not instantiated')
+      logger.error('[KDK] schema \'validator\' not instantiated')
       return
     }
     const result = validator.value(values)

package/core/client/composables/screen.js

@@ -0,0 +1,23 @@
+import { ref, watch, readonly } from 'vue'
+import { useQuasar } from 'quasar'
+import { Fullscreen, toggleFullscreen } from '../utils/utils.screen.js'
+
+const Orientation = ref(null)
+
+export function useScreen () {
+  // Data
+  const $q = useQuasar()
+
+  // Watch
+  watch(() => [$q.screen.width, $q.screen.height], () => {
+    Orientation.value = $q.screen.width >= $q.screen.height ? 'landscape' : 'portrait'
+  }, { immediate: true})
+
+  // Expose
+  return {
+    Screen: readonly($q.screen),
+    Orientation: readonly(Orientation),
+    Fullscreen: readonly(Fullscreen),
+    toggleFullscreen
+  }
+}

package/core/client/directives/index.js

@@ -0,0 +1 @@
+export * from './v-hover.js'

package/core/client/directives/v-hover.js

@@ -0,0 +1,23 @@
+import { getPlatform } from '../utils/utils.platform.js'
+const Platform = getPlatform()
+
+export const vHover = {
+
+  mounted (el, binding) {
+    if (Platform.touch) return
+    el.__vHoverEnter__ = binding.value.enter || (() => {})
+    el.__vHoverLeave__ = binding.value.leave || (() => {})
+
+    // Add Event Listeners
+    el.addEventListener('mouseover', el.__vHoverEnter__)
+    el.addEventListener('mouseleave', el.__vHoverLeave__)
+  },
+
+  beforeUnmount (el, binding) {
+    // Remove Event Listeners
+    el.removeEventListener('mouseover', el.__vHoverEnter__)
+    el.removeEventListener('mouseleave', el.__vHoverLeave__)
+    delete el.__vHoverEnter__
+    delete el.__vHoverLeave__
+  }
+}

package/core/client/document.js

@@ -0,0 +1,61 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import config from 'config'
+import sanitize from 'sanitize-html'
+import showdown from 'showdown'
+import { i18n } from './i18n.js'
+
+export const Document = {
+  initialize () {
+    this.options = _.get(config, 'document')
+    this.options = _.defaultsDeep(this.options, {
+      viewers: {
+        htm: 'document/KHtml',
+        html: 'document/KHtml',
+        md: 'document/KMarkdown',
+        pdf: 'document/KPdf',
+        jpg: 'document/KImage',
+        jpeg: 'document/KImage',
+        png: 'document/KImage'
+      },
+      htmlSanitizer: {
+        allowedTags: sanitize.defaults.allowedTags.concat(['img'])
+      },
+      mdConverter: {}
+    })
+    logger.debug('[KDK] Configuring documents with options:', this.options)
+  },
+  register (mimeTypes, viewer) {
+    if (!_.isArray(mimeTypes)) mimeTypes = [mimeTypes]
+    _.forEach(mimeTypes, mimeType => {
+      _.set(this.options, `viewers.${mimeType}`, viewer)
+    })
+  },
+  sanitizeHtml (html) {
+    if (_.isNil(html)) return null
+    return sanitize(html, this.options.htmlSanitizer)
+  },
+  convertMdToHtml (md) {
+    if (_.isNil(md)) return null
+    const converter = new showdown.Converter(this.options.mdConverter)
+    return converter.makeHtml(md)
+  },
+  async fetchUrl (url, localize) {
+    if (_.isEmpty(url)) return null
+    // localize the url if needed
+    let urls
+    if (localize) urls = i18n.localize(url)
+    else urls = [url]
+    // try to load the content
+    let response
+    for (const url of urls) {
+      try {
+        response = await fetch(url)
+        if (response.ok) return response
+      } catch (error) {
+        // ignore the error
+      }
+    }
+    return null
+  }
+}

package/core/client/exporter.js

@@ -9,7 +9,7 @@ import { i18n } from './i18n.js'
 const ExporterQueue = {
   initialize (maxConcurrentRequests) {
     this.maxConcurrentRequests = maxConcurrentRequests
-    logger.debug(`[KDK] Exporter initialized with ${maxConcurrentRequests} maxConcurrentRequests`)
+    logger.debug(`[KDK] Configuring exporter with '${maxConcurrentRequests}' maxConcurrentRequests`)
     this.pendingRequests = []
     this.runningRequests = []
     this.exportService = api.getService('import-export')

package/core/client/filter.js

@@ -41,7 +41,6 @@ export const Filter = {
     // Handle the pattern
     if (pattern !== '') {
       query.$or = _.map(fields, field => { return { [field]: { $search: pattern } } })
-      console.log(query)
     }
     // Handle the selection
     items.forEach(item => {

package/core/client/guards.js

@@ -63,7 +63,7 @@ export function permissionsGuard (user, to, from) {
 }
 
 // Guard based on route definition
-export function routeGuard (user, to, from) {
+export function publicRouteGuard (user, to, from) {
   // Retrieves routes corresponding to the destination
   const matchedRoute = _.get(to, 'matched', [])
   // Retrieves the last corresponding route