@kalisio/kdk 2.3.2 → 2.4.0

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

@@ -0,0 +1,47 @@
+<template>
+  <KCardSection
+    :title="$t('KDescriptionCardSection.TITLE')"
+    :actions="actions"
+    :actionsFilter="actionsFilter"
+    :hideHeader="hideHeader"
+    :dense="dense"
+  >
+    <KTextArea
+      v-if="description"
+      :text="description"
+      :minHeight="48"
+      :dense="dense"
+    />
+    <div v-else :style="`height: 44px; position: relative`">
+      <KStamp
+        text="KDescriptionCardSection.NO_DESCRIPTION"
+        icon="las la-exclamation-circle"
+        iconSize="24px"
+        direction="horizontal"
+        class="absolute-center"
+      />
+    </div>
+  </KCardSection>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { CardSectionProps } from '../../utils/utils.items.js'
+import KCardSection from './KCardSection.vue'
+import KTextArea from '../KTextArea.vue'
+
+// Props
+const props = defineProps({
+  descriptionPath: {
+    type: String,
+    default: 'description'
+  },
+  ...CardSectionProps
+})
+
+// Computed
+const description = computed(() => {
+  return _.get(props.item, props.descriptionPath)
+})
+</script>

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

@@ -1,55 +1,154 @@
 <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 class="fit column no-wrap">
+    <!--
+      Header
+    -->
+    <div id="grid-header">
+      <slot name="header">
+        <KPanel :content="header" :class="headerClass" />
+      </slot>
+    </div>
+    <!--
+      Content
+    -->
+    <div v-if="items && items.length > 0"
+      id="grid-content"
+      ref="contentRef"
+      class="col scroll"
+    >
+      <!-- Infinite mode -->
+      <div v-if="appendItems" class="column">
+        <q-infinite-scroll
+          @load="onLoad"
+          :initial-index="1"
+          :offset="200"
+          v-scroll="onScroll"
+          class="col"
+        >
+          <div class="row">
+            <template v-for="(item, index) in items" :key="item._id">
+              <div :class="rendererClass">
+                <component
+                  :id="item._id"
+                  :ref="onItemRendered"
+                  :service="service"
+                  :item="item"
+                  :contextId="contextId"
+                  :is="itemRenderer"
+                  v-bind="renderer"
+                  @item-selected="onItemSelected"
+                />
+              </div>
+            </template>
+          </div>
+        </q-infinite-scroll>
+      </div>
+      <!-- Paginated mode -->
+      <div v-else class="row">
+        <template v-for="item in items" :key="item._id">
+          <div :class="rendererClass">
+            <component
+              :id="item._id"
+              :ref="onItemRendered"
+              :service="service"
+              :item="item"
+              :contextId="contextId"
+              :is="itemRenderer"
+              v-bind="renderer"
+              @item-selected="onItemSelected"
+            />
+          </div>
+        </template>
       </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" />
+    <!-- Empty slot -->
+    <div v-else-if="items && items.length === 0"
+       id="grid-empty"
+    >
+      <slot name="empty">
+        <div class="row justify-center">
+          <KStamp
+            icon="las la-exclamation-circle"
+            icon-size="1.6rem"
+            :text="$t('KGrid.EMPTY_LABEL')"
+            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">
+          <q-spinner
+            color="primary"
+            size="2rem"
+          />
+        </div>
+      </slot>
+    </div>
+    <!--
+      Controls
+     -->
+    <div id="grid-controls">
+      <div v-if="appendItems">
+        <!-- scroll -->
+        <div v-if="contentRef" class="row items-center">
+          <div class="col-4"></div>
+          <div class="col-4 row justify-center">
+            <KScrollDown
+              v-if="scrollDown"
+              :ref="scrollDownRefCreated"
+              target="grid-content"
+              :loading="loadDoneFunction ? true : false"
+          />
+          </div>
+          <div class="col-4 row justify-end">
+            <KScrollToTop
+              v-if="scrollToTop"
+              :ref="scrollToTopRefCreated"
+              target="grid-content"
+            />
+          </div>
+        </div>
       </div>
