@kalisio/kdk 2.4.1 → 2.5.2

package/core/client/components/action/KToggleStickyVisibility.vue

@@ -0,0 +1,41 @@
+<template>
+  <KAction
+    v-if="sticky"
+    v-bind="props"
+    :toggled="state === 'toggled'"
+    :disabled="state === 'disabled'"
+    :handler="toggleSticky"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { actionProps } from '../../utils/index.js'
+import { Layout } from '../../layout.js'
+import KAction from './KAction.vue'
+
+// Props
+const props = defineProps({
+  stickyId: {
+    type: String,
+    required: true
+  },
+  ..._.omit(actionProps, ['url', 'handler', 'dialog', 'route', 'closePopup', 'toggled'])
+})
+
+// Computed
+const sticky = computed(() => {
+  return Layout.findSticky(props.stickyId)
+})
+const state = computed(() => {
+  if (!sticky.value) return 'disabled'
+  if (sticky.value.visible) return 'toggled'
+})
+
+// Functions
+function toggleSticky (context, value) {
+  if (value) Layout.showSticky(props.stickyId)
+  else Layout.hideSticky(props.stickyId)
+}
+</script>

package/core/client/components/action/KToggleWidgetVisibility.vue

@@ -0,0 +1,41 @@
+<template>
+  <KAction
+    v-if="window"
+    v-bind="props"
+    :toggled="state === 'toggled'"
+    :disabled="state === 'disabled'"
+    :handler="toggleWindow"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { actionProps } from '../../utils/index.js'
+import { Layout } from '../../layout.js'
+import KAction from './KAction.vue'
+
+// Props
+const props = defineProps({
+  widgetId: {
+    type: String,
+    required: true
+  },
+  ..._.omit(actionProps, ['url', 'handler', 'dialog', 'route', 'closePopup', 'toggled'])
+})
+
+// Computed
+const window = computed(() => {
+  return _.get(Layout.findWindow(props.widgetId), 'window')
+})
+const state = computed(() => {
+  if (!window.value) return 'disabled'
+  if (window.value.visible && (window.value.current === props.widgetId)) return 'toggled'
+})
+
+// Functions
+function toggleWindow (context, value) {
+  if (value) Layout.openWidget(props.widgetId)
+  else Layout.closeWidget(props.widgetId)
+}
+</script>

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

@@ -1,48 +1,135 @@
 <template>
-  <q-markup-table>
-    <thead class="bg-grey-3">
-      <tr>
-        <th class="text-left">{{ $t('KPlatform.PROPERTY') }}</th>
-        <th>
-          <div class="row items-center">
-            <div>{{ $t('KPlatform.VALUE') }}</div>
-            <q-space />
-            <KAction
-              id="copy-info"
-              icon="las la-copy"
-              tooltip="KPlatform.COPY_INFO"
-              :handler="copy"
-            />
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(value, prop) in platform" :key="prop">
-        <td>{{ prop }}</td>
-        <td>{{ value === true ? $t('YES') : value === false ? $t('NO') : value }}</td>
-      </tr>
-    </tbody>
-  </q-markup-table>
+  <!--
+    User agent && copy action
+  -->
+  <div>
+    <div class="full-width row justify-between items-center q-gutter-x-sm">
+      <div class="q-pa-sm col bg-grey-3">{{ $t('KPlatform.USER_AGENT') }}</div>
+
+        <KAction
+          id="copy-clipboard"
+          icon="las la-copy"
+          :handler="copy"
+          label="KPlatform.COPY_INFO"
+          renderer="fab"
+          color="grey-7"
+        />
+    </div>
+    <div class="q-px-md q-py-sm full-width text-caption">{{ Platform.getData().userAgent }}</div>
+  </div>
+  <!--
+    Application
+  -->
+  <div>
+    <div class="full-width q-pa-sm bg-grey-3">{{ $t('KPlatform.APPLICATION') }}</div>
+    <q-list class="q-pa-sm" separator dense>
+      <template v-for="(value, prop) in applicationProperties()" :key="prop">
+        <q-item>
+          <q-item-section class="text-caption">{{ prop }}</q-item-section>
+          <q-item-section class="text-caption">{{ value === true ? $t('YES') : value === false ? $t('NO') : value }}</q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+    <q-expansion-item
+      :label="$t('KPlatform.PERMISSIONS')"
+      expand-separator
+      dense
+      header-class="bg-grey-2"
+      class="q-pa-sm"
+    >
+      <q-list class="q-pa-sm" separator dense>
+        <template v-for="(value, prop) in Platform.getData().application.permissions" :key="prop">
+          <q-item>
+            <q-item-section class="text-caption">{{ prop }}</q-item-section>
+            <q-item-section class="text-caption">{{ value === 'granted' ? $t('KPlatform.PERMISSION_GRANTED') : $t('KPlatform.PERMISSION_PROMPT') }}</q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+  </q-expansion-item>
+  </div>
+  <!--
+    Browser
+  -->
+  <div>
+    <div class="full-width q-pa-sm bg-grey-3">{{ $t('KPlatform.BROWSER') }}</div>
+    <q-list class="q-pa-sm" separator dense>
+      <template v-for="(value, prop) in browserProperties()" :key="prop">
+        <q-item>
+          <q-item-section class="text-caption">{{ prop }}</q-item-section>
+          <q-item-section class="text-caption">{{ value === true ? $t('YES') : value === false ? $t('NO') : value }}</q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+    <q-expansion-item
+      :label="$t('KPlatform.LOCALE')"
+      expand-separator
+      dense
+      header-class="bg-grey-2"
+      class="q-pa-sm"
+    >
+      <q-list class="q-pa-sm" separator dense>
+        <template v-for="(value, prop) in Platform.getData().browser.locale" :key="prop">
+          <q-item>
+            <q-item-section class="text-caption">{{ prop }}</q-item-section>
+            <q-item-section class="text-caption">{{ value }}</q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+    </q-expansion-item>
+    <q-expansion-item
+      :label="$t('KPlatform.WEBGL')"
+      expand-separator
+      dense
+      header-class="bg-grey-2"
+      class="q-pa-sm"
+    >
+      <q-list class="q-pa-sm" separator dense>
+        <template v-for="(value, prop) in Platform.getData().browser.webgl" :key="prop">
+          <q-item>
+            <q-item-section class="text-caption">{{ prop }}</q-item-section>
+            <q-item-section class="text-caption">{{ value }}</q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+    </q-expansion-item>
+  </div>
+  <!-- System  -->
+  <div>
+    <div class="full-width q-pa-sm bg-grey-3">{{ $t('KPlatform.SYSTEM') }}</div>
+    <q-list class="q-pa-sm" separator dense>
+      <template v-for="(value, prop) in systemProperties()" :key="prop">
+        <q-item>
+          <q-item-section class="text-caption">{{ prop }}</q-item-section>
+          <q-item-section class="text-caption">{{ value === true ? $t('YES') : value === false ? $t('NO') : value }}</q-item-section>
+        </q-item>
+      </template>
+    </q-list>
+  </div>
 </template>
 
 <script setup>
