@kalisio/kdk 2.5.3 → 2.6.0

package/core/client/components/action/KToggleFullscreenAction.vue

@@ -1,25 +1,16 @@
 <template>
   <KAction
-    ref="actionRef"
     v-bind="props"
+    :toggled="Fullscreen"
     :handler="toggleFullscreen"
   />
 </template>
 
 <script setup>
 import _ from 'lodash'
-import { ref, watch } from 'vue'
 import { actionProps, Fullscreen, toggleFullscreen } from '../../utils'
 import KAction from './KAction.vue'
 
 // Props
-const props = defineProps(_.omit(actionProps, ['url', 'handler', 'dialog', 'route', 'closePopup']))
-
-// Data
-const actionRef = ref(null)
-
-// Watch
-watch(Fullscreen, () => {
-  if (actionRef.value.isToggled !== Fullscreen.value) actionRef.value.toggle()
-})
+const props = defineProps(_.omit(actionProps, ['url', 'handler', 'dialog', 'route', 'closePopup', 'toggled']))
 </script>

package/core/client/components/app/KHome.vue

@@ -6,7 +6,8 @@
 
 <script setup>
 import KLayout from '../layout/KLayout.vue'
-import { Store } from '../../store.js'
+import { useUser } from '../../composables'
 
-const User = Store.getRef('user')
+// Data
+const { User } = useUser()
 </script>

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

@@ -65,6 +65,7 @@
 import _ from 'lodash'
 import { Filter } from '../../filter'
 import { Search } from '../../search'
