wip: Refactor collections based components #917

core/client/components/collection/KGrid.vue

@@ -11,7 +11,7 @@
     <!--
       Content
     -->
-    <div v-if="items.length > 0"
+    <div v-if="items && items.length > 0"
       id="grid-content"
       ref="contentRef"
       class="col scroll"
@@ -62,7 +62,9 @@
       </div>
     </div>
     <!-- Empty slot -->
-    <div v-else id="grid-content">
+    <div v-else-if="items && items.length === 0"
+       id="grid-empty"
+    >
       <slot name="empty">
         <div class="row justify-center">
           <KStamp
@@ -75,6 +77,17 @@
         </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
      -->

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"
@@ -52,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" />
+        <KStamp
+          icon="las la-exclamation-circle"
+          icon-size="1.6rem"
+          :text="$t('KTable.EMPTY_TABLE')"
+          direction="horizontal"
+          class="q-pa-md"
+        />
       </div>
-    </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>
 </template>
 
@@ -158,6 +179,20 @@ const { schema, compile } = useSchema()
 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 () {
   _.forOwn(schema.value.properties, (value, key) => {
@@ -227,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)
 })

core/client/components/collection/KTimeLine.vue

@@ -14,7 +14,7 @@
     <!--
       Content
     -->
-    <div v-if="items.length > 0"
+    <div v-if="items && items.length > 0"
       id="timeline-content"
       ref="contentRef"
       class="col scroll"
@@ -97,7 +97,9 @@
       </q-timeline>
     </div>
     <!-- Empty slot -->
-    <div v-else id="timeline-content">
+    <div v-else-if="items && items.length === 0" 
+      id="timeline-content"
+    >
       <slot name="empty">
         <KStamp
           icon="las la-exclamation-circle"
@@ -109,6 +111,18 @@
         />
       </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
      -->

core/client/composables/collection.js

@@ -20,7 +20,7 @@ export function useCollection (options) {
   })
 
   // Data
-  const items = ref([])
+  const items = ref(null)
   const nbTotalItems = ref(0)
   const currentPage = ref(1)
   let itemListener = null
@@ -118,6 +118,8 @@ export function useCollection (options) {
   }, options.refreshThrottle.value, { leading: false })
 
   function resetCollection () {
+    // Do not reset the collection since it is initializing 
+    if (_.isNil(items.value)) return
     // Reset pagination and start again refreshing the collection
     if (options.appendItems.value) setCollectionItems([])
     currentPage.value = 1

core/client/mixins/index.js

@@ -1,6 +1,5 @@
 export * from './mixin.base-context.js'
 export * from './mixin.base-activity.js'
-export * from './mixin.base-collection.js'
 export * from './mixin.base-editor.js'
 export * from './mixin.base-item.js'
 export * from './mixin.base-field.js'