@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -1,33 +1,77 @@
 <template>
-  <div class="row items-center q-gutter-x-sm no-wrap">
-    <!-- Start dateTime -->
-    <KDateTime
-      v-model="startModel"
-      :options="props.options"
-      :min="props.min"
-      :max="props.max"
-      :disabled="disabled"
-      :dense="dense"
-    />
-    <div>
-      {{ separator }}
+  <div
+    class="column"
+  >
+    <div class="full-width row items-center justify-between no-wrap">
+      <!-- Start dateTime -->
+      <KDateTime
+        v-model="startTimeModel"
+        :date-picker="datePicker"
+        :time-picker="timePicker"
+        :date-format="dateFormat"
+        :time-format="timeFormat"
+        :date-class="dateClass"
+        :time-class="timeClass"
+        :separator="dateTimeSeparator"
+        :min="min"
+        :max="endTimeModel"
+        :timezone="timezone"
+        :icon="icon"
+        :disabled="disabled"
+        :dense="dense"
+        @update:modelValue="onRangeChanged"
+      />
+      <div v-if="canDisplaySlider"
+        class="col q-px-sm"
+      >
+        <Teleport v-if="isMounted"
+          to="#responsive-range-container"
+          :disabled="!slider.stacked"
+        >
+          <q-range
+            v-model="rangeModel"
+            v-bind="props.slider"
+            :disable="min === max"
+            dense
+            class="q-px-sm full-width"
+            @update:model-value="onSliderUpdated()"
+            @change="onSliderChanged()"
+          />
+        </Teleport>
+      </div>
+      <div v-else>
+        {{ separator }}
+      </div>
+      <!-- End dateTime -->
+      <KDateTime
+        v-model="endTimeModel"
+        :date-picker="datePicker"
+        :time-picker="timePicker"
+        :date-format="dateFormat"
+        :time-format="timeFormat"
+        :date-class="dateClass"
+        :time-class="timeClass"
+        :separator="dateTimeSeparator"
+        :min="startTimeModel"
+        :max="max"
+        :timezone="timezone"
+        :icon="icon"
+        :disabled="disabled"
+        :dense="dense"
+        @update:modelValue="onRangeChanged"
+      />
+    </div>
+    <div v-if="canDisplaySlider"
+      id="responsive-range-container"
+    >
     </div>
-    <!-- End dateTime -->
-    <KDateTime
-      v-model="endModel"
-      :options="props.options"
-      :min="startDateTime ? startDateTime.toISOString() : null"
-      :max="props.max"
-      :disabled="disabled || startDateTime === null"
-      :dense="dense"
-    />
   </div>
 </template>
 
 <script setup>
 import _ from 'lodash'
 import moment from 'moment'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import KDateTime from './KDateTime.vue'
 
 // Props
@@ -41,9 +85,41 @@ const props = defineProps({
       return true
     }
   },
