@kalisio/kdk 2.1.9 → 2.2.1

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

@@ -26,11 +26,7 @@ import { i18n } from '../../i18n'
 //   unit:
 // }
 
-let canvas = null
-let chart = null
-const unit2axis = new Map()
-
-const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-click'])
+// Props
 const props = defineProps({
   timeSeries: { type: Array, default: () => [] },
   xAxisKey: { type: String, default: 'x' },
@@ -44,19 +40,19 @@ const props = defineProps({
   options: { type: Object, default: () => ({}) }
 })
 
-defineExpose({
-  update,
-  getZoom,
-  exportSeries
-})
+// Emits
+const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-click'])
 
-// data
+// Data
+let canvas = null
+let chart = null
+const unit2axis = new Map()
 const startTime = ref(props.startTime ? moment.utc(props.startTime) : null)
 const endTime = ref(props.endTime ? moment.utc(props.endTime) : null)
 let min = null
 let max = null
 
-// watch
+// Watch
 watch(() => props.timeSeries, update)
 watch(() => props.xAxisKey, update)
 watch(() => props.yAxisKey, update)
@@ -67,7 +63,7 @@ watch(() => props.logarithmic, update)
 watch(() => props.currentTime, update)
 watch(() => props.options, update)
 
-// function
+// Functions
 async function onCanvasRef (ref) {
   if (ref) {
     if (!chart) {
@@ -82,14 +78,10 @@ async function onCanvasRef (ref) {
   }
   canvas = ref
 }
-
-function getUnits (timeSerie) {
+function getUnit (timeSerie) {
   // Falback to base unit
-  const baseUnit = _.get(timeSerie, 'variable.units[0]')
-  // Get default unit for this quantity instead if available
-  const defaultUnit = Units.getDefaultUnit(baseUnit)
-  const unit = (timeSerie.variable.units.includes(defaultUnit) ? defaultUnit : baseUnit)
-  return { unit, baseUnit }
+  const unit = _.get(timeSerie, 'variable.unit')
+  return unit
 }
 function getZoom () {
   const start = moment.utc(_.get(chart, 'scales.x.min'))
@@ -113,13 +105,11 @@ function computeScaleBound (scale, property, min, max) {
     _.set(scale, property, scaleBound(min, max))
   }
 }
-
 async function makeChartConfig () {
   // Order matters as we compute internals like data time range
   const datasets = await makeDatasets()
   const scales = makeScales()
   const annotation = makeAnnotation()
-
   const config = {
     type: 'line',
     data: { datasets },
@@ -145,9 +135,9 @@ async function makeChartConfig () {
               return (x ? `${Time.format(x, 'date.short')} - ${Time.format(x, 'time.long')}` : '')
             },
             label: (context) => {
-              const { baseUnit, unit, label } = context.dataset
+              const { unit, label } = context.dataset
               const y = _.get(context, 'parsed.y')
-              return label + ': ' + Units.format(y, baseUnit, unit)
+              return label + ': ' + Units.format(y, unit)
             }
           }
         },
@@ -200,7 +190,6 @@ async function makeChartConfig () {
   computeScaleBound(scales.x, 'suggestedMax', startTime.value, endTime.value)
   return config
 }
-
 function makeScales () {
   // Setup time ticks unit
   const hours = endTime.value.diff(startTime.value, 'hours')
@@ -248,19 +237,16 @@ function makeScales () {
       }
     }
   }
-
   const scales = { x }
-
   // Build a scale per unit
   unit2axis.clear()
   let axisId = 0
   for (const timeSerie of props.timeSeries) {
-    const { unit, baseUnit } = getUnits(timeSerie)
+    const unit = getUnit(timeSerie)
     if (!unit2axis.has(unit)) {
       const axis = `y${axisId}`
       unit2axis.set(unit, axis)
       scales[axis] = _.merge({
-        baseUnit,
         unit,
         type: props.logarithmic ? 'logarithmic' : 'linear',
         position: (axisId + 1) % 2 ? 'left' : 'right',
@@ -271,7 +257,7 @@ function makeScales () {
         ticks: {
           callback: function (value, index, values) {
             if (values[index] !== undefined) {
-              return Units.format(values[index].value, baseUnit, unit, { symbol: false })
+              return Units.format(values[index].value, unit, null, { symbol: false })
             }
           }
         }
@@ -285,17 +271,15 @@ function makeScales () {
   }
   return scales
 }
-
 async function makeDatasets () {
   const datasets = []
   for (const timeSerie of props.timeSeries) {
     const label = _.get(timeSerie, 'variable.label')
-    const { unit, baseUnit } = getUnits(timeSerie)
+    const unit = getUnit(timeSerie)
     const data = await timeSerie.data
     const dataset = Object.assign({
       label,
       data,
-      baseUnit,
       unit,
       yAxisID: unit2axis.get(unit)
     }, _.omit(_.get(timeSerie, 'variable.chartjs', {}), 'yAxis'))
@@ -332,7 +316,6 @@ async function makeDatasets () {
 
   return datasets
 }
-
 function makeAnnotation () {
   let annotation = {}
   // Is current time visible in chart ?
@@ -360,7 +343,6 @@ function makeAnnotation () {
   }
   return annotation
 }
-
 async function exportSeries (options = {}) {
   let times = []
   for (let i = 0; i < props.timeSeries.length; i++) {
@@ -398,7 +380,6 @@ async function exportSeries (options = {}) {
   downloadAsBlob(csv, _.template(options.filename || i18n.t('KTimeSeriesChart.SERIES_EXPORT_FILE'))(),
     'text/csv;charset=utf-8;')
 }
-
 async function update () {
   if (!canvas) return
   // Reset time/value range
@@ -415,7 +396,6 @@ async function update () {
     chart.update()
   }
 }
-
 async function updateCurrentTime () {
   if (!props.currentTime) return
   update()
@@ -428,4 +408,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
   Events.off('time-current-time-changed', updateCurrentTime)
 })
+
+// Expose
+defineExpose({
+  update,
+  getZoom,
+  exportSeries
+})
 </script>

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

@@ -16,7 +16,7 @@
      -->
     <div v-if="items.length > 0">
       <KScrollArea
-        ref="scrollArea"
+        ref="scrollAreaRef"
         :max-height="scrollHeight"
         @scrolled="onScrolled"
       >
@@ -38,22 +38,22 @@
               v-bind="renderer"
               @item-selected="onItemSelected"
               :class="{
-                'q-pr-xs': dense,
-                'q-pr-sm': !dense
+                'q-pr-xs': hasScrollArea && dense,
+                'q-pr-sm': hasScrollArea && !dense
               }"
             />
           </template>
         </div>
       </KScrollArea>
       <div
-        v-if="scrollAction"
+        v-if="hasScrollAction"
         class="row justify-center"
       >
         <KAction
           id="scroll-action"
           icon="las la-angle-double-down"
           color="accent"
-          size="1rem"
+          size="0.8rem"
           :handler="scrollDown"
         />
       </div>
@@ -90,7 +90,7 @@ const emit = defineEmits(['selection-changed', 'collection-refreshed'])
 const props = defineProps({
   name: {
     type: String,
-    required: true
+    default: undefined
   },
   header: {
     type: Array,
@@ -151,8 +151,9 @@ const props = defineProps({
 })
 
 // Data
-const scrollArea = ref(null)
-const scrollAction = ref(false)
+const scrollAreaRef = ref(null)
+const hasScrollArea = ref(false)
+const hasScrollAction = ref(false)
 const headerHeight = ref(0)
 // Configuration
 const scrollOffset = 350
@@ -160,7 +161,7 @@ const scrollDuration = 250
 
 // Computed
 const rendererComponent = computed(() => loadComponent(props.renderer.component))
-const scrollHeight = computed(() => props.height - headerHeight.value)
+const scrollHeight = computed(() => props.height - headerHeight.value - (hasScrollAction.value ? 24 : 0))
 
 // Always use append mode for columns
 const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } =
@@ -171,25 +172,26 @@ function onHeaderResized (size) {
   headerHeight.value = size.height
 }
 function onScrolled (info) {
+  hasScrollArea.value = info.verticalSize > scrollHeight.value
   if (items.value.length < nbTotalItems.value) {
     if (info.verticalPercentage === 1) {
       if (items.value.length === currentPage.value * props.nbItemsPerPage) currentPage.value++
       refreshCollection()
-      scrollAction.value = true
+      hasScrollAction.value = true
     } else {
-      scrollAction.value = info.verticalSize > scrollHeight.value
+      hasScrollAction.value = hasScrollArea.value
     }
   } else {
     if (info.verticalPercentage === 1) {
-      scrollAction.value = false
+      hasScrollAction.value = false
     } else {
-      scrollAction.value = info.verticalSize > scrollHeight.value
+      hasScrollAction.value = hasScrollArea.value
     }
   }
 }
 function scrollDown () {
-  const position = scrollArea.value.getScrollPosition('vertical')
-  scrollArea.value.setScrollPosition('vertical', position + scrollOffset, scrollDuration)
+  const position = scrollAreaRef.value.getScrollPosition('vertical')
+  scrollAreaRef.value.setScrollPosition('vertical', position + scrollOffset, scrollDuration)
 }
 function onItemSelected (item, section) {
   emit('selection-changed', item, section)
@@ -198,14 +200,15 @@ function onCollectionRefreshed () {
   emit('collection-refreshed', items.value)
 }
 
-// Lifecycle hooks
+// Watch
 watch(items, () => {
   // On reset, reset as well scroll area
-  if (_.isEmpty(items.value) && scrollArea.value) scrollArea.value.setScrollPosition('vertical', 0)
+  if (_.isEmpty(items.value) && scrollAreaRef.value) scrollAreaRef.value.setScrollPosition('vertical', 0)
   // Emit events so that embbeding components can be aware of it
   onCollectionRefreshed()
 })
 
+// Hooks
 onBeforeMount(() => {
   refreshCollection()
   // Whenever the user abilities are updated, update collection as well

package/core/client/components/editor/KModalEditor.vue

@@ -16,14 +16,12 @@
 
 <script>
 import KModal from '../KModal.vue'
-import KScrollArea from '../KScrollArea.vue'
 import KForm from '../form/KForm.vue'
 import { baseModal, service, objectProxy, schemaProxy, baseEditor } from '../../mixins'
 
 export default {
   components: {
     KModal,
-    KScrollArea,
     KForm
   },
   mixins: [

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

@@ -53,8 +53,18 @@
         </div>
       </template>
       <!-- Helper -->
-      <template v-if="helper" v-slot:hint>
-        <span v-html="helper"></span>
+      <template v-if="hasHelper" v-slot:append>
+        <k-action
+          :id="properties.name + '-helper'"
+          :label="helperLabel"
+          :icon="helperIcon"
+          :tooltip="helperTooltip"
+          :url="helperUrl"
+          :dialog="helperDialog"
+          :context="helperContext"
+          @dialog-confirmed="onHelperDialogConfirmed"
+          color="primary"
+        />
       </template>
     </q-field>
     <k-icon-chooser

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

@@ -29,8 +29,18 @@
         </q-dialog>
       </template>
       <!-- Helper -->
-      <template v-if="helper" v-slot:hint>
-        <span v-html="helper"></span>
+      <template v-if="hasHelper" v-slot:append>
+        <k-action
+          :id="properties.name + '-helper'"
+          :label="helperLabel"
+          :icon="helperIcon"
+          :tooltip="helperTooltip"
+          :url="helperUrl"
+          :dialog="helperDialog"
+          :context="helperContext"
+          @dialog-confirmed="onHelperDialogConfirmed"
+          color="primary"
+        />
       </template>
     </q-field>
   </div>

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

@@ -50,8 +50,18 @@
       </q-item>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-select>
 </template>

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

@@ -25,8 +25,18 @@
       />
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-field>
 </template>

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

@@ -25,8 +25,18 @@
       />
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-field>
 </template>

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

@@ -18,8 +18,18 @@
     @update:model-value="onChanged"
   >
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>

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

@@ -30,8 +30,18 @@
     @update:model-value="onFileChanged"
     @rejected="onFileRejected">
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-file>
 </template>

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

@@ -22,13 +22,32 @@
     <!--
       Grouped fields
     -->
-    <template v-for="group in groups" :key="group">
-      <q-expansion-item icon="las la-file-alt" :group="group" :label="$t(group)">
+    <template v-for="(group, id) in groups" :key="id">
+      <q-expansion-item v-show="group.hasFields" icon="las la-file-alt" :group="id">
+        <template v-slot:header>
+          <!-- Label -->
+          <q-item-section>
+            {{ $t(group.label) }}
+          </q-item-section>
+          <!-- Helper -->
+          <q-item-section v-if="group.helper" side >
+            <k-action
+              :id="id + '-helper'"
+              color="primary"
+              :propagate="false"
+              :icon="getHelperIcon(group.helper)"
+              :tooltip="getHelperTooltip(group.helper)"
+              :url="getHelperUrl(group.helper)"
+              :dialog="getHelperDialog(group.helper)"
+            />
+          </q-item-section>
+        </template>
+        <!-- Content -->
         <q-card>
           <q-card-section>
             <template v-for="field in fields" :key="field.name">
-              <slot v-if="field.group === group" :name="'before-' + field.name"/>
-              <slot v-if="field.group === group" :name="field.name">
+              <slot v-if="field.group === id" :name="'before-' + field.name"/>
+              <slot v-if="field.group === id" :name="field.name">
                 <component
                   :ref="onFieldRefCreated"
                   :is="field.component"
@@ -38,7 +57,7 @@
                   :dense="dense"
                   @field-changed="onFieldChanged" />
               </slot>
-              <slot v-if="field.group === group" :name="'after-' + field.name"/>
+              <slot v-if="field.group === id" :name="'after-' + field.name"/>
             </template>
           </q-card-section>
         </q-card>
@@ -50,7 +69,7 @@
 <script setup>
 import _ from 'lodash'
 import logger from 'loglevel'
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { loadComponent } from '../../utils/index.js'
 import { useSchema } from '../../composables'
 
@@ -80,11 +99,20 @@ const emit = defineEmits(['field-changed', 'form-ready'])
 // Data
 const { schema, compile: compileSchema, validate: validateSchema } = useSchema()
 const fields = ref([])
-const groups = ref([])
 const isReady = ref(false)
 const nbReadyFields = ref(0)
 let buildInProgress = false
 
+// Computed
+const groups = computed(() => {
+  if (schema.value && schema.value.groups) {
+    return _.mapValues(schema.value.groups, (group, id) => Object.assign({
+      hasFields: _.find(fields.value, { group: id })
+    }, group))
+  }
+  return {}
+})
+
 // Watch
 watch(() => props.schema, async (value) => {
   logger.debug('[KDK] Schema changed', value)
@@ -146,7 +174,6 @@ function hasFieldError (field, errors) {
 }
 async function build () {
   fields.value = []
-  groups.value = []
   nbReadyFields.value = 0
   isReady.value = false
   if (!props.schema) throw new Error('Cannot build the form without schema')
@@ -165,7 +192,6 @@ async function build () {
     cloneField.required = _.includes(schema.value.required, property) // add extra required info
     // add the field to the list of fields to be rendered
     fields.value.push(cloneField)
-    if (cloneField.group && !groups.value.includes(cloneField.group)) groups.value.push(cloneField.group)
   })
   buildInProgress = false
 }
@@ -226,6 +252,18 @@ async function submitted (object) {
     await field.reference.submitted(object, field.name)
   }
 }
+function getHelperIcon (helper) {
+  return _.get(helper, 'icon', undefined)
+}
+function getHelperTooltip (helper) {
+  return _.get(helper, 'tooltip', '')
+}
+function getHelperUrl (helper) {
+  return _.get(helper, 'url', null)
+}
+function getHelperDialog (helper) {
+  return _.get(helper, 'dialog', null)
+}
 
 // Hooks
 onMounted(async () => {

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

@@ -39,8 +39,18 @@
           :color="iconColor" />
       </template>
       <!-- Helper -->
-      <template v-if="helper" v-slot:hint>
-        <span v-html="helper"></span>
+      <template v-if="hasHelper" v-slot:append>
+        <k-action
+          :id="properties.name + '-helper'"
+          :label="helperLabel"
+          :icon="helperIcon"
+          :tooltip="helperTooltip"
+          :url="helperUrl"
+          :dialog="helperDialog"
+          :context="helperContext"
+          @dialog-confirmed="onHelperDialogConfirmed"
+          color="primary"
+        />
       </template>
     </q-field>
   </div>

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

@@ -52,8 +52,18 @@
       </q-item>
     </template>
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-select>
 </template>
@@ -71,16 +81,27 @@ export default {
       options: []
     }
   },
+  computed: {
+    hasSingleService () {
+      const services = _.uniqBy(this.properties.services, 'service')
+      return services.length === 1
+    }
+  },
   methods: {
+    getServiceForItem (item) {
+      return (this.hasSingleService
+        ? this.properties.services[0]
+        : _.find(this.properties.services, { service: item.service }))
+    },
     getId (item) {
       return _.kebabCase(this.getLabel(item))
     },
     getLabel (item) {
-      const service = _.find(this.properties.services, { service: item.service })
+      const service = this.getServiceForItem(item)
       return _.get(item, service.field || 'name', '')
     },
     getDescription (item) {
-      const service = _.find(this.properties.services, { service: item.service })
+      const service = this.getServiceForItem(item)
       return _.get(item, service.description || 'description', '')
     },
     getIcon (item) {

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

@@ -18,8 +18,18 @@
 
   >
     <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
+    <template v-if="hasHelper" v-slot:append>
+      <k-action
+        :id="properties.name + '-helper'"
+        :label="helperLabel"
+        :icon="helperIcon"
+        :tooltip="helperTooltip"
+        :url="helperUrl"
+        :dialog="helperDialog"
+        :context="helperContext"
+        @dialog-confirmed="onHelperDialogConfirmed"
+        color="primary"
+      />
     </template>
   </q-input>
 </template>