wip: Refactor catalog based panel #919

kalisio · Aug 5, 2024 · aacee68 · aacee68
1 parent e8ebf1b
commit aacee68
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 129 deletions.
diff --git a/map/client/components/catalog/KLayersPanel.vue b/map/client/components/catalog/KLayersPanel.vue
@@ -1,53 +1,79 @@
 <template>
-  <KScrollArea :maxHeight="scrollAreaMaxHeight" :style="panelStyle">
-    <q-list dense bordered>
-      <slot name="header" />
-      <!-- Orphan layers -->
-      <k-layers-selector
-        :layers="orphanLayers"
-        :options="{ hideIfEmpty: true }"
-      />
-      <!-- Categorized layers -->
-      <template v-for="category in filteredCategories">
-        <q-expansion-item
-          v-if="isVisible(category)"
-          :key="getId(category)"
-          :id="getId(category)"
-          :header-class="getHeaderClass(category)"
-          :icon="getIcon(category)"
-          :label="$t(category.name)"
-          :default-opened="getDefaultOpened(category)"
-          expand-separator>
-          <component
-            :is="category.componentInstance"
-            :layers="layersByCategory[category.name]"
-            :forecastModels="forecastModels"
-            :options="category.options || category">
-          </component>
-        </q-expansion-item>
-      </template>
-      <slot name="footer" />
-    </q-list>
-  </KScrollArea>
+    <div class="fit column">
+    <!-- 
+      Header
+    -->
+    <div class="q-pr-xs q-pb-xs">
+      <slot name="header">
+        <KPanel 
+          :content="header"
+          :class="headerClass"
+         />
+        <q-separator inset v-if="header"/>
+      </slot>
+    </div>
+    <!-- 
+      Content 
+    -->
+    <q-scroll-area class="col">
+      <q-list dense>
+        <!-- Orphan layers -->
+        <KLayersSelector
+          :layers="orphanLayers"
+          :options="{ hideIfEmpty: true }"
+        />
+        <!-- Categorized layers -->
+        <template v-for="category in filteredCategories">
+          <q-expansion-item
+            v-if="isVisible(category)"
+            :key="getId(category)"
+            :id="getId(category)"
+            :header-class="getHeaderClass(category)"
+            :icon="getIcon(category)"
+            :label="$t(category.name)"
+            :default-opened="getDefaultOpened(category)"
+            expand-separator>
+            <component
+              :is="category.componentInstance"
+              :layers="layersByCategory[category.name]"
+              :forecastModels="forecastModels"
+              :options="category.options || category">
+            </component>
+          </q-expansion-item>
+        </template>
+      </q-list>
+    </q-scroll-area>
+    <!-- 
+      Footer
+    -->    
+    <!-- 
+      Footer
+    -->
+    <div>
+      <slot name="footer">
+        <q-separator inset v-if="footer"/>
+        <KPanel 
+          :content="footer" 
+          :class="footerClass"
+        />
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script>
 import sift from 'sift'
 import _ from 'lodash'
 import { loadComponent } from '../../../../core/client/utils'
 import { getLayersByCategory, getOrphanLayers } from '../../utils'
