@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -33,7 +33,6 @@
                   :ref="onItemRendered"
                   :service="service"
                   :item="item"
-                  :contextId="contextId"
                   :is="itemRenderer"
                   v-bind="renderer"
                   @item-selected="onItemSelected"
@@ -52,7 +51,6 @@
               :ref="onItemRendered"
               :service="service"
               :item="item"
-              :contextId="contextId"
               :is="itemRenderer"
               v-bind="renderer"
               @item-selected="onItemSelected"
@@ -91,10 +89,12 @@
     <!--
       Controls
      -->
-    <div id="grid-controls">
+    <div v-if="items && items.length > 0 && contentRef"
+      id="grid-controls"
+    >
       <div v-if="appendItems">
         <!-- scroll -->
-        <div v-if="contentRef" class="row items-center">
+        <div class="row items-center">
           <div class="col-4"></div>
           <div class="col-4 row justify-center">
             <KScrollDown
@@ -124,7 +124,6 @@
           />
         </div>
       </div>
-
     </div>
     <!--
       Footer
@@ -149,10 +148,6 @@ import KPanel from '../KPanel.vue'
 
 // Props
 const props = defineProps({
-  contextId: {
-    type: String,
-    default: undefined
-  },
   service: {
     type: String,
     required: true

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

@@ -3,7 +3,6 @@
     name="history-column"
     :service="service"
     :renderer="computedRenderer"
-    :contextId="contextId"
     :baseQuery="baseQuery"
     :filterQuery="computedFilterQuery"
     :listStrategy="listStrategy"
@@ -46,10 +45,6 @@ export default {
       type: String,
       default: 'createdAt'
     },
-    contextId: {
-      type: String,
-      default: undefined
-    },
     service: {
       type: String,
       required: true

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

@@ -21,7 +21,6 @@
           v-if="item.side === 'left'"
           :id="item._id"
           :item="item"
-          :contextId="contextId"
           :is="rendererComponent"
           v-bind="renderer"
         />
@@ -40,7 +39,6 @@
           v-if="$q.screen.lt.md || item.side === 'right'"
           :id="item._id"
           :item="item"
-          :contextId="contextId"
           :is="rendererComponent"
           v-bind="renderer"
         />

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

@@ -11,11 +11,10 @@
     <!--
       Avatar section
     -->
-    <q-item-section top avatar @click="onItemSelected('avatar')">
+    <q-item-section v-if="avatar" top avatar @click="onItemSelected('avatar')">
       <slot name="item-avatar">
         <KAvatar
           :subject="item"
-          :contextId="contextId"
           :options="options"
         />
       </slot>

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

@@ -0,0 +1,139 @@
+<template>
+  <div class="q-pa-xs">
+    <!--
+      Input area
+     -->
+    <q-input
+      :label="pattern ? undefined: $tie(label)"
+      v-model="pattern"
+      clearable
+      borderless
+      dense
+      debounce="500"
+      @update:model-value="onSearch"
+    >
+      <template v-slot:before>
+        <div class="row">
+          <q-icon class="q-pl-xs" dense name="search" />
+          <template v-for="item in items" :key="item.name">
+            <q-chip
+              square
+              dense
+              removable
+              color="primary"
+              text-color="white"
+              size="md"
+              @remove="onItemRemoved(item._id)"
+            >
+              <q-icon v-if="getItemIcon(item)" class="q-pr-sm" :name="getItemIcon(item)" />
+              {{ getItemLabel(item) }}
+            </q-chip>
+          </template>
+        </div>
+      </template>
+    </q-input>
+    <!--
+      Options menu
+     -->
+    <q-menu
+      v-if="options.length > 0"
+      no-focus
+      no-refocus
+      v-model="hasOptions"
+    >
+      <q-list style="min-width: 100px">
+        <template v-for="option in options" :key="option.name">
+          <q-item
+            clickable
+            @click="onItemSelected(option)"
+            v-close-popup>
+            <q-item-section v-if="getItemIcon(option)" avatar>
+              <q-icon :name="getItemIcon(option)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ getItemLabel(option) }}</q-item-label>
+              <q-item-label caption>{{ getItemDescription(option) }}</q-item-label>
+            </q-item-section>
+        </q-item>
+        </template>
+      </q-list>
+    </q-menu>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed } from 'vue'
+import { useCurrentActivity } from '../../composables/index.js'
+import { Search } from '../../search.js'
+
+// Props
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'KSearchFilter.SEARCH_LABEL'
+  },
+  fields: {
+    type: [String, Array],
+    default: 'name'
+  },
+  services: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Data
+const { CurrentActivityContext } = useCurrentActivity()
+const { state } = CurrentActivityContext
+const options = ref([]
+
+)
+// Computed
+const items = computed(() => {
+  return state.searchFilter.items
+})
+const hasOptions = computed({
+  get: function () {
+    return this.options.length > 0
+  },
+  set: function (value) {
+    if (!value) this.options = []
+  }
+})
+
+// Functions
+function getItemLabel (item) {
+  return _.get(item, item.field)
+}
+function getItemDescription (item) {
+  return _.get(item, this.description)
+}
+function getItemIcon (item) {
+  return _.get(item, 'icon.name', _.get(item, 'icon'))
+}
+function onItemSelected (item) {
+  this.items.push(item)
+  this.pattern = ''
+  this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+}
+function onItemRemoved (itemId) {
+  _.set(state.searchFilter, 'items', _.without(items.value, itemId))
+}
+async function 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 })
+  // run the search if the pattern is not empty
+  if (!_.isEmpty(pattern)) {
+    const results = await Search.query(props.services, pattern)
+    if (results.length > 0) {
+      options.value = _.differenceWith(results, this.items, (item1, item2) => {
+        return item1._id === item2._id
+      })
+    }
+  }
+}
+</script>

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

