@kalisio/kdk 2.3.2 → 2.4.0

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

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="items.length > 0">
+  <!-- Content -->
+  <div v-if="items && items.length > 0">
     <q-table
       :title="title"
       :rows="items"
@@ -18,6 +19,29 @@
           :display-value="$t('KTable.TABLE_COLUMNS')" emit-value map-options
           :options="selectableColumns" option-value="name" style="min-width: 150px"/>
       </template>
+      <template v-slot:body="props" v-if="hasRenderer">
+        <q-tr :props="props">
+          <q-td :props="props" key="actions" v-if="hasSelection">
+            <q-checkbox :model-value="props.selected" @update:model-value="(val) => props.selected = val" />
+          </q-td>
+          <q-td v-for="(item, index) in renderer" :key="item.key" :props="props">
+            <component
+              v-if="item.component"
+              :item="item"
+              :row="props.row"
+              :is="loadComponent(item.component)"
+            />
+            <p v-else>{{ props.row.properties[`${item.key}`] }}</p>
+          </q-td>
+          <q-td :props="props" key="actions">
+            <KPanel
+              id="item-actions"
+              :content="itemActions"
+              :context="{ item: props.row }"
+            />
+          </q-td>
+        </q-tr>
+      </template>
       <template v-slot:body-cell-actions="props">
         <q-td :props="props">
           <KPanel
@@ -29,12 +53,32 @@
       </template>
     </q-table>
   </div>
-  <div v-else>
-    <div slot="empty-section">
+  <!-- Empty slot -->
+  <div v-else-if="items && items.length === 0"
+    id="table-empty"
+  >
+    <slot name="empty">
+      <div class="row justify-center">
+        <KStamp
+          icon="las la-exclamation-circle"
+          icon-size="1.6rem"
+          :text="$t('KTable.EMPTY_TABLE')"
+          direction="horizontal"
+          class="q-pa-md"
+        />
+      </div>
+    </slot>
+  </div>
+  <!-- Initializing slot -->
+  <div v-else id="grid-initializing">
+    <slot name="initializing">
       <div class="row justify-center">
-        <KStamp icon="las la-exclamation-circle" icon-size="1.6rem" :text="$t('KTable.EMPTY_TABLE')" direction="horizontal" />
+        <q-spinner
+          color="primary"
+          size="2rem"
+        />
       </div>
-    </div>
+    </slot>
   </div>
 </template>
 
@@ -47,17 +91,16 @@ import KStamp from '../KStamp.vue'
 import { Events } from '../../events.js'
 import { i18n } from '../../i18n.js'
 import { useCollection, useSchema } from '../../composables'
+import { loadComponent } from '../../utils/index.js'
 
 const emit = defineEmits(['selection-changed', 'collection-refreshed'])
 
 // Props
 const props = defineProps({
   renderer: {
-    type: Object,
+    type: Array,
     default: () => {
-      return {
-        component: 'collection/KItem'
-      }
+      return []
     }
   },
   itemActions: {
@@ -127,18 +170,31 @@ const pagination = ref({
 // 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 renderer = computed(() => props.renderer)
+const hasRenderer = computed(() => _.isArray(props.renderer) && !_.isEmpty(props.renderer))
+const hasSelection = computed(() => !_.isString(props.selection))
 
 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)
 
+// Watch
+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
+})
+
 // 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
@@ -171,20 +227,27 @@ function processSchema () {
       }
     })
   })
+  columns.value.push({
+    name: 'actions',
+    align: 'center'
+  })
   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) }
+  if (pagination.value.descending !== descending || pagination.value.sortBy !== sortBy) {
+    sortBy === null ? tableQuery.value.$sort = { _id: 1 } : tableQuery.value.$sort = { [geoJson ? `properties.${sortBy}` : sortBy]: (descending ? -1 : 1) }
+    options.filterQuery.value = Object.assign({}, props.filterQuery, tableQuery.value)
+  } else {
+    refreshCollection()
+  }
   // 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') {
@@ -199,29 +262,14 @@ 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
-})
-
+// Hooks
 onBeforeMount(async () => {
   // This will launch collection refresh
   await compile(props.schema || `${props.service}.get`)
+  refreshCollection()
   // Whenever the user abilities are updated, update collection as well
   Events.on('user-abilities-changed', refreshCollection)
 })