+import { Store } from '../../store'
 
 export default {
   props: {
@@ -125,18 +126,18 @@ export default {
     onItemSelected (item) {
       this.items.push(item)
       this.pattern = ''
-      this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+      Store.patch('filter', { items: this.items, pattern: this.pattern })
     },
     onItemRemoved (itemId) {
       this.items = _.filter(this.items, item => { return item._id !== itemId })
-      this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+      Store.patch('filter', { items: this.items, pattern: this.pattern })
     },
     async onSearch (pattern) {
       // take about a null pattern received when clearing the input
       if (_.isNull(pattern)) pattern = ''
       // update the pattern
       this.pattern = pattern
-      this.$store.patch('filter', { pattern: this.pattern })
+      Store.patch('filter', { pattern: this.pattern })
       // run the search if the pattern is not empty
       if (!_.isEmpty(pattern)) {
         const results = await Search.query(this.services, pattern)
@@ -150,7 +151,7 @@ export default {
   },
   created () {
     // Initialize the filter, we keep track of any existing items previously set by another activity
-    this.$store.patch('filter', { fields: this.fields || this.field, pattern: '' })
+    Store.patch('filter', { fields: this.fields || this.field, pattern: '' })
   },
   beforeUnmount () {
     this.items = []

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

@@ -21,7 +21,7 @@
         <q-infinite-scroll
           @load="onLoad"
           :initial-index="1"
-          :offset="200"
+          :offset="scrollOffset"
           v-scroll="onScroll"
           class="col"
         >
@@ -192,6 +192,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  scrollOffset: {
+    type: Number,
+    default: 300
+  },
   header: {
     type: [Array, Object],
     default: () => null

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="q-pa-xs">
+    <q-input
+      :label="$tie(label)"
+      v-model="inputValue"
+      clearable
+      borderless
+      dense
+      debounce="500"
+      @update:model-value="onSearch"
+    >
+      <template v-slot:before v-if="!hideIcon">
+        <div class="row">
+          <q-icon class="q-pl-xs" dense name="search" />
+        </div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// Props
+const props = defineProps({
+  value: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: 'KFilter.SEARCH_LABEL'
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false
+  },
+  onSearch: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+// Data
+const inputValue = ref(props.value)
+
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <KOptionsChooser
+      :options="options"
+      :tooltip="tooltip"
+      @option-chosen="onOptionChosen"
+      />
+  </div>
+</template>
+
+<script setup>
+import KOptionsChooser from '../input/KOptionsChooser.vue'
+
+// Props
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [
+      { icon: 'las la-sort-alpha-down', value: { field: 'name', order: 1 }, default: true },
+      { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } }
+    ]
+  },
+  tooltip: {
+    type: String,
+    default: 'KSorter.SORT'
+  },
+  onOptionChanged: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+// Emits
+const emit = defineEmits(['option-changed'])
+
+// Functions
+function onOptionChosen (value) {
+  props.onOptionChanged(value)
+  emit('option-changed', value)
+}
+
+</script>

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

@@ -63,7 +63,7 @@ watch(() => [$q.screen.width, $q.screen.height], () => {
 const refresh = _.debounce(() => {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
-    logger.error('[KDK] Cannot find target element')
+    logger.warn('[KDK] Cannot find target element')
     return
   }
   const containerHeight = targetElement.offsetHeight
@@ -80,7 +80,7 @@ const refresh = _.debounce(() => {
 function scrollOnce () {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
-    logger.error('[KDK] Cannot find target element')
+    logger.warn('[KDK] Cannot find target element')
     return
   }
   const position = qScrollUtils.getVerticalScrollPosition(targetElement)

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

@@ -66,6 +66,7 @@ import _ from 'lodash'
 import { ref, computed } from 'vue'
 import { useCurrentActivity } from '../../composables/index.js'
 import { Search } from '../../search.js'
+import { Store } from '../../store.js'
 
 // Props
 const props = defineProps({
@@ -115,7 +116,7 @@ function getItemIcon (item) {
 function onItemSelected (item) {
   this.items.push(item)
   this.pattern = ''
-  this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+  Store.patch('filter', { items: this.items, pattern: this.pattern })
 }
 function onItemRemoved (itemId) {
   _.set(state.searchFilter, 'items', _.without(items.value, itemId))
@@ -125,7 +126,7 @@ async function onSearch (pattern) {
   if (_.isNull(pattern)) pattern = ''
   // update the pattern
   this.pattern = pattern
-  this.$store.patch('filter', { pattern: this.pattern })
+  Store.patch('filter', { pattern: this.pattern })
   // run the search if the pattern is not empty
   if (!_.isEmpty(pattern)) {
     const results = await Search.query(props.services, pattern)

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

@@ -1,46 +1,42 @@
 <template>
-  <KOptionsChooser
-    :options="options"
-    :tooltip="tooltip"
-    @option-chosen="onOptionChanged"
-  />
+  <KItemsSorter v-bind="$props" @option-changed="onOptionChanged" />
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
-import KOptionsChooser from '../input/KOptionsChooser.vue'
+import { onMounted, onBeforeUnmount } from 'vue'
+import { Store } from '../../store.js'
+import KItemsSorter from './KItemsSorter.vue'
 
-export default {
-  components: {
-    KOptionsChooser
+// Props
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [
+      { icon: 'las la-sort-alpha-down', value: { field: 'name', order: 1 }, default: true },
+      { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } }
+    ]
   },
-  props: {
-    options: {
-      type: Array,
-      default: () => [
-        { icon: 'las la-sort-alpha-down', value: { field: 'name', order: 1 }, default: true },
-        { icon: 'las la-sort-alpha-up', value: { field: 'name', order: -1 } }
-      ]
-    },
-    tooltip: {
-      type: String,
-      default: 'KSorter.SORT'
-    }
-  },
-  methods: {
-    onOptionChanged (value) {
-      this.$store.patch('sorter', value)
-    }
-  },
-  created () {
-    // Initialize the sorter
-    let defaultOption = _.find(this.options, { default: true })
-    if (!defaultOption) defaultOption = _.head(this.options) || {}
-    this.$store.patch('sorter', defaultOption.value)
-  },
-  beforeUnmount () {
-    // Reset the filter, we keep track of any existing items previously set by another activity
-    this.$store.patch('sorter', {})
+  tooltip: {
+    type: String,
+    default: 'KSorter.SORT'
   }
+})
+
+// Functions
+function onOptionChanged (value) {
+  Store.patch('sorter', value)
 }
+
+onMounted(() => {
+  // Initialize the sorter
+  let defaultOption = _.find(props.options, { default: true })
+  if (!defaultOption) defaultOption = _.head(props.options) || {}
+  Store.patch('sorter', defaultOption.value)
+})
+
+onBeforeUnmount(() => {
+  // Reset the filter, we keep track of any existing items previously set by another activity
+  Store.patch('sorter', {})
+})
 </script>

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

@@ -1,38 +1,17 @@
 <template>
-  <div>
-    <q-fab
-      v-if="hasOptions"
-      id="tags-filter-control"
-      icon="las la-filter"
-      color="grey-9"
-      flat
-      direction="down"
-      :vertical-actions-align="computedAlignment"
-      padding="xs"
-      @show="showTooltip = false"
-      @hide="showTooltip = true"
-    >
-      <template v-for="tag in options" :key="tag.name">
-        <q-fab-action
-          :label="$tie(tag.label)"
-          :color="tag.color"
-          :text-color="tag.textColor"
-          padding="1px"
-          square
-          @click="onTagAdded(tag)"
-        />
-      </template>
-    </q-fab>
-    <q-tooltip v-if="showTooltip">
-      {{ $t('KTagsFilterControl.FILTER') }}
-    </q-tooltip>
-  </div>
+  <KTagFilter
+    :options="options"
+    :selection="selection"
+    :alignment="computedAlignment"
+    @selection-changed="onSelectionChanged"
+  />
 </template>
 
 <script setup>
 import _ from 'lodash'
-import { ref, computed } from 'vue'
-import { useCurrentActivity, useScreen } from '../../composables'
+import { computed } from 'vue'
+import { useScreen, useCollectionFilter } from '../../composables'
+import KTagFilter from '../tags/KTagFilter.vue'
 
 // Props
 const props = defineProps({
@@ -44,19 +23,14 @@ const props = defineProps({
 
 // Data
 const { Screen } = useScreen()
-const { CurrentActivityContext } = useCurrentActivity()
-const tagsFilter = CurrentActivityContext.state.tagsFilter
-const showTooltip = ref(true)
+const { tagsFilter, setTagsFilter } = useCollectionFilter()
 
 // Computed
 const selection = computed(() => {
-  return _.get(tagsFilter, 'selection', [])
+  return _.get(tagsFilter.value, 'selection', [])
 })
 const options = computed(() => {
-  return _.difference(_.get(tagsFilter, 'options'), selection.value)
-})
-const hasOptions = computed(() => {
-  return !_.isEmpty(options.value)
+  return _.difference(_.get(tagsFilter.value, 'options'), selection.value)
 })
 const computedAlignment = computed(() => {
   if (_.isString(props.alignment)) return props.alignment
@@ -64,7 +38,7 @@ const computedAlignment = computed(() => {
 })
 
 // Function
-function onTagAdded (tag) {
-  _.set(tagsFilter, 'selection', _.concat(selection.value, [tag]))
+function onSelectionChanged (selection) {
+  setTagsFilter(selection, 'selection')
 }
 </script>

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

@@ -1,61 +1,26 @@
 <template>
-  <div
-    v-if="hasSelection"
-    class="q-pl-xs row justify-center items-center q-gutter-x-xs k-tags-filter"
-  >
-    <template v-for="tag in selection" :key="tag.name">
-      <KChip
-        v-bind="tag"
-        removable
-        @remove="onRemoved(tag)"
-        square
-        :dense="dense"
-      />
-    </template>
-    <KAction
-      id="clear-tags"
-      icon="cancel"
-      color="grey-7"
-      size="12px"
-      :handler="onClear"
-    />
-  </div>
+  <KTagSelection
+    :selection="selection"
+    @selection-changed="onSelectionChanged"
+  />
 </template>
 
 <script setup>
 import _ from 'lodash'
 import { computed } from 'vue'
-import { useCurrentActivity, useScreen } from '../../composables'
-import KAction from '../action/KAction.vue'
+import { useCollectionFilter } from '../../composables'
+import KTagSelection from '../tags/KTagSelection.vue'
 
 // Data
-const { dense } = useScreen()
-const { CurrentActivityContext } = useCurrentActivity()
-const { state } = CurrentActivityContext
+const { tagsFilter, setTagsFilter } = useCollectionFilter()
 
 // Computed
-const hasSelection = computed(() => {
-  return state.tagsFilter && !_.isEmpty(selection.value)
-})
 const selection = computed(() => {
-  return state.tagsFilter.selection
+  return _.get(tagsFilter.value, 'selection')
 })
 
 // Functions
-function onRemoved (tag) {
-  _.set(state.tagsFilter, 'selection', _.without(selection.value, tag))
-}
-function onClear () {
-  _.set(state.tagsFilter, 'selection', [])
+function onSelectionChanged (selection) {
+  setTagsFilter(selection, 'selection')
 }
 </script>
-
-<style lang="scss" scoped>
-.k-tags-filter {
-  padding-left: 8px;
-  padding-right: 4px;
-  border-radius: 24px;
-  border: 1px solid lightgrey;
-  background-color: #dedede
-}
-</style>

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

@@ -11,7 +11,7 @@
 <script setup>
 import _ from 'lodash'
 import { computed } from 'vue'
-import { useCurrentActivity } from '../../composables'
+import { useCollectionFilter } from '../../composables'
 
 // Props
 defineProps({
@@ -22,19 +22,18 @@ defineProps({
 })
 
 // Data
-const { CurrentActivityContext } = useCurrentActivity()
-const timeFilter = CurrentActivityContext.state.timeFilter
+const { timeFilter, setTimeFilter } = useCollectionFilter()
 
 // Computed
-const min = computed(() => _.get(timeFilter, 'min'))
-const max = computed(() => _.get(timeFilter, 'max'))
+const min = computed(() => _.get(timeFilter.value, 'min'))
+const max = computed(() => _.get(timeFilter.value, 'max'))
 const hasTimeRange = computed(() => {
   return !_.isEmpty(min.value) && !_.isEmpty(max.value) && min.value !== max.value
 })
 
 // Functions
 async function showTimeRangeSlider () {
-  _.set(timeFilter, 'start', min.value)
-  _.set(timeFilter, 'end', max.value)
+  setTimeFilter(min.value, 'start')
+  setTimeFilter(max.value, 'end')
 }
 </script>

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

@@ -26,37 +26,37 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { computed } from 'vue'
-import { useCurrentActivity, useScreen } from '../../composables'
+import { useScreen, useCollectionFilter } from '../../composables'
 
 // Props
 defineProps({
-  dateOnly: {
-    type: Boolean,
-    default: false
+  dateFormat: {
+    type: String,
+    default: null
   }
 })
 
 // Data
 const { dense } = useScreen()
-const { CurrentActivityContext } = useCurrentActivity()
-const { state } = CurrentActivityContext
+const { timeFilter, setTimeFilter, cleatTimeFilter } = useCollectionFilter()
 
 // Computed
 const hasSelection = computed(() => {
-  return state.timeFilter && startTimeRange.value && endTimeRange.value
+  return timeFilter.value && startTimeRange.value && endTimeRange.value
 })
 const startTimeRange = computed(() => {
-  return state.timeFilter.start
+  return _.get(timeFilter.value, 'start')
 })
 const endTimeRange = computed(() => {
-  return state.timeFilter.end
+  return _.get(timeFilter.value, 'end')
 })
 const minTimeRange = computed(() => {
-  return state.timeFilter.min
+  return _.get(timeFilter.value, 'min')
 })
 const maxTimeRange = computed(() => {
-  return state.timeFilter.max
+  return _.get(timeFilter.value, 'max')
 })
 const timeRangeModel = computed({
   get: function () {
@@ -66,15 +66,9 @@ const timeRangeModel = computed({
     }
   },
   set: function (value) {
-    Object.assign(state.timeFilter, {
-      start: value.start,
-      end: value.end
-    })
+    setTimeFilter({ start: value.start, end: value.end })
   }
 })
-const dateFormat = computed(() => {
-  return dense.value ? 'DD/MM/YY' : 'DD/MM/YYYY'
-})
 const textClass = computed(() => {
   return dense.value ? 'text-caption' : 'text-body2 text-weight-regular'
 })
@@ -88,10 +82,7 @@ const slider = computed(() => {
 
 // Functions
 function onClear () {
-  Object.assign(state.timeFilter, {
-    start: null,
-    end: null
-  })
+  cleatTimeFilter()
 }
 </script>
 

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

@@ -26,7 +26,7 @@
         <q-infinite-scroll
           @load="onLoad"
           :initial-index="1"
-          :offset="200"
+          :offset="scrollOffset"
           v-scroll="onScroll"
         >
           <template v-for="item in items" :key="item._id">
@@ -60,7 +60,7 @@
                     <KPanel
                       v-if="getDecoration(item)"
                       :content="getDecoration(item)"
-                      class="q-gutter-xs"
+                      class="q-gutter-xs k-decoration"
                     />
                   </div>
                   <div v-else class="column items-end">
@@ -73,8 +73,7 @@
                     <KPanel
                       v-if="getDecoration(item)"
                       :content="getDecoration(item)"
-                      direction="horizontal"
-                      class="justify-end q-gutter-xs"
+                      class="justify-end q-gutter-xs k-decoration"
                     />
                   </div>
                 </slot>
@@ -232,6 +231,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  scrollOffset: {
+    type: Number,
+    default: 300
+  },
   header: {
     type: [Array, Object],
     default: () => null
@@ -286,6 +289,10 @@ const comfortSize = computed(() => {
 const comfortPadding = computed(() => {
   return props.dense ? '24px' : '32px'
 })
+const decorationSize = computed(() => {
+  if (layout.value === 'dense') return '80vw'
+  return `${props.sideWidth}vw`
+})
 
 // Watch
 watch(items, onCollectionRefreshed)
@@ -379,10 +386,6 @@ onBeforeUnmount(() => {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.k-timeline-heading {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
 .q-timeline__title {
   margin-bottom: 4px;
 }
@@ -409,5 +412,11 @@ onBeforeUnmount(() => {
 .q-timeline--dense--right .q-timeline__entry {
   padding-left: v-bind(comfortPadding);
 }
-
+.k-timeline-heading {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.k-decoration {
+  max-width: v-bind(decorationSize);
+}
 </style>