wip: Refactor collections based components #917

kalisio · Aug 13, 2024 · cde1788 · cde1788
1 parent 61bfd39
commit cde1788
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 72 deletions.
diff --git a/core/client/components/collection/KBoard.vue b/core/client/components/collection/KBoard.vue
@@ -3,7 +3,7 @@
     <div class="fit row justify-between q-gutter-x-sm no-wrap">
       <div class="col-*" />
       <template v-for="column in columns" :key="column.value">
-        <KCollection
+        <KGrid
           ref="columnRefs"
           :id="column.value"
           :name="column.value"
@@ -22,7 +22,7 @@
           v-bind="column.props"
           :append-items="true"
         >
-        </KCollection>
+        </KGrid>
       </template>
       <div class="col-*" />
     </div>
@@ -32,7 +32,7 @@
 <script setup>
 import _ from 'lodash'
 import { ref } from 'vue'
-import KCollection from './KCollection.vue'
+import KGrid from './KGrid.vue'
 
 // Props
 defineProps({

diff --git a/core/client/components/collection/KCollection.vue b/core/client/components/collection/KCollection.vue
@@ -80,7 +80,7 @@
           <KStamp
             icon="las la-exclamation-circle"
             icon-size="1.6rem"
-            :text="$t('KCollection.EMPTY_LABEL')"
+            :text="$t('KGrid.EMPTY_LABEL')"
             direction="horizontal"
             class="q-pa-md"
           />

diff --git a/core/client/components/collection/KGrid.vue b/core/client/components/collection/KGrid.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="column no-wrap">
+  <div class="fit column no-wrap">
     <!--
       Header
     -->
     <div class="q-pr-xs q-pb-xs">
       <slot name="header">
-        <KPanel
-          :content="header"
-          :class="headerClass"
-         />
+        <KPanel :content="header" :class="headerClass" />
       </slot>
     </div>
     <!--
@@ -49,7 +46,7 @@
         </q-infinite-scroll>
       </div>
       <!-- Paginated mode -->
-      <div v-else class="fit row">
+      <div v-else class="row">
         <template v-for="item in items" :key="item._id">
           <div :class="rendererClass">
             <component
@@ -59,7 +56,8 @@
               :contextId="contextId"
               :is="itemRenderer"
               v-bind="renderer"
-              @item-selected="onItemSelected" />
+              @item-selected="onItemSelected" 
+            />
           </div>
         </template>
         <div v-if="nbPages > 1" class="col-12">
@@ -80,7 +78,7 @@
           <KStamp
             icon="las la-exclamation-circle"
             icon-size="1.6rem"
-            :text="$t('KCollection.EMPTY_LABEL')"
+            :text="$t('KGrid.EMPTY_LABEL')"
             direction="horizontal"
             class="q-pa-md"
           />
@@ -92,18 +90,15 @@
     -->
     <div>
       <slot name="footer">
-        <q-separator inset v-if="footer"/>
-        <KPanel
-          :content="footer"
-          :class="footerClass"
-        />
+        <q-separator v-if="footer" inset />
+        <KPanel :content="footer" :class="footerClass" />
       </slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, toRefs, onBeforeMount, onBeforeUnmount } from 'vue'
 import { useCollection } from '../../composables'
 import { Events } from '../../events.js'
 import { loadComponent } from '../../utils'
@@ -175,7 +170,8 @@ const emit = defineEmits(['collection-refreshed', 'selection-changed'])
 
 // Data
 const { items, nbTotalItems, nbPages, currentPage, refreshCollection, resetCollection } = useCollection(toRefs(props))
-let doneFunction = null
+const canScroll = ref(false)
+let loadDoneFunction = null
 
 // Computed
 const itemRenderer = computed(() => {
@@ -192,17 +188,18 @@ watch(items, onCollectionRefreshed)
 function onLoad (index, done) {
   currentPage.value = index
   refreshCollection()
-  doneFunction = done
+  loadDoneFunction = done
 }
 function onItemSelected (item, section) {
   emit('selection-changed', item, section)
 }
 function onCollectionRefreshed () {
   emit('collection-refreshed', items.value)
   // call done callback if needed
-  if (doneFunction) {
-    doneFunction(items.value.length === nbTotalItems.value)
-    doneFunction = null
+  if (loadDoneFunction) {
+    canScroll.value = items.value.length === nbTotalItems.value
+    loadDoneFunction(canScroll.value)
+    loadDoneFunction = null
   }
 }
 

diff --git a/core/client/components/collection/index.js b/core/client/components/collection/index.js
@@ -1,21 +1,15 @@
 import KCard from './KCard.vue'
 import KCardSection from './KCardSection.vue'
-import KCollection from './KCollection.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,
-  KCollection,
   KGrid,
   KItem,
-  KList,
   KHistory,
-  KTable,
-  KColumn
+  KTable
 }
diff --git a/core/client/components/team/KGroupsActivity.vue b/core/client/components/team/KGroupsActivity.vue
@@ -4,7 +4,7 @@
       <!--
         Groups collection
       -->
-      <KCollection
+      <KGrid
         ref="groupsGrid"
         :contextId="contextId"
         service="groups"
@@ -17,11 +17,11 @@
             <KStamp
               icon="las la-exclamation-circle"
               icon-size="3rem"
-              :text="$t('KCollection.EMPTY_LABEL')"
+              :text="$t('KGrid.EMPTY_LABEL')"
             />
           </div>
         </template>
-      </KCollection>
+      </KGrid>
       <!--
         Router view to enable routing to modals
       -->
@@ -32,7 +32,7 @@
 
 <script>
 import KPage from '../layout/KPage.vue'
-import KCollection from '../collection/KCollection.vue'
+import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 
 import _ from 'lodash'
@@ -43,7 +43,7 @@ export default {
   name: 'groups-activity',
   components: {
     KPage,
-    KCollection,
+    KGrid,
     KStamp
   },
   mixins: [baseActivity()],

diff --git a/core/client/components/team/KMembersActivity.vue b/core/client/components/team/KMembersActivity.vue
@@ -5,7 +5,7 @@
         Members collection, cannot use smart strategy here because membership is not managed at service level
         but using authorisations on users
       -->
-      <KCollection
+      <KGrid
         ref="membersGrid"
         service="members"
         :renderer="renderer"
@@ -14,10 +14,10 @@
         :filter-query="filter.query">
         <template v-slot:empty-section>
           <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KCollection.EMPTY_LABEL')" />
+            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
           </div>
         </template>
-      </KCollection>
+      </KGrid>
       <!--
         Router view to enable routing to modals
       -->
@@ -29,7 +29,7 @@
 <script>
 import _ from 'lodash'
 import KPage from '../layout/KPage.vue'
-import KCollection from '../collection/KCollection.vue'
+import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 import { baseActivity } from '../../mixins'
 import { getRoleForOrganisation } from '../../../common/permissions'
@@ -41,7 +41,7 @@ export default {
   name: 'members-activity',
   components: {
     KPage,
-    KCollection,
+    KGrid,
     KStamp
   },
   mixins: [activityMixin],

diff --git a/core/client/components/team/KOrganisationsActivity.vue b/core/client/components/team/KOrganisationsActivity.vue
@@ -4,7 +4,7 @@
       <!--
         Organisations collection
       -->
-      <KCollection
+      <KGrid
         ref="organisationsGrid"
         service="organisations"
         :renderer="renderer"
@@ -13,10 +13,10 @@
         :list-strategy="'smart'">
         <template v-slot:empty-section>
           <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KCollection.EMPTY_LABEL')" />
+            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
           </div>
         </template>
-      </KCollection>
+      </KGrid>
       <!--
         Router view to enable routing to modals
       -->
@@ -28,14 +28,14 @@
 <script>
 import _ from 'lodash'
 import KPage from '../layout/KPage.vue'
-import KCollection from '../collection/KCollection.vue'
+import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 import { baseActivity } from '../../mixins'
 
 export default {
   components: {
     KPage,
-    KCollection,
+    KGrid,
     KStamp
   },
   mixins: [baseActivity('organisationsActivity')],

diff --git a/core/client/components/team/KTagsActivity.vue b/core/client/components/team/KTagsActivity.vue
@@ -4,7 +4,7 @@
       <!--
         Groups collection
       -->
-      <KCollection
+      <KGrid
         ref="tagsGrid"
         :contextId="contextId"
         service="tags"
@@ -14,10 +14,10 @@
         :list-strategy="'smart'">
         <template v-slot:empty-section>
           <div class="absolute-center">
-            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KCollection.EMPTY_LABEL')" />
+            <KStamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KGrid.EMPTY_LABEL')" />
           </div>
         </template>
-      </KCollection>
+      </KGrid>
       <!--
         Router view to enable routing to modals
       -->
@@ -29,7 +29,7 @@
 <script>
 import _ from 'lodash'
 import KPage from '../layout/KPage.vue'
-import KCollection from '../collection/KCollection.vue'
+import KGrid from '../collection/KGrid.vue'
 import KStamp from '../KStamp.vue'
 import { baseActivity } from '../../mixins'
 import { Exporter } from '../../exporter.js'
@@ -38,7 +38,7 @@ export default {
   name: 'tags-activity',
   components: {
     KPage,
-    KCollection,
+    KGrid,
     KStamp
   },
   mixins: [baseActivity()],

diff --git a/core/client/i18n/core_en.json b/core/client/i18n/core_en.json
@@ -533,7 +533,7 @@
     "UNSUBSCRIBE_DIALOG_TITLE": "Unsubscribe from {description} ?",
     "UNSUBSCRIBE_DIALOG_MESSAGE": "Are you sure you want to unsubscribe your account from <b>{description}</b> ?<br><br>You will not be able to receive notifications until you reconnect using this service."
   },
-  "KCollection": {
+  "KGrid": {
     "EMPTY_LABEL": "@:NO_ITEM"
   },
   "KTable": {

diff --git a/core/client/i18n/core_fr.json b/core/client/i18n/core_fr.json
@@ -531,7 +531,7 @@
     "UNSUBSCRIBE_DIALOG_TITLE": "Se désabonner de {description} ?",
     "UNSUBSCRIBE_DIALOG_MESSAGE": "Etes vous sûr de vouloir désabonner votre compte de {description} ?<br><br>Vous ne pourrez plus recevoir de notifications jusqu'à une prochaine reconnexion via ce service."
   },
-  "KCollection": {
+  "KGrid": {
     "EMPTY_LABEL": "@:NO_ITEM"
   },
   "KTable": {

diff --git a/map/client/components/KProjectMenu.vue b/map/client/components/KProjectMenu.vue
@@ -17,7 +17,7 @@
       menu-anchor="bottom middle"
       menu-self="top middle">
       <template v-slot:default>
-        <KCollection
+        <KGridection
           service="projects"
           :base-query="{ _id: { $ne: projectId } }"
           :dense="true"
@@ -30,12 +30,12 @@
 
 <script>
 import _ from 'lodash'
-import { KCollection } from '../../../core/client/components'
+import { KGridection } from '../../../core/client/components'
 import { useProject } from '../composables'
 
 export default {
   components: {
-    KCollection
+    KGridection
   },
   inject: ['kActivity'],
   computed: {

diff --git a/map/client/components/catalog/KLayerCategories.vue b/map/client/components/catalog/KLayerCategories.vue
@@ -8,7 +8,7 @@
   >
     <div id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
-        <KCollection
+        <KGrid
           style="min-height: 50px; min-width: 200px"
           service="catalog"
           :renderer="categoryRenderer"
@@ -41,13 +41,13 @@
 <script>
 import _ from 'lodash'
 import { mixins as kCoreMixins } from '../../../../core/client'
-import { KModal, KCollection, KAction, KPanel, KForm } from '../../../../core/client/components'
+import { KModal, KGrid, KAction, KPanel, KForm } from '../../../../core/client/components'
 
 export default {
   name: 'k-layer-categories',
   components: {
     KModal,
-    KCollection,
+    KGrid,
     KAction,
     KPanel,
     KForm