@kalisio/kdk 2.0.1 → 2.1.0

package/core/client/components/collection/KList.vue

@@ -21,7 +21,7 @@
           v-model="currentPage"
           :max="nbPages"
           :input="true"
-          @update:model-value="onPageChanged"
+          @update:model-value="refreshCollection"
         />
       </div>
     </div>
@@ -39,73 +39,97 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
 import KStamp from '../KStamp.vue'
-import { service, baseCollection } from '../../mixins'
+import { Events } from '../../events.js'
+import { useCollection } from '../../composables'
 import { loadComponent } from '../../utils'
 
-export default {
-  components: {
-    KStamp
-  },
-  mixins: [
-    service,
-    baseCollection
-  ],
-  props: {
-    renderer: {
-      type: Object,
-      default: () => {
-        return {
-          component: 'collection/KItem'
-        }
-      }
-    },
-    baseQuery: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    filterQuery: {
-      type: Object,
-      default: function () {
-        return {}
+const emit = defineEmits(['selection-changed', 'collection-refreshed'])
+
+// Props
+const props = defineProps({
+  renderer: {
+    type: Object,
+    default: () => {
+      return {
+        component: 'collection/KItem'
       }
-    },
-    listStrategy: {
-      type: String
     }
   },
-  computed: {
-    rendererComponent () {
-      return loadComponent(this.renderer.component)
-    }
+  contextId: {
+    type: String,
+    default: undefined
   },
-  watch: {
-    baseQuery: function () {
-      this.resetCollection()
-    },
-    filterQuery: function () {
-      this.resetCollection()
+  service: {
+    type: String,
+    required: true
+  },
+  baseQuery: {
+    type: Object,
+    default: function () {
+      return {}
     }
   },
-  methods: {
-    getCollectionBaseQuery () {
-      return this.baseQuery
-    },
-    getCollectionFilterQuery () {
-      return this.filterQuery
+  filterQuery: {
+    type: Object,
+    default: function () {
+      return {}
     }
   },
-  created () {
-    // Force the collection to be refreshed
-    this.refreshCollection()
-    // Whenever the user abilities are updated, update collection as well
-    this.$events.on('user-abilities-changed', this.refreshCollection)
+  listStrategy: {
+    type: String,
+    default: 'smart'
+  },
+  nbItemsPerPage: {
+    type: Number,
+    default: 12
   },
-  beforeUnmount () {
-    this.$events.off('user-abilities-changed', this.refreshCollection)
+  processor: {
+    type: Function,
+    default: undefined
   }
+})
+
+// Computed
+const rendererComponent = computed(() => loadComponent(props.renderer.component))
+
+// Functions
+function onItemToggled (item, toggled) {
+  emit('item-toggled', item, toggled)
 }
+function onItemSelected (item, section) {
+  emit('selection-changed', item, section)
+}
+function onCollectionRefreshed () {
+  emit('collection-refreshed', items.value)
+}
+
+const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } = useCollection(toRefs(props))
+
+// Lifecycle hooks
+
+// Emit events so that embbeding components can be aware of it
+watch(items, onCollectionRefreshed)
+
+onBeforeMount(() => {
+  refreshCollection()
+  // Whenever the user abilities are updated, update collection as well
+  Events.on('user-abilities-changed', refreshCollection)
+})
+
+onBeforeUnmount(() => {
+  Events.off('user-abilities-changed', refreshCollection)
+})
+
+// Expose
+defineExpose({
+  items,
+  nbTotalItems,
+  nbPages,
+  currentPage,
+  refreshCollection,
+  resetCollection
+})
 </script>

package/core/client/components/collection/KTable.vue

@@ -38,162 +38,201 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
 import moment from 'moment'
+import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
 import KPanel from '../KPanel.vue'
 import KStamp from '../KStamp.vue'
-import { service, schemaProxy, baseCollection } from '../../mixins'
+import { Events } from '../../events.js'
+import { i18n } from '../../i18n.js'
+import { useCollection, useSchema } from '../../composables'
 
-export default {
-  mixins: [
-    service,
-    schemaProxy,
-    baseCollection
-  ],
-  components: {
-    KStamp,
-    KPanel
-  },
-  props: {
-    itemActions: {
-      type: [Object, Array],
-      default: () => null
-    },
-    baseQuery: {
-      type: Object,
-      default: () => {}
-    },
-    filterQuery: {
-      type: Object,
-      default: () => {}
-    },
-    title: {
-      type: String
-    },
-    selection: {
-      type: String
-    },
-    listStrategy: {
-      type: String
+const emit = defineEmits(['selection-changed', 'collection-refreshed'])
+
+// Props
+const props = defineProps({
+  renderer: {
+    type: Object,
+    default: () => {
+      return {
+        component: 'collection/KItem'
+      }
     }
   },
-  computed: {
-    selectableColumns () {
-      // Remove special column used for actions
-      return this.columns.filter(column => column.name !== 'actions')
-    }
+  itemActions: {
+    type: [Object, Array],
+    default: () => null
   },
-  data () {
-    return {
-      tableQuery: {
-        $sort: { _id: 1 } // Implicit default sort
-      },
-      columns: [],
-      visibleColumns: [],
-      selectedItems: [],
-      pagination: {
-        sortBy: '_id',
-        descending: false,
-        page: 1,
-        rowsPerPage: this.nbItemsPerPage
-      }
-    }
+  title: {
+    type: String
   },
-  watch: {
-    baseQuery: function () {
-      this.resetCollection()
-    },
-    filterQuery: function () {
-      this.resetCollection()
-    },
-    schema: function (schema) {
-      if (this.schema) {
-        this.processSchema()
-        this.resetCollection()
-      }
+  selection: {
+    type: String
+  },
+  contextId: {
+    type: String,
+    default: undefined
+  },
+  service: {
+    type: String,
+    required: true
+  },
+  baseQuery: {
+    type: Object,
+    default: function () {
+      return {}
     }
   },
-  methods: {
-    getCollectionBaseQuery () {
-      return this.baseQuery
-    },
-    getCollectionFilterQuery () {
-      return Object.assign({}, this.tableQuery, this.filterQuery)
-    },
-    processSchema () {
-      this.columns = [{
-        name: 'actions',
-        align: 'center'
-      }]
-      _.forOwn(this.schema.properties, (value, key) => {
-        const type = _.get(value, 'type')
-        // FIXME: allow for custom representation of complex objects
-        if (type === 'object') return
-        const label = _.get(value, 'field.label', _.get(value, 'field.helper', key))
-        const options = _.get(value, 'field.options', [])
-        const format = _.get(value, 'format')
-        this.columns.push({
-          name: key,
-          // Check if we have a translation key or directly the label content
-          label: this.$tie(label),
-          // This will support GeoJson out-of-the-box
-          field: row => _.get(row, key, _.get(row, `properties.${key}`)),
-          align: 'center',
-          sortable: true,
-          format: (value) => {
-            // Check if the corresponding value is mapped according to an option list
-            const option = _.find(options, { value })
-            if (option && option.label) value = option.label
-            switch (type) {
-              case 'number':
-                return (value ? value.toFixed(2) : '')
-              case 'integer':
-                return (value ? value.toFixed(0) : '')
-              case 'string':
-                return (value ? (format === 'date-time' ? moment.utc(value).toISOString() : value) : '')
-              default:
-                return (value ? value.toString() : '')
-            }
-          }
-        })
-      })
-      this.visibleColumns = this.columns.map(column => column.name)
-    },
-    onCollectionRefreshed () {
-      baseCollection.methods.onCollectionRefreshed.call(this)
-      // Update pagination for table
-      this.pagination.rowsNumber = this.nbTotalItems
-    },
-    onRequest (props) {
-      const { page, rowsPerPage, sortBy, descending } = props.pagination
-      const geoJson = (_.get(this.items, '[0].type') === 'Feature')
-      this.currentPage = page
-      this.tableQuery.$sort = { [geoJson ? `properties.${sortBy}` : sortBy]: (descending ? -1 : 1) }
-      this.refreshCollection()
-      // don't forget to update local pagination object
-      this.pagination.page = page
-      this.pagination.rowsPerPage = rowsPerPage
-      this.pagination.sortBy = sortBy
-      this.pagination.descending = descending
-    },
-    onSelectionChanged (data) {
-      if (this.selection === 'single') {
-        if (data.added) this.onItemSelected(data.rows[0])
-        else this.onItemSelected(null)
-      } else {
-        if (data.added) this.onItemsSelected(this.selectedItems.concat(data.rows))
-        else this.onItemsSelected(this.selectedItems.filter(item => !_.find(data.rows, { _id: item._id })))
-      }
+  filterQuery: {
+    type: Object,
+    default: function () {
+      return {}
     }
   },
-  async created () {
-    // Whenever the user abilities are updated, update collection as well
-    this.$events.on('user-abilities-changed', this.refreshCollection)
-    await this.loadSchema(this.service + '.get')
+  listStrategy: {
+    type: String,
+    default: 'smart'
   },
-  beforeUnmount () {
-    this.$events.off('user-abilities-changed', this.refreshCollection)
+  nbItemsPerPage: {
+    type: Number,
+    default: 12
+  },
+  schema: {
+    type: [String, Object],
+    default: null
+  },
+  processor: {
+    type: Function,
+    default: undefined
+  }
+})
+
+// Data
+const tableQuery = ref({
+  $sort: { _id: 1 } // Implicit default sort
+})
+const columns = ref([])
+const visibleColumns = ref([])
+const selectedItems = ref([])
+const pagination = ref({
+  sortBy: '_id',
+  descending: false,
+  page: 1,
+  rowsPerPage: props.nbItemsPerPage,
+  rowsNumber: 0
+})
+
+// Computed
+// Remove special column used for actions
+const selectableColumns = computed(() => columns.value.filter(column => column.name !== 'actions'))
+const filterQuery = computed(() => Object.assign({}, props.filterQuery, tableQuery.value))
+
+const { schema, compile } = useSchema()
+// Add sort query into collection options
+const options = Object.assign({ filterQuery }, _.omit(toRefs(props), ['filterQuery']))
+const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } = useCollection(options)
+
+// Functions
+function processSchema () {
+  columns.value = [{
+    name: 'actions',
+    align: 'center'
+  }]
+  _.forOwn(schema.value.properties, (value, key) => {
+    const type = _.get(value, 'type')
+    // FIXME: allow for custom representation of complex objects
+    if (type === 'object') return
+    const label = _.get(value, 'field.label', _.get(value, 'field.helper', key))
+    const options = _.get(value, 'field.options', [])
+    const format = _.get(value, 'format')
+    columns.value.push({
+      name: key,
+      // Check if we have a translation key or directly the label content
+      label: i18n.tie(label),
+      // This will support GeoJson out-of-the-box
+      field: row => _.get(row, key, _.get(row, `properties.${key}`)),
+      align: 'center',
+      sortable: true,
+      format: (value) => {
+        // Check if the corresponding value is mapped according to an option list
+        const option = _.find(options, { value })
+        if (option && option.label) value = option.label
+        switch (type) {
+          case 'number':
+            return (value ? value.toFixed(2) : '')
+          case 'integer':
+            return (value ? value.toFixed(0) : '')
+          case 'string':
+            return (value ? (format === 'date-time' ? moment.utc(value).toISOString() : value) : '')
+          default:
+            return (value ? value.toString() : '')
+        }
+      }
+    })
+  })
+  visibleColumns.value = columns.value.map(column => column.name)
+}
+function onRequest (props) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination
+  const geoJson = (_.get(items.value, '[0].type') === 'Feature')
+  currentPage.value = page
+  tableQuery.value.$sort = { [geoJson ? `properties.${sortBy}` : sortBy]: (descending ? -1 : 1) }
+  // Don't forget to update local pagination object
+  pagination.value.page = page
+  pagination.value.rowsPerPage = rowsPerPage
+  pagination.value.sortBy = sortBy
+  pagination.value.descending = descending
+  // This will trigger a collection refresh, take care composable options are refs
+  options.filterQuery.value = Object.assign({}, props.filterQuery, tableQuery.value)
+}
+function onSelectionChanged (data) {
+  if (props.selection === 'single') {
+    if (data.added) emit('selection-changed', data.rows[0])
+    else emit('selection-changed', null)
+  } else {
+    if (data.added) emit('selection-changed', selectedItems.value.concat(data.rows))
+    else emit('selection-changed', selectedItems.value.filter(item => !_.find(data.rows, { _id: item._id })))
   }
 }
+function onCollectionRefreshed () {
+  emit('collection-refreshed', items.value)
+}
+
+// Lifecycle hooks
+
+// Emit events so that embbeding components can be aware of it
+watch(items, onCollectionRefreshed)
+watch(schema, () => {
+  processSchema()
+  resetCollection()
+})
+watch(() => props.schema, async (value) => {
+  await compile(props.schema || `${props.service}.get`)
+})
+watch(nbTotalItems, () => {
+  // Update pagination for table
+  pagination.value.rowsNumber = nbTotalItems.value
+})
+
+onBeforeMount(async () => {
+  // This will launch collection refresh
+  await compile(props.schema || `${props.service}.get`)
+  // Whenever the user abilities are updated, update collection as well
+  Events.on('user-abilities-changed', refreshCollection)
+})
+
+onBeforeUnmount(() => {
+  Events.off('user-abilities-changed', refreshCollection)
+})
+
+// Expose
+defineExpose({
+  items,
+  nbTotalItems,
+  nbPages,
+  currentPage,
+  refreshCollection,
+  resetCollection
+})
 </script>

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

@@ -9,13 +9,14 @@
         :ref="onFormReferenceCreated"
         :schema="schema"
         @form-ready="onFormReady"
+        class="q-pa-sm"
       />
     </div>
     <!--
       Buttons section
     -->
-    <div>
-      <div class="q-pt-md row justify-end">
+    <div v-if="!hideButtons">
+      <div class="row justify-end">
         <q-btn v-if="clearButton !== ''" id="clear-button" color="primary" :label="clearButton" @click="clearEditor"/>
         <q-btn v-if="resetButton !== ''" id="reset-button" color="primary" :label="resetButton" @click="resetEditor"/>
         <q-btn v-if="applyButton !== ''" id="apply-button" color="primary" :label="applyButton" @click="apply"/>
@@ -38,7 +39,13 @@ export default {
     objectProxy,
     schemaProxy
   ],
-  async created () {
+  props: {
+    hideButtons: {
+      type: Boolean,
+      default: false
+    }
+  },
+  async mounted () {
     await this.refresh()
   }
 }

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

@@ -4,20 +4,29 @@
       {{ model.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'"
-    :id="properties.name + '-field'"
     v-model="file"
     :label="label"
-    clearable
-    counter
     :accept="acceptedTypes"
     :filter="filterSelectedFiles"
     :error="hasError"
     :error-message="errorLabel"
     bottom-slots
     :disable="disabled"
-    @clear="onFileCleared"
     @update:model-value="onFileChanged"
     @rejected="onFileRejected">
     <!-- Helper -->
@@ -40,7 +49,8 @@ export default {
   mixins: [baseField],
   data () {
     return {
-      file: null
+      file: null,
+      changed: false
     }
   },
   computed: {
@@ -61,7 +71,7 @@ export default {
       return _.filter(files, file => { return file.name.includes(filter) })
     },
     onFileCleared () {
-      this.model = this.emptyModel()
+      this.file = null
       this.error = ''
       this.onChanged()
     },
@@ -72,6 +82,8 @@ export default {
           // 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
@@ -83,6 +95,7 @@ export default {
               // 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()
@@ -113,10 +126,11 @@ export default {
     },
     async submitted (object, field) {
       // Check wether we need to upload file content
-      if (_.get(this.model, 'key')) {
+      if (this.changed && _.get(this.model, 'key')) {
         // 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(`Uploading file ${this.model.name} with key ${this.model.key}`)
         Storage.upload({
           file: this.model.name,
@@ -124,7 +138,7 @@ export default {
           key: this.model.key,
           blob: this.file,
           context
-        })
+        }, { query })
           .then(() => {
             this.$notify({
               type: 'positive',