@kalisio/kdk 2.3.2 → 2.4.0

package/map/client/components/catalog/KLayersPanel.vue

@@ -1,134 +1,157 @@
 <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"
+  <div class="fit column">
+    <!--
+      Header
+    -->
+    <div>
+      <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="orphanLayersOptions"
+        />
+        <!-- Categorized layers -->
+        <template v-for="category in filteredCategories">
+          <KCategoryItem
+            v-if="isCategoryVisible(category)"
+            :key="getCategoryId(category)"
+            :id="getCategoryId(category)"
+            :category="category"
             :layers="layersByCategory[category.name]"
             :forecastModels="forecastModels"
-            :options="category.options || category">
-          </component>
-        </q-expansion-item>
-      </template>
-      <slot name="footer" />
-    </q-list>
-  </KScrollArea>
+          />
+        </template>
+      <!--/q-list-->
+    </q-scroll-area>
+    <!--
+      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'
+// WARNING for now we must declare the inheritAttrs this way. Lint will try to move it. Don't do it.
+// TODO: need to updated when switch to vue > 3.3 to be able to declare options
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup>
 import _ from 'lodash'
-import { loadComponent } from '../../../../core/client/utils'
+import sift from 'sift'
+import { ref, watchEffect, onMounted } from 'vue'
+import { utils as coreUtils } from '../../../../core/client'
 import { getLayersByCategory, getOrphanLayers } from '../../utils'
-import { KScrollArea } from '../../../../core/client/components'
-import { catalogPanel } from '../../mixins'
 import { useProject } from '../../composables'
 import KLayersSelector from './KLayersSelector.vue'
+import KCategoryItem from './KCategoryItem.vue'
 
