@kalisio/kdk 2.5.3 → 2.6.0

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

@@ -13,7 +13,7 @@
       :error-message="errorLabel"
       :error="hasError"
       :disable="disabled"
-      clearable
+      :clearable="isClearable()"
       bottom-slots
       @clear="model=''">
       <!-- control -->
@@ -30,7 +30,7 @@
       </template>
       <!-- Helper -->
       <template v-if="hasHelper" v-slot:append>
-        <k-action
+        <KAction
           :id="properties.name + '-helper'"
           :label="helperLabel"
           :icon="helperIcon"
@@ -47,6 +47,8 @@
 </template>
 
 <script>
+import _ from 'lodash'
+import { getHtmlColor } from '../../utils/utils.colors.js'
 import { baseField } from '../../mixins'
 
 export default {
@@ -56,15 +58,20 @@ export default {
       picker: false
     }
   },
+  computed: {
+    color () {
+      return getHtmlColor(this.model)
+    }
+  },
   methods: {
-    emptyModel () {
-      return ''
-    },
     onReferenceCreated (ref) {
       // https://github.com/quasarframework/quasar/issues/8956
       if (ref) {
         ref.$el.onclick = () => { this.picker = true }
       }
+    },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
     }
   }
 }
@@ -72,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
 .k-color-field {
-  background-color: v-bind(model);
+  background-color: v-bind(color);
   height: 16px;
   border-radius: 5px;
 }

package/core/client/components/form/KColorScaleField.vue

@@ -7,11 +7,11 @@
     :id="properties.name + '-field'"
     v-model="model"
     :label="label"
-    :options="options"
+    :options="getOptions()"
     options-selected-class="hidden"
     emit-value
     map-options
-    :clearable="clearable"
+    :clearable="isClearable()"
     :error="hasError"
     :error-message="errorLabel"
     :disable="disabled"
@@ -76,20 +76,15 @@ export default {
     KColorScale
   },
   mixins: [baseField],
-  computed: {
-    clearable () {
-      return _.get(this.properties, 'field.clearable', true)
-    },
-    options () {
-      return _.get(this.properties, 'field.options', [])
-    }
-  },
   methods: {
     getId (option) {
       return _.kebabCase(option.name)
     },
-    emptyModel () {
-      return null
+    getOptions () {
+      return _.get(this.properties, 'field.options', [])
+    },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
     }
   }
 }

package/core/client/components/form/KFileField.vue

@@ -1,34 +1,36 @@
 <template>
   <div v-if="readOnly" :id="properties.name + '-field'">
-    <q-chip v-if="model.name" icon="las la-cloud-upload-alt">
+    <q-chip v-if="!multiple && model?.name">
       {{ model.name }}
     </q-chip>
+    <q-chip v-else
+      v-for="file in model"
+      :key="file.name"
+      icon="las la-cloud-upload-alt"
+    >
+      {{ file.name }}
+    </q-chip>
   </div>
-  <!-- -->
-  <q-field v-else-if="model"
-    :for="properties.name + '-field'"
-    v-model="model"
-    :label="label"
-    clearable
-    @clear="onFileCleared"
-    :disable="disabled"
-  >
-    <template v-slot:control>
-      {{ model.name }}
-    </template>
-  </q-field>
   <q-file v-else
     :for="properties.name + '-field'"
-    v-model="file"
+    v-model="files"
     :label="label"
-    :accept="acceptedTypes"
+    :accept="getAcceptedTypes()"
     :filter="filterSelectedFiles"
     :error="hasError"
     :error-message="errorLabel"
     bottom-slots
     :disable="disabled"
-    @update:model-value="onFileChanged"
-    @rejected="onFileRejected">
+    :multiple="multiple"
+    :append="multiple"
+    :use-chips="true"
+    :clearable="isClearable()"
+    :max-files="getMaxFiles()"
+    :max-file-size="getMaxFileSize()"
+    :max-total-size="getMaxTotalSize()"
+    @update:model-value="onFilesChanged"
+    @rejected="onFileRejected"
+  >
     <!-- Helper -->
     <template v-if="hasHelper" v-slot:append>
       <KAction
@@ -50,117 +52,144 @@
 import _ from 'lodash'
 import logger from 'loglevel'
 import { markRaw } from 'vue'
