wip: Refactor catalog based panel #919

.eslintignore

@@ -1 +1,2 @@
-core/client/components/action/KAction.vue
+core/client/components/action/KAction.vue
+map/client/components/catalog/KLayersPanel.vue

map/client/components/catalog/KCategoryItem.vue

@@ -42,7 +42,7 @@ const localStorageKey = 'catalog-categories'
 
 // Computed
 const name = computed(() => {
-  return i18n.t(props.category.name)
+  return i18n.tie(props.category.name)
 })
 const headerClass = computed(() => {
   const defaultClass = 'text-' + _.get(props.category, 'icon.color', 'primary')

map/client/components/catalog/KLayersPanel.vue

@@ -3,7 +3,7 @@
     <!--
       Header
     -->
-    <div class="q-pr-xs q-pb-xs">
+    <div>
       <slot name="header">
         <KPanel
           :content="header"
@@ -51,107 +51,107 @@
 </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 sift from 'sift'
+import { ref, watchEffect, onMounted } from 'vue'
 import { utils as coreUtils } from '../../../../core/client'
 import { getLayersByCategory, getOrphanLayers } from '../../utils'
 import { useProject } from '../../composables'
 import KLayersSelector from './KLayersSelector.vue'
 import KCategoryItem from './KCategoryItem.vue'
 
-export default {
-  name: 'k-layers-panel',
-  components: {
-    KCategoryItem,
-    KLayersSelector
+// Props
+const props = defineProps({
+  layers: {
+    type: [Object, Array],
+    default: () => []
+  },
+  layersFilter: {
+    type: [Object, Function],
+    default: () => {}
   },
-  props: {
-    layers: {
-      type: [Object, Array],
-      default: () => []
-    },
-    layersFilter: {
-      type: [Object, Function],
-      default: () => {}
-    },
-    layerCategories: {
-      type: Array,
-      default: () => []
-    },
-    layerCategoriesFilter: {
-      type: [Object, Function],
-      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
-    }
+  layerCategories: {
+    type: Array,
+    default: () => []
   },
-  inheritAttrs: false,
-  data () {
-    return {
-      orphanLayersOptions: { hideIfEmpty: true }
-    }
+  layerCategoriesFilter: {
+    type: [Object, Function],
+    default: () => {}
   },
-  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 = coreUtils.loadComponent(component)
-      })
-      return filteredCategories
-    },
-    layersByCategory () {
-      return getLayersByCategory(this.filteredLayers, this.filteredCategories)
-    },
-    orphanLayers () {
-      return getOrphanLayers(this.filteredLayers, this.layersByCategory)
-    }
+  forecastModels: {
+    type: Array,
+    default: () => []
   },
-  methods: {
-    getCategoryId (category) {
-      return _.kebabCase(category.name)
-    },
-    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 = (this.layersByCategory[category.name].length === 0)
-      if (isEmpty) {
-        if (this.hasProject()) return false
-        else return !_.get(category, 'hideIfEmpty', !category._id)
-      }
-      return true
-    }
+  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>