@kalisio/kdk 2.0.0 → 2.1.0

package/core/client/components/KAvatar.vue

@@ -0,0 +1,129 @@
+<template>
+  <q-avatar v-if="avatar" :size="size">
+    <q-img :src="avatar" />
+    <q-tooltip v-if="tooltip">
+      {{ name }}
+    </q-tooltip>
+  </q-avatar>
+  <q-avatar v-else-if="icon" :size="size" :color="color" text-color="white" :icon="icon">
+    <q-tooltip v-if="tooltip">
+      {{ name }}
+    </q-tooltip>
+  </q-avatar>
+  <q-avatar v-else-if="initials" :size="size" color="primary" text-color="white">
+    {{ initials }}
+    <q-tooltip v-if="tooltip">
+      {{ name }}
+    </q-tooltip>
+  </q-avatar>
+</template>
+
+<script>
+import _ from 'lodash'
+import { Storage } from '../storage.js'
+import { getIconName, getInitials } from '../utils/index.js'
+
+export default {
+  props: {
+    subject: {
+      type: Object,
+      required: true
+    },
+    contextId: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    tooltip: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data () {
+    return {
+      name: null,
+      avatar: null,
+      icon: null,
+      initials: null,
+      color: 'primary'
+    }
+  },
+  watch: {
+    subject: {
+      immediate: true,
+      async handler () {
+        this.name = this.getName()
+        // Process avatar first
+        const avatar = this.getAvatar()
+        if (avatar) {
+          if (avatar.uri) {
+            this.avatar = avatar.uri
+            return
+          }
+          // Backward compatibility as avatar key was previously stored under _id
+          const avatarId = _.get(avatar, 'key', _.get(avatar, '_id'))
+          if (avatarId) {
+            /* FIXME: download does not seem to work due to a base64 decoding issue
+            const data = await Storage.download({
+              file: _.get(avatar, 'name'),
+              key: avatarId,
+              context: this.contextId,
+              asDataUrl: true
+            })
+            avatar.uri = data.uri
+            this.avatar = avatar.uri
+            */
+            this.avatar = await Storage.getObjectUrl({
+              file: _.get(avatar, 'name'),
+              key: avatarId,
+              context: this.contextId,
+              query: {
+                timestamp: Date.now()
+              }
+            })
+            return
+          }
+          this.avatar = null
+        }
+        this.avatar = null
+        // Process icon second
+        const icon = this.getIcon()
+        if (icon) {
+          this.icon = getIconName(icon, 'name')
+          this.color = _.get(icon, 'color', 'primary')
+          return
+        }
+        this.icon = null
+        // Process name third
+        const name = this.getName()
+        if (name) {
+          this.initials = getInitials(name)
+          return
+        }
+        this.initials = null
+      }
+    }
+  },
+  methods: {
+    getAvatar () {
+      const avatarField = _.get(this.options, 'avatarField', 'avatar')
+      return _.get(this.subject, avatarField)
+    },
+    getIcon () {
+      const iconField = _.get(this.options, 'iconField', 'icon')
+      return _.get(this.subject, iconField)
+    },
+    getName () {
+      const nameField = _.get(this.options, 'nameField', 'name')
+      return _.get(this.subject, nameField)
+    }
+  }
+}
+</script>

package/core/client/components/KBlock.vue

@@ -0,0 +1,67 @@
+<template>
+  <q-card>
+    <!--
+      Title section
+     -->
+    <q-card-section v-if="title" class="k-block-title text-subtitle1">
+      {{ title }}
+    </q-card-section>
+    <!--
+      Content section
+      -->
+    <q-card-section>
+      <div class="column k-block-content">
+        <!-- Text -->
+        <div class="k-block-text" v-html="text" />
+        <!-- Action -->
+        <div v-if="action" class="self-end">
+          <KAction v-bind="action" />
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+import KAction from './KAction.vue'
+
+export default {
+  components: {
+    KAction
+  },
+  props: {
+    title: {
+      type: String,
+      default: undefined
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    action: {
+      type: Object,
+      default: () => null
+    },
+    color: {
+      type: String,
+      default: 'grey'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .k-block-title {
+    background-color: v-bind(color)
+  }
+  .k-block-content {
+    margin: 8px;
+  }
+  .k-block-text {
+    padding: 8px;
+  }
+</style>

package/core/client/components/KChip.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-chip
+    v-if="object"
+    :key="computedLabel"
+    :color="computedColor"
+    text-color="white"
+    dense
+    outline
+    square>
+    <q-icon
+      v-if="computedIcon"
+      :name="computedIcon"
+      class="q-mr-xs"
+    />
+    <div :id="computedId" class="ellipsis">
+      {{ computedLabel }}
+      <q-tooltip v-if="hasTooltip">
+        {{ computedLabel }}
+      </q-tooltip>
+    </div>
+  </q-chip>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed, watchEffect, nextTick } from 'vue'
+import { i18n } from '../i18n'
+import { getIconName } from '../utils/index.js'
+
+// Props
+const props = defineProps({
+  object: {
+    type: Object,
+    default: () => null
+  },
+  labelPath: {
+    type: String,
+    default: 'value'
+  }
+})
+
+// Data
+const hasTooltip = ref(false)
+
+// Computed
+const computedId = computed(() => {
+  return _.kebabCase(computedLabel.value)
+})
+const computedLabel = computed(() => {
+  return _.get(props.object, props.labelPath, i18n.t('UNAMED'))
+})
+const computedIcon = computed(() => {
+  return getIconName(props.object)
+})
+const computedColor = computed(() => {
+  return _.get(props.object, 'icon.color', 'black')
+})
+
+// Watch
+watchEffect(async () => {
+  // wait for the chip to be rendered
+  await nextTick()
+  // get the element
+  const chipElement = document.getElementById(computedId.value)
+  // check whether the label is truncated
+  hasTooltip.value = (chipElement && chipElement.offsetWidth < chipElement.scrollWidth)
+})
+</script>

package/core/client/components/KChipsPane.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="row justify-start items-center q-gutter-x-sm">
+    <template v-for="(chip,index) in chips">
+      <q-chip
+        v-if="getValue(chip)"
+        :key="getValue(chip)"
+        :color="getColor(chip)"
+        text-color="white"
+        :removable="canRemoveTag()"
+        @remove="onRemove(chip)"
+        :id="getID(chip)"
+        dense
+        outline
+        square>
+        <q-icon v-if="hasIcon(chip)" :name="getIcon(chip)" class="q-mr-xs" />
+        <span :id="getValue(chip)" class="ellipsis">{{ getValue(chip) }}
+          <q-tooltip v-if="tooltips[index]">
+            {{ getValue(chip) }}
+          </q-tooltip>
+        </span>
+      </q-chip>
+    </template>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import KPanel from './KPanel.vue'
+import { getIconName } from '../utils/index.js'
+import { Roles, getRoleForOrganisation, findGroupsWithRole } from '../../common/permissions'
+
+export default {
+  components: {
+    KPanel
+  },
+  props: {
+    chips: {
+      type: Array,
+      required: true
+    },
+    valuePath: {
+      type: [String, Array],
+      default: 'value'
+    },
+    removable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      tooltips: _.fill(Array(this.chips.length), false)
+    }
+  },
+  methods: {
+    getValue (chip) {
+      if (typeof this.valuePath === 'string') return _.get(chip, this.valuePath, this.$t('UNAMED'))
+      for (let i = 0; i < this.valuePath.length; i++) {
+        const path = this.valuePath[i]
+        if (_.has(chip, path)) return _.get(chip, path)
+      }
+      return this.$t('UNAMED')
+    },
+    getColor (chip) {
+      const color = _.get(chip, 'icon.color')
+      return _.isEmpty(color) ? 'black' : color
+    },
+    hasIcon (chip) {
+      const icon = chip.icon
+      if (!icon) return false
+      if (typeof icon === 'object') return !_.isEmpty(icon.name)
+      return true
+    },
+    getIcon (chip) {
+      return getIconName(chip)
+    },
+    getID (chip) {
+      return `${_.kebabCase(chip.value)}-pane`
+    },
+    canRemoveTag () {
+      if (!this.removable) return false
+      const user = this.$store.get('user')
+      const contextId = this.$store.get('context')
+      const role = getRoleForOrganisation(user, contextId._id)
+      if (Roles[role] >= Roles.manager) return true
+      const groups = findGroupsWithRole(user, contextId._id, Roles.manager)
+      return groups.length > 0
+    },
+    onRemove (chip) {
+      this.$emit('chip-removed', chip)
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (let i = 0; i < this.chips.length; i++) {
+        const chip = this.chips[i]
+        const chipElement = document.getElementById(this.getValue(chip))
+        if (chipElement && chipElement.offsetWidth < chipElement.scrollWidth) this.tooltips[i] = true
+      }
+    })
+  }
+}
+</script>

package/core/client/components/KContent.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <template v-for="component in avaiableComponents" :key="component.uid">
+      <component
+        v-if="component.isVisible && !component.isHidden"
+        :is="component.instance"
+        :context="context"
+        :renderer="component.renderer ? component.renderer: actionRenderer"
+        v-bind="component"
+        v-on="component.on ? { [component.on.event]: component.on.listener } : {}"
+        @triggered="onTriggered" />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { computed } from 'vue'
+import { uid } from 'quasar'
+import { filterContent, getBoundValue, loadComponent } from '../utils/index.js'
+
+// Props
+const props = defineProps({
+  content: {
+    type: [Object, Array],
+    default: () => null
+  },
+  mode: {
+    type: String,
+    default: undefined
+  },
+  filter: {
+    type: Object,
+    default: () => {}
+  },
+  context: {
+    type: Object,
+    default: () => null
+  },
+  actionRenderer: {
+    type: String,
+    default: 'button',
+    validator: (value) => {
+      return ['button', 'form-button', 'item', 'tab'].includes(value)
+    }
+  }
+})
+
+// Emit
+const emit = defineEmits(['triggered'])
+
+// Computed
+const avaiableComponents = computed(() => {
+  if (_.isEmpty(props.content)) return []
+  let components = filterContent(props.content, props.filter || {})
+  components = getComponents(components, props.mode, props.context)
+  for (let i = 0; i < components.length; ++i) {
+    const component = components[i]
+    // Check for hidden/visible handler or property
+    // If not a functional call the target property can be a reactive one
+    // so that we "bind" it to the component instead of "filter" the component here
+    component.isHidden = getVisibility(component, 'hidden', false)
+    component.isVisible = getVisibility(component, 'visible', true)
+    if (!_.startsWith(component.name, 'Q')) {
+      logger.trace(`Loading component ${component.name}`)
+      component.instance = loadComponent(component.name)
+    } else {
+      logger.trace(`Using component ${component.name}`)
+      component.instance = component.name
+    }
+  }
+  return components
+})
+
+// Functions
+function getVisibility (component, property, defaultValue) {
+  let isVisible = _.get(component, property, defaultValue)
+  // Can be a functional call
+  if (typeof isVisible === 'function') {
+    isVisible = isVisible(props.context)
+  } else {
+    isVisible = getBoundValue(isVisible, props.context)
+  }
+  return isVisible
+}
+function getComponents (content, mode) {
+  let components = []
+  // Get component config for given mode if any
+  if (Array.isArray(content)) components = content
+  else components = _.get(content, mode)
+  const processedComponents = []
+  // Then create component objects
+  _.forEach(components, component => {
+    // Get the component and add the required props
+    component.name = _.get(component, 'component', 'KAction')
+    component.uid = uid()
+    processedComponents.push(component)
+  })
+  return processedComponents
+}
+function onTriggered (params) {
+  emit('triggered', params)
+}
+</script>

package/core/client/components/KDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <KModal
+    ref="dialogRef"
+    :title="title"
+    :maximized="maximized"
+    :buttons="computedButtons"
+    :toolbar="toolbar"
+    :width-policy="widthPolicy"
+  >
+    <!-- component with v-model -->
+    <component
+      v-if="_.has(attrs, 'v-model')"
+      ref="componentRef"
+      :is="computedComponent"
+      v-model="computedModel"
+      v-bind="computedProps"
+    />
+    <!-- component without v-model -->
+    <component
+      v-else
+      ref="componentRef"
+      :is="computedComponent"
+      v-bind="computedProps"
+    />
+  </KModal>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, computed, useAttrs } from 'vue'
+import { useDialogPluginComponent } from 'quasar'
+import { loadComponent } from '../utils'
+import KModal from './KModal.vue'
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: undefined
+  },
+  toolbar: {
+    type: Array,
+    default: () => null
+  },
+  component: {
+    type: String,
+    default: null
+  },
+  okAction: {
+    type: [String, Object],
+    default: 'OK'
+  },
+  cancelAction: {
+    type: [String, Object],
+    default: undefined
+  },
+  widthPolicy: {
+    type: String,
+    default: 'medium',
+    validator: (value) => {
+      return ['wide', 'medium', 'narrow'].includes(value)
+    }
+  },
+  maximized: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits([...useDialogPluginComponent.emits, 'update:modelValue'])
+
+// Data
+const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+const componentRef = ref()
+const attrs = useAttrs()
+const model = ref(attrs['v-model'])
+
+// Computed
+const computedButtons = computed(() => {
+  const buttons = []
+  if (!_.isEmpty(props.cancelAction)) {
+    if (typeof props.cancelAction === 'string') {
+      // create a basic action that close the dialog
+      buttons.push({
+        id: 'cancel-action',
+        label: props.cancelAction,
+        outline: true,
+        renderer: 'form-button',
+        handler: onDialogCancel
+      })
+    } else {
+      // clone the action to overload the handler
+      const cancelButton = _.clone(props.cancelAction)
+      if (cancelButton.handler) {
+        cancelButton.handler = async () => {
+          // ! call the origonal handler to avoid recurcive call
+          const result = await callHandler(props.cancelAction.handler)
+          // close dialog whatever the result of the handler
+          onDialogCancel(result)
+        }
+      }
+    }
+  }
+  if (typeof props.okAction === 'string') {
+    buttons.push({
+      // create a basic action that close the dialog
+      id: 'ok-action',
+      label: props.okAction,
+      renderer: 'form-button',
+      handler: onDialogOK
+    })
+  } else {
+    // clone the action to overload the handler
+    const okButton = _.clone(props.okAction)
+    if (okButton.handler) {
+      // overload the handler to call Quasar onDialogOK
+      okButton.handler = async () => {
+        // ! call the origonal handler to avoid recursive call
+        const result = await callHandler(props.okAction.handler)
+        // close dialog if and only if the handler returns true
+        if (result) onDialogOK(result)
+      }
+    }
+    buttons.push(okButton)
+  }
+  return buttons
+})
+const computedComponent = computed(() => {
+  return loadComponent(props.component)
+})
+const computedModel = computed({
+  get: function () {
+    return model.value
+  },
+  set: function (value) {
+    model.value = value
+    emit('update:modelValue', value)
+  }
+})
+const computedProps = computed(() => {
+  return _.omit(attrs, ['v-model'])
+})
+
+// Functions
+async function callHandler (handler) {
+  let method = handler
+  let params
+  if (typeof (handler) === 'object') {
+    method = handler.name
+    if (!method) {
+      logger.debug('[KDK] invalid dialog handler')
+      return
+    }
+    params = handler.params
+  }
+  return await componentRef.value[method](params)
+}
+</script>

package/core/client/components/KExpandable.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :class="{'k-expandable-collapsed': !isExpanded, 'k-expandable-expanded': isExpanded }"
+  >
+    <!-- content -->
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// props
+const props = defineProps({
+  isExpanded: {
+    type: Boolean,
+    default: false
+  },
+  minHeight: {
+    type: Number,
+    required: true
+  },
+  maxHeight: {
+    type: Number,
+    required: true
+  }
+})
+
+// computed
+const cssMinHeight = computed(() => {
+  return `${props.minHeight}px`
+})
+const cssMaxHeight = computed(() => {
+  return `${props.maxHeight}px`
+})
+</script>
+
+<style lang="scss" scoped>
+.k-expandable-collapsed {
+  overflow: hidden;
+  transition: 0.3s;
+  min-height: v-bind('cssMinHeight');
+  max-height: v-bind('cssMinHeight');
+}
+.k-expandable-expanded {
+  transition: 0.3s;
+  max-height: v-bind('cssMaxHeight');
+}
+</style>