@kalisio/kdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <q-separator />
+    <!--
+      Header section
+     -->
+    <div v-if="!hideHeader" class="row full-width items-center" style="min-height: 30px">
+      <span class="text-grey-7 text-body-2">
+        {{ title }}
+      </span>
+      <q-space />
+      <KPanel
+        v-if="actions"
+        :content="actions"
+        :context="context"
+      />
+    </div>
+    <!--
+      Content section
+     -->
+    <div v-bind:class="{ 'q-py-xs': dense, 'q-py-sm': !dense }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+// Props
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  actions: {
+    type: Array,
+    default: () => null
+  },
+  hideHeader: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  context: {
+    type: Object,
+    default: () => null
+  }
+})
+</script>

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

@@ -0,0 +1,225 @@
+<template>
+  <div class="column full-width">
+    <!--
+      Header
+     -->
+     <div class="full-width">
+      <q-resize-observer @resize="onHeaderResized" />
+      <KPanel
+        id="header"
+        :content="header"
+        class="no-wrap"
+      />
+    </div>
+    <!--
+      Items
+     -->
+    <div v-if="items.length > 0">
+      <KScrollArea
+        ref="scrollArea"
+        :max-height="scrollHeight"
+        @scrolled="onScrolled"
+      >
+        <div
+          class="full-width column"
+          :class="{
+            'q-gutter-y-xs': gutter && dense,
+            'q-gutter-y-sm': gutter && !dense
+          }"
+          :style="{ maxWidth: `${width}px` }"
+        >
+          <template v-for="item in items" :key="item._id">
+            <component
+              :id="item._id"
+              :service="service"
+              :item="item"
+              :contextId="contextId"
+              :is="rendererComponent"
+              v-bind="renderer"
+              @item-selected="onItemSelected"
+              :class="{
+                'q-pr-xs': dense,
+                'q-pr-sm': !dense
+              }"
+            />
+          </template>
+        </div>
+      </KScrollArea>
+      <div
+        v-if="scrollAction"
+        class="row justify-center"
+      >
+        <KAction
+          id="scroll-action"
+          icon="las la-angle-double-down"
+          color="accent"
+          size="1rem"
+          :handler="scrollDown"
+        />
+      </div>
+    </div>
+    <div v-else>
+      <slot name="empty-column">
+        <div class="row justify-center">
+          <KStamp
+            icon="las la-exclamation-circle"
+            icon-size="1.6rem"
+            :text="$t('KColumn.EMPTY_COLUMN')"
+            direction="horizontal"
+            class="q-pt-lg"
+          />
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
+import { Events } from '../../events.js'
+import KAction from '../KAction.vue'
+import KScrollArea from '../KScrollArea.vue'
+import KStamp from '../KStamp.vue'
+import { useCollection } from '../../composables'
+import { loadComponent } from '../../utils/index.js'
+
+const emit = defineEmits(['selection-changed', 'collection-refreshed'])
+
+// Props
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  header: {
+    type: Array,
+    default: () => null
+  },
+  renderer: {
+    type: Object,
+    default: () => {
+      return {
+        component: 'collection/KCard'
+      }
+    }
+  },
+  width: {
+    type: Number,
+    default: 200
+  },
+  height: {
+    type: Number,
+    default: 300
+  },
+  gutter: {
+    type: Boolean,
+    default: true
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  contextId: {
+    type: String,
+    default: undefined
+  },
+  service: {
+    type: String,
+    required: true
+  },
+  baseQuery: {
+    type: Object,
+    default: () => {}
+  },
+  filterQuery: {
+    type: Object,
+    default: () => {}
+  },
+  listStrategy: {
+    type: String,
+    default: 'smart'
+  },
+  processor: {
+    type: Function,
+    default: undefined
+  }
+})
+
+// Data
+const scrollArea = ref(null)
+const scrollAction = ref(false)
+const headerHeight = ref(0)
+// Configuration
+const scrollOffset = 350
+const scrollDuration = 250
+
+// Computed
+const rendererComponent = computed(() => loadComponent(props.renderer.component))
+const scrollHeight = computed(() => props.height - headerHeight.value)
+
+// Always use append mode for columns
+const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } =
+  useCollection(Object.assign({ appendItems: ref(true) }, toRefs(props)))
+
+// Functions
+function onHeaderResized (size) {
+  headerHeight.value = size.height
+}
+function onScrolled (info) {
+  if (items.value.length < nbTotalItems.value) {
+    if (info.verticalPercentage === 1) {
+      if (items.value.length === currentPage.value * props.nbItemsPerPage) currentPage.value++
+      refreshCollection()
+      scrollAction.value = true
+    } else {
+      scrollAction.value = info.verticalSize > scrollHeight.value
+    }
+  } else {
+    if (info.verticalPercentage === 1) {
+      scrollAction.value = false
+    } else {
+      scrollAction.value = info.verticalSize > scrollHeight.value
+    }
+  }
+}
+function scrollDown () {
+  const position = scrollArea.value.getScrollPosition('vertical')
+  scrollArea.value.setScrollPosition('vertical', position + scrollOffset, scrollDuration)
+}
+function onItemSelected (item, section) {
+  emit('selection-changed', item, section)
+}
+function onCollectionRefreshed () {
+  emit('collection-refreshed', items.value)
+}
+
+// Lifecycle hooks
+watch(items, () => {
+  // On reset, reset as well scroll area
+  if (_.isEmpty(items.value) && scrollArea.value) scrollArea.value.setScrollPosition('vertical', 0)
+  // Emit events so that embbeding components can be aware of it
+  onCollectionRefreshed()
+})
+
+onBeforeMount(() => {
+  refreshCollection()
+  // Whenever the user abilities are updated, update collection as well
+  Events.on('user-abilities-changed', resetCollection)
+})
+
+onBeforeUnmount(() => {
+  Events.off('user-abilities-changed', resetCollection)
+})
+
+// Expose
+defineExpose({
+  name: props.name,
+  items,
+  nbTotalItems,
+  nbPages,
+  currentPage,
+  refreshCollection,
+  resetCollection
+})
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="q-pa-xs" :style="innerStyle">
+    <!--
+      Input area
+     -->
+    <q-input
+      :label="pattern ? undefined: $tie(label)"
+      v-model="pattern"
+      clearable
+      borderless
+      dense
+      debounce="500"
+      @update:model-value="onSearch"
+    >
+      <template v-slot:before>
+        <div class="row">
+          <q-icon class="q-pl-xs" dense name="search" />
+          <template v-for="item in items" :key="item.name">
+            <q-chip
+              square
+              dense
+              removable
+              color="primary"
+              text-color="white"
+              size="md"
+              @remove="onItemRemoved(item._id)"
+            >
+              <q-icon v-if="getItemIcon(item)" class="q-pr-sm" :name="getItemIcon(item)" />
+              {{ getItemLabel(item) }}
+            </q-chip>
+          </template>
+        </div>
+      </template>
+    </q-input>
+    <!--
+      Options menu
+     -->
+    <q-menu
+      v-if="options.length > 0"
+      no-focus
+      no-refocus
+      v-model="hasOptions"
+    >
+      <q-list style="min-width: 100px">
+        <template v-for="option in options" :key="option.name">
+          <q-item
+            clickable
+            @click="onItemSelected(option)"
+            v-close-popup>
+            <q-item-section v-if="getItemIcon(option)" avatar>
+              <q-icon :name="getItemIcon(option)" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ getItemLabel(option) }}</q-item-label>
+              <q-item-label caption>{{ getItemDescription(option) }}</q-item-label>
+            </q-item-section>
+        </q-item>
+        </template>
+      </q-list>
+    </q-menu>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { Filter } from '../../filter'
+import { Search } from '../../search'
+
+export default {
+  props: {
+    label: {
+      type: String,
+      default: 'KFilter.SEARCH_LABEL'
+    },
+    field: {
+      type: String,
+      default: 'name'
+    },
+    description: {
+      type: String,
+      default: 'description'
+    },
+    services: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    innerStyle () {
+      if (this.$q.screen.lt.md) return 'width: 80vw'
+      if (this.$q.screen.lt.lg) return 'width: 60vw'
+      return 'width: 50vw'
+    },
+    hasOptions: {
+      get: function () {
+        return this.options.length > 0
+      },
+      set: function (value) {
+        if (!value) this.options = []
+      }
+    }
+  },
+  data () {
+    return {
+      pattern: Filter.getPattern(),
+      items: Filter.getItems(),
+      options: []
+    }
+  },
+  methods: {
+    getItemLabel (item) {
+      return _.get(item, item.field)
+    },
+    getItemDescription (item) {
+      return _.get(item, this.description)
+    },
+    getItemIcon (item) {
+      return _.get(item, 'icon.name', _.get(item, 'icon'))
+    },
+    onItemSelected (item) {
+      this.items.push(item)
+      this.pattern = ''
+      this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+    },
+    onItemRemoved (itemId) {
+      this.items = _.filter(this.items, item => { return item._id !== itemId })
+      this.$store.patch('filter', { items: this.items, pattern: this.pattern })
+    },
+    async onSearch (pattern) {
+      // take about a null pattern received when clearing the input
+      if (_.isNull(pattern)) pattern = ''
+      // update the pattern
+      this.pattern = pattern
+      this.$store.patch('filter', { pattern: this.pattern })
+      // run the search if the pattern is not empty
+      if (!_.isEmpty(pattern)) {
+        const results = await Search.query(this.services, pattern)
+        if (results.length > 0) {
+          this.options = _.differenceWith(results, this.items, (item1, item2) => {
+            return item1._id === item2._id
+          })
+        }
+      }
+    }
+  },
+  created () {
+    // Initialize the filter, we keep track of any existing items previously set by another activity
+    this.$store.patch('filter', { field: this.field, pattern: '' })
+  },
+  beforeUnmount () {
+    this.items = []
+    this.options = []
+  },
+  unmounted () {
+    Filter.clear()
+  }
+}
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+  <div v-if="items.length > 0" class="q-pa-sm row">
+    <template v-for="item in items" :key="item._id">
+      <div :class="itemClass">
+        <component
+          :id="item._id"
+          :service="service"
+          :item="item"
+          :contextId="contextId"
+          :is="rendererComponent"
+          v-bind="renderer"
+          @item-selected="onItemSelected" />
+      </div>
+    </template>
+    <div v-if="nbPages > 1" class="col-12">
+      <q-pagination
+        class="justify-center q-ma-md"
+        v-model="currentPage"
+        :max="nbPages"
+        :input="true"
+        @update:model-value="refreshCollection"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <slot name="empty-section">
+      <div class="row justify-center">
+        <KStamp icon="las la-exclamation-circle" icon-size="1.6rem" :text="$t('KGrid.EMPTY_GRID')" direction="horizontal" />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
+import KStamp from '../KStamp.vue'
+import { Events } from '../../events.js'
+import { useCollection } from '../../composables'
+import { loadComponent } from '../../utils'
+
+const emit = defineEmits(['selection-changed', 'collection-refreshed'])
+
+// Props
+const props = defineProps({
+  renderer: {
+    type: Object,
+    default: () => {
+      return {
+        component: 'collection/KCard'
+      }
+    }
+  },
+  contextId: {
+    type: String,
+    default: undefined
+  },
+  service: {
+    type: String,
+    required: true
+  },
+  baseQuery: {
+    type: Object,
+    default: () => {}
+  },
+  filterQuery: {
+    type: Object,
+    default: () => {}
+  },
+  listStrategy: {
+    type: String,
+    default: 'smart'
+  },
+  nbItemsPerPage: {
+    type: Number,
+    default: 12
+  },
+  processor: {
+    type: Function,
+    default: undefined
+  }
+})
+
+// Computed
+const rendererComponent = computed(() => loadComponent(props.renderer.component))
+const itemClass = computed(() => props.renderer.class || 'q-pa-sm col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2')
+
+// Functions
+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/KHistory.vue