+import { Notify } from 'quasar'
 import { baseField } from '../../mixins'
 import { i18n } from '../../i18n.js'
 import { Reader } from '../../reader.js'
 import { Storage } from '../../storage.js'
+import { formatSize } from '../../utils/utils.files.js'
 
 export default {
   mixins: [baseField],
   data () {
     return {
-      file: null,
+      files: null,
       changed: false
     }
   },
   computed: {
-    acceptedTypes () {
-      return _.get(this.properties, 'field.mimeTypes', '')
-    },
-    maxFileSize () {
-      return _.get(this.properties, 'field.maxSize', 1024 * 1024)
+    multiple () {
+      return _.get(this.properties, 'field.multiple', false)
     }
   },
   methods: {
     emptyModel () {
-      return null
+      return this.multiple ? [] : null
+    },
+    getAcceptedTypes () {
+      return _.get(this.properties, 'field.mimeTypes', '')
+    },
+    getMaxFiles () {
+      return _.get(this.properties, 'field.maxFiles', this.multiple ? 9 : 1)
+    },
+    getMaxFileSize () {
+      return _.get(this.properties, 'field.maxFileSize', 1048576)
+    },
+    getMaxTotalSize () {
+      return _.get(this.properties, 'field.maxTotalSize', this.getMaxFileSize())
+    },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
     },
     filterSelectedFiles (files) {
       const filter = _.get(this.properties, 'field.filter')
       if (!filter) return files
-      return _.filter(files, file => { return file.name.includes(filter) })
-    },
-    onFileCleared () {
-      this.file = null
-      this.error = ''
-      this.onChanged()
+      return _.filter(files, file => file.name.includes(filter))
     },
-    async onFileChanged () {
-      if (this.file) {
-        // Check the size to display an explicit message
-        if (this.file.size < this.maxFileSize) {
-          // Check whether the file will be uploaded without being read
-          if (!_.get(this.properties, 'field.readContent', true)) {
-            this.model = { name: this.file.name, type: this.file.type }
-            this.onChanged()
-            this.changed = true
-            return
-          }
-          // Check whether the file type is registered to be read by a reader
-          const acceptedFiles = Reader.filter([this.file])
-          if (acceptedFiles.length === 1) {
-            const file = acceptedFiles[0]
-            try {
-              const content = await Reader.read(file)
-              // Avoid making file content reactive as it might be large and it is not used in UI
-              this.model = { name: this.file.name, type: this.file.type, content: markRaw(content) }
-              this.onChanged()
-              this.changed = true
-            } catch (error) {
-              this.error = error
-              this.model = this.emptyModel()
-            }
-          } else {
-            this.error = 'KFileField.INVALID_FILE_TYPE'
-            this.model = this.emptyModel()
-          }
-        } else {
-          this.error = 'KFileField.INVALID_FILE_SIZE'
-          this.model = this.emptyModel()
+    async onFilesChanged () {
+      if (_.isEmpty(this.files)) {
+        // field cleared
+        this.model = this.emptyModel()
+        return
+      }
+      // field updated
+      const selectedFiles = this.multiple ? this.files : [this.files]
+      const result = []
+      for (const file of selectedFiles) {
+        // Check whether the file will be uploaded without being read
+        if (!_.get(this.properties, 'field.readContent', true)) {
+          result.push({ name: file.name, type: file.type, File: file })
+          continue
         }
+        // Check whether the file type is registered to be read by a reader
+        const accepted = Reader.filter([file])
+        if (accepted.length === 1) {
+          try {
+            const content = await Reader.read(accepted[0])
+            // Avoid making file content reactive as it might be large and it is not used in UI
+            result.push({ name: file.name, type: file.type, content: markRaw(content), File: file })
+          } catch (err) {
+            this.error = err
+          }
+        } this.error = 'KFileField.INVALID_FILE_TYPE'
       }
+      if (this.multiple) this.model = result
+      else this.model = _.get(result, '0', null)
+      this.changed = true
+      this.onChanged()
     },
-    onFileRejected (file) {
-      this.error = 'KFileField.INVALID_FILE_TYPE'
+    onFileRejected (errs) {
+      console.log(errs)
+      const errors = [].concat(errs)
+      for (const error of errors) {
+        if (error?.failedPropValidation === 'max-files') this.error = i18n.tc('errors.MAX_FILES_REACHED', this.getMaxFiles())
+        else if (error?.failedPropValidation === 'max-file-size') this.error = i18n.t('errors.MAX_FILE_SIZE_REACHED', { file: error.file.name, maxSize: formatSize(this.getMaxFileSize()) })
+        else if (error?.failedPropValidation === 'max-total-size') this.error = i18n.t('errors.MAX_TOTAL_SIZE_FILES_REACHED', { maxSize: formatSize(this.getMaxTotalSize()) })
+        else if (error?.failedPropValidation !== 'duplicate') this.error = 'KFileField.INVALID_FILE_TYPE'
+      }
     },
     async apply (object, field) {
       // A template generates the final path for the file in storage based on object context so that we can only do it here
       // Check wether we need to upload file content
-      if (this.model && _.get(this.properties, 'field.storage')) {
-        let path = _.get(this.properties, 'field.storage.path')
-        // The template generates the final path for the file in storage
-        if (path) path = _.template(path)(Object.assign({}, { fileName: this.model.name }, object))
-        this.model.key = path || this.model.name
+      const files = this.multiple ? this.model || [] : [this.model]
+      for (const file of files) {
+        if (file && _.get(this.properties, 'field.storage')) {
+          let path = _.get(this.properties, 'field.storage.path')
+          // The template generates the final path for the file in storage
+          if (path) path = _.template(path)({ ...object, fileName: file.name })
+          file.key = path || this.model.name
+        }
       }
       baseField.methods.apply.call(this, object, field)
     },
+    async upload (object, field) {
+      const files = this.multiple ? this.model || [] : [this.model]
+      const promises = files.map(async file => {
+        if (file && file.key) {
+          // The template generates the final context for storage service
+          let context = _.get(this.properties, 'field.storage.context')
+          if (context) context = _.template(context)({ ...object, fileName: file.name })
+          const query = _.get(this.properties, 'field.storage.uploadQuery')
+          logger.debug(`[KDK] Uploading file ${file.name} with key ${file.key}`)
+          return Storage.upload({
+            file: file.name,
+            type: file.type,
+            key: file.key,
+            blob: file.File,
+            context
+          }, { query })
+        }
+      })
+      return Promise.all(promises)
+    },
     async submitted (object, field) {
-      // Check wether we need to upload file content
-      if (this.changed && _.get(this.model, 'key')) {
+      // Check whether we need to upload file content
+      if (this.changed) {
         // The template generates the final context for storage service
-        let context = _.get(this.properties, 'field.storage.context')
-        if (context) context = _.template(context)(Object.assign({}, { fileName: this.model.name }, object))
-        const query = _.get(this.properties, 'field.storage.uploadQuery')
-        logger.debug(`[KDK] Uploading file ${this.model.name} with key ${this.model.key}`)
-        Storage.upload({
-          file: this.model.name,
-          type: this.model.type,
-          key: this.model.key,
-          blob: this.file,
-          context
-        }, { query })
+        this.upload(object, field)
           .then(() => {
-            this.$notify({
+            const files = this.multiple ? this.model : [this.model]
+            Notify.create({
               type: 'positive',
-              message: i18n.t('KFileField.UPLOAD_FILE_SUCCEEDED',
-                { file: this.model.name })
+              message: i18n.t('KFileField.UPLOAD_FILE_SUCCEEDED', {
+                file: files.map(f => f.name).join(', ')
+              })
             })
           })
           .catch(error => {
-            this.$notify({
+            Notify.create({
               type: 'negative',
-              message: i18n.t('KFileField.UPLOAD_FILE_ERRORED',
-                { file: this.model.name })
+              message: i18n.t('KFileField.UPLOAD_FILE_ERRORED')
             })
             logger.error(error)
           })

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

@@ -1,5 +1,9 @@
 <template>
-  <form v-if="schema" class="column">
+  <q-form
+    v-if="schema"
+    @submit.prevent="onSubmit"
+    class="column"
+  >
     <!--
       Non-grouped fields
     -->
@@ -63,7 +67,7 @@
         </q-card>
       </q-expansion-item>
     </template>
-  </form>
+  </q-form>
 </template>
 
 <script setup>
@@ -87,6 +91,10 @@ const props = defineProps({
     type: [String, Array],
     default: () => null
   },
+  onSubmit: {
+    type: Function,
+    default: (event) => false
+  },
   dense: {
     type: Boolean,
     default: false
@@ -177,31 +185,35 @@ function hasFieldError (field, errors) {
   return null
 }
 async function build () {
+  if (!props.schema) throw new Error('Cannot build the form without schema')
   fields.value = []
   nbReadyFields.value = 0
   isReady.value = false
-  if (!props.schema) throw new Error('Cannot build the form without schema')
   // As we have some async operations here and build() can be trigerred async
   // from different places (watch, mount, ...) we flag it to avoid reentrance
   buildInProgress = true
   // Compile the schema
   await compileSchema(props.schema, props.filter)
   // Build the fields
-  _.forOwn(schema.value.properties, (field, property) => {
-    // clone and configure the field
-    const cloneField = _.clone(field)
-    cloneField.name = property // assign a name to allow binding between properties and fields
-    let component = _.get(field.field, 'component', '')
-    if (!component) {
-      // Provide a default component based on schema value type when none is specified
-      if (field.type === 'number' || field.type === 'integer') { component = 'form/KNumberField' } else if (field.type === 'boolean') { component = 'form/KToggleField' } else if (field.type === 'string') { component = 'form/KTextField' }
-    }
-    cloneField.component = loadComponent(component)
-    cloneField.reference = null // will be set once te field is rendered
-    cloneField.required = _.includes(schema.value.required, property) // add extra required info
-    // add the field to the list of fields to be rendered
-    fields.value.push(cloneField)
-  })
+  if (!_.isEmpty(schema.value.properties)) {
+    _.forOwn(schema.value.properties, (field, property) => {
+      // clone and configure the field
+      const cloneField = _.clone(field)
+      cloneField.name = property // assign a name to allow binding between properties and fields
+      let component = _.get(field.field, 'component', '')
+      if (!component) {
+        // Provide a default component based on schema value type when none is specified
+        if (field.type === 'number' || field.type === 'integer') component = 'form/KNumberField'
+        else if (field.type === 'boolean') component = 'form/KToggleField'
+        else if (field.type === 'string') component = 'form/KTextField'
+      }
+      cloneField.component = loadComponent(component)
+      cloneField.reference = null // will be set once te field is rendered
+      cloneField.required = _.includes(schema.value.required, property) // add extra required info
+      // add the field to the list of fields to be rendered
+      fields.value.push(cloneField)
+    })
+  } else isReady.value = true
   buildInProgress = false
 }
 function values () {

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

@@ -8,7 +8,7 @@
       :id="properties.name + '-field'"
       v-model="model"
       :label="label"
-      clearable
+      :clearable="isClearable()"
       :error-message="errorLabel"
       :error="hasError"
       :disable="disabled"
@@ -91,6 +91,9 @@ export default {
       // We support icon without a color, in this case we have a string as model
       return (this.color ? { name: '', color: '' } : '')
     },
+    isClearable () {
+      return _.get(this.properties, 'field.clearable', true)
+    },
     onFocused () {
       if (this.isEmpty()) this.$refs.iconChooser.open(this.model)
     },

package/core/client/components/form/KNumberField.vue

@@ -14,7 +14,7 @@
     :error-message="errorLabel"
     bottom-slot
     @blur="onChanged"
-    @update:model-value="onChanged"
+    @update:model-value="onUpdated"
 
   >
     <!-- Helper -->
@@ -35,9 +35,16 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import { baseField } from '../../mixins'
 
 export default {
-  mixins: [baseField]
+  mixins: [baseField],
+  methods: {
+    onUpdated (value) {
+      this.model = _.isNumber(value) ? value : null
+      this.onChanged()
+    }
+  }
 }
 </script>

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

@@ -16,7 +16,7 @@
     map-options
     use-input
     :dense="dense"
-    :clearable="clearable"
+    :clearable="isClearable()"
     :error="hasError"
     :error-message="errorLabel"
     :disable="disabled"
@@ -83,9 +83,6 @@ export default {
     multiple () {
       return this.isMultiselect()
     },
-    clearable () {
-      return this.isClearable()
-    },
     chips () {
       return this.hasChips()
     },