-import { useQuasar, copyToClipboard } from 'quasar'
+import _ from 'lodash'
+import { Notify, copyToClipboard } from 'quasar'
 import { i18n } from '../../i18n.js'
-import { getPlatform } from '../../utils/utils.platform'
+import { Platform } from '../../platform.js'
 import KAction from '../action/KAction.vue'
 
-// data
-const $q = useQuasar()
-const platform = getPlatform()
-
-// function
+// Functions
+function applicationProperties () {
+  return _.pick(Platform.getData('application'), ['mode', 'iframe'])
+}
+function browserProperties () {
+  return _.pick(Platform.getData('browser'), ['name', 'version'])
+}
+function systemProperties () {
+  return Platform.getData('system')
+}
 async function copy () {
   try {
-    await copyToClipboard(JSON.stringify(platform, null, 2))
-    $q.notify({ type: 'positive', message: i18n.t('KPlatform.INFO_COPIED') })
+    await copyToClipboard(JSON.stringify(Platform.getData(), null, 2))
+    Notify.create({ type: 'positive', message: i18n.t('KPlatform.INFO_COPIED') })
   } catch (error) {
-    $q.notify({ type: 'negative', message: i18n.t('KPositionIndicator.CANNOT_COPY_INFO') })
+    Notify.create({ type: 'negative', message: i18n.t('KPositionIndicator.CANNOT_COPY_INFO') })
   }
 }
 </script>

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

@@ -0,0 +1,59 @@
+<template>
+  <q-ajax-bar
+    ref="progressBarRef"
+    position="bottom"
+    :size="size"
+    color="primary"
+    :delay="delay"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Events } from '../../events.js'
+
+// Props
+defineProps({
+  size: {
+    type: String,
+    default: '8px'
+  },
+  delay: {
+    type: Number,
+    default: 250
+  }
+})
+
+// Data
+const progressBarRef = ref(null)
+let nbRequests = 0
+let nbCompletedRequests = 0
+let isProgressBarActive = false
+
+// Functions
+function addRequest (hook) {
+  // Check if this request is a quiet one or not
+  if (hook.params.ignore) return
+  nbRequests++
+  if (progressBarRef.value && !isProgressBarActive && (nbRequests > nbCompletedRequests)) {
+    progressBarRef.value.start()
+    isProgressBarActive = true
+  }
+}
+function addCompletedRequest (hook) {
+  // Check if this request is a quiet one or not
+  if (hook.params.ignore) return
+  nbCompletedRequests++
+  if (progressBarRef.value && isProgressBarActive && (nbRequests <= nbCompletedRequests)) {
+    isProgressBarActive = false
+    progressBarRef.value.stop()
+  }
+}
+
+// Hooks
+onMounted(() => {
+  Events.on('before-hook', hook => { addRequest(hook) })
+  Events.on('after-hook', hook => { addCompletedRequest(hook) })
+  Events.on('error-hook', hook => { addCompletedRequest(hook) })
+})
+</script>

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

