@kalisio/kdk 2.2.2 → 2.3.0

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

@@ -2,28 +2,30 @@
   <div class="column">
     <!-- Banner -->
     <div class="row justify-center">
-      <component :is="logoComponent" />
+      <KContent :content="banner" />
     </div>
     <!-- Version -->
     <KVersion class="q-pa-sm" />
     <!-- Endpoint -->
-    <div class="row justify-center">
+    <div class="q-pb-md row justify-center">
       <cite>{{ $t('KAbout.DOMAIN') }}
-        <a :href="$config('domain')" target="_blank">{{ $config('domain') }}</a>
+        <a :href="domain" target="_blank">{{ domain }}</a>
       </cite>
       <cite>
-        &nbsp;({{ $config('flavor') }})
+        &nbsp;({{ flavor }})
       </cite>
     </div>
-    <!-- separator -->
-    <div class="q-py-md">
-      <q-separator />
+    <!-- Extra content -->
+    <div v-if="content" class="q-pl-md q-pr-md q-pt-md">
+      <KContent :content="content" />
     </div>
+    <!-- Separator -->
+    <q-separator />
     <!-- Actions -->
     <KPanel
       id="actions"
       :content="actions"
-      class="justify-center"
+      class="q-pt-md justify-center"
     />
     <!-- Sponsor -->
     <KSponsor class="q-pt-lg" />
@@ -34,64 +36,15 @@
 import _ from 'lodash'
 import config from 'config'
 import { ref } from 'vue'
-import { i18n } from '../../i18n'
-import { loadComponent } from '../../utils'
-import { getPlatform } from '../../utils/utils.platform'
-import { useVersion } from '../../composables'
+import KContent from '../KContent.vue'
 import KVersion from '../KVersion.vue'
 import KSponsor from '../KSponsor.vue'
 import KPanel from '../KPanel.vue'
 
 // Data
-const { clientVersionName, apiVersionName } = useVersion()
-const platform = getPlatform()
-// logo component
-const logoComponent = ref(loadComponent(_.get(config, 'logoComponent', 'KLogo')))
-// changelog url
-const changelog = _.get(config, 'appChangelog')
-// bug report
-const bugReport = {
-  address: _.get(config, 'publisherContact'),
-  subject: i18n.t('KAbout.BUG_REPORT_SUBJECT', {
-    appName: _.get(config, 'appName'),
-    clientVersion: clientVersionName.value,
-    apiVersion: apiVersionName.value
-  }),
-  body: i18n.t('KAbout.BUG_REPORT_BODY')
-}
-_.forOwn(platform, (value, key) => { bugReport.body += `${key}: ${value}%0D%0A` })
-bugReport.body += `domain: ${_.get(config, 'domain')}%0D%0A`
-bugReport.body += `flavor: ${_.get(config, 'flavor')}%0D%0A`
-// actions
-const defaultActions = [{
-  id: 'platform-info',
-  icon: 'las la-desktop',
-  label: 'KAbout.PLATFORM_INFO',
-  stack: true,
-  dialog: {
-    title: 'KAbout.PLATFORM_INFO',
-    component: 'app/KPlatform',
-    okAction: 'CLOSE',
-    widthPolicy: 'narrow'
-  }
-}]
-if (!_.isNil(bugReport.address)) {
-  defaultActions.unshift({
-    id: 'report-bug',
-    icon: 'las la-bug',
-    label: 'KAbout.BUG_REPORT',
-    stack: true,
-    url: `mailto:${bugReport.address}?subject=${bugReport.subject}&body=${bugReport.body}`
-  })
-}
-if (!_.isNil(changelog)) {
-  defaultActions.unshift({
-    id: 'view-changelog',
-    icon: 'las la-history',
-    label: 'KAbout.VIEW_CHANGELOG',
-    stack: true,
-    url: changelog
-  })
-}
-const actions = ref(_.get(config, 'about.actions', defaultActions))
+const domain = ref(_.get(config, 'domain'))
+const flavor = ref(_.get(config, 'flavor'))
+const banner = ref(_.get(config, 'about.banner', [{ component: 'KLogo' }]))
+const content = ref(_.get(config, 'about.content', []))
+const actions = ref(_.get(config, 'about.actions', []))
 </script>

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