@@ -0,0 +1,112 @@
+<template>
+  <KColumn
+    :service="service"
+    :renderer="computedRenderer"
+    :contextId="contextId"
+    :baseQuery="baseQuery"
+    :filterQuery="computedFilterQuery"
+    :listStrategy="listStrategy"
+    :processor="processor"
+    :width="width"
+    :height="height"
+    @collection-refreshed="onCollectionRefreshed">
+    <template v-slot:empty-column>
+      <slot name="empty-history">
+        <div class="row justify-center">
+          <KStamp
+            icon="las la-exclamation-circle"
+            icon-size="1.6rem"
+            :text="$t('KColumn.EMPTY_COLUMN')"
+            direction="horizontal" />
+        </div>
+      </slot>
+    </template>
+  </KColumn>
+</template>
+
+<script>
+import _ from 'lodash'
+import { Time, Sorter } from '../..'
+import KColumn from './KColumn.vue'
+import KStamp from '../KStamp.vue'
+
+export default {
+  components: {
+    KColumn,
+    KStamp
+  },
+  props: {
+    renderer: {
+      type: Object,
+      required: true
+    },
+    dateField: {
+      type: String,
+      default: 'createdAt'
+    },
+    contextId: {
+      type: String,
+      default: undefined
+    },
+    service: {
+      type: String,
+      required: true
+    },
+    baseQuery: {
+      type: Object,
+      default: () => {}
+    },
+    filterQuery: {
+      type: Object,
+      default: () => {}
+    },
+    listStrategy: {
+      type: String,
+      default: 'smart'
+    },
+    processor: {
+      type: Function,
+      default: undefined
+    },
+    width: {
+      type: Number,
+      required: true
+    },
+    height: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    computedRenderer () {
+      return {
+        component: 'collection/KHistoryEntry',
+        renderer: this.renderer,
+        dateField: this.dateField
+      }
+    },
+    computedFilterQuery () {
+      const query = _.clone(this.filterQuery)
+      Object.assign(query, _.clone(this.timeRange.query))
+      return query
+    }
+  },
+  data () {
+    return {
+      timeRange: Time.getRange(),
+      sorter: Sorter.get()
+    }
+  },
+  methods: {
+    async onCollectionRefreshed (items) {
+      _.forEach(items, (item, index) => {
+        item.previous = index > 0 ? items[index - 1] : undefined
+        item.side = (index % 2 ? 'left' : 'right')
+      })
+    }
+  },
+  created () {
+    Time.patchField(this.dateField)
+  }
+}
+</script>