wip: Enhance collection filtering #1151

style: linted code

Author: cnouguier

core/client/components/collection/KFilterView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="column">
+    <div class="row justify-center">
+      <KTimeFilterView />
+    </div>
+    <div class="row justify-center">
+      <KTagsFilterView />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import KTimeFilterView from './KTimeFilterView.vue'
+import KTagsFilterView from './KTagsFilterView.vue'
+</script>

core/client/components/collection/KSearchFilter.vue core/client/components/collection/KSearchFilterControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-xs" :style="innerStyle">
+  <div class="q-pa-xs">
     <!--
       Input area
      -->
@@ -64,7 +64,7 @@
 <script setup>
 import _ from 'lodash'
 import { ref, computed } from 'vue'
-import { useCurrentActivity } from '../../composables'
+import { useCurrentActivity } from '../../composables/index.js'
 import { Search } from '../../search.js'
 
 // Props

core/client/components/action/KTagsFilterAction.vue core/client/components/collection/KTagsFilterControl.vue

@@ -2,6 +2,7 @@
   <div>
     <q-fab
       v-if="hasOptions"
+      id="tags-filter-control"
       icon="las la-filter"
       color="grey-9"
       flat
@@ -23,7 +24,7 @@
       </template>
     </q-fab>
     <q-tooltip v-if="enableTooltip">
-      {{ $t('C3XTagsFilterAction.FILTER') }}
+      {{ $t('KTagsFilterControl.FILTER') }}
     </q-tooltip>
   </div>
 </template>

core/client/components/action/KTimeFilterAction.vue core/client/components/collection/KTimeFilterControl.vue

@@ -1,9 +1,9 @@
 <template>
   <KAction
     v-if="hasTimeRange"
-    id="time-filter-action"
+    id="time-filter-control"
     icon="las la-clock"
-    tooltip="C3XTimeFilterAction.FILTER"
+    tooltip="KTimeFilterControl.FILTER"
     :handler="showTimeRangeSlider"
   />
 </template>

core/client/components/collection/KTimeFilterView.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasSelection"
-    class="q-px-sm q-py-xs row items-center q-gutter-x-sm k-time-filter no-wrap"
+    class="q-px-sm q-py-xs row items-center q-gutter-x-sm no-wrap k-time-filter"
     style="width: 800px; max-width: 90vw"
   >
     <KDateTimeRange

core/client/i18n/core_en.json

@@ -694,6 +694,12 @@
   "KFilter": {
     "SEARCH_LABEL": "@:SEARCH"
   },
+  "KTagsFilterControl": {
+    "FILTER": "Filter by properties"
+  },
+  "KTimeFilterControl": {
+    "FILTER": "Filter by time"
+  },
   "KTextArea": {
     "COLLAPSE": "Collapse"
   },

core/client/i18n/core_fr.json

@@ -691,6 +691,12 @@
   "KFilter": {
     "SEARCH_LABEL": "@:SEARCH"
   },
+  "KTagsFilterControl": {
+    "FILTER": "Filtrer selon les propriétés"
+  },
+  "KTimeFilterControl": {
+    "FILTER": "Filtrer selon le temps"
+  },
   "KTextArea": {
     "COLLAPSE": "Réduire"
   },

map/client/components/stickies/KLevelSlider.vue

@@ -3,26 +3,27 @@
     class="k-level-slider flex items-baseline justify-center bg-white q-px-sm q-py-md">
     <p v-if="props.switchLabelSide" class="text-accent text-caption no-margin"
       style="writing-mode: vertical-lr; transform-origin: center; transform: rotate(180deg);">
-      <b>{{ $t(CurrentActivity.selectableLevels.label) }} - {{ getFormatedLevel(CurrentActivity.selectedLevel) }}</b>
+      <b>{{ $t(CurrentActivity.selectableLevels.label) }} - {{ getFormattedLevel(CurrentActivity.selectedLevel) }}</b>
     </p>
     <q-slider v-if="dataArray" snap class="text-primary" v-model="sliderVal" :vertical="props.vertical"
       :reverse="props.reverse ?? props.vertical" :height="150" :width="4" :markers="props.markers" :label-always="false"
-      :max="dataArray.length - 1" label :label-value="getFormatedLevel(dataArray[sliderVal])"
+      :max="dataArray.length - 1" label :label-value="getFormattedLevel(dataArray[sliderVal])"
       :switch-label-side="props.switchLabelSide ? !props.switchLabelSide : props.vertical" @change="onLevelChanged" />
     <q-slider v-else class="text-primary" :model-value="sliderVal" :vertical="props.vertical"
       :reverse="props.reverse ?? props.vertical" :height="150" :width="4" :markers="props.markers" :label-always="false"
       :min="sliderMinValue" :max="sliderMaxValue" :step="sliderInterval" label
-      :label-value="getFormatedLevel(sliderVal)"
+      :label-value="getFormattedLevel(sliderVal)"
       :switch-label-side="props.switchLabelSide ? !props.switchLabelSide : props.vertical" @change="onLevelChanged"
       @update:model-value="val => sliderVal = val" />
     <p v-if="!props.switchLabelSide" class="text-accent text-caption no-margin"
       style="writing-mode: vertical-lr; transform-origin: center; transform: rotate(180deg);">
-      <b>{{ $t(CurrentActivity.selectableLevels.label) }} - {{ getFormatedLevel(CurrentActivity.selectedLevel) }}</b>
+      <b>{{ $t(CurrentActivity.selectableLevels.label) }} - {{ getFormattedLevel(CurrentActivity.selectedLevel) }}</b>
     </p>
   </div>
 </template>
 
 <script setup>
+import _ from 'lodash'
 import { computed, ref } from 'vue'
 import { useCurrentActivity } from '../../../../core/client/composables'
 
@@ -54,7 +55,7 @@ const props = defineProps({
 const { CurrentActivity } = useCurrentActivity()
 const sliderVal = ref(0)
 
-// ==COMPUTED==
+// Computed
 const isVisible = computed(() => sliderValues.value ? sliderValues.value.length > 0 : (sliderMinValue.value !== undefined && sliderMaxValue.value !== undefined))
 // const isLazy = computed(() => _.get(CurrentActivity.value.selectableLevels, 'lazy', true))
 const sliderValues = computed(() => _.get(CurrentActivity.value.selectableLevels, 'values'))
@@ -63,15 +64,15 @@ const sliderMinValue = computed(() => _.get(CurrentActivity.value.selectableLeve
 const sliderMaxValue = computed(() => _.get(CurrentActivity.value.selectableLevels, 'range.max'))
 const sliderInterval = computed(() => _.get(CurrentActivity.value.selectableLevels, 'range.interval', 1))
 
-// ==MISC FUNCTIONS==
+// Functions
 function onLevelChanged (level) {
   if (dataArray.value) {
     CurrentActivity.value.setSelectedLevel(dataArray.value[level])
   } else {
     CurrentActivity.value.setSelectedLevel(level)
   }
 }
-function getFormatedLevel (level) {
+function getFormattedLevel (level) {
   const unit = _.get(CurrentActivity.value.selectableLevels, 'unit')
   return `${level || CurrentActivity.value.selectedLevel} ${unit}`
 }