-
 onBeforeUnmount(() => {
   Events.off('user-abilities-changed', refreshCollection)
 })
@@ -236,3 +284,9 @@ defineExpose({
   resetCollection
 })
 </script>
+
+<style lang="scss" scoped>
+p {
+  margin: 0;
+}
+</style>

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

@@ -0,0 +1,406 @@
+<template>
+  <div class="fit column no-wrap">
+    <!--
+      Header
+    -->
+    <div id="timeline-header" class="q-pr-xs q-pb-xs">
+      <slot name="header">
+        <KPanel
+          :content="header"
+          :class="headerClass"
+         />
+      </slot>
+    </div>
+    <!--
+      Content
+    -->
+    <div v-if="items && items.length > 0"
+      id="timeline-content"
+      ref="contentRef"
+      class="col scroll"
+    >
+      <q-timeline
+        :layout="layout"
+        color="grey-7"
+      >
+        <q-infinite-scroll
+          @load="onLoad"
+          :initial-index="1"
+          :offset="200"
+          v-scroll="onScroll"
+        >
+          <template v-for="item in items" :key="item._id">
+            <!-- Heading entry if any -->
+            <q-timeline-entry
+              v-if="getHeading(item)"
+              :heading="true"
+            >
+              <div class="k-timeline-heading">
+                {{ getHeading(item) }}
+              </div>
+            </q-timeline-entry>
+            <!-- Item entry -->
+            <q-timeline-entry :color="getColor(item)">
+              <template v-slot:title>
+                <slot name="title">
+                  <div v-if="getTitle(item)" class="text-h6">
+                    {{ getTitle(item) }}
+                  </div>
+                </slot>
+              </template>
+              <template v-slot:subtitle>
+                <slot name="subtitle">
+                  <div v-if="layout === 'dense'" class="row items-center q-gutter-x-sm">
+                    <span v-if="getTimestamp(item)">
+                      {{  getTimestamp(item) }}
+                    </span>
+                    <span v-if="getAuthor(item)" class="text-caption" style="text-transform: capitalize;">
+                      {{  getAuthor(item) }}
+                    </span>
+                    <KPanel
+                      v-if="getDecoration(item)"
+                      :content="getDecoration(item)"
+                    />
+                  </div>
+                  <div v-else class="column items-end">
+                    <span v-if="getTimestamp(item)">
+                      {{  getTimestamp(item) }}
+                    </span>
+                    <span v-if="getAuthor(item)" class="text-caption" style="text-transform: capitalize;">
+                      {{  getAuthor(item) }}
+                    </span>
+                    <KPanel
+                      v-if="getDecoration(item)"
+                      :content="getDecoration(item)"
+                      class="justify-end"
+                    />
+                  </div>
+                </slot>
+              </template>
+              <div :class="dense ? 'q-pr-sm' : 'q-pr-md'">
+                <div v-if="bodyRenderer" :class="bodyRendererClass">
+                  <component
+                    :id="item._id"
+                    :ref="onBodyRendered"
+                    :service="service"
+                    :item="item"
+                    :contextId="contextId"
+                    :is="bodyRendererComponent"
+                    v-bind="bodyRenderer"
+                  />
+                </div>
+                <div v-else v-html="getBody(item)" />
+              </div>
+            </q-timeline-entry>
+          </template>
+        </q-infinite-scroll>
+      </q-timeline>
+    </div>
+    <!-- Empty slot -->
+    <div v-else-if="items && items.length === 0"
+      id="timeline-content"
+    >
+      <slot name="empty">
+        <KStamp
+          icon="las la-exclamation-circle"
+          icon-size="4rem"
+          :text="$t('KTimeLine.EMPTY_LABEL')"
+          text-size="1.2rem"
+          direction="vertical"
+          class="absolute-center"
+        />
+      </slot>
+    </div>
+    <!-- Initializing slot -->
+    <div v-else id="timeline-initializing">
+      <slot name="initializing">
+        <div class="row justify-center">
+          <q-spinner
+            color="primary"
+            size="4rem"
+            class="absolute-center"
+          />
+        </div>
+      </slot>
+    </div>
+    <!--
+      Controls
+     -->
+    <div v-if="contentRef"
+      id="timeline-controls"
+      :class="dense ? 'q-px-sm' : 'q-px-md'"
+      class="row items-center"
+    >
+      <div class="col-4"></div>
+      <div class="col-4 row justify-center">
+        <KScrollDown
+          v-if="scrollDown"
+          :ref="scrollDownRefCreated"
+          target="timeline-content"
+          :loading="loadDoneFunction ? true : false"
+      />
+      </div>
+      <div class="col-4 row justify-end">
+        <KScrollToTop
+          v-if="scrollToTop"
+          :ref="scrollToTopRefCreated"
+          target="timeline-content"
+        />
+      </div>
+    </div>
+    <!--
+      Footer
+    -->
+    <div id="timeline-footer">
+      <slot name="footer">
+        <q-separator inset v-if="footer"/>
+        <KPanel
+          :content="footer"
+          :class="footerClass"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCollection } from '../../composables'
+import { Events } from '../../events.js'
+import { Time } from '../../time.js'
+import { loadComponent } from '../../utils'
+import KScrollToTop from './KScrollToTop.vue'
+import KScrollDown from './KScrollDown.vue'
+import KStamp from '../KStamp.vue'
+import KPanel from '../KPanel.vue'
+
+// Props
+const props = defineProps({
+  contextId: {
+    type: String,
+    default: undefined
+  },
+  service: {
+    type: String,
+    required: true
+  },
+  baseQuery: {
+    type: Object,
+    default: () => { return { $sort: { createdAt: -1 } } }
+  },
+  filterQuery: {
+    type: Object,
+    default: () => {}
+  },
+  nbItemsPerPage: {
+    type: Number,
+    default: 10
+  },
+  listStrategy: {
+    type: String,
+    default: 'smart'
+  },
+  bodyRenderer: {
+    type: Object,
+    default: () => null
+  },
+  schema: {
+    type: Object,
+    default: () => {
+      return {
+        colorField: 'color',
+        titleField: 'name',
+        timestampField: 'createdAt',
+        bodyField: 'description',
+        decorationField: 'tags'
+      }
+    }
+  },
+  processor: {
+    type: Function,
+    default: undefined
+  },
+  sideWidth: {
+    type: Number,
+    default: 20
+  },
+  scrollDown: {
+    type: Boolean,
+    default: true
+  },
+  scrollToTop: {
+    type: Boolean,
+    default: true
+  },
+  header: {
+    type: [Array, Object],
+    default: () => null
+  },
+  headerClass: {
+    type: String,
+    default: undefined
+  },
+  footer: {
+    type: [Array, Object],
+    default: () => null
+  },
+  footerClass: {
+    type: String,
+    default: undefined
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['collection-refreshed', 'selection-changed'])
+
+// Data
+const $q = useQuasar()
+const { items, nbTotalItems, currentPage, refreshCollection } = useCollection(_.merge(toRefs(props), { appendItems: ref(true) }))
+const contentRef = ref(null)
+const scrollDownRef = ref(null)
+const scrollToTopRef = ref(null)
+const loadDoneFunction = ref(null)
+
+// Computed
+const bodyRendererComponent = computed(() => {
+  return loadComponent(props.bodyRenderer.component)
+})
+const bodyRendererClass = computed(() => {
+  return props.bodyRenderer.class || 'col-12'
+})
+const layout = computed(() => {
+  if (props.dense) return 'dense'
+  return $q.screen.lt.md ? 'dense' : 'comfortable'
+})
+const comfortSize = computed(() => {
+  return `${props.sideWidth}%`
+})
+const comfortPadding = computed(() => {
+  return props.dense ? '24px' : '32px'
+})
+
+// Watch
+watch(items, onCollectionRefreshed)
+
+// Functions
+function onBodyRendered (instance) {
+  // Force the scroll components to be refreshed
+  if (instance) onScroll()
+}
+function scrollDownRefCreated (instance) {
+  scrollDownRef.value = instance
+  if (instance) instance.refresh()
+}
+function scrollToTopRefCreated (instance) {
+  scrollToTopRef.value = instance
+  if (instance) instance.refresh()
+}
+function getTitle (item) {
+  return _.get(item, _.get(props.schema, 'titleField'))
+}
+function getTimestamp (item) {
+  const time = _.get(item, _.get(props.schema, 'timestampField'))
+  if (time) return `${Time.format(time, 'date.long')} - ${Time.format(time, 'time.long')}`
+}
+function getAuthor (item) {
+  return _.get(item, _.get(props.schema, 'authorField'))
+}
+function getDecoration (item) {
+  return _.get(item, _.get(props.schema, 'decorationField'))
+}
+function getBody (item) {
+  return _.get(item, _.get(props.schema, 'bodyField'))
+}
+function getColor (item) {
+  return _.get(item, _.get(props.schema, 'colorField'))
+}
+function getHeading (item) {
+  const currentTimestamp = moment(_.get(item, _.get(props.schema, 'timestampField')))
+  if (!currentTimestamp || !currentTimestamp.isValid()) return false
+  const heading = _.capitalize(currentTimestamp.format('MMMM, YYYY'))
+  if (!item.previous) return heading
+  const previousTimestamp = moment(_.get(item.previous, _.get(props.schema, 'timestampField')))
+  if (!previousTimestamp || !previousTimestamp.isValid()) return heading
+  if (currentTimestamp.year() !== previousTimestamp.year()) return heading
+  if (currentTimestamp.month() !== previousTimestamp.month()) return heading
+  return null
+}
+function onScroll () {
+  if (scrollDownRef.value) scrollDownRef.value.refresh()
+  if (scrollToTopRef.value) scrollToTopRef.value.refresh()
+}
+function onLoad (index, done) {
+  // check whether the items are all loaded yet
+  if (items.value.length === nbTotalItems.value) {
+    done(true)
+    return
+  }
+  // set the current page and tell the collection to be refreshed
+  currentPage.value = index
+  refreshCollection()
+  loadDoneFunction.value = done
+}
+function onCollectionRefreshed () {
+  emit('collection-refreshed', items.value)
+  // set previous item. This is required to compute whether it must display an heading or not
+  _.forEach(items.value, (item, index) => {
+    item.previous = index > 0 ? items.value[index - 1] : null
+  })
+  // call done callback if needed
+  if (loadDoneFunction.value) {
+    loadDoneFunction.value(items.value.length === nbTotalItems.value)
+    loadDoneFunction.value = null
+  }
+}
+
+// Hooks
+onBeforeMount(() => {
+  refreshCollection()
+  Events.on('user-abilities-changed', refreshCollection)
+})
+onBeforeUnmount(() => {
+  Events.off('user-abilities-changed', refreshCollection)
+})
+</script>
+
+<style lang="scss">
+.q-timeline__heading-title {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.k-timeline-heading {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+.q-timeline__title {
+  margin-bottom: 4px;
+}
+.q-timeline__subtitle {
+  margin-bottom: 0px;
+  opacity: 0.9;
+  text-transform: capitalize;
+  font-weight: 500;
+}
+.q-timeline__content {
+  padding-bottom: 16px;
+  width: 100%;
+}
+.q-timeline--comfortable .q-timeline__subtitle {
+  width: v-bind(comfortSize);
+}
+.q-timeline--comfortable .q-timeline__content {
+  padding-bottom: 16px;
+  width: calc(100% - v-bind(comfortSize));
+}
+.q-timeline--dense--right .q-timeline__entry {
+  padding-left: v-bind(comfortPadding);
+}
+
+</style>

package/core/client/components/collection/index.js

@@ -2,18 +2,14 @@ import KCard from './KCard.vue'
 import KCardSection from './KCardSection.vue'
 import KGrid from './KGrid.vue'
 import KItem from './KItem.vue'
-import KList from './KList.vue'
 import KHistory from './KHistory.vue'
 import KTable from './KTable.vue'
-import KColumn from './KColumn.vue'
 
 export {
   KCard,
   KCardSection,
   KGrid,
   KItem,
-  KList,
   KHistory,
-  KTable,
-  KColumn
+  KTable
 }