-export default {
-  name: 'k-layers-panel',
-  components: {
-    KScrollArea,
-    KLayersSelector
+// Props
+const props = defineProps({
+  layers: {
+    type: [Object, Array],
+    default: () => []
+  },
+  layersFilter: {
+    type: [Object, Function],
+    default: () => {}
+  },
+  layerCategories: {
+    type: Array,
+    default: () => []
   },
-  mixins: [catalogPanel],
-  props: {
-    layers: {
-      type: [Object, Array],
-      default: () => []
-    },
-    layersFilter: {
-      type: [Object, Function],
-      default: () => {}
-    },
-    layerCategories: {
-      type: Array,
-      default: () => []
-    },
-    layerCategoriesFilter: {
-      type: [Object, Function],
-      default: () => {}
-    },
-    forecastModels: {
-      type: Array,
-      default: () => []
-    }
+  layerCategoriesFilter: {
+    type: [Object, Function],
+    default: () => {}
   },
-  inheritAttrs: false,
-  computed: {
-    filteredLayers () {
-      const filter = (typeof this.layersFilter === 'object' ? sift(this.layersFilter) : this.layersFilter)
-      return _.filter(this.layers, filter)
-    },
-    filteredCategories () {
-      const filter = (typeof this.layerCategoriesFilter === 'object' ? sift(this.layerCategoriesFilter) : this.layerCategoriesFilter)
-      const filteredCategories = _.filter(this.layerCategories, filter)
-      _.forEach(filteredCategories, category => {
-        const component = _.get(category, 'component', 'catalog/KLayersSelector')
-        if (!category.componentInstance) category.componentInstance = loadComponent(component)
-      })
-      return filteredCategories
-    },
-    layersByCategory () {
-      return getLayersByCategory(this.filteredLayers, this.filteredCategories)
-    },
-    orphanLayers () {
-      return getOrphanLayers(this.filteredLayers, this.layersByCategory)
-    }
+  forecastModels: {
+    type: Array,
+    default: () => []
   },
-  methods: {
-    getId (category) {
-      return _.kebabCase(category.name)
-    },
-    isVisible (category) {
-      // Show a built-in category only if it has some layers.
-      // Indeed, depending on the app configuration, none might be available for this category.
-      // User-defined categories are visible by default, even if empty,
-      // except if used inside a project as in this case having no layers means we don't want to use this category
-      const isEmpty = (this.layersByCategory[category.name].length === 0)
-      if (isEmpty) {
-        if (this.hasProject()) return false
-        else return !_.get(category, 'hideIfEmpty', !category._id)
-      }
-      return true
-    },
-    getHeaderClass (category) {
-      if (category.headerClass) return category.headerClass
-      return 'text-' + _.get(category, 'icon.color', 'primary')
-    },
-    getIcon (category) {
-      return _.get(category, 'icon.name', _.get(category, 'icon'))
-    },
-    getDefaultOpened (category) {
-      // if category explicitely specify default opened state, use that
-      if (_.has(category, 'options.open')) return category.options.open
-      // otherwise, defaut open when there's only one category
-      // return this.filteredCategories.length === 1
-      // robin: to not break existing apps, just return false when options.open is not defined
-      return false
-    }
+  header: {
+    type: [Array, Object],
+    default: () => null
   },
-  setup () {
-    // Expose
-    return {
-      ...useProject()
-    }
+  headerClass: {
+    type: String,
+    default: undefined
+  },
+  footer: {
+    type: [Array, Object],
+    default: () => null
+  },
+  footerClass: {
+    type: String,
+    default: undefined
+  }
+})
+
+// Data
+const { hasProject } = useProject()
+const orphanLayersOptions = { hideIfEmpty: true }
+const filteredCategories = ref([])
+const layersByCategory = ref({})
+const orphanLayers = ref([])
+
+// Watch
+watchEffect(() => { refresh() })
+
+// Functions
+function getCategoryId (category) {
+  return _.kebabCase(category.name)
+}
+function isCategoryVisible (category) {
+// Show a built-in category only if it has some layers.
+// Indeed, depending on the app configuration, none might be available for this category.
+// User-defined categories are visible by default, even if empty,
+// except if used inside a project as in this case having no layers means we don't want to use this category
+  const isEmpty = (layersByCategory.value[category.name].length === 0)
+  if (isEmpty) {
+    if (hasProject()) return false
+    else return !_.get(category, 'hideIfEmpty', !category._id)
   }
+  return true
 }
+function refresh () {
+  // filter layers
+  const layersFilter = (typeof props.layersFilter === 'object' ? sift(props.layersFilter) : props.layersFilter)
+  const filteredLayers = _.filter(props.layers, layersFilter)
+  // filter categories
+  const categoriesFilter = (typeof props.layerCategoriesFilter === 'object' ? sift(props.layerCategoriesFilter) : props.layerCategoriesFilter)
+  filteredCategories.value = _.filter(props.layerCategories, categoriesFilter)
+  _.forEach(filteredCategories.value, category => {
+    const component = _.get(category, 'component', 'catalog/KLayersSelector')
+    if (!category.componentInstance) category.componentInstance = coreUtils.loadComponent(component)
+  })
+  // compute layers by categories and orphans layers
+  layersByCategory.value = getLayersByCategory(filteredLayers, filteredCategories.value)
+  orphanLayers.value = getOrphanLayers(filteredLayers, layersByCategory.value)
+}//, 100)
+
+// Hooks
+onMounted(() => {
+  refresh()
+})
 </script>

package/map/client/components/catalog/KProjectSelector.vue

@@ -1,25 +1,27 @@
 <template>
   <div
-    class="relative-position q-pl-md row full-width items-center no-wrap cursor-pointer"
     v-ripple:primary
+    class="k-project-selector"
   >
-    <!-- Project name -->
-    <div class="ellipsis full-width" @click="$emit('item-selected', item, 'open-project')">
-      {{ item.name }}
-      <q-tooltip
-        v-if="(item.description) && $q.platform.is.desktop" :delay="500"
-        anchor="center left"
-        self="center right"
-        :offset="[20, 0]">
-        {{ item.description }}
-      </q-tooltip>
-      <q-space />
+    <div class="q-pl-md row full-width items-center no-wrap">
+      <!-- Project name -->
+      <div class="ellipsis full-width" @click="$emit('item-selected', item, 'open-project')">
+        {{ item.name }}
+        <q-tooltip
+          v-if="(item.description) && $q.platform.is.desktop" :delay="500"
+          anchor="center left"
+          self="center right"
+          :offset="[20, 0]">
+          {{ item.description }}
+        </q-tooltip>
+        <q-space />
+      </div>
+      <!-- Project actions -->
+      <KPanel
+        :id="`${item.name}-actions`"
+        :content="itemActions"
+        :context="item" />
     </div>
-    <!-- Project actions -->
-    <KPanel
-      :id="`${item.name}-actions`"
-      :content="itemActions"
-      :context="item" />
   </div>
 </template>
 
@@ -36,3 +38,13 @@ export default {
   mixins: [baseItem]
 }
 </script>
+
+<style lang="scss" scoped>
+.k-project-selector {
+  position: relative; // needed for the directive v-ripple to target the item
+  cursor: pointer;
+}
+.k-project-selector:hover {
+  background-color: #efefef
+}
+</style>

package/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">
+    <KGrid
+      service="projects"
+      :renderer="projectRenderer"
+      :nb-items-per-page="20"
+      :append-items="true"
+      :base-query="baseQuery"
+      :filter-query="filter.query"
+      :dense="true"
+      :scrollToTop="false"
+      :header="toolbar"
+      header-class="full-width no-wrap"
+      @selection-changed="onProjectSelected"
+    />
+  </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 { KGrid, KPanel, KAction } from '../../../../core/client/components'
 
 export default {
   name: 'k-projects-panel',
   components: {
-    KColumn,
+    KGrid,
     KPanel,
     KAction
   },
-  mixins: [catalogPanel],
   inject: ['kActivity'],
   computed: {
     baseQuery () {
@@ -47,10 +37,8 @@ export default {
       return [
         {
           id: 'projects-filter',
-          component: 'collection/KFilter',
-          class: 'full-width'
+          component: 'collection/KFilter'
         },
-        { component: 'QSpace' },
         {
           component: 'collection/KSorter',
           id: 'projects-sorter',
@@ -93,12 +81,11 @@ export default {
       })
     }
     return {
-      scrollAreaMaxWidth: 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 +131,6 @@ export default {
       })
       if (!result.ok) return false
       await this.$api.getService('projects').remove(project._id)
-    },
-    onResized (size) {
-      this.scrollAreaMaxWidth = size.width
     }
   }
 }

package/map/client/components/catalog/KViewSelector.vue

@@ -1,33 +1,35 @@
 <template>
   <div
-    class="relative-position q-pl-md row full-width items-center no-wrap cursor-pointer"
     v-ripple:primary
+    class="k-view-selector"
   >
-    <!-- View name -->
-    <div class="ellipsis full-width" @click="$emit('item-selected', item, 'apply-view')">
-      {{ item.name }}
-      <q-tooltip
-        v-if="(item.description) && $q.platform.is.desktop" :delay="500"
-        anchor="center left"
-        self="center right"
-        :offset="[20, 0]">
-        {{ item.description }}
-      </q-tooltip>
-      <q-space />
+    <div class="q-pl-md row full-width items-center no-wrap">
+      <!-- View name -->
+      <div class="ellipsis full-width" @click="$emit('item-selected', item, 'apply-view')">
+        {{ item.name }}
+        <q-tooltip
+          v-if="(item.description) && $q.platform.is.desktop" :delay="500"
+          anchor="center left"
+          self="center right"
+          :offset="[20, 0]">
+          {{ item.description }}
+        </q-tooltip>
+        <q-space />
+      </div>
+      <!-- View favorite action -->
+      <KAction
+        id="set-home-view"
+        icon="las la-star"
+        :color="item.isDefault ? 'primary' : 'grey-5'"
+        :tooltip="$t('KViewsPanel.SET_HOME_VIEW')"
+        :propagate="false"
+        @triggered="$emit('item-selected', item, 'set-home-view')" />
+      <!-- View actions -->
+      <KPanel
+        :id="`${item.name}-actions`"
+        :content="itemActions"
+        :context="item" />
     </div>
-    <!-- View favorite action -->
-    <KAction
-      id="set-home-view"
-      icon="las la-star"
-      :color="item.isDefault ? 'primary' : 'grey-5'"
-      :tooltip="$t('KViewsPanel.SET_HOME_VIEW')"
-      :propagate="false"
-      @triggered="$emit('item-selected', item, 'set-home-view')" />
-    <!-- View actions -->
-    <KPanel
-      :id="`${item.name}-actions`"
-      :content="itemActions"
-      :context="item" />
   </div>
 </template>
 
@@ -44,3 +46,13 @@ export default {
   mixins: [baseItem]
 }
 </script>
+
+<style lang="scss" scoped>
+.k-view-selector {
+  position: relative; // needed for the directive v-ripple to target the item
+  cursor: pointer;
+}
+.k-view-selector:hover {
+  background-color: #efefef
+}
+</style>

package/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">
+    <KGrid
+      service="catalog"
+      :renderer="viewRenderer"
+      :nb-items-per-page="20"
+      :append-items="true"
+      :base-query="baseQuery"
+      :filter-query="filterQuery"
+      :dense="true"
+      :scrollToTop="false"
+      :header="toolbar"
+      header-class="full-width no-wrap"
+      @selection-changed="onViewSelected"
+    />
+  </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 { KGrid, KPanel, KAction } from '../../../../core/client/components'
 import { useProject } from '../../composables'
 
 export default {
   name: 'k-views-panel',
   components: {
-    KColumn,
+    KGrid,
     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
       }
     }
@@ -83,10 +72,8 @@ export default {
       return [
         {
           id: 'views-filter',
-          component: 'collection/KFilter',
-          class: 'full-width'
+          component: 'collection/KFilter'
         },
-        { 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

package/map/client/components/form/KLocationField.vue

@@ -66,8 +66,7 @@
           :dialog="{
             component: 'location/KLocationMap',
             'v-model': model,
-            draggable: true,
-            header: map,
+            tools: map,
             widthPolicy: 'wide',
             cancelAction: 'CANCEL',
             okAction: {