wip: Refactor collections based components #917

kalisio · Aug 6, 2024 · 8b14423 · 8b14423
1 parent 983c05c
commit 8b14423
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/map/client/components/KProjectMenu.vue b/map/client/components/KProjectMenu.vue
@@ -17,11 +17,11 @@
       menu-anchor="bottom middle"
       menu-self="top middle">
       <template v-slot:default>
-        <KList
+        <KCollection
           service="projects"
           :base-query="{ _id: { $ne: projectId } }"
-          @selection-changed="onProjectSelected"
           :dense="true"
+          @selection-changed="onProjectSelected"
         />
       </template>
     </q-btn-dropdown>
@@ -30,12 +30,12 @@
 
 <script>
 import _ from 'lodash'
-import { KList } from '../../../core/client/components'
+import { KCollection } from '../../../core/client/components'
 import { useProject } from '../composables'
 
 export default {
   components: {
-    KList
+    KCollection
   },
   inject: ['kActivity'],
   computed: {

diff --git a/map/client/components/catalog/KLayerCategories.vue b/map/client/components/catalog/KLayerCategories.vue
@@ -1,5 +1,5 @@
 <template>
-  <k-modal
+  <KModal
     id="layer-categories-modal"
     :title="title"
     :toolbar="toolbar"
@@ -8,37 +8,49 @@
   >
     <div id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
-        <k-list
+        <KCollection
           style="min-height: 50px; min-width: 200px"
           service="catalog"
           :renderer="categoryRenderer"
-          :nbItemsPerPage="8"
+          :nbItemsPerPage="12"
           :base-query="baseQuery"
           :filter-query="filter.query"
-          @collection-refreshed="refreshCategories" />
+          :append-items="true"
+          @collection-refreshed="refreshCategories" 
+        />
       </q-card-section>
       <q-card-section id="layer-category-add" v-if="mode === 'add'">
-        <k-form :ref="onAddFormCreated" :schema="categorySchema" style="min-width: 300px" />
+        <KForm 
+          :ref="onAddFormCreated" 
+          :schema="categorySchema" 
+          style="min-width: 300px" 
+        />
       </q-card-section>
       <q-card-section id="layer-category-edit" v-if="mode === 'edit'">
-        <k-form :ref="onEditFormCreated" @form-ready="onEditFormReady" :schema="categorySchema" style="min-width: 300px" />
+        <KForm 
+          :ref="onEditFormCreated"         
+          :schema="categorySchema" 
+          style="min-width: 300px" 
+          @form-ready="onEditFormReady"
+        />
       </q-card-section>
     </div>
-  </k-modal>
+  </KModal>
 </template>
 
 <script>
 import _ from 'lodash'
 import { mixins as kCoreMixins } from '../../../../core/client'
-import { KModal, KAction, KPanel, KList } from '../../../../core/client/components'
+import { KModal, KCollection, KAction, KPanel, KForm } from '../../../../core/client/components'
 
 export default {
   name: 'k-layer-categories',
   components: {
     KModal,
+    KCollection,
     KAction,
     KPanel,
-    KList
+    KForm
   },
   mixins: [
     kCoreMixins.baseModal
@@ -191,6 +203,7 @@ export default {
       savingCategory: false,
       categoryRenderer: {
         component: 'collection/KItem',
+        class: 'col-12',
         actions: [{
           id: 'edit-layer-category',
           icon: 'las la-file-alt',