@kalisio/kdk 1.3.4 → 1.4.1

package/lib/core/client/components/editor/KEditor.vue

@@ -36,12 +36,6 @@ export default {
     mixins.baseEditor(['form']),
     mixins.refsResolver(['form'])
   ],
-  watch: {
-    '$route' (to, from) {
-      // React to route changes but reusing the same component as this one is generic
-      this.refresh()
-    }
-  },
   methods: {
     onFieldChanged (field, value) {
       this.$emit('field-changed', field, value)

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

@@ -8,7 +8,6 @@
     @closed="$emit('closed')">
     <div slot="modal-content">
       <k-form :class="{ 'light-dimmed': applyInProgress }" ref="form" :schema="schema" @field-changed="onFieldChanged" />
-      <q-spinner-cube color="primary" class="fixed-center" v-if="applyInProgress" size="4em" />
     </div>
   </k-modal>
 </template>
@@ -34,9 +33,10 @@ export default {
   ],
   computed: {
     buttons () {
-      const buttons = [{
-        id: 'apply-button', label: this.applyButton, renderer: 'form-button', handler: () => this.apply()
-      }]
+      const buttons = [
+        { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
+        { id: 'apply-button', label: this.applyButton, renderer: 'form-button', handler: () => this.apply() }
+      ]
       if (this.clearButton !== '') {
         buttons.push({
           id: 'clear-button', label: this.clearButton, renderer: 'form-button', outline: 'true', handler: () => this.clear()

package/lib/core/client/components/editor/KSettingsEditor.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <q-list>
+      <!--
+        Edit link
+      -->
+      <q-item id="edit-settings" @click="editSettings" clickable v-ripple>
+        <q-item-section avatar><q-icon name="las la-cog"/></q-item-section>
+        <q-item-section>{{$t('SETTINGS')}}</q-item-section>
+      </q-item>
+    </q-list>
+    <!--
+      Create editor
+     -->
+    <k-modal-editor
+      id="editor"
+      ref="editor"
+      service="settings"
+      objectId="settings"
+      :schema-properties="schemaFilter"
+      @applied="onSettingsEdited" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'k-settings-editor',
+  data () {
+    return {
+      // Keep only properties declared in application mapping from the default editor schema
+      schemaFilter: Object.keys(this.$api.getService('settings').getSettingsMapping())
+    }
+  },
+  methods: {
+    editSettings () {
+      this.$refs.editor.openModal()
+      this.$emit('triggered')
+    },
+    onSettingsEdited () {
+      this.$refs.editor.closeModal()
+    }
+  },
+  beforeCreate () {
+    // Load the required components
+    this.$options.components['k-modal-editor'] = this.$load('editor/KModalEditor')
+  }
+}
+</script>

package/lib/core/client/components/form/KAttachmentField.vue

@@ -87,12 +87,6 @@ export default {
     autoProcessQueue () {
       return _.get(this.properties, 'field.autoProcessQueue', true)
     },
-    storageService () {
-      return this.$api.getService(this.properties.service || 'storage')
-    },
-    resourcesService () {
-      return _.get(this.properties, 'field.resourcesService', '')
-    },
     isObject () {
       return (this.properties.type === 'object')
     },
@@ -100,16 +94,22 @@ export default {
       if (this.isMultiple()) return []
       return (this.isObject() ? {} : '')
     },
-    fill (value, object) {
-      // Keep trak of object ID if any because it is required to access the files
-      if (object) this.objectId = object._id
+    async fill (value, object) {
+      // Keep trak of object ID if any because it might be required to build the storage path
+      if (object) {
+        this.resource = object._id
+      }
       this.model = value
       if (this.isMultiple()) {
         this.files = this.model
       } else {
         this.files = (!_.isEmpty(this.model) ? [this.model] : [])
       }
-      if (!this.readOnly) this.$refs.uploader.initialize(this.files)
+      if (!this.readOnly) {
+        // We need to force a refresh so that the prop is correctly updated by Vuejs in child component
+        await this.$nextTick()
+        this.$refs.uploader.initialize(this.files)
+      }
     },
     async apply (object, field) {
       // If not processing uploads on-the-fly upload when the form is being submitted on update

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

@@ -23,23 +23,23 @@
     >
       <!-- Content -->
       <template v-slot:default>
-        <div class="row items-baseline">
+        <div class="row items-end">
           <template v-for="(chip, index) in chips">
-            <q-chip
-              :id="'chip-' + index"
-              class="chip"
-              :key="chipValue(chip) + '-' + index"
-              :icon="chipIcon(chip)"
-              :color="chipColor(chip)"
-              @remove="onChipRemoved(chip)"
-              @click="onChipClicked(chip)"
-              clickable
-              removable
-              outline
-              dense
-            >
-              {{chip.value}}
-            </q-chip>
+            <div :key="chipValue(chip) + '-' + index" class="q-pb-sm">
+              <q-chip
+                :id="'chip-' + index"
+                class="chip"
+                :icon="chipIcon(chip)"
+                :color="chipColor(chip)"
+                :label="chipValue(chip)"
+                @remove="onChipRemoved(chip)"
+                @click="onChipClicked(chip)"
+                :clickable="Boolean(icon)"
+                removable
+                outline
+                dense
+                square />
+            </div>
           </template>
           <q-input class="q-pl-sm col-grow" :for="properties.name + '-field'" autofocus type="text" v-model="input" :after="inputActions" @keyup.enter="onChipAdded()" />
         </div>
@@ -70,7 +70,10 @@ export default {
   computed: {
     inputActions () {
       const actions = []
-      if (_.findIndex(this.chips, { value: this.input }) === -1) {
+      const index = (this.icon
+        ? _.findIndex(this.chips, { value: this.input })
+        : _.findIndex(this.chips, this.input))
+      if (index === -1) {
         actions.push({
           icon: 'send',
           content: true,
@@ -87,6 +90,7 @@ export default {
   },
   data () {
     return {
+      icon: _.get(this.properties, 'field.icon', true),
       input: '',
       chips: []
     }
@@ -100,31 +104,32 @@ export default {
       this.chips = this.model.slice()
     },
     chipIcon (chip) {
-      return getIconName(chip)
+      return (this.icon ? getIconName(chip) : undefined)
     },
     chipColor (chip) {
-      return _.get(chip, 'icon.color', 'dark')
+      return (this.icon ? _.get(chip, 'icon.color', 'dark') : 'dark')
     },
     chipValue (chip) {
-      return chip.value || chip.name
+      return (this.icon ? chip.value || chip.name : chip)
     },
     onChipAdded () {
-      const chip = {
+      const chip = (this.icon ? {
         value: this.input,
         icon: {
           name: _.get(this.properties.field, 'icon.name', ''),
           color: _.get(this.properties.field, 'icon.color', 'dark')
         }
-      }
+      } : this.input)
       this.chips.push(chip)
       this.input = ''
       this.updateModel()
     },
     onChipRemoved (oldChip) {
-      this.chips = this.chips.filter(chip => chip.value !== oldChip.value)
+      this.chips = this.chips.filter(chip => (this.icon ? chip.value !== oldChip.value : chip !== oldChip))
       this.updateModel()
     },
     onChipClicked (chip) {
+      if (!this.icon) return
       this.selectedChip = chip
       this.$refs.iconChooser.open(chip.icon)
     },

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

@@ -1,30 +1,32 @@
 <template>
-  <div v-if="readOnly" :id="properties.name + '-field'">
-    <div :style="`width: 50px; height: 18px; border-radius: 3px; background-color: ${model};`" />
+  <div>
+    <div v-if="readOnly" :id="properties.name + '-field'">
+      <k-spot :color="model" width="50px" height="18px" border-radius="3px" />
+    </div>
+    <q-field v-else
+      :for="properties.name + '-field'"
+      :label="label"
+      :value="model"
+      :error-message="errorLabel"
+      :error="hasError"
+      :disabled="disabled"
+      clearable
+      bottom-slots
+      @click.native="picker = true"
+      @clear="model=''">
+      <!-- control -->
+      <template v-slot:control>
+        <k-spot :id="properties.name + '-field'" :color="model" width="50px" height="18px" border-radius="3px" />
+        <q-dialog v-model="picker">
+          <q-color no-header format-model="hex" v-model="model" @changed="picker = false"/>
+        </q-dialog>
+      </template>
+      <!-- Helper -->
+      <template v-if="helper" v-slot:hint>
+        <span v-html="helper"></span>
+      </template>
+    </q-field>
   </div>
-  <q-field v-else
-    :for="properties.name + '-field'"
-    :label="label"
-    :value="model"
-    :error-message="errorLabel"
-    :error="hasError"
-    :disabled="disabled"
-    clearable
-    bottom-slots
-    @click.native="picker = true"
-    @clear="model=''">
-    <!-- control -->
-    <template v-slot:control>
-      <div :style="`width: 50px; height: 18px; border-radius: 3px; background-color: ${model};`" />
-      <q-dialog v-model="picker">
-        <q-color no-header format-model="hex" v-model="model" @changed="picker = false"/>
-      </q-dialog>
-    </template>
-    <!-- Helper -->
-    <template v-if="helper" v-slot:hint>
-      <span v-html="helper"></span>
-    </template>
-  </q-field>
 </template>
 
 <script>
@@ -46,6 +48,9 @@ export default {
     emptyModel () {
       return ''
     }
+  },
+  created () {
+    this.$options.components['k-spot'] = this.$load('frame/KSpot')
   }
 }
 </script>

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

@@ -11,7 +11,6 @@
           :ref="field.name"
           :required="field.required"
           :properties="field"
-          :display="display"
           @field-changed="onFieldChanged"
         />
       </slot>
@@ -31,7 +30,6 @@
                   :ref="field.name"
                   :required="field.required"
                   :properties="field"
-                  :display="display"
                   @field-changed="onFieldChanged" />
               </slot>
               <slot v-if="field.group === group" :name="'after-' + field.name"/>
@@ -73,16 +71,6 @@ export default {
     clearOnCreate: {
       type: Boolean,
       default: true
-    },
-    display: {
-      type: Object,
-      default: () => {
-        return {
-          icon: false,
-          label: false,
-          labelWidth: 3
-        }
-      }
     }
   },
   data () {

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

@@ -31,6 +31,7 @@
       <!-- Content -->
       <template v-slot:default>
         <q-icon
+          class="q-pt-xs"
           size="sm"
           id="choosed-icon"
           :name="iconName"

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

@@ -47,7 +47,7 @@
         </q-item-section>
         <q-item-section>
           <q-item-label>{{ getLabel(scope.opt) }}</q-item-label>
-          <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+          <q-item-label caption>{{ getDescription(scope.opt) }}</q-item-label>
         </q-item-section>
       </q-item>
     </template>
@@ -78,7 +78,11 @@ export default {
     },
     getLabel (item) {
       const service = _.find(this.properties.services, { service: item.service })
-      return _.get(item, service.field)
+      return _.get(item, service.field, 'name')
+    },
+    getDescription (item) {
+      const service = _.find(this.properties.services, { service: item.service })
+      return _.get(item, service.description, 'description')
     },
     getIcon (item) {
       return _.get(item, 'icon.name', _.get(item, 'icon', ''))
@@ -103,15 +107,16 @@ export default {
             return _.get(item1, item1.field) === _.get(item2, item2.field) && item1.service === item2.service
           })
         } else this.options = results
-        this.$refs.select.updateInputValue('')
       })
     },
     onSelected (value) {
       if (value) {
+        // FIXME: ???
         if (this.properties.multiselect) this.model = this.items
         else this.model = this.items
       } else this.model = this.emptyModel()
       this.options = []
+      this.$refs.select.updateInputValue('')
       this.onChanged()
     }
   }

package/lib/core/client/components/form/KRoleField.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="readOnly" :id="properties.name + '-field'">
+    <q-chip dense  />
+  </div>
+  <q-field v-else
+    :for="properties.name + '-field'"
+    :value="model"
+    :label="label"
+    @input="onChanged"
+    borderless
+    :error-message="errorLabel"
+    :error="hasError"
+    :disabled="disabled"
+    bottom-slots
+  >
+    <!-- Content -->
+    <template v-slot:default>
+      <q-option-group
+        :id="properties.name + '-field'"
+        v-model="model"
+        :options="roles()"
+        inline />
+    </template>
+    <!-- Helper -->
+    <template v-if="helper" v-slot:hint>
+      <span v-html="helper"></span>
+    </template>
+  </q-field>
+</template>
+
+<script>
+import _ from 'lodash'
+import mixins from '../../mixins'
+import { RoleNames } from '../../../common/permissions'
+import { QOptionGroup } from 'quasar'
+
+export default {
+  name: 'k-role-field',
+  components: {
+    QOptionGroup
+  },
+  mixins: [mixins.baseField],
+  methods: {
+    roles () {
+      return _.map(RoleNames, role => { return { label: this.$t(_.upperCase(role)), value: role } })
+    },
+    emptyModel () {
+      return RoleNames[0]
+    },
+    isEmpty () {
+      // Can't actually be
+      return false
+    }
+  }
+}
+</script>

package/lib/core/client/components/form/KSelectField.vue

@@ -18,6 +18,7 @@
     @input='onChanged'
     emit-value
     map-options
+    :clearable="clearable"
     :error="hasError"
     :error-message="errorLabel"
     :disabled="disabled"
@@ -49,6 +50,9 @@ export default {
   name: 'k-select-field',
   mixins: [mixins.baseField],
   computed: {
+    clearable () {
+      return _.get(this.properties, 'field.clearable', true)
+    },
     multiple () {
       return _.get(this.properties, 'field.multiple', false)
     },
@@ -72,7 +76,18 @@ export default {
   },
   methods: {
     getId (option) {
-      return _.kebabCase(option.value)
+      let id = option.value
+      // Complex object ?
+      if (typeof id === 'object') {
+        // Extract value property or use label if none
+        const valueField = _.get(this.properties, 'field.valueField')
+        if (valueField) id = _.get(id, valueField)
+        else id = option.label
+      } else {
+        // Ensure string not eg number
+        id = id.toString()
+      }
+      return _.kebabCase(id)
     },
     emptyModel () {
       const multiple = _.get(this.properties, 'field.multiple', false)

package/lib/core/client/components/form/KView.vue

@@ -5,7 +5,7 @@
      -->
     <template v-for="field in fields">
       <div v-if="!field.group" :key="field.name" class="row items-center"
-        v-bind:class="{'k-view-row': options.separators }"
+        v-bind:class="{ 'k-view-row': separators }"
       >
         <!-- Field label -->
         <span class="col-xs-5 col-sm-4 col-3 text-caption">
@@ -16,7 +16,6 @@
           :is="field.componentKey"
           v-bind="$props"
           :properties="field"
-          :display="options"
           :readOnly="true" />
       </div>
     </template>
@@ -27,7 +26,7 @@
       <q-expansion-item :key="group" icon="las la-file-alt" :group="group" :label="$t(group)">
         <template v-for="field in fields">
           <div v-if="field.group === group" :key="field.group + field.name" class="row items-center"
-            v-bind:class="{'k-view-row': options.separators }"
+            v-bind:class="{ 'k-view-row': separators }"
           >
             <!-- Field label -->
             <span class="col-xs-5 col-sm-4 col-3 text-caption">
@@ -38,7 +37,6 @@
               :is="field.componentKey"
               v-bind="$props"
               :properties="field"
-              :display="options"
               :readOnly="true" />
           </div>
         </template>
@@ -61,16 +59,9 @@ export default {
       type: Object,
       default: null
     },
-    options: {
-      type: Object,
-      default: () => {
-        return {
-          icon: false,
-          label: false,
-          labelWidth: 3,
-          separators: false
-        }
-      }
+    separators: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

package/lib/core/client/components/frame/KAction.vue

@@ -4,17 +4,20 @@
    -->
   <q-btn v-if="renderer === 'button'"
     :id="id"
-    :label="$q.screen.gt.xs ? computedLabel : ''"
     no-caps
+    no-wrap
     :icon="computedIcon"
     :color="computedColor"
     :size="size"
-    :flat="true"
+    flat
     :round="label===''"
     :rounded="label!==''"
     :dense="dense"
-    :disabled="disabled"
+    :disable="disabled"
     @click="onClicked(arguments[0])">
+    <div v-if="computedLabel" class="ellipsis q-pl-md">
+      {{ computedLabel }}
+    </div>
     <!-- tooltip -->
     <q-tooltip v-if="computedTooltip">
       {{ computedTooltip }}
@@ -32,14 +35,17 @@
    -->
   <q-btn v-else-if="renderer === 'form-button'"
     :id="id"
-    :label="computedLabel"
+    no-wrap
     color="primary"
     :outline="outline"
     :size="size"
     :dense="dense"
-    :disabled="disabled"
+    :disable="disabled"
     :loading="loading"
     @click="onClicked(arguments[0])">
+    <div class="ellipsis">
+      {{ computedLabel }}
+    </div>
   </q-btn>
   <!--
     Item renderer
@@ -50,7 +56,7 @@
     :dense="dense"
     :disabled="disabled"
     @click="onClicked(arguments[0])">
-    <q-item-section avatar>
+    <q-item-section v-if="computedIcon || badge" avatar>
       <q-icon :dense="dense" :name="computedIcon" :color="computedColor" />
       <!-- badge -->
       <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
@@ -138,7 +144,7 @@ export default {
     },
     toggle: {
       type: Object,
-      default: () => null
+      default: () => {}
     },
     label: {
       type: String,
@@ -204,23 +210,23 @@ export default {
     },
     computedLabel () {
       // Check also for translation key or already translated message
-      if (this.isToggled && this.toggle.label) {
+      if (this.isToggled && _.has(this.toggle, 'label')) {
         return (this.$i18n.i18next.exists(this.toggle.label) ? this.$t(this.toggle.label) : this.toggle.label)
       } else {
         return (this.$i18n.i18next.exists(this.label) ? this.$t(this.label) : this.label)
       }
     },
     computedIcon () {
-      if (this.isToggled && this.toggle.icon) return this.toggle.icon
+      if (this.isToggled && _.has(this.toggle, 'icon')) return this.toggle.icon
       return this.icon
     },
     computedColor () {
-      if (this.isToggled) return this.toggle.color || 'accent'
+      if (this.isToggled) return _.get(this.toggle, 'color', 'accent')
       return this.color
     },
     computedTooltip () {
       // Check also for translation key or already translated message
-      if (this.isToggled && this.toggle.tooltip) {
+      if (this.isToggled && _.has(this.toggle, 'tooltip')) {
         return (this.$i18n.i18next.exists(this.toggle.tooltip) ? this.$t(this.toggle.tooltip) : this.toggle.tooltip)
       } else {
         return (this.$i18n.i18next.exists(this.tooltip) ? this.$t(this.tooltip) : this.tooltip)
@@ -228,7 +234,7 @@ export default {
     },
     computedBadgeLabel () {
       // Check also for translation key or already translated message
-      if (this.badge && this.badge.label) {
+      if (this.badge && _.has(this.badge, 'label')) {
         return (this.$i18n.i18next.exists(this.badge.label) ? this.$t(this.badge.label) : this.badge.label)
       } else {
         // Take care that changing this to null or '' breaks the display in Quasar

package/lib/core/client/components/frame/KAvatar.vue

@@ -3,18 +3,18 @@
     <q-skeleton v-if="skeleton" type="QAvatar" :size="size" />
     <q-avatar v-if="avatar" :size="size">
       <img :src="avatar">
-      <q-tooltip>
+      <q-tooltip v-if="name">
         {{ name }}
       </q-tooltip>
     </q-avatar>
     <q-avatar v-else-if="icon" :size="size" :color="color" text-color="white" :icon="icon">
-      <q-tooltip>
+      <q-tooltip v-if="name">
         {{ name }}
       </q-tooltip>
     </q-avatar>
     <q-avatar v-else-if="initials" :size="size" color="primary" text-color="white">
       {{ initials }}
-      <q-tooltip>
+      <q-tooltip v-if="name">
         {{ name }}
       </q-tooltip>
     </q-avatar>