wip: Refactor collections based components #917

kalisio · Aug 30, 2024 · 5c0d00f · 5c0d00f
1 parent ee53d51
commit 5c0d00f
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 75 deletions.
diff --git a/core/client/components/collection/KGrid.vue b/core/client/components/collection/KGrid.vue
@@ -1,65 +1,50 @@
 <template>
-  <div class="fit column no-wrap">
+  <div 
+    class="fit column no-wrap"
+    :class="dense ? 'q-gutter-y-xs' : 'q-gutter-y-sm'"
+  >
     <!--
       Header
     -->
-    <div>
+    <div id="grid-header">
       <slot name="header">
         <KPanel :content="header" :class="headerClass" />
       </slot>
     </div>
     <!--
       Content
     -->
-    <div v-if="items.length > 0" class="col">
+    <div v-if="items.length > 0" 
+      id="grid-content" 
+      ref="contentRef"
+      class="scroll"
+    >
       <!-- Infinite mode -->
-      <div v-if="appendItems" class="fit column no-wrap">
-        <div ref="scrollTargetRef" id="scroll-target" class="fit scroll">
-          <q-infinite-scroll
-            @load="onLoad"
-            :initial-index="1"
-            :offset="200"
-            v-scroll="onScroll"
-          >
-            <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>
-        <div v-if="scrollTargetRef"
-          :class="$q.screen.lt.md ? 'q-px-sm' : 'q-px-md'"
-          class="row items-center"
+      <div v-if="appendItems" class="column">
+        <q-infinite-scroll
+          @load="onLoad"
+          :initial-index="1"
+          :offset="200"
+          v-scroll="onScroll"
+          class="col"
         >
-          <div class="col-4"></div>
-          <div class="col-4 row justify-center">
-            <KScrollDown
-              v-if="scrollDown"
-              :ref="scrollDownRefCreated"
-              target="scroll-target"
-              :loading="loadDoneFunction ? true : false"
-            />
-          </div>
-          <div class="col-4 row justify-end">
-            <KScrollToTop
-              v-if="scrollToTop"
-              :ref="scrollToTopRefCreated"
-              target="scroll-target"
-            />
+          <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>
-        </div>
+        </q-infinite-scroll>
       </div>
       <!-- Paginated mode -->
       <div v-else class="row">
@@ -76,19 +61,10 @@
             />
           </div>
         </template>
-        <div v-if="nbPages > 1" class="col-12">
-          <q-pagination
-            class="row justify-center q-ma-md"
-            v-model="currentPage"
-            :max="nbPages"
-            :input="true"
-            @update:model-value="refreshCollection"
-          />
-        </div>
       </div>
     </div>
     <!-- Empty slot -->
-    <div v-else>
+    <div v-else id="grid-content">
       <slot name="empty">
         <div class="row justify-center">
           <KStamp
@@ -101,10 +77,48 @@
         </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>
+      <!-- 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>
+    <div id="grid-footer">
       <slot name="footer">
         <KPanel :content="footer" :class="footerClass" />
       </slot>
@@ -187,6 +201,10 @@ const props = defineProps({
   footerClass: {
     type: String,
     default: undefined
+  },
+  dense: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -195,7 +213,7 @@ const emit = defineEmits(['collection-refreshed', 'selection-changed'])
 
 // Data
 const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } = useCollection(toRefs(props))
-const scrollTargetRef = ref(null)
+const contentRef = ref(null)
 const scrollDownRef = ref(null)
 const scrollToTopRef = ref(null)
 const loadDoneFunction = ref(null)

diff --git a/core/client/components/collection/KTimeLine.vue b/core/client/components/collection/KTimeLine.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="fit column no-wrap">
+  <div 
+    class="fit column no-wrap"
+    :class="dense ? 'q-gutter-y-xs' : 'q-gutter-y-sm'"
+  >
     <!--
       Header
     -->
-    <div class="q-pr-xs q-pb-xs">
+    <div id="timeline-header" class="q-pr-xs q-pb-xs">
       <slot name="header">
         <KPanel
           :content="header"
@@ -14,13 +17,16 @@
     <!--
       Content
     -->
-    <div v-if="items.length > 0" ref="scrollTargetRef" id="scroll-target" class="scroll">
+    <div v-if="items.length > 0" 
+      id="timeline-content"
+      ref="contentRef"  
+      class="col scroll"
+    >
       <q-timeline
         color="primary"
         :layout="layout"
       >
         <q-infinite-scroll
-          id="infinite-scroll"
           @load="onLoad"
           :initial-index="1"
           :offset="200"
@@ -74,7 +80,7 @@
                   </div>
                 </slot>
               </template>
-              <div :class="$q.screen.lt.md ? 'q-pr-sm' :'q-pr-md'">
+              <div :class="dense ? 'q-pr-sm' : 'q-pr-md'">
                 <component
                   v-if="bodyRenderer" :class="bodyRendererClass"
                   :id="item._id"
@@ -93,7 +99,7 @@
       </q-timeline>
     </div>
     <!-- Empty slot -->
-    <div v-else>
+    <div v-else id="timeline-content">
       <slot name="empty">
         <KStamp
           icon="las la-exclamation-circle"
@@ -106,33 +112,34 @@
       </slot>
     </div>
     <!--
-      Scroll
+      Controls
      -->
-    <div v-if="scrollTargetRef"
-      :class="$q.screen.lt.md ? 'q-px-sm' : 'q-px-md'"
+    <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="scroll-target"
+          target="timeline-content"
           :loading="loadDoneFunction ? true : false"
       />
       </div>
       <div class="col-4 row justify-end">
         <KScrollToTop
           v-if="scrollToTop"
           :ref="scrollToTopRefCreated"
-          target="scroll-target"
+          target="timeline-content"
         />
       </div>
     </div>
     <!--
       Footer
     -->
-    <div>
+    <div id="timeline-footer">
       <slot name="footer">
         <q-separator inset v-if="footer"/>
         <KPanel
@@ -148,7 +155,7 @@
 import _ from 'lodash'
 import moment from 'moment'
 import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
-import { useQuasar } from 'quasar'
+import { useQuasar, scroll } from 'quasar'
 import { useCollection } from '../../composables'
 import { Events } from '../../events.js'
 import { Time } from '../../time.js'
@@ -231,6 +238,10 @@ const props = defineProps({
   footerClass: {
     type: String,
     default: undefined
+  },
+  dense: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -240,7 +251,7 @@ const emit = defineEmits(['collection-refreshed', 'selection-changed'])
 // Data
 const $q = useQuasar()
 const { items, nbTotalItems, currentPage, refreshCollection } = useCollection(_.merge(toRefs(props), { appendItems: ref(true) }))
-const scrollTargetRef = ref(null)
+const contentRef = ref(null)
 const scrollDownRef = ref(null)
 const scrollToTopRef = ref(null)
 const loadDoneFunction = ref(null)
@@ -253,13 +264,14 @@ 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 $q.screen.lt.sm ? '24px' : '32px'
+  return props.dense ? '24px' : '32px'
 })
 
 // Watch