-    </slot>
+      <!-- pagination -->
+      <div v-else>
+        <div v-if="nbPages > 1" class="row justify-center">
+          <q-pagination
+            v-model="currentPage"
+            :max="nbPages"
+            :input="true"
+            @update:model-value="refreshCollection"
+          />
+        </div>
+      </div>
+
+    </div>
+    <!--
+      Footer
+    -->
+    <div id="grid-footer">
+      <slot name="footer">
+        <KPanel :content="footer" :class="footerClass" />
+      </slot>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
-import KStamp from '../KStamp.vue'
-import { Events } from '../../events.js'
+import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
 import { useCollection } from '../../composables'
+import { Events } from '../../events.js'
 import { loadComponent } from '../../utils'
-
-const emit = defineEmits(['selection-changed', 'collection-refreshed'])
+import KScrollToTop from './KScrollToTop.vue'
+import KScrollDown from './KScrollDown.vue'
+import KStamp from '../KStamp.vue'
+import KPanel from '../KPanel.vue'
 
 // Props
 const props = defineProps({
-  renderer: {
-    type: Object,
-    default: () => {
-      return {
-        component: 'collection/KCard'
-      }
-    }
-  },
   contextId: {
     type: String,
     default: undefined
@@ -66,45 +165,126 @@ const props = defineProps({
     type: Object,
     default: () => {}
   },
-  listStrategy: {
-    type: String,
-    default: 'smart'
+  renderer: {
+    type: Object,
+    default: () => {
+      return {
+        component: 'collection/KCard'
+      }
+    }
+  },
+  processor: {
+    type: Function,
+    default: undefined
+  },
+  appendItems: {
+    type: Boolean,
+    default: false
   },
   nbItemsPerPage: {
     type: Number,
     default: 12
   },
-  processor: {
-    type: Function,
+  listStrategy: {
+    type: String,
+    default: 'smart'
+  },
+  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 { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } = useCollection(toRefs(props))
+const contentRef = ref(null)
+const scrollDownRef = ref(null)
+const scrollToTopRef = ref(null)
+const loadDoneFunction = ref(null)
+
 // 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')
+const itemRenderer = computed(() => {
+  return loadComponent(props.renderer.component)
+})
+const rendererClass = computed(() => {
+  return props.renderer.class || 'q-pa-sm col-12 col-sm-6 col-md-4 col-lg-3'
+})
+
+// Watch
+watch(items, onCollectionRefreshed)
 
 // Functions
+function onItemRendered (instance) {
+  if (instance) onScroll()
+}
+function scrollDownRefCreated (instance) {
+  scrollDownRef.value = instance
+  if (instance) instance.refresh()
+}
+function scrollToTopRefCreated (instance) {
+  scrollToTopRef.value = instance
+  if (instance) instance.refresh()
+}
+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 onItemSelected (item, section) {
   emit('selection-changed', item, section)
 }
 function onCollectionRefreshed () {
   emit('collection-refreshed', items.value)
+  // call done callback if needed
+  if (loadDoneFunction.value) {
+    loadDoneFunction.value(items.value.length === nbTotalItems.value)
+    loadDoneFunction.value = null
+  }
 }
 
-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)
-
+// Hooks
 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)
 })

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

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <q-spinner v-if="loading"
+      color="primary"
+      :size="size"
+    />
+    <KAction v-else
+      v-if="isVisible"
+      id="scroll-down"
+      :color="color"
+      :icon="icon"
+      :size="size"
+      :handler="scrollOnce"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, watch } from 'vue'
+import { useQuasar, scroll as qScrollUtils } from 'quasar'
+import { clamp } from '../../utils'
+
+// Props
+const props = defineProps({
+  target: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: 'grey-7'
+  },
+  icon: {
+    type: String,
+    default: 'las la-angle-double-down'
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  duration: {
+    type: Number,
+    default: 200
+  }
+})
+
+// Data
+const $q = useQuasar()
+const isVisible = ref(false)
+
+// Watch
+watch(() => [$q.screen.width, $q.screen.height], () => {
+  refresh()
+})
+
+// Functions
+const refresh = _.debounce(() => {
+  const targetElement = document.getElementById(props.target)
+  if (!targetElement) {
+    logger.error('[KDK] Cannot find target element')
+    return
+  }
+  const containerHeight = targetElement.offsetHeight
+  const scrollHeight = qScrollUtils.getScrollHeight(targetElement)
+  const diff = scrollHeight - containerHeight
+  if (diff <= 0) isVisible.value = false
+  else {
+    const ratio = clamp(qScrollUtils.getVerticalScrollPosition(targetElement) / diff, 0, 1)
+    const percent = Math.round(ratio * 10000) / 10000
+    isVisible.value = percent < 0.99
+  }
+  logger.trace(`[KDK] (KScrollDown) Refreshed with visibility: ${isVisible.value}`)
+}, 100)
+function scrollOnce () {
+  const targetElement = document.getElementById(props.target)
+  if (!targetElement) {
+    logger.error('[KDK] Cannot find target element')
+    return
+  }
+  const position = qScrollUtils.getVerticalScrollPosition(targetElement)
+  const offset = targetElement.offsetHeight * 0.75
+  qScrollUtils.setVerticalScrollPosition(targetElement, position + offset, props.duration)
+  logger.trace(`[KDK] (KScrollDown) Scrolled down with offset: ${offset}`)
+  refresh()
+}
+
+// Expose
+defineExpose({
+  refresh
+})
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <div class="k-scroll-to-top">
+    <KAction
+      v-if="isVisible"
+      id="scroll-to-top"
+      tooltip="KScrollToTop.TOOLTIP"
+      :icon="icon"
+      :color="color"
+      :flat="false"
+      :size="size"
+      :handler="scrollToTop"
+    />
+</div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import logger from 'loglevel'
+import { ref, watch } from 'vue'
+import { useQuasar, scroll as qScrollUtils } from 'quasar'
+import { DefaultZIndex } from '../../layout.js'
+
+// Props
+const props = defineProps({
+  target: {
+    type: String,
+    required: true
+  },
+  color: {
+    type: String,
+    default: 'grey-7'
+  },
+  icon: {
+    type: String,
+    default: 'las la-arrow-up'
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  duration: {
+    type: Number,
+    default: 300
+  },
+  zIndex: {
+    type: Number,
+    default: () => { return DefaultZIndex.fab }
+  }
+})
+
+// Data
+const $q = useQuasar()
+const isVisible = ref(false)
+
+// Watch
+watch(() => [$q.screen.width, $q.screen.height], () => {
+  refresh()
+})
+
+// Functions
+const refresh = _.debounce(() => {
+  const targetElement = document.getElementById(props.target)
+  if (!targetElement) {
+    logger.error('[KDK] Cannot find target element')
+    return
+  }
+  isVisible.value = qScrollUtils.getVerticalScrollPosition(targetElement) > 0
+  logger.trace(`[KDK] (KScrollToTop) Refreshed with visibility: ${isVisible.value}`)
+}, 100)
+function scrollToTop () {
+  const targetElement = document.getElementById(props.target)
+  if (!targetElement) {
+    logger.error('[KDK] Cannot find target element')
+    return
+  }
+  qScrollUtils.setVerticalScrollPosition(targetElement, 0, props.duration)
+  logger.trace('[KDK] (KScrollToTop) Scrolled to top')
+  refresh()
+}
+
+// Expose
+defineExpose({
+  refresh
+})
+</script>
+
+<style lang="scss" scoped>
+.k-scroll-to-top {
+  position: relative;
+  transform: translate(-48px, -24px);
+  z-index: v-bind(zIndex);
+}
+</style>