wip: Enhance collection filtering #1151

Author: cnouguier

core/client/components/collection/KTagsFilterControl.vue

@@ -7,10 +7,10 @@
       color="grey-9"
       flat
       direction="down"
-      :vertical-actions-align="responsiveAlignment"
+      :vertical-actions-align="computedAlignment"
       padding="xs"
-      @show="enableTooltip = false"
-      @hide="enableTooltip = true"
+      @show="showTooltip = false"
+      @hide="showTooltip = true"
     >
       <template v-for="tag in options" :key="tag.name">
         <q-fab-action
@@ -23,7 +23,7 @@
         />
       </template>
     </q-fab>
-    <q-tooltip v-if="enableTooltip">
+    <q-tooltip v-if="showTooltip">
       {{ $t('KTagsFilterControl.FILTER') }}
     </q-tooltip>
   </div>
@@ -46,25 +46,25 @@ const props = defineProps({
 const { Screen } = useScreen()
 const { CurrentActivityContext } = useCurrentActivity()
 const tagsFilter = CurrentActivityContext.state.tagsFilter
-const enableTooltip = ref(true)
+const showTooltip = ref(true)
 
 // Computed
 const selection = computed(() => {
-  return tagsFilter.selection
+  return _.get(tagsFilter, 'selection', [])
 })
 const options = computed(() => {
-  return _.difference(tagsFilter.options, tagsFilter.selection)
+  return _.difference(_.get(tagsFilter, 'options'), selection.value)
 })
 const hasOptions = computed(() => {
   return !_.isEmpty(options.value)
 })
-const responsiveAlignment = computed(() => {
+const computedAlignment = computed(() => {
   if (_.isString(props.alignment)) return props.alignment
   return _.get(props.alignment, Screen.name)
 })
 
 // Function
 function onTagAdded (tag) {
-  Object.assign(CurrentActivityContext.state.tagsFilter, { selection: _.concat(selection.value, [tag]) })
+  _.set(tagsFilter, 'selection', _.concat(selection.value, [tag]))
 }
 </script>

core/client/components/collection/KTimeFilterControl.vue

@@ -22,18 +22,18 @@ defineProps({
 
 // Data
 const { CurrentActivityContext } = useCurrentActivity()
-const { state } = CurrentActivityContext
+const timeFilter = CurrentActivityContext.state.timeFilter
 
 // Computed
+const min = computed(() => _.get(timeFilter, 'min'))
+const max = computed(() => _.get(timeFilter, 'max'))
 const hasTimeRange = computed(() => {
-  return state.timeFilter && state.timeFilter.min !== state.timeFilter.max
+    return !_.isEmpty(min.value) && !_.isEmpty(max.value) && min.value !== max.value
 })
 
 // Functions
 async function showTimeRangeSlider () {
-  Object.assign(state.timeFilter, {
-    start: state.timeFilter.min,
-    end: state.timeFilter.max
-  })
+  _.set(timeFilter, 'start', min.value)
+  _.set(timeFilter, 'end', max.value)
 }
 </script>

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
+  }
+}

core/client/composables/index.js

@@ -1,5 +1,6 @@
 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 './context.js'