-import { KScrollArea } from '../../../../core/client/components'
-import { catalogPanel } from '../../mixins'
 import { useProject } from '../../composables'
 import KLayersSelector from './KLayersSelector.vue'
 
 export default {
   name: 'k-layers-panel',
   components: {
-    KScrollArea,
     KLayersSelector
   },
-  mixins: [catalogPanel],
   props: {
     layers: {
       type: [Object, Array],
@@ -68,7 +94,23 @@ export default {
     forecastModels: {
       type: Array,
       default: () => []
-    }
+    },
+    header: {
+      type: [Array, Object],
+      default: () => null
+    },
+    headerClass: {
+      type: String,
+      default: undefined
+    },
+    footer: {
+      type: [Array, Object],
+      default: () => null
+    },
+    footerClass: {
+      type: String,
+      default: undefined
+  }
   },
   inheritAttrs: false,
   computed: {

diff --git a/map/client/components/catalog/KProjectsPanel.vue b/map/client/components/catalog/KProjectsPanel.vue
@@ -1,43 +1,33 @@
 <template>
-  <q-list dense bordered>
-    <div class="no-padding" :style="panelStyle">
-      <q-resize-observer @resize="onResized" />
-      <KPanel
-        id="favorite-views-toolbar"
-        :content="toolbar"
-        class="no-wrap q-pl-sm q-pr-md"
-      />
-      <KColumn
-        class="q-pl-sm"
-        service="projects"
-        :renderer="projectRenderer"
-        :nbItemsPerPage="20"
-        :append-items="true"
-        :base-query="baseQuery"
-        :filter-query="filter.query"
-        :height="scrollAreaMaxHeight - 100"
-        :width="scrollAreaMaxWidth - 50"
-        :dense="true"
-        @selection-changed="onProjectSelected"
-      />
-    </div>
-  </q-list>
+  <div class="fit column">
+    <KCollection
+      service="projects"
+      :renderer="projectRenderer"
+      :nb-items-per-page="20"
+      :append-items="true"
+      :base-query="baseQuery"
+      :filter-query="filter.query"
+      :dense="true"
+      :header="toolbar"
+      header-class="justify-between"
+      @selection-changed="onProjectSelected"
+      class="q-pl-sm col"
+    />
+  </div>
 </template>
 
 <script>
 import logger from 'loglevel'
 import { Filter, Sorter, utils, i18n } from '../../../../core/client'
-import { KColumn, KPanel, KAction } from '../../../../core/client/components'
-import { catalogPanel } from '../../mixins'
+import { KCollection, KPanel, KAction } from '../../../../core/client/components'
 
 export default {
   name: 'k-projects-panel',
   components: {
-    KColumn,
+    KCollection,
     KPanel,
     KAction
   },
-  mixins: [catalogPanel],
   inject: ['kActivity'],
   computed: {
     baseQuery () {
@@ -48,9 +38,7 @@ export default {
         {
           id: 'projects-filter',
           component: 'collection/KFilter',
-          class: 'full-width'
         },
-        { component: 'QSpace' },
         {
           component: 'collection/KSorter',
           id: 'projects-sorter',
@@ -94,11 +82,12 @@ export default {
     }
     return {
       scrollAreaMaxWidth: 0,
+      scrollAreaMaxHeight: 0,
       filter: Filter.get(),
       sorter: Sorter.get(),
       projectRenderer: {
         component: 'catalog/KProjectSelector',
-        class: 'q-pt-xs q-pb-xs q-pr-xs',
+        class: 'col-12',
         actions: projectActions
       }
     }
@@ -144,9 +133,6 @@ export default {
       })
       if (!result.ok) return false
       await this.$api.getService('projects').remove(project._id)
-    },
-    onResized (size) {
-      this.scrollAreaMaxWidth = size.width
     }
   }
 }

diff --git a/map/client/components/catalog/KViewsPanel.vue b/map/client/components/catalog/KViewsPanel.vue
@@ -1,45 +1,35 @@
 <template>
-  <q-list dense bordered>
-    <div class="no-padding" :style="panelStyle">
-      <q-resize-observer @resize="onResized" />
-      <KPanel
-        id="favorite-views-toolbar"
-        :content="toolbar"
-        class="no-wrap q-pl-sm q-pr-md"
-      />
-      <KColumn
-        class="q-pl-sm"
-        service="catalog"
-        :renderer="viewRenderer"
-        :nbItemsPerPage="20"
-        :append-items="true"
-        :base-query="baseQuery"
-        :filter-query="filterQuery"
-        @selection-changed="onViewSelected"
-        :height="scrollAreaMaxHeight - 100"
-        :width="scrollAreaMaxWidth"
-        :dense="true"
-      />
-    </div>
-  </q-list>
+  <div class="fit column">
+    <KCollection
+      service="catalog"
+      :renderer="viewRenderer"
+      :nb-items-per-page="20"
+      :append-items="true"
+      :base-query="baseQuery"
+      :filter-query="filterQuery"
+      :dense="true"
+      :header="toolbar"
+      header-class="justify-between"
+      @selection-changed="onViewSelected"
+      class="q-pl-sm col"
+    />
+  </div>
 </template>
 
 <script>
 import _ from 'lodash'
 import logger from 'loglevel'
 import { Filter, Sorter, utils, i18n } from '../../../../core/client'
-import { KColumn, KPanel, KAction } from '../../../../core/client/components'
-import { catalogPanel } from '../../mixins'
+import { KCollection, KPanel, KAction } from '../../../../core/client/components'
 import { useProject } from '../../composables'
 
 export default {
   name: 'k-views-panel',
   components: {
-    KColumn,
+    KCollection,
     KPanel,
     KAction
   },
-  mixins: [catalogPanel],
   inject: ['kActivity'],
   data () {
     const viewActions = []
@@ -60,12 +50,11 @@ export default {
       })
     }
     return {
-      scrollAreaMaxWidth: 0,
       filter: Filter.get(),
       sorter: Sorter.get(),
       viewRenderer: {
         component: 'catalog/KViewSelector',
-        class: 'q-pt-xs q-pb-xs q-pr-xs',
+        class: 'col-12',
         actions: viewActions
       }
     }
@@ -84,9 +73,7 @@ export default {
         {
           id: 'views-filter',
           component: 'collection/KFilter',
-          class: 'full-width'
         },
-        { component: 'QSpace' },
         {
           component: 'collection/KSorter',
           id: 'views-sorter',
@@ -141,9 +128,6 @@ export default {
       })
       if (!result.ok) return false
       await this.$api.getService('catalog').remove(view._id)
-    },
-    onResized (size) {
-      this.scrollAreaMaxWidth = size.width
     }
   },
   // Should be used with <Suspense> to ensure the project is loaded upfront

diff --git a/map/client/mixins/index.js b/map/client/mixins/index.js
@@ -1,5 +1,4 @@
 export * from './mixin.activity.js'
-export * from './mixin.catalog-panel.js'
 export * from './mixin.context.js'
 export * from './mixin.feature-selection.js'
 export * from './mixin.feature-service.js'

diff --git a/map/client/mixins/mixin.catalog-panel.js b/map/client/mixins/mixin.catalog-panel.js