-  options: {
+  datePicker: {
+    type: Object,
+    default: () => null
+  },
+  timePicker: {
     type: Object,
-    default: () => {}
+    default: () => null
+  },
+  withSeconds: {
+    type: Boolean,
+    default: false
+  },
+  dateFormat: {
+    type: String,
+    default: null
+  },
+  timeFormat: {
+    type: String,
+    default: null
+  },
+  dateClass: {
+    type: String,
+    default: ''
+  },
+  timeClass: {
+    type: String,
+    default: ''
+  },
+  separator: {
+    type: String,
+    default: '/'
+  },
+  dateTimeSeparator: {
+    type: String,
+    default: '-'
   },
   min: {
     type: String,
@@ -61,6 +137,18 @@ const props = defineProps({
       return true
     }
   },
+  timezone: {
+    type: String,
+    default: null
+  },
+  slider: {
+    type: Object,
+    default: () => null
+  },
+  icon: {
+    type: String,
+    default: 'las la-calendar'
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -75,44 +163,101 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 // Data
-const startDateTime = ref(null)
-const endDateTime = ref(null)
+const startTimeModel = ref(null)
+const endTimeModel = ref(null)
+const rangeModel = ref({
+  min: 0,
+  max: 100
+})
+const isMounted = ref(false)
 
 // Computed
-const startModel = computed({
-  get: function () {
-    return startDateTime.value ? startDateTime.value.toISOString() : null
-  },
-  set: function (value) {
-    if (endDateTime.value) {
-      if (moment.utc(value).isAfter(endDateTime.value)) endDateTime.value = value
-    } else {
-      endDateTime.value = value
-    }
-    emit('update:modelValue', { start: value, end: endDateTime.value })
+const canDisplaySlider = computed(() => {
+  return !_.isEmpty(props.slider) &&
+         !_.isEmpty(props.min) &&
+         !_.isEmpty(props.max)
+})
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  if (value) {
+    startTimeModel.value = value.start
+    endTimeModel.value = value.end
   }
 })
-const endModel = computed({
-  get: function () {
-    return endDateTime.value ? endDateTime.value.toISOString() : null
-  },
-  set: function (value) {
-    emit('update:modelValue', { start: startDateTime.value.toISOString(), end: value })
+watch(() => props.min, (newValue, oldValue) => {
+  if (_.isEmpty(props.max)) return
+  if (rangeModel.value.min === 0) startTimeModel.value = newValue
+  else {
+    const min = moment(props.min)
+    const max = moment(props.max)
+    const start = moment(startTimeModel.value)
+    const duration = moment.duration(max.diff(min)).asMilliseconds()
+    if (duration > 0) rangeModel.value.min = 100 * moment.duration(start.diff(min)).asMilliseconds() / duration
+    else rangeModel.value.min = 0
   }
+  triggerEmit()
 })
-const separator = computed(() => {
-  return _.get(props.options, 'separator', '/')
+watch(() => props.max, (newValue, oldValue) => {
+  if (_.isEmpty(props.min)) return
+  if (rangeModel.value.max === 100) endTimeModel.value = newValue
+  else {
+    const min = moment(props.min)
+    const max = moment(props.max)
+    const end = moment(endTimeModel.value)
+    const duration = moment.duration(max.diff(min)).asMilliseconds()
+    if (duration > 0) rangeModel.value.max = 100 * moment.duration(end.diff(min)).asMilliseconds() / duration
+    else rangeModel.value.max = 100
+  }
+  triggerEmit()
 })
 
-// Watch
-watch(() => props.modelValue, (value) => {
-  startDateTime.value = value ? moment.utc(value.start) : null
-  endDateTime.value = value ? moment.utc(value.end) : null
+// Functions
+function onRangeChanged () {
+  if (!_.isEmpty(props.min && !_.isEmpty(props.max))) {
+    const min = moment(props.min)
+    const max = moment(props.max)
+    const start = moment(startTimeModel.value)
+    const end = moment(endTimeModel.value)
+    const duration = moment.duration(max.diff(min)).asMilliseconds()
+    if (duration > 0) {
+      rangeModel.value.min = 100 * moment.duration(start.diff(min)).asMilliseconds() / duration
+      rangeModel.value.max = 100 * moment.duration(end.diff(min)).asMilliseconds() / duration
+    } else {
+      rangeModel.value.min = 0
+      rangeModel.value.max = 100
+    }
+  }
+  triggerEmit()
+}
+function onSliderUpdated () {
+  const min = moment(props.min)
+  const max = moment(props.max)
+  const duration = moment.duration(max.diff(min)).asMilliseconds()
+  if (duration > 0) {
+    startTimeModel.value = min.add(rangeModel.value.min / 100 * duration).toISOString()
+    endTimeModel.value = max.subtract((1 - rangeModel.value.max / 100) * duration).toISOString()
+  } else {
+    startTimeModel.value = props.min
+    endTimeModel.value = props.max
+  }
+}
+function onSliderChanged () {
+  triggerEmit()
+}
+const triggerEmit = _.debounce(() => {
+  emit('update:modelValue', { start: startTimeModel.value, end: endTimeModel.value })
+}, 100)
+
+// Hooks
+onMounted(() => {
+  isMounted.value = true
 })
 
-// Immedaite
+// Immediate
 if (props.modelValue) {
-  startDateTime.value = moment.utc(props.modelValue.start)
-  endDateTime.value = moment.utc(props.modelValue.end)
+  startTimeModel.value = props.modelValue.start
+  endTimeModel.value = props.modelValue.end
+  onRangeChanged()
 }
 </script>

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

@@ -1,18 +1,10 @@
 <template>
-  <q-btn
-    id="time-button"
-    :icon="icon"
-    :label="label"
-    flat
-    no-caps
-    :disable="disabled"
-    :dense="dense"
-  >
+  <q-btn v-bind="computedButton">
     <q-popup-proxy>
       <q-time
         id="time-picker"
-        v-model="model"
-        v-bind="picker"
+        v-model="computedModel"
+        v-bind="computedPicker"
       />
     </q-popup-proxy>
   </q-btn>
@@ -22,16 +14,34 @@
 import _ from 'lodash'
 import moment from 'moment'
 import { computed } from 'vue'
+import { Time } from '../../time.js'
+import { i18n } from '../../i18n.js'
 
 // Props
 const props = defineProps({
   modelValue: {
     type: String,
-    default: () => null
+    default: null
   },
-  options: {
+  picker: {
     type: Object,
-    default: () => {}
+    default: () => null
+  },
+  withSeconds: {
+    type: Boolean,
+    default: false
+  },
+  format: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: String,
+    default: 'las la-clock'
   },
   disabled: {
     type: Boolean,
@@ -50,14 +60,7 @@ const emit = defineEmits(['update:modelValue'])
 const mask = 'HH:mm:ss'
 
 // Computed
-const icon = computed(() => {
-  return _.get(props.options, 'icon')
-})
-const label = computed(() => {
-  if (props.modelValue) return moment(props.modelValue, mask).format(format.value)
-  return _.get(props.options, 'helper')
-})
-const model = computed({
+const computedModel = computed({
   get: function () {
     return props.modelValue
   },
@@ -65,10 +68,37 @@ const model = computed({
     emit('update:modelValue', value)
   }
 })
-const format = computed(() => {
-  return _.get(props.options, 'format', mask.substring(0, 5))
+const computedButton = computed(() => {
+  // compute format
+  let format = props.format
+  if (_.isEmpty(format)) format = _.get(Time.getFormat(), 'time.long')
+  // compute label
+  let label
+  if (!_.isEmpty(computedModel.value)) label = moment(computedModel.value, mask).format(format)
+  else label = i18n.tie(props.placeholder)
+  // define button spec
+  const spec = {
+    id: 'time-button',
+    label,
+    flat: true,
+    noCaps: true,
+    disable: props.disabled,
+    dense: true,
+    class: props.dense ? 'q-px-xs' : 'q-pa-sm'
+  }
+  // add icon if defined
+  if (props.icon) spec.icon = props.icon
+  return spec
 })
-const picker = computed(() => {
-  return _.merge({}, _.get(props.options, 'picker'), { mask })
+const computedPicker = computed(() => {
+  const picker = {
+    mask,
+    withSeconds: props.withSeconds
+  }
+  return _.merge({}, props.picker, picker)
 })
+
+// Immediate
+if (_.isEmpty(props.modelValue) &&
+    _.isEmpty(props.placeholder)) computedModel.value = moment.utc().format(mask)
 </script>

package/core/client/composables/activity.js

@@ -1,32 +1,52 @@
 import _ from 'lodash'
+import logger from 'loglevel'
 import config from 'config'
-import { ref, shallowRef, readonly, onBeforeUnmount } from 'vue'
+import { shallowRef, toRef, shallowReactive, readonly, onBeforeUnmount } from 'vue'
 import { useStore } from './store.js'
 import { useSelection } from './selection.js'
 
+const CurrentActivityContext = shallowReactive({
+  activity: null,
+  name: null,
+  state: null,
+  config: null
+})
 const CurrentActivity = shallowRef(null)
-const CurrentActivityName = ref(null)
+const ActivityComposables = {}
 
 export function useActivity (name, options = {}) {
   _.defaults(options, { selection: true })
 
-  // data
-  // state store
-  const activityState = useStore(`store.${name}.state`, options.state)
-  // options store
-  const activityOptions = useStore(`store.${name}.options`, config[name])
+  // configure the context
+  CurrentActivityContext.name = name
+  CurrentActivityContext.state = useStore(`store.${name}.state`, options.state).store
+  CurrentActivityContext.config = useStore(`store.${name}.options`, config[name]).store
 
   // functions
   function setCurrentActivity (activity) {
-    if (CurrentActivity.value === activity) return
-    CurrentActivityName.value = activity ? name : null
-    CurrentActivity.value = activity
+    if (CurrentActivityContext.activity === activity) return
+    if (activity) {
+      CurrentActivityContext.activity = activity
+      CurrentActivity.value = activity
+      logger.debug('[KDK] Current activity set to', activity)  
+    } else {
+      CurrentActivityContext.activity = null
+      CurrentActivity.value = null
+      logger.debug('[KDK] Current activity cleared')
+    }
   }
 
+  // hooks
+  onBeforeUnmount(() => {
+    CurrentActivityContext.name = null
+    CurrentActivityContext.state = null
+    CurrentActivityContext.config = null
+    setCurrentActivity(null)
+  })
+
   // expose
   const expose = {
-    state: activityState.store,
-    options: activityOptions.store,
+    CurrentActivityContext,
     setCurrentActivity
   }
   if (options.selection) {
@@ -35,9 +55,8 @@ export function useActivity (name, options = {}) {
     })
   }
 
-  // Cleanup on destroy
-  onBeforeUnmount(() => setCurrentActivity(null))
-
+  // Store exposed data and functions so that useCurrentActicity() will return the same context
+  _.set(ActivityComposables, name, expose)
   return expose
 }
 
@@ -46,24 +65,15 @@ export function useCurrentActivity (options = {}) {
 
   // expose
   const expose = {
-    CurrentActivity: readonly(CurrentActivity),
+    CurrentActivityContext,
+    CurrentActivity,
     kActivity: readonly(CurrentActivity),
-    CurrentActivityName: readonly(CurrentActivityName),
-    kActivityName: readonly(CurrentActivityName)
+    kActivityName: readonly(toRef(CurrentActivityContext, 'name'))
   }
-  if (CurrentActivityName.value) {
-    const activityState = useStore(`store.${CurrentActivityName.value}.state`)
-    const activityOptions = useStore(`store.${CurrentActivityName.value}.options`)
 
-    Object.assign(expose, {
-      state: activityState.store,
-      options: readonly(activityOptions.store)
-    })
-    if (options.selection) {
-      Object.assign(expose, {
-        ...useSelection(CurrentActivityName.value)
-      })
-    }
+  if (CurrentActivityContext.name) {
+    // Retrieved the same exposed data and function from useActivity()
+    Object.assign(expose, _.get(ActivityComposables, CurrentActivityContext.name))
   }
   return expose
 }

package/core/client/composables/{counter.js → collection-counter.js}

@@ -3,9 +3,7 @@ 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}`)
-  
+export function useCollectionCounter (options = {}) {
   // Data
   const counter = ref(0)
 
@@ -28,7 +26,7 @@ export function useCounter (options) {
   }
   async function refresh () {
     const query = _.merge(getBaseQuery(), getFilterQuery(), { $limit: 0 })
-    logger.trace(`[KDK] Count service ${options.service.value} with query ${query}`)
+    logger.debug(`[KDK] Count service '${options.service.value}' with query`, query)
     const response = await getService().find({ query })
     counter.value = response.total
   }

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

@@ -0,0 +1,111 @@
+import _ from 'lodash'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { getCollectionService, getLatestTime, getOldestTime, listenToServiceEvents, unlistenToServiceEvents } from '../utils/index.js'
+import { useCurrentActivity } from './activity.js'
+
+export function useCollectionFilter (options = {}) {
+  // Data
+  const { CurrentActivityContext } = useCurrentActivity()
+  const tagsFilter = CurrentActivityContext.state.tagsFilter
+  const timeFilter = CurrentActivityContext.state.timeFilter
+  const filterQuery = ref({})
+  let listeners
+
+  // Computed
+  const selectedTags = computed(() => {
+    return _.get(tagsFilter, 'selection', [])
+  })
+  const hasTagsSelection = computed(() => {
+    return !_.isEmpty(selectedTags.value)
+  })
+  const selectedTime = computed(() => {
+    return _.cloneDeep(timeFilter)
+  })
+  const hasTimeSelection = computed(() => {
+    const start = _.get(timeFilter, 'start')
+    const end = _.get(timeFilter, 'end')
+    return start && end && start !== end
+  })
+
+  // Watch
+  watch(selectedTags, () => refreshFilterQuery())
+  watch(selectedTime, (newTimeRange, oldTimeRange) => {
+    if (oldTimeRange && oldTimeRange.start !== null && oldTimeRange.end !== null) refreshFilterQuery()
+  }, { deep: true })
+
+  // Functions
+  function getService () {
+    return getCollectionService(options.service.value, options.context ? options.context.value : null)
+  }
+  function getBaseQuery () {
+    return _.get(options, 'baseQuery.value', {})
+  }
+  function getTimeField () {
+    return _.get(options, 'timeField.value', 'createdAt')
+  }
+  function getTagFields () {
+    return _.get(options, 'tagFields', [])
+  }
+  async function refreshOptions () {
+    const timeField = getTimeField()
+    // update time filter
+    const min = await getOldestTime(getService(), timeField, getBaseQuery())
+    if (min) _.set(timeFilter, 'min', min)
+    const max = await getLatestTime(getService(), timeField, getBaseQuery())
+    if (max) _.set(timeFilter, 'max', max)
+    // update tags filter
+    const tagFields = getTagFields()
+    let tagsOptions = []
+    _.forEach(tagFields, (values, property) => {
+      const propertyOptions = _.map(values, (state, key) => {
+        return _.merge({ scope: property, name: key }, state)
+      })
+      if (_.size(propertyOptions) > 1) tagsOptions = _.concat(tagsOptions, propertyOptions)
+    })
+    _.set(tagsFilter, 'options', tagsOptions)
+  }
+  function refreshFilterQuery () {
+    const query = {}
+    // filter against the selected tags
+    if (hasTagsSelection.value) {
+      const tagFields = getTagFields()
+      _.forEach(tagFields, (values, property) => {
+        const tagsProperty = _.map(_.filter(selectedTags.value, { scope: property }), tag => { return tag.name })
+        if (!_.isEmpty(tagsProperty)) {
+          _.merge(query, { [property]: { $in: tagsProperty } })
+        }
+      })
+    }
+    // filter against the selected time range
+    if (hasTimeSelection.value) {
+      _.merge(query, {
+        [getTimeField()]: {
+          $gte: selectedTime.value.start,
+          $lte: selectedTime.value.end
+        }
+      })
+    }
+    filterQuery.value = query
+  }
+
+  // Hooks
+  onMounted(async () => {
+    await refreshOptions()
+    listeners = listenToServiceEvents(getService(), {
+      created: () => refreshOptions('created'),
+      updated: () => refreshOptions('updated'),
+      patched: () => refreshOptions('patched'),
+      removed: () => refreshOptions('removed')
+    })
+  })
+  onBeforeUnmount(() => {
+    unlistenToServiceEvents(listeners)
+  })
+
+  // Expose
+  return {
+    filterQuery,
+    hasTagsSelection,
+    hasTimeSelection
+  }
+}