@kalisio/kdk 2.4.0 → 2.5.1

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="fit row no-wrap">
+    <!-- missions timeline  -->
+    <div :class="wide ? 'col-11' : 'col-12'">
+      <KTimeLine
+        service="messages"
+        :base-query="baseQuery"
+        :filter-query="computedFilterQuery"
+        :processor="process"
+        :schema="schema"
+        :body-renderer="renderer"
+        :side-width="15"
+        @collection-refreshed="onCollectionRefreshed"
+        class="messages-timeline"
+      />
+    </div>
+    <!-- extra space on wider screen -->
+    <div v-if="wide" class="col-1" />
+  </div>
+</template>
+
+<script setup>
+import {
+  Store,
+  composables as kdkCoreComposables
+} from '@kalisio/kdk/core.client'
+import _ from 'lodash'
+import { computed, ref, watch } from 'vue'
+import { i18n } from '../../i18n'
+
+// Props
+const props = defineProps({
+  itemSections: {
+    type: Object,
+    default: () => null
+  },
+  itemActions: {
+    type: Array,
+    default: () => null
+  },
+  tagFields: {
+    type: Object,
+    default: () => {}
+  },
+  messageTypes: {
+    type: Object,
+    required: true
+  },
+  baseQueryProp: {
+    type: Object,
+    default: { $sort: { createdAt: -1 } }
+  }
+})
+
+// Emits
+const emit = defineEmits(['messages-refreshed'])
+
+// Data
+const { dense, wide } = kdkCoreComposables.useScreen()
+const baseQuery = ref({})
+const { filterQuery, hasTimeSelection, hasTagsSelection } =
+  kdkCoreComposables.useCollectionFilter({
+    service: ref('messages'),
+    baseQuery,
+    tagFields: props.tagFields
+  })
+const patternFilter = Store.get('filter')
+const schema = {
+  timestampField: 'createdAt',
+  authorField: 'author',
+  colorField: 'color',
+  decorationField: 'decorations',
+  bodyField: 'body'
+}
+
+// Computed
+const renderer = computed(() => {
+  return {
+    component: 'messages/KMessageCard',
+    actions: props.itemActions,
+    dense: dense.value
+  }
+})
+const computedFilterQuery = computed(() => {
+  return _.merge({}, patternFilter.query, filterQuery.value)
+})
+const filterOffset = computed(() => {
+  let offset = 0
+  if (hasTimeSelection) offset += 36
+  if (hasTagsSelection) offset += 24
+  return `${offset}px`
+})
+
+watch(
+  () => props.tagFields,
+  () => {
+    const query = {}
+    _.forEach(props.tagFields, (values, property) => {
+      _.merge(query, { [property]: { $in: _.keys(values) } })
+    })
+    _.merge(query, props.baseQueryProp)
+    baseQuery.value = query
+  },
+  { immediate: true }
+)
+
+// Functions
+function process (messages) {
+  _.forEach(messages, (message) => {
+    const messageType = message.type
+    // process tags
+    message.decorations = [
+      {
+        component: 'KChip',
+        name: messageType,
+        label: i18n.t(props.messageTypes[messageType].label),
+        color: props.messageTypes[messageType].color,
+        textColor: props.messageTypes[messageType].textColor,
+        icon: props.messageTypes[messageType].icon,
+        dense: true,
+        square: true
+      }
+    ]
+    message.color = props.messageTypes[messageType].color
+  })
+  return messages
+}
+function onCollectionRefreshed (messages) {
+  emit('messages-refreshed', messages)
+}
+</script>
+
+<style lang="scss" scoped>
+.messages-timeline {
+  padding-top: v-bind(filterOffset);
+}
+</style>

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

@@ -0,0 +1,7 @@
+import KMessageCard from './KMessageCard.vue'
+import KMessageComposer from './KMessageComposer.vue'
+
+export {
+  KMessageCard,
+  KMessageComposer
+}

package/core/client/components/screen/KErrorScreen.vue

@@ -8,11 +8,10 @@
 <script setup>
 import _ from 'lodash'
 import config from 'config'
-import { ref } from 'vue'
 import KScreen from './KScreen.vue'
 
 // Data
