@kalisio/kdk 2.1.9 → 2.2.0

package/core/client/components/media/KColorScale.vue

@@ -10,9 +10,10 @@
 
 <script setup>
 import _ from 'lodash'
+import * as math from 'mathjs'
 import { computed, watch, onMounted } from 'vue'
 import { uid } from 'quasar'
-import chroma from 'chroma-js'
+import { buildColorScale } from '../../utils/utils.colors'
 
 // props
 const props = defineProps({
@@ -21,7 +22,7 @@ const props = defineProps({
     default: undefined
   },
   colors: {
-    type: String,
+    type: [String, Array],
     default: 'OrRd'
   },
   domain: {
@@ -50,7 +51,8 @@ const props = defineProps({
         ticks: {
           size: 10,
           font: 'Arial',
-          color: 'black'
+          color: 'black',
+          format: { notation: 'auto', precision: 3 }
         }
       }
     }
@@ -64,14 +66,14 @@ const props = defineProps({
   }
 })
 
-// data
+// Data
 const canvasId = uid()
 let canvas = null
 let canvasContext = null
 let expectedSize = null
 const callRefresh = _.debounce(() => { refresh() }, 200)
 
-// computed
+// Computed
 const labelSize = computed(() => {
   return _.get(props.layout, 'label.size', 12)
 })
@@ -91,7 +93,7 @@ const barWidth = computed(() => {
   return _.get(props.layout, 'bar.width', props.direction === 'vertical' ? 16 : undefined)
 })
 const ticksSize = computed(() => {
-  return _.get(props.layout, 'ticks.size', 8)
+  return _.get(props.layout, 'ticks.size', 10)
 })
 const ticksFont = computed(() => {
   return ticksSize.value + 'px ' + _.get(props.layout, 'ticks.font', 'Arial')
@@ -102,7 +104,11 @@ const ticksColor = computed(() => {
 const gutter = computed(() => {
   return _.get(props.layout, 'gutter', 4)
 })
-// functions
+
+// Functions
+function formatTick (tick) {
+  return math.format(tick, props.layout.ticks.format)
+}
 function drawLabel () {
   if (_.isNil(props.label)) return
   canvasContext.font = labelFont.value
@@ -111,7 +117,7 @@ function drawLabel () {
   let xLabel = canvas.width
   switch (labelAlign.value) {
     case 'left':
-      xLabel = 0
+    xLabel = 0
       break
     case 'center':
       xLabel = canvas.width / 2
@@ -126,9 +132,9 @@ function drawDiscreteHorizontalScale () {
   const yBar = _.isNil(props.label) ? 0 : labelSize.value + gutter.value
   const length = props.classes.length - 1
   const boxWidth = canvas.width / length
-  const classToColor = chroma.scale(props.colors).classes(props.classes)
+  const colorScale = buildColorScale(props)
   for (let i = 0; i < length; i++) {
-    canvasContext.fillStyle = classToColor(props.classes[i])
+    canvasContext.fillStyle = colorScale(props.classes[i])
     canvasContext.fillRect(i * boxWidth, yBar, boxWidth, barHeight.value)
   }
   // draw ticks
@@ -140,16 +146,16 @@ function drawDiscreteHorizontalScale () {
     if (i === 0) {
       if (props.classes[i] !== Number.MIN_VALUE) {
         canvasContext.textAlign = 'left'
-        tick = props.classes[i]
+        tick = formatTick(props.classes[i])
       }
     } else if (i === props.classes.length - 1) {
       if (props.classes[i] !== Number.MAX_VALUE) {
         canvasContext.textAlign = 'right'
-        tick = props.classes[i]
+        tick = formatTick(props.classes[i])
       }
     } else {
       canvasContext.textAlign = 'center'
-      tick = props.classes[i]
+      tick = formatTick(props.classes[i])
     }
     if (tick) canvasContext.fillText(tick, i * boxWidth, yTicks)
   }
@@ -160,9 +166,9 @@ function drawDiscreteVerticalScale () {
   const yBar = _.isNil(props.label) ? 0 : labelSize.value + gutter.value
   const length = props.classes.length - 1
   const boxHeight = (canvas.height - yBar) / length
-  const classToColor = chroma.scale(props.colors).classes(props.classes)
+  const colorScale = buildColorScale(props)
   for (let i = 0; i < length; i++) {
-    canvasContext.fillStyle = classToColor(props.classes[i])
+    canvasContext.fillStyle = colorScale(props.classes[i])
     canvasContext.fillRect(0, yBar + (length - i - 1) * boxHeight, barWidth.value, boxHeight)
   }
   // draw ticks
@@ -173,10 +179,10 @@ function drawDiscreteVerticalScale () {
   for (let i = 0; i < props.classes.length; ++i) {
     let tick
     if (i === 0) {
-      if (props.classes[i] !== Number.MIN_VALUE) tick = props.classes[i]
+      if (props.classes[i] !== Number.MIN_VALUE) tick = formatTick(props.classes[i])
     } else if (i === props.classes.length - 1) {
-      if (props.classes[i] !== Number.MAX_VALUE) tick = props.classes[i]
-    } else tick = props.classes[i]
+      if (props.classes[i] !== Number.MAX_VALUE) tick = formatTick(props.classes[i])
+    } else tick = formatTick(props.classes[i])
     if (tick) canvasContext.fillText(tick, x, yBar + (length - i) * boxHeight + ticksSize.value / 2)
   }
 }
@@ -185,7 +191,7 @@ function drawContinuousHorizontalScale () {
   // draw colorbar
   const yBar = _.isNil(props.label) ? 0 : labelSize.value + gutter.value
   const length = canvas.width
-  const colors = chroma.scale(props.colors).colors(length)
+  const colors = buildColorScale(props).colors(length)
   for (let i = 0; i < length; i++) {
     canvasContext.fillStyle = colors[i]
     canvasContext.fillRect(i, yBar, 1, barHeight.value)
@@ -204,7 +210,7 @@ function drawContinuousVerticalScale () {
   // draw colorbar
   const yBar = _.isNil(props.label) ? 0 : labelSize.value + gutter.value
   const length = canvas.height - yBar
-  const colors = chroma.scale(props.colors).colors(length)
+  const colors = buildColorScale(props).colors(length)
   for (let i = 0; i < length; i++) {
     canvasContext.fillStyle = colors[i]
     canvasContext.fillRect(0, yBar + length - i, barWidth.value, 1)

package/core/client/components/media/KImageViewer.vue

@@ -1,44 +1,68 @@
 <template>
-  <div v-if="interactive === true" class="fit" >
-    <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center" @change="$emit('image-transformed')">
+  <div>
+    <div v-if="interactive === true" class="fit" >
+      <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center" @change="$emit('image-transformed')">
+        <img :src="source" style="max-width:100%; max-height:100%" :onload="onLoaded" />
+      </pinch-zoom>
+
+    </div>
+    <div v-else class="fit row justify-center items-center">
       <img :src="source" style="max-width:100%; max-height:100%" />
-    </pinch-zoom>
-  </div>
-  <div v-else class="fit row justify-center items-center">
-    <img :src="source" style="max-width:100%; max-height:100%" />
+    </div>
+    <q-spinner
+      class="absolute-center"
+      v-if="loading"
+      color="white"
+      size="3em"
+    />
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue'
 import 'pinch-zoom-element/dist/pinch-zoom.js'
 
-export default {
-  props: {
-    source: {
-      type: String,
-      default: ''
-    },
-    interactive: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['image-transformed'],
-  methods: {
-    restore () {
-      const controller = document.querySelector('.pinch-zoom-controller')
-      if (controller) {
-        controller.setTransform({
-          scale: 1,
-          x: 0,
-          y: 0,
-          allowChangeEvent: true
-        })
-      }
-    }
+// Props
+defineProps({
+  source: {
+    type: String,
+    default: ''
   },
-  mounted () {
-    this.restore()
+  interactive: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emit
+defineEmits(['image-transformed'])
+
+// Data
+const loading = ref(true)
+
+// Functions
+function restore () {
+  const controller = document.querySelector('.pinch-zoom-controller')
+  if (controller) {
+    controller.setTransform({
+      scale: 1,
+      x: 0,
+      y: 0,
+      allowChangeEvent: true
+    })
   }
 }
+function onLoaded () {
+  loading.value = false
+}
+
+// Hooks
+onMounted(() => {
+  restore()
+})
+
+// Expose
+defineExpose({
+  restore
+})
 </script>

package/core/client/components/media/KShape.vue

@@ -1,57 +1,6 @@
 <template>
   <div>
-    <svg :width="width" :height="height" style="display:block">
-      <circle
-        v-if="type === 'circle'"
-        :cx="width/2"
-        :cy="height/2"
-        :r="(Math.min(height, width)/2)-borderWidth"
-        class="k-shape"
-      />
-      <ellipse
-        v-if="type === 'ellipse'"
-        :cx="width/2"
-        :cy="height/2"
-        :rx="(width/2)-borderWidth"
-        :ry="(height/2)-borderWidth"
-        class="k-shape"
-      />
-      <rect
-        v-if="type === 'rect'"
-        :x="borderWidth"
-        :y="borderWidth"
-        :width="width-(2*borderWidth)"
-        :height="height-(2*borderWidth)"
-        :rx="borderRadius"
-        :ry="borderRadius"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-up'"
-        :points="`${width/2},${borderWidth} ${borderWidth},${height-borderWidth} ${width-borderWidth},${height-borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-down'"
-        :points="`${width/2},${height-borderWidth} ${borderWidth},${borderWidth} ${width-borderWidth},${borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-right'"
-        :points="`0,0 0,${height} ${width},${height/2}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-left'"
-        :points="`0,${(height-borderWidth)/2} ${width-borderWidth},${height-borderWidth} ${width-borderWidth},${borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'diamond'"
-        :points="`${width/2},${height-borderWidth} ${width-borderWidth},${height/2} ${width/2},${borderWidth} ${borderWidth},${height/2}`"
-        class="k-shape"
-      />
-    </svg>
+    <div v-if="content" v-html="content" />
     <q-tooltip v-if="tooltip">
       {{ tooltip }}
     </q-tooltip>
@@ -59,62 +8,24 @@
 </template>
 
 <script setup>
-import { getCssVar } from 'quasar'
+import { computed } from 'vue'
+import { createShape } from '../../utils/utils.shapes.js'
 
-// props
-defineProps({
-  type: {
-    type: String,
-    default: 'circle',
-    validator: (value) => {
-      return ['circle', 'ellipse', 'rect', 'triangle-up', 'triangle-down', 'triangle-right', 'triangle-left', 'diamond'].includes(value)
-    }
-  },
-  width: {
-    type: Number,
-    default: 18
-  },
-  height: {
-    type: Number,
-    default: 18
-  },
-  color: {
-    type: String,
-    default: getCssVar('primary')
-  },
-  opacity: {
-    type: Number,
-    default: 1
-  },
-  borderColor: {
-    type: String,
-    default: 'black'
-  },
-  borderWidth: {
-    type: Number,
-    default: 1
-  },
-  borderRadius: {
-    type: Number,
-    default: 0
-  },
-  dashArray: {
-    type: String,
-    default: ''
+// Props
+const props = defineProps({
+  options: {
+    type: Object,
+    required: true
   },
   tooltip: {
     type: String,
     default: undefined
   }
 })
-</script>
 
-<style lang="scss" scoped>
-.k-shape {
-  fill: v-bind(color);
-  fill-opacity: v-bind(opacity);
-  stroke: v-bind(borderColor);
-  stroke-width: v-bind(borderWidth);
-  stroke-dasharray: v-bind(dashArray);
-}
-</style>
+// Computed
+const content = computed(() => {
+  const shape = createShape(props.options)
+  return shape ? shape.html : undefined
+})
+</script>

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

@@ -87,7 +87,6 @@ function getFormSchema () {
         field: {
           component: 'form/KToggleField',
           label: i18n.t('KRegisterScreen.ACCEPT_TERMS_LABEL'),
-          helper: i18n.t('KRegisterScreen.ACCEPT_TERMS_HELPER', { domain }),
           errorLabel: i18n.t('KRegisterScreen.ACCEPT_TERMS_ERROR_LABEL', { domain }),
           'checked-icon': 'check',
           'unchecked-icon': 'clear'

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

@@ -2,31 +2,13 @@
   <div class="q-pa-sm column justify-center q-gutter-sm">
     <!-- Version -->
     <KVersion />
-    <!-- Endpoint -->
-    <div v-if="canChangeEndpoint" class="row justify-center">
-      <KAction
-        class="text-caption"
-        id="change-endpoint"
-        label="KScreen.CHANGE_ENDPOINT_LINK"
-        :route="{name: 'change-endpoint'}"
-      />
-    </div>
     <!-- Sponsor -->
     <KSponsor />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useQuasar } from 'quasar'
-import { useVersion } from '../../composables'
 import KVersion from '../KVersion.vue'
-import KAction from '../KAction.vue'
 import KSponsor from '../KSponsor.vue'
 
-// Data
-const $q = useQuasar()
-const { Version } = useVersion()
-const canChangeEndpoint = ref(false)
-if (Version.value.flavor === 'dev' || $q.platform.is.cordova) canChangeEndpoint.value = true
 </script>

package/core/client/components/team/KAddMember.vue

@@ -85,10 +85,12 @@
 
 <script>
 import _ from 'lodash'
-import logger from 'loglevel'
 import { Dialog, exportFile } from 'quasar'
 import { baseModal } from '../../mixins'
 import { getLocale } from '../../utils'
+import { api } from '../../api.js'
+import { Store } from '../../store.js'
+import { i18n } from '../../i18n.js'
 import { RoleNames } from '../../../common/permissions'
 import KModal from '../KModal.vue'
 import KForm from '../form/KForm.vue'
@@ -315,19 +317,11 @@ export default {
               flat: true
             }
           }).onOk(async () => {
-            try {
-              await this.processRecords(records)
-            } catch (error) {
-              logger.error(error)
-            }
+            this.processRecords(records)
             this.closeModal()
           })
         } else {
-          try {
-            await this.processRecords(records)
-          } catch (error) {
-            logger.error(error)
-          }
+          this.processRecords(records)
           this.closeModal()
         }
       }
@@ -335,44 +329,44 @@ export default {
     },
     async processRecords (records) {
       const report = {}
-      for (let i = 0; i < records.length; ++i) {
+      for (let i = 0; i < records.length; i++) {
         const record = records[i]
-        report[record.name] = await this.processRecord(record)
+        report[record.name] = await this.processRecord(record, this.contextId)
       }
       exportFile('report.json', JSON.stringify(report, null, '\t'))
     },
-    async processRecord (record) {
+    async processRecord (record, contextId) {
       // Check whether the guest has already an acount
-      const usersService = this.$api.getService('users')
+      const usersService = api.getService('users')
       const response = await usersService.find({ query: { email: record.email } })
       if (response.total === 1) {
         // Check whether the user belong to the organisation
         const user = response.data[0]
-        if (_.find(user.organisations, { _id: this.contextId })) return this.$t('KAddMember.ALREADY_MEMBER_ERROR')
+        if (_.find(user.organisations, { _id: contextId })) return i18n.t('KAddMember.ALREADY_MEMBER_ERROR')
         // Add the person
-        const authorisationService = this.$api.getService('authorisations')
+        const authorisationService = api.getService('authorisations')
         await authorisationService.create({
           scope: 'organisations',
           permissions: record.role,
           subjects: user._id,
           subjectsService: 'users',
-          resource: this.contextId,
+          resource: contextId,
           resourcesService: 'organisations'
         })
-        return this.$t('KAddMember.USER_ADDED_MESSAGE')
+        return i18n.t('KAddMember.USER_ADDED_MESSAGE')
       } else {
         const guest = {
           locale: getLocale(),
           sponsor: {
-            id: this.$store.get('user._id'),
-            organisationId: this.contextId,
+            id: Store.get('user._id'),
+            organisationId: contextId,
             roleGranted: record.role
           },
           name: record.name,
           email: record.email
         }
         await usersService.create(guest)
-        return this.$t('KAddMember.GUEST_ADDED_MESSAGE')
+        return i18n.t('KAddMember.GUEST_ADDED_MESSAGE')
       }
     }
   },

package/core/client/components/team/KGroupsActivity.vue

@@ -37,6 +37,7 @@ import KStamp from '../KStamp.vue'
 
 import _ from 'lodash'
 import { baseActivity } from '../../mixins'
+import { Exporter } from '../../exporter.js'
 
 export default {
   name: 'groups-activity',
@@ -61,6 +62,19 @@ export default {
         component: 'team/KGroupCard'
       }, this.activityOptions.items)
     }
+  },
+  methods: {
+    exportGroups () {
+      Exporter.export({
+        service: 'groups',
+        context: this.contextId,
+        formats: [
+          { label: 'CSV', value: 'csv' },
+          { label: 'JSON', value: 'json' }
+        ],
+        gzip: false
+      })
+    }
   }
 }
 </script>

package/core/client/components/team/KMembersActivity.vue

@@ -33,6 +33,7 @@ import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 import { baseActivity } from '../../mixins'
 import { getRoleForOrganisation } from '../../../common/permissions'
+import { Exporter } from '../../exporter.js'
 
 const activityMixin = baseActivity()
 
@@ -105,6 +106,17 @@ export default {
       const usersService = this.$api.getService('users')
       usersService.off('patched', this.refresh)
     },
+    exportMembers () {
+      Exporter.export({
+        service: 'members',
+        context: this.contextId,
+        formats: [
+          { label: 'CSV', value: 'csv' },
+          { label: 'JSON', value: 'json' }
+        ],
+        gzip: false
+      })
+    },
     refresh (user) {
       const grid = this.$refs.membersGrid
       if (grid) {

package/core/client/components/team/KTagsActivity.vue

@@ -32,6 +32,7 @@ import KPage from '../layout/KPage.vue'
 import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 import { baseActivity } from '../../mixins'
+import { Exporter } from '../../exporter.js'
 
 export default {
   name: 'tags-activity',
@@ -56,6 +57,19 @@ export default {
         component: 'team/KTagCard'
       }, this.activityOptions.items)
     }
+  },
+  methods: {
+    exportTags () {
+      Exporter.export({
+        service: 'tags',
+        context: this.contextId,
+        formats: [
+          { label: 'CSV', value: 'csv' },
+          { label: 'JSON', value: 'json' }
+        ],
+        gzip: false
+      })
+    }
   }
 }
 </script>

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

@@ -7,6 +7,8 @@
       :disabled="disabled"
       :dense="dense"
     />
+    <!-- Separator -->
+    <div v-if="separator">{{ separator }}</div>
     <!-- Time -->
     <KTime
       v-model="timeModel"
@@ -21,6 +23,8 @@
 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'
 
@@ -34,6 +38,10 @@ const props = defineProps({
       return true
     }
   },
+  timezone: {
+    type: String,
+    default: null
+  },
   options: {
     type: Object,
     default: () => {}
@@ -109,16 +117,24 @@ const timeModel = computed({
 const timeOptions = computed(() => {
   return _.merge({}, _.get(props.options, 'time'), { picker: { options: checkTime } })
 })
+const separator = computed(() => {
+  return _.get(props.options, 'separator')
+})
 
 // Watch
 watch(() => props.modelValue, (value) => {
-  dateTime.value = moment.utc(value).local()
+  dateTime.value = toLocalTimezone(props.modelValue, Time.getFormatTimezone())
+})
+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())
 })
 watch(() => props.min, (value) => {
-  minDateTime.value = moment.utc(value).local()
+  minDateTime.value = toLocalTimezone(props.min, Time.getFormatTimezone())
 })
 watch(() => props.max, (value) => {
-  maxDateTime.value = moment.utc(value).local()
+  maxDateTime.value = toLocalTimezone(props.max, Time.getFormatTimezone())
 })
 
 // Functions
@@ -165,8 +181,8 @@ function toHMS (value) {
   }
 }
 
-// Immedaite
-if (props.modelValue) dateTime.value = moment.utc(props.modelValue).local()
-if (props.min) minDateTime.value = moment.utc(props.min).local()
-if (props.max) maxDateTime.value = moment.utc(props.max).local()
+// 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())
 </script>