@@ -14,6 +14,14 @@ import { ref, onMounted } from 'vue'
 import { api } from '../../api.js'
 import KForm from '../form/KForm.vue'
 
+// Props
+const props = defineProps({
+  filter: {
+    type: Object,
+    default: () => null
+  }
+})
+
 // Data
 const serviceSettings = api.getService('settings')
 const formRef = ref(null)
@@ -33,8 +41,11 @@ 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))
+  if (props.filter) schemaFilter.value = Object.keys(props.filter).filter(value => _.get(props.filter, value))
+  else {
+    const mapping = serviceSettings.getSettingsMapping()
+    schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
+  }
 })
 
 // Immediate

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

@@ -180,7 +180,7 @@ function getTarget (target) {
         // Then retrieve the right index
         if (index < elements.length) element = elements[index]
       } catch (error) {
-        logger.debug('Looking for tour target', error)
+        logger.debug('[KDK] Looking for tour target', error)
       }
     }
   }
@@ -189,7 +189,7 @@ function getTarget (target) {
     try {
       element = document.querySelector(target)
     } catch (error) {
-      logger.debug('Looking for tour target', error)
+      logger.debug('[KDK] Looking for tour target', error)
     }
     // Do not return invisible target
     // FIXME: does not work when element is hidden by parent

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

@@ -43,11 +43,12 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-click'])
+const emit = defineEmits(['zoom-start', 'zoom-end', 'legend-clicked'])
 
 // Data
 let canvas = null
 let chart = null
+const hiddenDatasets = []
 const unit2axis = new Map()
 const hasData = ref(false)
 // Min/Max time (ie for x axis)
@@ -139,6 +140,12 @@ async function makeChartConfig () {
               const y = _.get(context, 'parsed.y')
               return label + ': ' + Units.format(y, targetUnit?.name || unit.name, targetUnit?.name || unit.name)
             }
+          },
+          filter: function (tooltipItem, currentIndex, tooltipItems) {
+            // On zoomed out graph, hovering mouse picks a lot of data for x-axis and displays them all in tooltip.
+            // This returns only first item from each dataset from hover picked items passed
+            // to tooltip, so it can be correctly displayed in tooltip for different datasets
+            return tooltipItems[currentIndex].datasetIndex !== tooltipItems[currentIndex - 1]?.datasetIndex
           }
         },
         annotation,
@@ -178,7 +185,8 @@ async function makeChartConfig () {
               chart.show(index)
               legendItem.hidden = false
             }
-            emit('legend-click', { legendItem, legend })
+            hiddenDatasets[legendItem.text] = legendItem.hidden
+            emit('legend-clicked', legendItem, legend)
           }
         }
       }
@@ -292,6 +300,7 @@ async function makeDatasets () {
       label,
       data,
       unit,
+      hidden: _.get(hiddenDatasets, label, false),
       targetUnit
     }, _.omit(_.get(timeSerie, 'variable.chartjs', {}), 'yAxis'))
     const xAxisKey = _.get(dataset, 'parsing.xAxisKey', props.xAxisKey)
@@ -328,7 +337,6 @@ async function makeDatasets () {
     }
     datasets.push(dataset)
   }
-
   return datasets
 }
 function makeAnnotation () {

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

@@ -7,15 +7,16 @@
     <!--
       Header section
     -->
-    <div v-if="hasHeader">
-      <div v-bind:class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }">
-        <KPanel
-          id="card-header-panel"
-          :content="computedHeader"
-          :context="$props"
-          class="full-width no-wrap"
-        />
-      </div>
+    <div
+      v-if="hasHeader"
+      :class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }"
+    >
+      <KPanel
+        id="card-header-panel"
+        :content="computedHeader"
+        :context="$props"
+        class="full-width no-wrap"
+      />
     </div>
     <!--
       Heading section
@@ -34,7 +35,6 @@
               <KAvatar
                 :subject="item"
                 :size="dense ? 'sm' : 'md'"
-                :contextId="contextId"
                 :options="options"
               />
             </slot>
@@ -51,7 +51,7 @@
     <!--
       Content section
     -->
