@kalisio/kdk 2.6.4 → 2.7.0

package/core/client/components/account/index.js

@@ -1,7 +1,5 @@
-import KAccount from './KAccount.vue'
 import KProfile from './KProfile.vue'
 
 export {
-  KAccount,
   KProfile
 }

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

@@ -45,6 +45,7 @@ onMounted(async () => {
   else {
     const mapping = serviceSettings.getSettingsMapping()
     schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
+    if (_.isEmpty(schemaFilter.value)) schemaFilter.value = null
   }
 })
 

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

@@ -17,13 +17,12 @@
 </template>
 
 <script setup>
-import _ from 'lodash'
 import { ref } from 'vue'
 import { i18n } from '../../i18n.js'
 import KGrid from './KGrid.vue'
 
 // Props
-defineProps({
+const props = defineProps({
   columns: {
     type: Array,
     default: () => null
@@ -35,7 +34,9 @@ const columnRefs = ref([])
 
 // Functions
 function getColumn (value) {
-  return _.find(columnRefs.value, { name: value })
+  const index = props.columns.findIndex(column => column.name === value)
+  if (index === -1) return undefined
+  return columnRefs.value[index] || undefined
 }
 function getColumns (values) {
   return values.map(value => getColumn(value))

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

@@ -11,6 +11,7 @@
       <KPanel
         v-if="filteredActions"
         :content="filteredActions"
+        :context="context"
         class="no-wrap"
       />
     </div>

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

@@ -286,6 +286,8 @@ onBeforeMount(() => {
 })
 onBeforeUnmount(() => {
   Events.off('user-abilities-changed', refreshCollection)
+  if (scrollDownRef.value) scrollDownRef.value.refresh.cancel()
+  if (scrollToTopRef.value) scrollToTopRef.value.refresh.cancel()
 })
 
 // Expose

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

@@ -116,7 +116,11 @@ const props = defineProps({
   },
   service: {
     type: String,
-    required: true
+    required: false
+  },
+  getService: {
+    type: Function,
+    required: false
   },
   baseQuery: {
     type: Object,

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

@@ -43,7 +43,7 @@
             <q-timeline-entry :color="getColor(item)">
               <template v-slot:title>
                 <slot name="title">
-                  <div v-if="getTitle(item)" class="text-h6">
+                  <div v-if="getTitle(item)" class="text-h6 ellipsis">
                     {{ getTitle(item) }}
                   </div>
                 </slot>
@@ -243,6 +243,10 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  heading: {
+    type: Boolean,
+    default: true
+  },
   footer: {
     type: [Array, Object],
     default: () => null
@@ -333,6 +337,7 @@ function getColor (item) {
   return _.get(item, _.get(props.schema, 'colorField'))
 }
 function getHeading (item) {
+  if (!props.heading) return null
   const currentTimestamp = moment(_.get(item, _.get(props.schema, 'timestampField')))
   if (!currentTimestamp || !currentTimestamp.isValid()) return false
   const heading = _.capitalize(currentTimestamp.format('MMMM, YYYY'))
@@ -378,6 +383,8 @@ onBeforeMount(() => {
 })
 onBeforeUnmount(() => {
   Events.off('user-abilities-changed', refreshCollection)
+  if (scrollDownRef.value) scrollDownRef.value.refresh.cancel()
+  if (scrollToTopRef.value) scrollToTopRef.value.refresh.cancel()
 })
 </script>
 
@@ -388,6 +395,7 @@ onBeforeUnmount(() => {
 }
 .q-timeline__title {
   margin-bottom: 4px;
+  max-width: 80vw;
 }
 .q-timeline__subtitle {
   margin-bottom: 0px;

package/core/client/components/collection/index.js

@@ -2,7 +2,6 @@ import KCard from './KCard.vue'
 import KCardSection from './KCardSection.vue'
 import KGrid from './KGrid.vue'
 import KItem from './KItem.vue'
-import KHistory from './KHistory.vue'
 import KTable from './KTable.vue'
 
 export {
@@ -10,6 +9,5 @@ export {
   KCardSection,
   KGrid,
   KItem,
-  KHistory,
   KTable
 }

package/core/client/components/form/KChipsField.vue

@@ -46,7 +46,8 @@
             :for="properties.name + '-field'"
             :id="properties.name + '-field'"
             v-model="input"
-            autofocus type="text"
+            :autofocus="hasFocus"
+            type="text"
             :after="inputActions"
             @keyup.enter="onChipAdded()"
           />

package/core/client/components/form/KEmailField.vue

@@ -13,6 +13,7 @@
     :error="hasError"
     :error-message="errorLabel"
     no-error-icon
+    :autofocus="hasFocus"
     bottom-slots
     @blur="onChanged"
     @update:model-value="onChanged"

package/core/client/components/form/KFileField.vue

@@ -11,6 +11,19 @@
       {{ file.name }}
     </q-chip>
   </div>
+  <!-- -->
+  <q-field v-else-if="model"
+    :for="properties.name + '-field'"
+    v-model="model"
+    :label="label"
+    clearable
+    @clear="onFileCleared"
+    :disable="disabled"
+  >
+    <template v-slot:control>
+      {{ displayName }}
+    </template>
+  </q-field>
   <q-file v-else
     :for="properties.name + '-field'"
     v-model="files"
@@ -70,12 +83,21 @@ export default {
   computed: {
     multiple () {
       return _.get(this.properties, 'field.multiple', false)
+    },
+    displayName () {
+      if (_.isArray(this.model)) return _.map(this.model, 'name').join(', ')
+      return _.get(this.model, 'name', '')
     }
   },
   methods: {
     emptyModel () {
       return this.multiple ? [] : null
     },
+    onFileCleared () {
+      this.files = null
+      this.error = ''
+      this.onChanged()
+    },
     getAcceptedTypes () {
       return _.get(this.properties, 'field.mimeTypes', '')
     },
@@ -129,7 +151,6 @@ export default {
       this.onChanged()
     },
     onFileRejected (errs) {
-      console.log(errs)
       const errors = [].concat(errs)
       for (const error of errors) {
         if (error?.failedPropValidation === 'max-files') this.error = i18n.tc('errors.MAX_FILES_REACHED', this.getMaxFiles())

package/core/client/components/form/KForm.vue

@@ -1,6 +1,7 @@
 <template>
   <q-form
     v-if="schema"
+    autofocus
     @submit.prevent="onSubmit"
     class="column"
   >
@@ -295,6 +296,7 @@ onMounted(async () => {
 
 // Expose
 defineExpose({
+  isReady,
   getField,
   fill,
   clear,

package/core/client/components/form/KItemField.vue

@@ -18,6 +18,7 @@
     :error-message="errorLabel"
     :error="hasError"
     :disable="disabled"
+    :autofocus="hasFocus"
     bottom-slots
     :options="options"
     @filter="onSearch"

package/core/client/components/form/KNumberField.vue

@@ -12,6 +12,7 @@
     :disable="disabled"
     :error="hasError"
     :error-message="errorLabel"
+    :autofocus="hasFocus"
     bottom-slot
     @blur="onChanged"
     @update:model-value="onUpdated"

package/core/client/components/form/KPasswordField.vue

@@ -11,6 +11,7 @@
     :disable="disabled"
     :error="hasError"
     :error-message="errorLabel"
+    :autofocus="hasFocus"
     bottom-slots
     :autocomplete="autocomplete"
     @blur="onChanged"

package/core/client/components/form/KPhoneField.vue

@@ -12,6 +12,7 @@
     :disable="disabled"
     :error="hasError"
     :error-message="errorLabel"
+    :autofocus="hasFocus"
     bottom-slots
     @blur="onChanged"
     @update:model-value="onChanged"

package/core/client/components/form/KPropertyItemField.vue

@@ -19,6 +19,7 @@
     :error-message="errorLabel"
     :error="hasError"
     :disable="disabled"
+    :autofocus="hasFocus"
     bottom-slots
     :options="options"
     @filter="onSearch"

package/core/client/components/form/KResolutionField.vue

@@ -31,6 +31,7 @@
           style="max-width: 54px"
           :readonly="readonly"
           :disable="disabled"
+          :autofocus="hasFocus"
           @update:model-value='updateModel()'
         />
         <span class="text-body1">x</span>

package/core/client/components/form/KSelectField.vue

@@ -20,6 +20,7 @@
     :error="hasError"
     :error-message="errorLabel"
     :disable="disabled"
+    :autofocus="hasFocus"
     bottom-slots
     @filter="onFilter"
     @blur="onChanged"
@@ -55,6 +56,13 @@
         {{ scope.opt.label }}
       </span>
     </template>
+    <!-- no options display -->
+    <template v-if="hasNoOption" v-slot:no-option>
+      <p v-if="typeof this.properties.field.noOption === 'string'" class="noOptionText">{{ this.properties.field.noOption }}</p>
+      <Suspense v-else>
+        <component v-if="noOptionComponent" :is="noOptionComponent" v-bind="noOptionsAttributes" />
+      </Suspense>
+    </template>
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
       <k-action
@@ -76,6 +84,7 @@
 import _ from 'lodash'
 import { makeDiacriticPattern } from '../../../common'
 import { baseField } from '../../mixins'
+import { loadComponent } from '../../utils'
 
 export default {
   mixins: [baseField],
@@ -98,6 +107,15 @@ export default {
         })
       }
       return opts
+    },
+    hasNoOption () {
+      return !_.isEmpty(_.get(this.properties.field, 'noOption', {}))
+    },
+    noOptionComponent () {
+      return loadComponent(this.properties.field.noOption.component)
+    },
+    noOptionsAttributes () {
+      return _.omit(this.properties.field.noOption, 'component')
     }
   },
   data () {
@@ -163,3 +181,16 @@ export default {
   }
 }
 </script>
+
+<style lang=scss scoped>
+.noOptionText {
+  margin-bottom: $space-y-base;
+  padding-inline: $space-x-base;
+  text-align: center;
+}
+@media (min-width: $breakpoint-lg-min) {
+  .noOptionText {
+    margin-block: $space-y-base;
+  }
+}
+</style>

package/core/client/components/form/KTagField.vue

@@ -18,6 +18,7 @@
     :error-message="errorLabel"
     :error="hasError"
     :disable="disabled"
+    :autofocus="hasFocus"
     bottom-slots
     :options="options"
     @filter="onSearch"

package/core/client/components/form/KTextField.vue

@@ -13,6 +13,7 @@
     :disable="disabled"
     :error="hasError"
     :error-message="errorLabel"
+    :autofocus="hasFocus"
     bottom-slots
     :debounce="debounce"
     @blur="onChanged"

package/core/client/components/form/KTokenField.vue

@@ -14,6 +14,7 @@
         v-model="fieldValues[i - 1]"
         style="width: 5ch"
         :disable="disabled"
+        :autofocus="hasFocus"
         outlined
         :ref="el => updateFieldRef(el, i - 1)"
         @update:model-value='updateModel(i)'

package/core/client/components/form/KUnitField.vue

@@ -13,6 +13,7 @@
     :error="hasError"
     :error-message="errorLabel"
     :disable="disabled"
+    :autofocus="hasFocus"
     bottom-slots
     @blur="onChanged"
     @update:model-value='onChanged'

package/core/client/components/form/KUrlField.vue

@@ -14,6 +14,7 @@
     :disable="disabled"
     :error="hasError"
     :error-message="errorLabel"
+    :autofocus="hasFocus"
     bottom-slots
   >
     <!-- Helper -->

package/core/client/components/graphics/KIcon.vue

@@ -40,14 +40,13 @@ const computedIconColor = computed(() => {
   return getHtmlColor(props.icon.color, defaultColor)
 })
 const computedOverlay = computed(() => {
-  if (!props.icon && !props.icon.overlay) return
-  return _.omit(props.icon.overlay, ['color', 'rotation'])
+  return _.omit(_.get(props.icon, 'overlay', {}), ['color', 'rotation'])
 })
 const computedOverlayColor = computed(() => {
-  return getHtmlColor(_.get(props.icon.overlay, 'color', defaultColor))
+  return getHtmlColor(_.get(props.icon, 'overlay.color', defaultColor))
 })
 const computedOverlayTransform = computed(() => {
-  return `rotate(${_.get(props.icon.overlay, 'rotation', 0)}deg)`
+  return `rotate(${_.get(props.icon, 'overlay.rotation', 0)}deg)`
 })
 </script>
 

package/core/client/components/layout/KPage.vue

@@ -24,6 +24,7 @@
         :pointer-events="sticky.pointerEvents"
         :position="getStickyPosition(sticky)"
         :offset="getStickyOffset(sticky)"
+        :expand="sticky.expand"
         class="k-sticky"
       >
         <KContent v-bind="sticky" />

package/core/client/components/layout/KWindow.vue

@@ -270,7 +270,7 @@ const widgetHeight = computed(() => {
 })
 
 // Watch
-watch(() => [$q.screen.width, $q.screen.height], (value) => onScreenResized())
+watch(() => [$q.screen.width, $q.screen.height, header.visible, header.size, footer.visible, footer.size], (value) => onScreenResized())
 watch(() => currentWindow.state, (newState, oldState) => refresh(newState, oldState))
 
 // Functions
@@ -322,13 +322,16 @@ function refresh (newState, oldState) {
 }
 function setPinnedGeometry () {
   const size = computeResponsiveSize(currentWindow.sizePolicy.pinned)
+  let height = $q.screen.height
+  if (header.visible) height -= header.size[1]
+  if (footer.visible) height -= footer.size[1]
   let x, y
   if (props.placement === 'top' || props.placement === 'bottom') {
     x = $q.screen.width / 2 - size[0] / 2
-    y = props.placement === 'top' ? 0 : $q.screen.height - size[1]
+    y = props.placement === 'top' ? 0 : height - size[1]
   } else {
     x = props.placement === 'left' ? 0 : $q.screen.width - size[0]
-    y = $q.screen.height / 2 - size[1] / 2
+    y = height / 2 - size[1] / 2
   }
   updateGeometry([x, y], size)
 }

package/core/client/components/messages/KMessageComposer.vue

@@ -9,12 +9,13 @@
           id="composer-fab"
           :icon="getKindIcon(currentType)"
           :color="getKindColor(currentType)"
-          direction="up"
+          direction="right"
           :vertical-actions-align="$q.screen.lt.md ? 'left' : 'center'"
           padding="xs"
         >
           <template v-for="type in availableTypes" :key="type">
             <q-fab-action
+              :id="type + '-option'"
               :icon="getKindIcon(type)"
               :color="getKindColor(type)"
               :label="getKindLabel(type)"

package/core/client/components/messages/KMessagesTimeLine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fit row no-wrap">
+  <div class="row no-wrap">
     <!-- missions timeline  -->
     <div :class="wide ? 'col-11' : 'col-12'">
       <KTimeLine

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

@@ -12,7 +12,6 @@
 
 <script setup>
 import _ from 'lodash'
-import moment from 'moment'
 import { computed } from 'vue'
 import { Time } from '../../time.js'
 import { i18n } from '../../i18n.js'
@@ -69,7 +68,7 @@ const computedButton = computed(() => {
   let format = props.format
   if (_.isEmpty(format)) format = _.get(Time.getFormat(), 'date.short')
   // compute label
-  const label = _.isEmpty(computedModel.value) ? i18n.tie(props.placeholder) : moment(computedModel.value).format(format)
+  const label = _.isEmpty(computedModel.value) ? i18n.tie(props.placeholder) : Time.convertToLocal(computedModel.value).format(format)
   // define button spec
   const spec = {
     id: 'date-button',

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

@@ -34,7 +34,6 @@
 import _ from 'lodash'
 import moment from 'moment'
 import { ref, computed, watch } from 'vue'
-import { toLocalTimezone } from '../../utils/utils.time.js'
 import { Time } from '../../time.js'
 import KDate from './KDate.vue'
 import KTime from './KTime.vue'
@@ -143,7 +142,8 @@ const computedDateModel = computed({
 })
 const computedTimeModel = computed({
   get: function () {
-    return dateTime.value ? dateTime.value.format(timeMask) : null
+    const time = (dateTime.value ? dateTime.value.format(timeMask) : null)
+    return time
   },
   set: function (value) {
     const { HH, mm, ss } = toHMS(value)
@@ -164,18 +164,18 @@ const computedTimePicker = computed(() => {
 
 // Watch
 watch(() => props.modelValue, (value) => {
-  dateTime.value = toLocalTimezone(props.modelValue, Time.getFormatTimezone())
+  dateTime.value = Time.convertToLocal(props.modelValue)
 })
 watch(() => props.timezone, (value) => {
-  dateTime.value = toLocalTimezone(props.modelValue, Time.getFormatTimezone())
-  minDateTime.value = toLocalTimezone(props.min, Time.getFormatTimezone())
-  maxDateTime.value = toLocalTimezone(props.max, Time.getFormatTimezone())
+  dateTime.value = Time.convertToLocal(props.modelValue)
+  minDateTime.value = Time.convertToLocal(props.min)
+  maxDateTime.value = Time.convertToLocal(props.max)
 })
 watch(() => props.min, (value) => {
-  minDateTime.value = toLocalTimezone(props.min, Time.getFormatTimezone())
+  minDateTime.value = Time.convertToLocal(props.min)
 })
 watch(() => props.max, (value) => {
-  maxDateTime.value = toLocalTimezone(props.max, Time.getFormatTimezone())
+  maxDateTime.value = Time.convertToLocal(props.max)
 })
 
 // Functions
@@ -238,7 +238,7 @@ const triggerEmit = _.debounce(() => {
 }, 100)
 
 // Immediate
-if (props.modelValue) dateTime.value = toLocalTimezone(props.modelValue, Time.getFormatTimezone())
-if (props.min) minDateTime.value = toLocalTimezone(props.min, Time.getFormatTimezone())
-if (props.max) maxDateTime.value = toLocalTimezone(props.max, Time.getFormatTimezone())
+if (props.modelValue) dateTime.value = Time.convertToLocal(props.modelValue)
+if (props.min) minDateTime.value = Time.convertToLocal(props.min)
+if (props.max) maxDateTime.value = Time.convertToLocal(props.max)
 </script>

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

@@ -74,7 +74,7 @@ const computedButton = computed(() => {
   if (_.isEmpty(format)) format = _.get(Time.getFormat(), 'time.long')
   // compute label
   let label
-  if (!_.isEmpty(computedModel.value)) label = moment(computedModel.value, mask).format(format)
+  if (!_.isEmpty(computedModel.value)) label = moment.tz(computedModel.value, mask, Time.getFormatTimezone()).format(format)
   else label = i18n.tie(props.placeholder)
   // define button spec
   const spec = {

package/core/client/composables/collection.js

@@ -36,7 +36,7 @@ export function useCollection (options) {
 
   // Functions
   function getService () {
-    const service = api.getService(options.service.value, options.contextId ? options.contextId.value : null)
+    const service = options.getService?.value ? options.getService.value() : api.getService(options.service.value, options.contextId ? options.contextId.value : null)
     if (!service) {
       throw new Error('Cannot retrieve target service ' + options.service.value)
     }
@@ -111,18 +111,22 @@ export function useCollection (options) {
     }
   }
 
-  const refreshCollection = _.throttle(() => {
-    const fullQuery = {
+  function getFullQuery () {
+    return {
       $locale: getLocale(),
       ...getCollectionBaseQuery(),
       ...getCollectionFilterQuery(),
       ...getCollectionPaginationQuery()
     }
+  }
+
+  const refreshCollection = _.throttle(() => {
+    const fullQuery = getFullQuery()
     subscribe(fullQuery)
   }, options.refreshThrottle.value, { leading: false })
 
   function resetCollection () {
-    // Do not reset the collection since it is initializing 
+    // 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([])
@@ -134,9 +138,30 @@ export function useCollection (options) {
     // When we append items some items of the previous pages might have been updated.
     // In this case we need to reset the full collection as Rx only tracks changes on the current page
     updatedItems = (Array.isArray(updatedItems) ? updatedItems : [updatedItems])
-    // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
-    updatedItems = _.intersectionWith(items.value, updatedItems, (item1, item2) => item1._id && item2._id && (item1._id.toString() === item2._id.toString()))
-    if (updatedItems.length > 0) resetCollection()
+    // Update the required items
+    for (const updatedItem of updatedItems) {
+      const item = _.find(items.value, item => {
+        return updatedItem._id && item._id && (updatedItem._id.toString() === item._id.toString())
+      })
+      if (item) Object.assign(item, updatedItem)
+    }
+    // Some items might not match the query anymore so that we should remove it
+    const matcher = api.matcher(getFullQuery())
+    const matchedItems = updatedItems.filter(matcher)
+    const itemsToRemove = _.differenceBy(updatedItems, matchedItems, item => item._id ? item._id.toString() : null)
+    onItemsRemoved(itemsToRemove)
+  }
+
+  function onItemsRemoved (removedItems) {
+    // When we append items some items of the previous pages might have been updated.
+    // In this case we need to reset the full collection as Rx only tracks changes on the current page
+    removedItems = (Array.isArray(removedItems) ? removedItems : [removedItems])
+    // Remove the required items
+    for (const removedItem of removedItems) {
+      _.remove(items.value, item => {
+        return removedItem._id && item._id && (removedItem._id.toString() === item._id.toString())
+      })
+    }
   }
 
   // Lifecycle hooks
@@ -154,7 +179,7 @@ export function useCollection (options) {
       serviceEventListeners = listenToServiceEvents(getService(), {
         patched: onItemsUpdated,
         updated: onItemsUpdated,
-        removed: onItemsUpdated
+        removed: onItemsRemoved
       })
     }
   })

package/core/client/composables/errors.js

@@ -23,7 +23,7 @@ export function useErrors () {
     // Check if user can retry to avoid this error
     if (error.retryHandler) {
       notification.actions = [{
-        label: this.$t('RETRY'),
+        label: i18n.tie('RETRY'),
         handler: error.retryHandler
       }]
       // Increase timeout so that user has a chance to retry