@@ -30,7 +30,7 @@
 import { useQuasar, copyToClipboard } from 'quasar'
 import { i18n } from '../../i18n.js'
 import { getPlatform } from '../../utils/utils.platform'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // data
 const $q = useQuasar()

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

@@ -1,16 +1,18 @@
 <template>
-  <KForm
-    id="settings"
-    ref="formRef"
-    :values="settings"
-    schema="settings.update"
-    :schema-properties="schemaFilter"
-  />
+  <Suspense>
+    <KForm
+      id="settings"
+      ref="formRef"
+      :values="settings"
+      schema="settings.update"
+      :filter="schemaFilter"
+    />
+  </Suspense>
 </template>
 
 <script setup>
 import _ from 'lodash'
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { api } from '../../api.js'
 import KForm from '../form/KForm.vue'
 
@@ -29,12 +31,10 @@ async function apply () {
   }
 }
 
-// Hooks
-onMounted(async () => {
-  settings.value = await serviceSettings.get('settings')
-  const mapping = serviceSettings.getSettingsMapping()
-  schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
-})
+// Immediate
+settings.value = await serviceSettings.get('settings')
+const mapping = serviceSettings.getSettingsMapping()
+schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
 
 // Expose
 defineExpose({

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

@@ -52,13 +52,12 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Store, Events, i18n, beforeGuard } from '../..'
 import { Notify } from 'quasar'
+import { Store, Events, i18n, beforeGuard } from '../..'
 
 // Data
 const router = useRouter()
 const route = useRoute()
-const notify = Notify.create
 const tourRef = ref()
 const tourSteps = ref([])
 const tourOptions = ref({
@@ -83,7 +82,7 @@ const tourCallbacks = ref({
 const isStepVisible = ref(true)
 let isRunning = false
 
-// functions
+// Functions
 function hasLinkButton (step) {
   return _.has(step, 'params.route') && !_.has(step, 'link') // Only if no link label
 }
@@ -277,7 +276,7 @@ function blockOnMiss () {
       if (!getTarget(target)) missing = true
     })
     if (missing) {
-      notify({ type: 'warning', message: i18n.t('KTour.MISS_ERROR') })
+      Notify.create({ type: 'warning', message: i18n.t('KTour.MISS_ERROR') })
     }
   }
   return missing
@@ -416,7 +415,7 @@ function beforeRoute (to, from, next) {
   next()
 }
 
-// hooks
+// Hooks
 onMounted(() => {
   beforeGuard.unregisterGuard = router.beforeEach(beforeRoute)
   refreshTour()
@@ -426,15 +425,14 @@ onBeforeUnmount(() => {
   Events.off('tours-current-changed', setCurrentTour)
 })
 
-// computed
+// Computed
 const step = computed(() => getStep())
 
-// watch
+// Watch
 watch(route, (to, from) => refreshTour())
 
 // immediate
 Events.on('tours-current-changed', setCurrentTour)
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -79,7 +79,7 @@ import { openURL, useQuasar } from 'quasar'
 import { Store, api } from '../..'
 import { loadComponent } from '../../utils'
 import { LocalStorage } from '../../local-storage.js'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Data
 const $q = useQuasar()

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

@@ -1,11 +1,15 @@
 import KAbout from './KAbout.vue'
 import KHome from './KHome.vue'
 import KPlatform from './KPlatform.vue'
+import KSettings from './KSettings.vue'
+import KTour from './KTour.vue'
 import KWelcome from './KWelcome.vue'
 
 export {
   KAbout,
   KHome,
   KPlatform,
+  KSettings,
+  KTour,
   KWelcome
 }

package/core/client/components/chart/KDataTable.vue

@@ -30,32 +30,33 @@ import _ from 'lodash'
 import moment from 'moment'
 import Papa from 'papaparse'
 import { ref, watch } from 'vue'
-import { downloadAsBlob } from '../../utils'
+import { downloadAsBlob, convertTimeSerie } from '../../utils'
 import { useSchema } from '../../composables'
-import { Units } from '../../units'
-import { Time } from '../../time'
-import { i18n } from '../../i18n'
-
-// const timeserie = {
-//   variable: { } variable definition
-//   data:
-//   label:
-//   color:
-//   unit:
-// }
+import { Units } from '../../units.js'
+import { Time } from '../../time.js'
+import { i18n } from '../../i18n.js'
 
+// Props
 const props = defineProps({
-  tables: { type: Array, default: () => [] },
-  schema: { type: [String, Object], default: null },
-  nbRowsPerPage: { type: Number, default: 10 }
-})
-
-defineExpose({
-  update,
-  exportData
+  tables: {
+    type: Array,
+    default: () => []
+  },
+  schema: {
+    type: [String, Object],
+    default: () => null
+  },
+  formatters: {
+    type: Object,
+    default: () => null
+  },
+  nbRowsPerPage: {
+    type: Number,
+    default: 10
+  }
 })
 
-// data
+// Data
 const { schema, compile } = useSchema()
 const pagination = ref({
   // sortBy: '_id',
@@ -70,24 +71,28 @@ const height = ref(0)
 // Used to store template compilers per field
 const compilers = {}
 const exportCompilers = {}
+let propertiesToConvert = []
 
-// computed
-
-// watch
+// Watch
 watch(() => props.tables, update)
 watch(() => props.schema, update)
 
+// Functions
 async function update () {
   await compile(props.schema)
   columns.value = []
   const invisibleColumns = []
+  propertiesToConvert = []
   _.forOwn(schema.value.properties, (value, key) => {
     const type = _.get(value, 'type')
     // FIXME: allow for custom representation of complex objects
     if (type === 'object') return
     const label = _.get(value, 'field.label', _.get(value, 'field.helper', key))
+    const convertToDefaultUnit = _.get(value, 'field.defaultUnit', false)
+    if (convertToDefaultUnit) propertiesToConvert.push(key)
     const visible = _.get(value, 'field.visible', true)
     if (!visible) invisibleColumns.push(key)
+    const formatter = _.has(value, 'field.formatter') ? _.get(props.formatters, value.field.formatter) : null
     const format = _.get(value, 'format')
     const path = _.get(value, 'field.path', key)
     if (_.has(value, 'field.template')) {
@@ -107,6 +112,7 @@ async function update () {
       align: 'center',
       sortable: true,
       format: (value, row) => {
+        if (formatter) return formatter(value, row)
         if (_.isNil(value)) return ''
         if (compilers[key]) return compilers[key]({ value, row, i18n, Units, Time, moment })
         switch (type) {
@@ -129,6 +135,7 @@ async function update () {
   rows.value = []
   for (const table of props.tables) {
     const data = await table.data
+    convertTimeSerie(data, table.variable, propertiesToConvert)
     rows.value = rows.value.concat(data)
   }
 }
@@ -141,6 +148,7 @@ async function exportData (options = {}) {
   for (let i = 0; i < props.tables.length; i++) {
     const table = props.tables[i]
     const data = await table.data
+    await convertTimeSerie(data, table.variable, propertiesToConvert)
     for (const item of data) {
       const row = {}
       _.forOwn(schema.value.properties, (value, key) => {
@@ -173,9 +181,16 @@ async function exportData (options = {}) {
   downloadAsBlob(csv, _.template(options.filename || i18n.t('KDataTable.DATA_EXPORT_FILE'))(), 'text/csv;charset=utf-8;')
 }
 
-// immediate
+// Immediate
 update()
+
+// Exposed
+defineExpose({
+  update,
+  exportData
+})
 </script>
+
 <style lang="scss" scoped>
 .data-table-background {
   background-color: $table-background

package/core/client/components/chart/KTimeSeriesChart.vue

@@ -79,9 +79,10 @@ async function onCanvasRef (ref) {
   canvas = ref
 }
 function getUnit (timeSerie) {
-  // Falback to base unit
-  const unit = _.get(timeSerie, 'variable.unit')
-  return unit
+  return _.get(timeSerie, 'variable.unit')
+}
+function setUnit (timeserie, targetUnit) {
+  _.set(timeserie, 'variable.unit', targetUnit)
 }
 function getZoom () {
   const start = moment.utc(_.get(chart, 'scales.x.min'))
@@ -136,8 +137,9 @@ async function makeChartConfig () {
             },
             label: (context) => {
               const { unit, label } = context.dataset
+              const defaultUnit = Units.getDefaultUnit(unit)
               const y = _.get(context, 'parsed.y')
-              return label + ': ' + Units.format(y, unit)
+              return label + ': ' + Units.format(y, defaultUnit)
             }
           }
         },
@@ -158,7 +160,7 @@ async function makeChartConfig () {
                   backgroundColor: getCssVar('secondary') + '88'
                 },
                 mode: 'x',
-                onZoomStart: onZoomStart,
+                onZoomStart,
                 onZoom: onZoomEnd
               }
             }
@@ -243,21 +245,22 @@ function makeScales () {
   let axisId = 0
   for (const timeSerie of props.timeSeries) {
     const unit = getUnit(timeSerie)
-    if (!unit2axis.has(unit)) {
+    const defaultUnit = Units.getDefaultUnit(unit)
+    if (!unit2axis.has(defaultUnit)) {
       const axis = `y${axisId}`
-      unit2axis.set(unit, axis)
+      unit2axis.set(defaultUnit, axis)
       scales[axis] = _.merge({
-        unit,
+        targetUnit: defaultUnit,
         type: props.logarithmic ? 'logarithmic' : 'linear',
         position: (axisId + 1) % 2 ? 'left' : 'right',
         title: {
           display: true,
-          text: unit
+          text: defaultUnit
         },
         ticks: {
           callback: function (value, index, values) {
             if (values[index] !== undefined) {
-              return Units.format(values[index].value, unit, null, { symbol: false })
+              return Units.format(values[index].value, null, null, { symbol: false })
             }
           }
         }
@@ -276,6 +279,8 @@ async function makeDatasets () {
   for (const timeSerie of props.timeSeries) {
     const label = _.get(timeSerie, 'variable.label')
     const unit = getUnit(timeSerie)
+    const defaultUnit = Units.getDefaultUnit(unit)
+    setUnit(timeSerie, defaultUnit)
     const data = await timeSerie.data
     const dataset = Object.assign({
       label,
@@ -288,8 +293,11 @@ async function makeDatasets () {
     // Update time/value range
     data.forEach(item => {
       const time = moment.utc(_.get(item, xAxisKey))
-
-      const value = _.get(item, yAxisKey)
+      let value = _.get(item, yAxisKey)
+      if (unit !== defaultUnit) {
+        value = Units.convert(value, unit, defaultUnit)
+        _.set(item, yAxisKey, value)
+      }
       if (_.isNil(min) || (value < min)) min = value
       if (_.isNil(max) || (value > max)) max = value
       if (!props.startTime) {

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

@@ -100,7 +100,7 @@
 
 <script>
 import _ from 'lodash'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 import KPanel from '../KPanel.vue'
 import KTextArea from '../KTextArea.vue'
 import KAvatar from '../KAvatar.vue'

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

@@ -78,7 +78,7 @@
 import _ from 'lodash'
 import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
 import { Events } from '../../events.js'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 import KScrollArea from '../KScrollArea.vue'
 import KStamp from '../KStamp.vue'
 import { useCollection } from '../../composables'

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

@@ -72,10 +72,15 @@ export default {
       type: String,
       default: 'KFilter.SEARCH_LABEL'
     },
+    // TODO: keep this props for backward compatibility
     field: {
       type: String,
       default: 'name'
     },
+    fields: {
+      type: [String, Array],
+      default: 'name'
+    },
     description: {
       type: String,
       default: 'description'
@@ -145,7 +150,7 @@ export default {
   },
   created () {
     // Initialize the filter, we keep track of any existing items previously set by another activity
-    this.$store.patch('filter', { field: this.field, pattern: '' })
+    this.$store.patch('filter', { fields: this.fields || this.field, pattern: '' })
   },
   beforeUnmount () {
     this.items = []

package/core/client/components/document/KDocument.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="content">
+    <KHtml v-if="contentType === 'html'"
+      :content="content"
+    />
+    <KMarkdown v-if="contentType === 'md'"
+      :content="content"
+      :options="options"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, watch } from 'vue'
+import { i18n } from '../../i18n.js'
+import KHtml from './KHtml.vue'
+import KMarkdown from './KMarkdown.vue'
+
+// Props
+const props = defineProps({
+  url: {
+    type: String,
+    default: undefined
+  },
+  localize: {
+    type: Boolean,
+    default: true
+  },
+  options: {
+    type: Object,
+    default: () => null
+  }
+})
+
+// Data
+const contentType = ref(null)
+const content = ref(null)
+
+// Function
+function guessContentType () {
+  const index = _.lastIndexOf(props.url, '.')
+  if (index) {
+    return props.url.substring(index + 1)
+  }
+}
+
+// Watch
+watch(() => props.url, async (value) => {
+  if (!_.isEmpty(props.url)) {
+    content.value = null
+    // guess content type
+    contentType.value = guessContentType()
+    if (contentType.value) {
+      let urls
+      // localize file if needed
+      if (props.localize) urls = i18n.localize(props.url)
+      else urls = [props.url]
+      // try to load the content
+      let response
+      for (const url of urls) {
+        try {
+          response = await fetch(url)
+          if (response.ok) {
+            content.value = await response.text()
+            break
+          }
+        } catch (error) {
+          // ignore the error
+        }
+      }
+      if (content.value === null) {
+        logger.error(`[KDK] fetch '${props.url}' failed with error with code: ${response.status}`)
+      }
+    } else {
+      logger.error(`[KDK] cannot guess content type for '${props.url}'`)
+    }
+  } else {
+    content.value = null
+  }
+}, { immediate: true })
+</script>

package/core/client/components/document/KHtml.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="html" v-html="html" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+// Data
+const html = ref(null)
+
+// Props
+const props = defineProps({
+  content: {
+    type: String,
+    default: null
+  }
+})
+
+// Watch
+watch(() => props.content, async (value) => {
+  html.value = props.content
+}, { immediate: true })
+</script>

package/core/client/components/document/KMarkdown.vue

@@ -0,0 +1,37 @@
+<template>
+  <KHtml
+    v-if="html"
+    :content="html"
+  />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import showdown from 'showdown'
+import KHtml from './KHtml.vue'
+
+// Props
+const props = defineProps({
+  content: {
+    type: String,
+    default: undefined
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+// Data
+const html = ref(null)
+
+// Watch
+watch(() => [props.content, props.options], async (value) => {
+  if (props.content) {
+    const converter = new showdown.Converter(props.options)
+    html.value = converter.makeHtml(props.content)
+  } else {
+    html.value = null
+  }
+}, { immediate: true })
+</script>

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

@@ -0,0 +1,9 @@
+import KDocument from './KDocument.vue'
+import KHtml from './KHtml.vue'
+import KMarkdown from './KMarkdown.vue'
+
+export {
+  KDocument,
+  KHtml,
+  KMarkdown
+}

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

@@ -115,7 +115,11 @@ const groups = computed(() => {
 
 // Watch
 watch(() => props.schema, async (value) => {
-  logger.debug('[KDK] Schema changed', value)
+  logger.debug('[KDK] Schema content changed', value)
+  if (value) await build()
+})
+watch(() => props.filter, async (value) => {
+  logger.debug('[KDK] Schema filter changed', value)
   if (value) await build()
 })