-    <div v-bind:class="{ 'q-px-sm': dense, 'q-px-md': !dense }">
+    <div :class="{ 'q-px-sm': dense, 'q-px-md': !dense }">
       <slot name="card-content">
         <!-- Visible sections -->
         <KPanel
@@ -70,16 +70,20 @@
     <!--
       Footer section
     -->
-    <div v-if="hasFooter">
-      <q-separator />
-      <div :class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }">
-        <KPanel
-          id="card-footer-panel"
-          :content="computedFooter"
-          :context="$props"
-          class="full-width no-wrap"
-        />
-      </div>
+    <div>
+      <slot name="card-footer">
+        <div v-if="hasFooter">
+          <q-separator />
+          <div :class="{ 'q-px-sm q-pt-xs': dense, 'q-px-md q-pt-sm': !dense }">
+            <KPanel
+              id="card-footer-panel"
+              :content="computedFooter"
+              :context="$props"
+              class="full-width no-wrap"
+            />
+          </div>
+        </div>
+      </slot>
     </div>
     <!--
       Expand action
@@ -133,10 +137,6 @@ export default {
       type: [Object, Array],
       default: () => null
     },
-    avatar: {
-      type: Boolean,
-      default: true
-    },
     shadow: {
       type: Number,
       default: 0,
@@ -155,10 +155,7 @@ export default {
     },
     computedHeader () {
       if (this.header) return this.header
-      const actions = _.filter(this.itemActions, { scope: 'header' })
-      if (_.isEmpty(actions)) return []
-      actions.splice(0, 0, { component: 'QSpace' })
-      return actions
+      return _.filter(this.itemActions, { scope: 'header' })
     },
     hasHeader () {
       return !_.isEmpty(this.computedHeader)
@@ -186,10 +183,7 @@ export default {
     },
     computedFooter () {
       if (this.footer) return this.footer
-      const actions = _.filter(this.itemActions, { scope: 'footer' })
-      if (_.isEmpty(actions)) return []
-      actions.splice(0, 0, { component: 'QSpace' })
-      return actions
+      return _.filter(this.itemActions, { scope: 'footer' })
     },
     hasFooter () {
       return !_.isEmpty(this.computedFooter)

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-separator />
+    <q-separator v-if="!hideSeparator" />
     <!--
       Header section
      -->
@@ -26,30 +26,10 @@
 <script setup>
 import _ from 'lodash'
 import { computed } from 'vue'
+import { CardSectionProps } from '../../utils/utils.items.js'
 
 // Props
-const props = defineProps({
-  title: {
-    type: String,
-    default: ''
-  },
-  actions: {
-    type: Array,
-    default: () => null
-  },
-  actionsFilter: {
-    type: [String, Array],
-    default: () => null
-  },
-  hideHeader: {
-    type: Boolean,
-    default: false
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  }
-})
+const props = defineProps(_.omit(CardSectionProps, ['item']))
 
 // Computed
 const filteredActions = computed(() => {

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

@@ -33,7 +33,6 @@
               :id="item._id"
               :service="service"
               :item="item"
-              :contextId="contextId"
               :is="rendererComponent"
               v-bind="renderer"
               @item-selected="onItemSelected"
@@ -120,10 +119,6 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  contextId: {
-    type: String,
-    default: undefined
-  },
   service: {
     type: String,
     required: true

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

@@ -1,14 +1,15 @@
 <template>
   <KCardSection
-    :title="$t('KDescriptionCardSection.TITLE')"
+    :title="computedTitle"
     :actions="actions"
     :actionsFilter="actionsFilter"
-    :hideHeader="hideHeader"
+    :hide-separator="hideSeparator"
+    :hide-header="hideHeader"
     :dense="dense"
   >
     <KTextArea
-      v-if="description"
-      :text="description"
+      v-if="computedDescription"
+      :text="computedDescription"
       :minHeight="48"
       :dense="dense"
     />
@@ -28,6 +29,7 @@
 import _ from 'lodash'
 import { computed } from 'vue'
 import { CardSectionProps } from '../../utils/utils.items.js'
+import { i18n } from '../../i18n.js'
 import KCardSection from './KCardSection.vue'
 import KTextArea from '../KTextArea.vue'
 
@@ -41,7 +43,10 @@ const props = defineProps({
 })
 
 // Computed
-const description = computed(() => {
+const computedTitle = computed(() => {
+  return _.isEmpty(props.title) ? i18n.t('KDescriptionCardSection.TITLE') : props.title
+})
+const computedDescription = computed(() => {
   return _.get(props.item, props.descriptionPath)
 })
 </script>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="column">
+    <div class="row justify-center">
+      <KTimeFilterView />
+    </div>
+    <div class="row justify-center">
+      <KTagsFilterView />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import KTimeFilterView from './KTimeFilterView.vue'
+import KTagsFilterView from './KTagsFilterView.vue'
+</script>