@@ -30,6 +30,7 @@
               :item="item"
               :row="props.row"
               :is="loadComponent(item.component)"
+              v-bind="item"
             />
             <p v-else>{{ props.row.properties[`${item.key}`] }}</p>
           </q-td>
@@ -113,10 +114,6 @@ const props = defineProps({
   selection: {
     type: String
   },
-  contextId: {
-    type: String,
-    default: undefined
-  },
   service: {
     type: String,
     required: true

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

@@ -0,0 +1,70 @@
+<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>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed } from 'vue'
+import { useCurrentActivity, useScreen } from '../../composables'
+
+// Props
+const props = defineProps({
+  alignment: {
+    type: [String, Object],
+    default: 'center'
+  }
+})
+
+// Data
+const { Screen } = useScreen()
+const { CurrentActivityContext } = useCurrentActivity()
+const tagsFilter = CurrentActivityContext.state.tagsFilter
+const showTooltip = ref(true)
+
+// Computed
+const selection = computed(() => {
+  return _.get(tagsFilter, 'selection', [])
+})
+const options = computed(() => {
+  return _.difference(_.get(tagsFilter, 'options'), selection.value)
+})
+const hasOptions = computed(() => {
+  return !_.isEmpty(options.value)
+})
+const computedAlignment = computed(() => {
+  if (_.isString(props.alignment)) return props.alignment
+  return _.get(props.alignment, Screen.name)
+})
+
+// Function
+function onTagAdded (tag) {
+  _.set(tagsFilter, 'selection', _.concat(selection.value, [tag]))
+}
+</script>

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

@@ -0,0 +1,61 @@
+<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>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { useCurrentActivity, useScreen } from '../../composables'
+import KAction from '../action/KAction.vue'
+
+// Data
+const { dense } = useScreen()
+const { CurrentActivityContext } = useCurrentActivity()
+const { state } = CurrentActivityContext
+
+// Computed
+const hasSelection = computed(() => {
+  return state.tagsFilter && !_.isEmpty(selection.value)
+})
+const selection = computed(() => {
+  return state.tagsFilter.selection
+})
+
+// Functions
+function onRemoved (tag) {
+  _.set(state.tagsFilter, 'selection', _.without(selection.value, tag))
+}
+function onClear () {
+  _.set(state.tagsFilter, '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

@@ -0,0 +1,40 @@
+<template>
+  <KAction
+    v-if="hasTimeRange"
+    id="time-filter-control"
+    icon="las la-clock"
+    tooltip="KTimeFilterControl.FILTER"
+    :handler="showTimeRangeSlider"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { useCurrentActivity } from '../../composables'
+
+// Props
+defineProps({
+  service: {
+    type: String,
+    required: true
+  }
+})
+
+// Data
+const { CurrentActivityContext } = useCurrentActivity()
+const timeFilter = CurrentActivityContext.state.timeFilter
+
+// Computed
+const min = computed(() => _.get(timeFilter, 'min'))
+const max = computed(() => _.get(timeFilter, '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)
+}
+</script>

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

@@ -0,0 +1,106 @@
+<template>
+  <div v-if="hasSelection"
+    class="q-px-sm q-py-xs row items-center q-gutter-x-sm no-wrap k-time-filter"
+    style="width: 800px; max-width: 90vw"
+  >
+    <KDateTimeRange
+      v-model="timeRangeModel"
+      :min="minTimeRange"
+      :max="maxTimeRange"
+      :date-format="dateFormat"
+      :date-class="textClass"
+      :time-class="textClass"
+      :slider="slider"
+      :icon="null"
+      dense
+      class="col text-caption"
+    />
+    <KAction
+      id="clear-time-range"
+      icon="cancel"
+      color="grey-7"
+      size="12px"
+      :handler="onClear"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useCurrentActivity, useScreen } from '../../composables'
+
+// Props
+defineProps({
+  dateOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Data
+const { dense } = useScreen()
+const { CurrentActivityContext } = useCurrentActivity()
+const { state } = CurrentActivityContext
+
+// Computed
+const hasSelection = computed(() => {
+  return state.timeFilter && startTimeRange.value && endTimeRange.value
+})
+const startTimeRange = computed(() => {
+  return state.timeFilter.start
+})
+const endTimeRange = computed(() => {
+  return state.timeFilter.end
+})
+const minTimeRange = computed(() => {
+  return state.timeFilter.min
+})
+const maxTimeRange = computed(() => {
+  return state.timeFilter.max
+})
+const timeRangeModel = computed({
+  get: function () {
+    return {
+      start: startTimeRange.value,
+      end: endTimeRange.value
+    }
+  },
+  set: function (value) {
+    Object.assign(state.timeFilter, {
+      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'
+})
+const slider = computed(() => {
+  return {
+    stacked: dense.value,
+    color: 'grey-9',
+    thumbSize: dense.value ? '12px' : '16px'
+  }
+})
+
+// Functions
+function onClear () {
+  Object.assign(state.timeFilter, {
+    start: null,
+    end: null
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.k-time-filter {
+  padding-left: 8px;
+  padding-right: 4px;
+  border-radius: 24px;
+  border: 1px solid lightgrey;
+  background-color: #dedede
+}
+</style>

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

@@ -60,6 +60,7 @@
                     <KPanel
                       v-if="getDecoration(item)"
                       :content="getDecoration(item)"
+                      class="q-gutter-xs"
                     />
                   </div>
                   <div v-else class="column items-end">
@@ -72,7 +73,8 @@
                     <KPanel
                       v-if="getDecoration(item)"
                       :content="getDecoration(item)"
-                      class="justify-end"
+                      direction="horizontal"
+                      class="justify-end q-gutter-xs"
                     />
                   </div>
                 </slot>
@@ -84,7 +86,6 @@
                     :ref="onBodyRendered"
                     :service="service"
                     :item="item"
-                    :contextId="contextId"
                     :is="bodyRendererComponent"
                     v-bind="bodyRenderer"
                   />
@@ -126,7 +127,7 @@
     <!--
       Controls
      -->
-    <div v-if="contentRef"
+    <div v-if="items && items.length > 0 && contentRef"
       id="timeline-controls"
       :class="dense ? 'q-px-sm' : 'q-px-md'"
       class="row items-center"
@@ -179,10 +180,6 @@ import KPanel from '../KPanel.vue'
 
 // Props
 const props = defineProps({
-  contextId: {
-    type: String,
-    default: undefined
-  },
   service: {
     type: String,
     required: true
@@ -254,6 +251,10 @@ const props = defineProps({
   dense: {
     type: Boolean,
     default: false
+  },
+  timeFormat: {
+    type: String,
+    default: undefined
   }
 })
 
@@ -307,7 +308,10 @@ function getTitle (item) {
 }
 function getTimestamp (item) {
   const time = _.get(item, _.get(props.schema, 'timestampField'))
-  if (time) return `${Time.format(time, 'date.long')} - ${Time.format(time, 'time.long')}`
+  if (!props.timeFormat) {
+    if (time) return `${Time.format(time, 'date.long')} - ${Time.format(time, 'time.long')}`
+  }
+  if (time) return Time.format(time, props.timeFormat)
 }
 function getAuthor (item) {
   return _.get(item, _.get(props.schema, 'authorField'))
@@ -376,7 +380,7 @@ onBeforeUnmount(() => {
   padding-bottom: 8px;
 }
 .k-timeline-heading {
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   font-weight: bold;
 }
 .q-timeline__title {
@@ -384,14 +388,17 @@ onBeforeUnmount(() => {
 }
 .q-timeline__subtitle {
   margin-bottom: 0px;
-  opacity: 0.9;
+  opacity: 1.0; // override default opacity
   text-transform: capitalize;
-  font-weight: 500;
+  font-weight: 400;
 }
 .q-timeline__content {
   padding-bottom: 16px;
   width: 100%;
 }
+.q-timeline__entry {
+  line-height: 18px;
+}
 .q-timeline--comfortable .q-timeline__subtitle {
   width: v-bind(comfortSize);
 }