-const message = ref(_.get(config, 'screens.error.message', 'KErrorScreen.MESSAGE'))
+const message = _.get(config, 'screens.error.message', 'KErrorScreen.MESSAGE')
 const defaultActions = [{
   id: 'go-home-action',
   icon: 'las la-home',
@@ -20,5 +19,5 @@ const defaultActions = [{
   renderer: 'form-button',
   route: { name: 'index' }
 }]
-const actions = ref(_.get(config, 'screens.error.actions', defaultActions))
+const actions = _.get(config, 'screens.error.actions', defaultActions)
 </script>

package/core/client/components/screen/KLogoutScreen.vue

@@ -11,10 +11,12 @@ import config from 'config'
 import { ref } from 'vue'
 import KScreen from './KScreen.vue'
 import { logout } from '../../utils/utils.session.js'
+import { Store } from '../../store.js'
 
 // Data
 const actions = ref(_.get(config, 'screens.logout.actions', []))
+const user = Store.get('user')
 
 // Immediate
-logout()
+if (user) logout()
 </script>

package/core/client/components/screen/KOAuthLoginScreen.vue

@@ -0,0 +1,15 @@
+<template>
+  <KScreen
+    :actions="actions"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import KScreen from './KScreen.vue'
+
+// Data
+const actions = ref(_.get(config, 'screens.login.actions', []))
+</script>

package/core/client/components/screen/KOAuthLogoutScreen.vue

@@ -0,0 +1,33 @@
+<template>
+  <KScreen v-if="!provider"
+    title="KLogoutScreen.TITLE"
+    :actions="actions"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import KScreen from './KScreen.vue'
+import { logout } from '../../utils/utils.session.js'
+import { Store } from '../../store.js'
+
+// Data
+const route = useRoute()
+const actions = ref(_.get(config, 'screens.logout.actions', []))
+// When called with a prameter this means we should logout from the OAuth provider as well
+// In this case we do not show the logout screen as the OAuth provider has its own
+const provider = ref(route.params.provider)
+const user = Store.get('user')
+
+// Hooks
+onMounted(async () => {
+  if (user) await logout()
+  // When called with a prameter this means we should logout from the OAuth provider as well
+  if (provider.value) {
+    location.href = `oauth-logout/${provider.value}`
+  }
+})
+</script>

package/core/client/components/screen/KUnauthorizedScreen.vue

@@ -0,0 +1,16 @@
+<template>
+  <KScreen
+    :title="message"
+    :actions="actions"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import KScreen from './KScreen.vue'
+
+// Data
+const message = _.get(config, 'screens.notAuthorized.message', 'KUnauthorizedScreen.MESSAGE')
+const actions = _.get(config, 'screens.error.actions', [])
+</script>

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

@@ -1,22 +1,21 @@
 <template>
   <KDateTimeRange
     v-model="dateTimeRangeModel"
-    :options="dateTimeRangeOptions"
-    :min="props.min"
-    :max="props.max"
-    :dense="props.dense"
-    :disabled="props.disabled"
+    :min="min"
+    :max="max"
+    :dense="dense"
+    :disabled="disabled"
   />
 </template>
 
 <script setup>
+import moment from 'moment'
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import KDateTimeRange from './KDateTimeRange.vue'
 import { Events } from '../../events'
 import { Time } from '../../time'
-import moment from 'moment'
+import KDateTimeRange from './KDateTimeRange.vue'
 
-const props = defineProps({
+defineProps({
   min: {
     type: String,
     default: () => null,
@@ -49,12 +48,6 @@ const dateTimeRangeModel = ref({
   start: start.toISOString(),
   end: end.toISOString()
 })
-const dateTimeRangeOptions = ref({
-  separator: '-',
-  date: {
-    format: 'DD/MM/YYYY'
-  }
-})
 
 // Watch
 watch(dateTimeRangeModel, (newDateTimeRange, oldDateTimeRange) => {

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

@@ -1,18 +1,10 @@
 <template>
-  <q-btn
-    id="date-button"
-    :icon="icon"
-    :label="label"
-    flat
-    no-caps
-    :disable="disabled"
-    :dense="dense"
-  >
+  <q-btn v-bind="computedButton">
     <q-popup-proxy>
       <q-date
         id="date-picker"
-        v-model="model"
-        v-bind="picker"
+        v-model="computedModel"
+        v-bind="computedPicker"
       />
     </q-popup-proxy>
   </q-btn>
@@ -22,16 +14,30 @@
 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
+  },
+  format: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: String,
+    default: 'las la-calendar'
   },
   disabled: {
     type: Boolean,
@@ -40,6 +46,10 @@ const props = defineProps({
   dense: {
     type: Boolean,
     default: false
+  },
+  initializeIfEmpty: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -50,14 +60,7 @@ const emit = defineEmits(['update:modelValue'])
 const mask = 'YYYY/MM/DD'
 
 // 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,11 +68,38 @@ const model = computed({
     emit('update:modelValue', value)
   }
 })
-const format = computed(() => {
-  return _.get(props.options, 'format', mask)
+const computedButton = computed(() => {
+  // compute format
+  let format = props.format
+  if (_.isEmpty(format)) {
+    const dateFormat = _.get(Time.getFormat(), 'date.short')
+    const yearFormat = _.get(Time.getFormat(), 'year.long')
+    format = `${dateFormat}/${yearFormat}`
+  }
+  // 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: 'date-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 }
+  return _.merge({}, props.picker, picker)
 })
 
+// Immediate
+if (props.initializeIfEmpty && _.isEmpty(props.modelValue) &&
+    _.isEmpty(props.placeholder)) computedModel.value = moment.utc().format(mask)
 </script>

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

@@ -1,20 +1,31 @@
 <template>
-  <div class="row items-center no-wrap">
+  <div
+    class="row items-center no-wrap"
+    :class="{ 'q-gutter-x-xs': dense }"
+  >
     <!-- Date -->
     <KDate
-      v-model="dateModel"
-      :options="dateOptions"
+      v-model="computedDateModel"
+      :picker="computedDatePicker"
+      :format="dateFormat"
+      :placeholder="placeholder"
+      :icon="icon"
       :disabled="disabled"
       :dense="dense"
+      :class="{ 'q-pl-xs': dense, 'q-pl-md': !dense, [dateClass]: true }"
     />
     <!-- Separator -->
     <div v-if="separator">{{ separator }}</div>
     <!-- Time -->
     <KTime
-      v-model="timeModel"
-      :options="timeOptions"
+      v-model="computedTimeModel"
+      :picker="computedTimePicker"
+      :with-seconds="withSeconds"
+      :format="timeFormat"
+      :icon="null"
       :disabled="disabled || dateTime === null"
       :dense="dense"
+      :class="{ 'q-pr-xs': dense, 'q-pr-md': !dense, [timeClass]: true }"
     />
   </div>
 </template>
@@ -38,20 +49,37 @@ const props = defineProps({
       return true
     }
   },
-  timezone: {
+  datePicker: {
+    type: Object,
+    default: () => null
+  },
+  timePicker: {
+    type: Object,
+    default: () => null
+  },
+  withSeconds: {
+    type: Boolean,
+    default: false
+  },
+  dateFormat: {
     type: String,
     default: null
   },
-  options: {
-    type: Object,
-    default: () => {}
+  timeFormat: {
+    type: String,
+    default: null
   },
-  format: {
+  dateClass: {
     type: String,
-    default: 'YYYY/MM/DD HH:mm',
-    validator: (value) => {
-      return !_.isEmpty(value) && value.split(' ').length === 2
-    }
+    default: ''
+  },
+  timeClass: {
+    type: String,
+    default: ''
+  },
+  separator: {
+    type: String,
+    default: '-'
   },
   min: {
     type: String,
@@ -69,6 +97,18 @@ const props = defineProps({
       return true
     }
   },
+  timezone: {
+    type: String,
+    default: null
+  },
+  placeholder: {
+    type: String,
+    default: null
+  },
+  icon: {
+    type: String,
+    default: 'las la-calendar'
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -90,7 +130,7 @@ const dateMask = 'YYYY/MM/DD'
 const timeMask = 'HH:mm:ss'
 
 // Computed
-const dateModel = computed({
+const computedDateModel = computed({
   get: function () {
     return dateTime.value ? dateTime.value.format(dateMask) : null
   },
@@ -98,27 +138,28 @@ const dateModel = computed({
     const { YYYY, MM, DD } = toYMD(value)
     if (!dateTime.value) dateTime.value = moment({ year: YYYY, month: MM, date: DD })
     else dateTime.value.set({ year: YYYY, month: MM, date: DD })
-    emit('update:modelValue', dateTime.value.toISOString())
+    triggerEmit()
   }
 })
-const dateOptions = computed(() => {
-  return _.merge({}, _.get(props.options, 'date'), { picker: { options: checkDate } })
-})
-const timeModel = computed({
+const computedTimeModel = computed({
   get: function () {
     return dateTime.value ? dateTime.value.format(timeMask) : null
   },
   set: function (value) {
     const { HH, mm, ss } = toHMS(value)
     dateTime.value.set({ hour: HH, minute: mm, second: ss })
-    emit('update:modelValue', dateTime.value.toISOString())
+    triggerEmit()
   }
 })
-const timeOptions = computed(() => {
-  return _.merge({}, _.get(props.options, 'time'), { picker: { options: checkTime } })
+const computedDatePicker = computed(() => {
+  let picker = {}
+  if (!_.isEmpty(props.min) || !_.isEmpty(props.max)) picker = { options: checkDate }
+  return _.merge({}, props.datePicker, picker)
 })
-const separator = computed(() => {
-  return _.get(props.options, 'separator')
+const computedTimePicker = computed(() => {
+  let picker = {}
+  if (!_.isEmpty(props.min) || !_.isEmpty(props.max)) picker = { options: checkTime }
+  return _.merge({}, props.timePicker, picker)
 })
 
 // Watch
@@ -147,21 +188,33 @@ function checkDate (date) {
     hour: dateTime.value ? dateTime.value.hour() : 0,
     minute: dateTime.value ? dateTime.value.minute() : 0
   })
-  if (minDateTime.value && dateToCheck.isBefore(minDateTime.value)) return false
-  if (maxDateTime.value && dateToCheck.isAfter(maxDateTime.value)) return false
+  if (dateToCheck.isBefore(minDateTime.value)) return false
+  if (dateToCheck.isAfter(maxDateTime.value)) return false
   return true
 }
 function checkTime (hours, minutes, seconds) {
-  const timeToCheck = moment({
-    year: dateTime.value.year(),
-    month: dateTime.value.month(),
-    date: dateTime.value.date(),
-    hour: hours || dateTime.value.hour(),
-    minute: minutes || dateTime.value.minute(),
-    second: seconds || dateTime.value.second()
-  })
-  if (minDateTime.value && timeToCheck.isBefore(minDateTime.value)) return false
-  if (maxDateTime.value && timeToCheck.isAfter(maxDateTime.value)) return false
+  if (minDateTime.value) {
+    const maxTimeToCheck = moment({
+      year: dateTime.value.year(),
+      month: dateTime.value.month(),
+      date: dateTime.value.date(),
+      hour: Number(hours),
+      minute: Number(minutes) || 59,
+      second: Number(seconds) || 59
+    })
+    if (maxTimeToCheck.isBefore(minDateTime.value)) return false
+  }
+  if (maxDateTime.value) {
+    const minTimeToCheck = moment({
+      year: dateTime.value.year(),
+      month: dateTime.value.month(),
+      date: dateTime.value.date(),
+      hour: Number(hours),
+      minute: Number(minutes) || 0,
+      second: Number(seconds) || 0
+    })
+    if (minTimeToCheck.isAfter(maxDateTime.value)) return false
+  }
   return true
 }
 
@@ -180,6 +233,9 @@ function toHMS (value) {
     ss: value.substring(6, 8)
   }
 }
+const triggerEmit = _.debounce(() => {
+  emit('update:modelValue', dateTime.value.toISOString())
+}, 100)
 
 // Immediate
 if (props.modelValue) dateTime.value = toLocalTimezone(props.modelValue, Time.getFormatTimezone())