@kalisio/kdk 2.4.0 → 2.5.1

package/core/client/components/KActivity.vue

@@ -1,5 +1,5 @@
 <template>
-  <KPage :padding="padding">
+  <KPage>
     <slot />
   </KPage>
 </template>
@@ -7,7 +7,6 @@
 <script>
 import _ from 'lodash'
 import logger from 'loglevel'
-import config from 'config'
 import { useActivity, useLayout } from '../composables'
 import KPage from './layout/KPage.vue'
 
@@ -20,6 +19,13 @@ export default {
       type: String,
       required: true
     },
+    options: {
+      type: Object,
+      default: () => {},
+      validator: (value) => {
+        return _.isObject(value)
+      }
+    },
     layout: {
       type: [Object, Function],
       default: () => null
@@ -29,29 +35,9 @@ export default {
       default: null
     }
   },
-  setup (props) {
-    const keyName = `${_.camelCase(props.name)}Activity`
-    logger.debug(`[KDK] Reading '${props.name}' activity options with key ${keyName}`)
-    const options = _.get(config, keyName, {})
-    const { setCurrentActivity } = useActivity(keyName, options)
-    const { Layout, configureLayout, clearLayout, setLayoutMode } = useLayout()
-    return {
-      options,
-      setCurrentActivity,
-      Layout,
-      configureLayout,
-      clearLayout,
-      setLayoutMode
-    }
-  },
-  computed: {
-    padding () {
-      return this.Layout.padding
-    }
-  },
   watch: {
     mode: {
-      // [!] cannot be immediate as it is required that the activity is configured first
+      // [!] It cannot be immediate because the activity must first be configured
       handler (value) {
         logger.debug(`[KDK] Setting layout on '${value}' mode`)
         if (value) this.setLayoutMode(value)
@@ -60,26 +46,37 @@ export default {
   },
   methods: {
     async configure () {
-      logger.debug(`[KDK] Configuring '${this.name}' activity`)
+      // set the current activity
       // because this component is wrapped within an AsyncComponent it returns the grand parent
       const concreteActivity = this.$parent.$parent
-      // configure the layout
+      // set the current activity
+      this.setCurrentActivity(concreteActivity)
+      // configure the activity
       let customLayout = {}
       if (this.layout) {
         if (typeof this.layout === 'function') customLayout = await this.layout()
         else customLayout = this.layout
       }
-      this.configureLayout(_.merge({}, this.options, customLayout), concreteActivity)
-      // set the current activity
-      this.setCurrentActivity(concreteActivity)
+      const configuration = _.merge({}, this.CurrentActivityContext.config, customLayout)
+      this.configureLayout(configuration, concreteActivity)
+      logger.debug(`[KDK] Activity ${this.name} configured with`, configuration)
       // apply the mode if needed
       if (this.mode) this.setLayoutMode(this.mode)
-    },
-    getOptions () {
-      return this.options
     }
   },
-  async mounted () {
+  setup (props) {
+    const activityName = `${_.camelCase(props.name)}Activity`
+    const { CurrentActivityContext, setCurrentActivity } = useActivity(activityName, props.options)
+    const { configureLayout, clearLayout, setLayoutMode } = useLayout()
+    return {
+      CurrentActivityContext,
+      setCurrentActivity,
+      configureLayout,
+      clearLayout,
+      setLayoutMode
+    }
+  },
+  async created () {
     await this.configure()
     // whenever the user abilities are updated, update activity as well
     this.$events.on('user-abilities-changed', this.configure)
@@ -87,8 +84,6 @@ export default {
   beforeUnmount () {
     logger.debug(`[KDK] Clearing '${this.name}' activity`)
     this.$events.off('user-abilities-changed', this.configure)
-    // clear the current activity
-    this.setCurrentActivity(null)
     // Clear the layout
     this.clearLayout()
   }

package/core/client/components/KAvatar.vue

@@ -29,10 +29,6 @@ export default {
       type: Object,
       required: true
     },
-    contextId: {
-      type: String,
-      default: ''
-    },
     size: {
       type: String,
       default: 'md'
@@ -74,7 +70,6 @@ export default {
             const data = await Storage.download({
               file: _.get(avatar, 'name'),
               key: avatarId,
-              context: this.contextId,
               asDataUrl: true
             })
             avatar.uri = data.uri
@@ -83,7 +78,6 @@ export default {
             this.avatar = await Storage.getObjectUrl({
               file: _.get(avatar, 'name'),
               key: avatarId,
-              context: this.contextId,
               query: {
                 timestamp: Date.now()
               }

package/core/client/components/KChip.vue

@@ -1,68 +1,171 @@
 <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">
+    v-model="computedState"
+    :selected="selected"
+    :icon="icon"
+    :iconRight="iconRight"
+    :iconRemove="iconRemove"
+    :iconSelected="iconSelected"
+    :size="size"
+    :dense="dense"
+    :square="square"
+    :clickable="clickable"
+    :removable="removable"
+    :disable="disable"
+    @updated:selected="state => emit('updated:selected', state)"
+    @remove="emit('remove')"
+    @click="event => emit('click', event)"
+    class="k-chip"
+  >
+    <div v-if="computedLabel"
+      :id="id"
+      class="ellipsis"
+      :class="{ 'q-pl-sm': !dense && icon, 'q-pl-xs': dense && icon }"
+    >
       {{ computedLabel }}
-      <q-tooltip v-if="hasTooltip">
-        {{ computedLabel }}
-      </q-tooltip>
+      <q-resize-observer @resize="onResize" />
     </div>
+    <q-tooltip v-if="computedTooltip">
+      <div v-html="Document.sanitizeHtml(computedTooltip)" />
+    </q-tooltip>
+    <slot />
   </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'
+import { ref, computed } from 'vue'
+import { uid } from 'quasar'
+import { i18n } from '../i18n.js'
+import { Document } from '../document.js'
+import { getHtmlColor, getContrastColor } from '../utils'
 
 // Props
 const props = defineProps({
-  object: {
-    type: Object,
-    default: () => null
+  label: {
+    type: [String, Number],
+    default: ''
   },
-  labelPath: {
+  tooltip: {
     type: String,
-    default: 'value'
+    default: undefined
+  },
+  icon: {
+    type: String,
+    default: undefined
+  },
+  iconRight: {
+    type: String,
+    default: undefined
+  },
+  iconRemove: {
+    type: String,
+    default: 'cancel'
+  },
+  iconSelected: {
+    type: String,
+    default: 'check'
+  },
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  selected: {
+    type: Boolean,
+    default: null
+  },
+  color: {
+    type: String,
+    default: 'grey-7'
+  },
+  textColor: {
+    type: String,
+    default: undefined
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  square: {
+    type: Boolean,
+    default: false
+  },
+  outline: {
+    type: Boolean,
+    default: false
+  },
+  clickable: {
+    type: Boolean,
+    default: false
+  },
+  removable: {
+    type: Boolean,
+    default: false
+  },
+  disable: {
+    type: Boolean,
+    default: false
   }
 })
 
+// Emits
+const emit = defineEmits(['update:modelValue', 'update:selected', 'remove', 'click'])
+
 // Data
-const hasTooltip = ref(false)
+const isTruncated = ref(false)
+const id = uid()
 
 // Computed
-const computedId = computed(() => {
-  return _.kebabCase(computedLabel.value)
+const computedState = computed({
+  get: function () {
+    return props.modelValue
+  },
+  set: function (state) {
+    emit('updated:modelValue', state)
+  }
 })
 const computedLabel = computed(() => {
-  return _.get(props.object, props.labelPath, i18n.t('UNAMED'))
+  return i18n.tie(props.label)
 })
-const computedIcon = computed(() => {
-  return getIconName(props.object)
+const computedTooltip = computed(() => {
+  if (props.tooltip) return i18n.tie(props.tooltip)
+  if (props.label && isTruncated.value) return computedLabel.value
 })
 const computedColor = computed(() => {
-  return _.get(props.object, 'icon.color', 'black')
+  return props.outline ? 'transparent' : getHtmlColor(props.color)
+})
+const computedTextColor = computed(() => {
+  if (_.isEmpty(props.textColor)) {
+    if (props.outline) return computedBorderColor.value
+    return getContrastColor(props.color)
+  }
+  return getHtmlColor(props.textColor)
+})
+const computedBorderColor = computed(() => {
+  return props.outline ? getHtmlColor(props.color) : 'transparent'
 })
 
-// Watch
-watchEffect(async () => {
-  // wait for the chip to be rendered
-  await nextTick()
-  // get the element
-  const chipElement = document.getElementById(computedId.value)
+// Function
+function onResize () {
   // check whether the label is truncated
-  hasTooltip.value = (chipElement && chipElement.offsetWidth < chipElement.scrollWidth)
-})
+  const chipElement = document.getElementById(id)
+  if (chipElement) isTruncated.value = (chipElement && chipElement.offsetWidth < chipElement.scrollWidth)
+}
 </script>
+
+<style lang="scss">
+.k-chip {
+  background-color: v-bind(computedColor);
+  color: v-bind(computedTextColor);
+}
+.q-chip {
+  border: solid 1px v-bind(computedBorderColor);
+}
+.q-chip__icon {
+  color: v-bind(computedTextColor);
+}
+</style>

package/core/client/components/KContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-for="component in availableComponents" :key="component.uid">
+    <template v-for="component in filteredComponents" :key="component.uid">
       <Suspense v-if="component.suspense">
         <component
           v-if="component.isVisible && !component.isHidden"
@@ -25,7 +25,6 @@
 
 <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'
@@ -61,24 +60,21 @@ const props = defineProps({
 const emit = defineEmits(['triggered'])
 
 // Computed
-const availableComponents = computed(() => {
+const filteredComponents = 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
+  // Retrieve the components
+  let components = props.content
+  if (!Array.isArray(components)) components = _.get(components, props.mode, [])
+  // Filter the components
+  if (!_.isEmpty(props.filter)) components = filterContent(components, props.filter)
+  // Configure the components
+  for (const component of components) {
+    component.name = _.get(component, 'component', 'action/KAction')
+    component.uid = uid()
     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
-    }
+    if (!_.startsWith(component.name, 'Q')) component.instance = loadComponent(component.name)
+    else component.instance = component.name
   }
   return components
 })
@@ -94,21 +90,6 @@ function getVisibility (component, property, defaultValue) {
   }
   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', 'action/KAction')
-    component.uid = uid()
-    processedComponents.push(component)
-  })
-  return processedComponents
-}
 function onTriggered (params) {
   emit('triggered', params)
 }

package/core/client/components/KDialog.vue

@@ -2,26 +2,28 @@
   <KModal
     ref="dialogRef"
     :title="title"
-    :maximized="maximized"
-    :buttons="computedButtons"
     :toolbar="toolbar"
+    :buttons="computedButtons"
     :width-policy="widthPolicy"
+    :maximized="maximized"
   >
     <Suspense>
       <!-- component with v-model -->
       <component
-        v-if="model"
+        v-if="useModel"
         ref="componentRef"
         :is="computedComponent"
         v-model="computedModel"
-        v-bind="attrs"
+        v-bind="computedAttrs"
+        v-on="computedHandlers"
       />
       <!-- component without v-model -->
       <component
         v-else
         ref="componentRef"
         :is="computedComponent"
-        v-bind="attrs"
+        v-bind="computedAttrs"
+        v-on="computedHandlers"
       />
     </Suspense>
   </KModal>
@@ -49,6 +51,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  handlers: {
+    type: Object,
+    default: null
+  },
   okAction: {
     type: [String, Object],
     default: 'OK'
@@ -77,7 +83,9 @@ const emit = defineEmits([...useDialogPluginComponent.emits, 'update:modelValue'
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent()
 const componentRef = ref()
 const attrs = useAttrs()
+const useModel = _.has(attrs, 'v-model')
 const model = ref(attrs['v-model'])
+const loading = ref(false)
 
 // Computed
 const computedButtons = computed(() => {
@@ -90,11 +98,12 @@ const computedButtons = computed(() => {
         label: props.cancelAction,
         outline: true,
         renderer: 'form-button',
+        disabled: loading.value,
         handler: onDialogCancel
       })
     } else {
       // clone the action to overload the handler
-      const cancelButton = _.clone(props.cancelAction)
+      const cancelButton = _.merge({ disabled: loading.value }, props.cancelAction)
       if (cancelButton.handler) {
         cancelButton.handler = async () => {
           // ! call the original handler to avoid recursive call
@@ -111,16 +120,19 @@ const computedButtons = computed(() => {
       id: 'ok-action',
       label: props.okAction,
       renderer: 'form-button',
+      loading: loading.value,
       handler: onDialogOK
     })
   } else {
     // clone the action to overload the handler
-    const okButton = _.clone(props.okAction)
+    const okButton = _.merge({ loading: loading.value }, props.okAction)
     if (okButton.handler) {
       // overload the handler to call Quasar onDialogOK
       okButton.handler = async () => {
-        // ! call the origonal handler to avoid recursive call
+        // ! call the orignal handler to avoid recursive call
+        loading.value = true
         const result = await callHandler(props.okAction.handler)
+        loading.value = false
         // close dialog if and only if the handler returns true
         if (result) onDialogOK(result)
       }
@@ -132,6 +144,10 @@ const computedButtons = computed(() => {
 const computedComponent = computed(() => {
   return loadComponent(props.component)
 })
+const computedHandlers = computed(() => {
+  if (_.isEmpty(props.handlers)) return {}
+  return props.handlers
+})
 const computedModel = computed({
   get: function () {
     return model.value
@@ -141,6 +157,11 @@ const computedModel = computed({
     emit('update:modelValue', value)
   }
 })
+const computedAttrs = computed(() => {
+  return _.mapKeys(attrs, (value, key) => {
+    return _.replace(key, 'component.', '')
+  })
+})
 
 // Functions
 async function callHandler (handler) {

package/core/client/components/KEditor.vue

@@ -0,0 +1,120 @@
+<template>
+  <KForm
+    ref="formRef"
+    :values="object"
+    :schema="schema"
+    :filter="filter"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref } from 'vue'
+import { api, Context, i18n } from '@kalisio/kdk/core.client'
+import { Notify } from 'quasar'
+
+// Props
+const props = defineProps({
+  service: {
+    type: String,
+    required: true
+  },
+  baseObject: {
+    type: Object,
+    default: () => null
+  },
+  object: {
+    type: Object,
+    default: () => null
+  },
+  schema: {
+    type: [String, Object],
+    default: () => null
+  },
+  filter: {
+    type: [String, Array],
+    default: () => null
+  },
+  beforeRequest: {
+    type: Function,
+    default: null
+  },
+  afterRequest: {
+    type: Function,
+    default: null
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  notify: {
+    type: Object,
+    default: () => null
+  }
+})
+
+// Data
+const formRef = ref(null)
+const mode = props.object ? 'edition' : 'creation'
+
+// Functions
+function getContext () {
+  return { props, mode, form: formRef.value }
+}
+async function apply () {
+  // validate the form
+  const { isValid, values: formValues } = formRef.value.validate()
+  if (isValid) {
+    // merge values with base object
+    const values = _.merge(formValues, props.baseObject)
+    // retrieve the service
+    const context = Context.get()
+    const service = api.getService(props.service, context?.value)
+    if (!service) {
+      logger.error(`[KDK] Cannot find service ${props.service}`)
+      return
+    }
+    // run the beforeRequest hook
+    let response = { isOk: true, values }
+    if (props.beforeRequest) {
+      logger.debug('[KDK] Apply beforeRequest hook')
+      response = await props.beforeRequest(values, getContext())
+    }
+    if (!response.isOk) return false
+    // do the request
+    if (mode === 'creation') {
+      logger.debug('[KDK] Create object with data', response.values)
+      try {
+        await service.create(response.values)
+        if (_.has(props, 'notify.created.success')) Notify.create({ type: 'positive', message: i18n.t(_.get(props, 'notify.created.success')) })
+      } catch (error) {
+        if (_.has(props, 'notify.created.error')) Notify.create({ type: 'negative', message: i18n.t(_.get(props, 'notify.created.error')) })
+      }
+    } else {
+      logger.debug(`[KDK] Patch object ${props.object._id} with data`, response.values)
+      try {
+        await service.patch(props.object._id, response.values)
+        if (_.has(props, 'notify.updated.success')) Notify.create({ type: 'positive', message: i18n.t(_.get(props, 'notify.updated.success')) })
+      } catch (error) {
+        if (_.has(props, 'notify.updated.error')) Notify.create({ type: 'negative', message: i18n.t(_.get(props, 'notify.updated.error')) })
+      }
+    }
+    // run the afterRequest hook
+    if (props.afterRequest) {
+      logger.debug('[KDK] Apply afterRequest hook')
+      response = await props.afterRequest(values, { mode, form: formRef.value, ...props })
+    }
+    if (!response.isOk) return false
+    return true
+  } else {
+    logger.debug('[KDK] Form is invalid')
+  }
+}
+
+// Expose
+defineExpose({
+  apply,
+  getContext
+})
+</script>