Added place count to filters

src/components/BikeFilters.vue

@@ -5,23 +5,18 @@ import { storeToRefs } from 'pinia';
 import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
 
 const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
+
+defineProps<{
+  nbUncovered?: number
+  nbCovered?: number
+  nbKorrigo?: number
+}>()
 </script>
 
 <template>
   <aside class="absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 text-xs rounded-xs">
     <form>
       <div class="grid gap-1.5">
-        <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
-          <CheckboxRoot v-model="filterCovered"
-            class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
-            <CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
-              <PhCheck :size="10" />
-            </CheckboxIndicator>
-          </CheckboxRoot>
-
-          <span class="select-none">Abrités</span>
-        </label>
-
         <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
           <CheckboxRoot v-model="filterUncovered"
             class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
@@ -30,7 +25,30 @@ const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
             </CheckboxIndicator>
           </CheckboxRoot>
 
-          <span class="select-none">Non-abrités</span>
+          <span class="select-none">
+            Non-abrités
+
+            <small v-if="nbUncovered">
+              ({{ nbUncovered }})
+            </small>
+          </span>
+        </label>
+
+        <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
+          <CheckboxRoot v-model="filterCovered"
+            class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+            <CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
+              <PhCheck :size="10" />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+
+          <span class="select-none">
+            Abrités
+
+            <small v-if="nbCovered">
+              ({{ nbCovered }})
+            </small>
+          </span>
         </label>
 
         <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
@@ -41,7 +59,13 @@ const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
             </CheckboxIndicator>
           </CheckboxRoot>
 
-          <span class="select-none">Abonnement Korrigo</span>
+          <span class="select-none">
+            Abonnement Korrigo
+
+            <small v-if="nbKorrigo">
+              ({{ nbKorrigo }})
+            </small>
+          </span>
         </label>
       </div>
     </form>

src/components/Map.vue

@@ -40,26 +40,36 @@ const { state } = useQuery({
 })
 
 // Groups different parking spot by types
+const nonCoveredParkings = computed(() =>
+  state.value.data?.filter(p => p.type === SpotType.Uncovered) ?? []
+)
+const nonCoveredParkingsSpots = computed(() => {
+  return nonCoveredParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
+})
+
 const coveredTypes = new Set([SpotType.Covered, SpotType.Boxed])
 
 const coveredParkings = computed(() =>
   state.value.data?.filter(p => coveredTypes.has(p.type as SpotType)) ?? []
 )
-
+const coveredParkingsSpots = computed(() => {
-const nonCoveredParkings = computed(() =>
+  return coveredParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
-  state.value.data?.filter(p => p.type === SpotType.Uncovered) ?? []
+})
-)
 
 const premiumParkings = computed(() =>
   state.value.data?.filter(p => p.condition_acces === SpotAccess.Korrigo) ?? []
 )
+const premiumParkingsSpots = computed(() => {
+  return premiumParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
+})
 
 const { zoom, minZoom, center, maxClusterRadius, disableClusteringAtZoom } = useMap()
 const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
 </script>
 
 <template>
-  <BikeFilters />
+  <BikeFilters :nb-uncovered="nonCoveredParkingsSpots" :nb-covered="coveredParkingsSpots"
+    :nb-korrigo="premiumParkingsSpots" />
 
   <main class="relative z-0 h-screen w-screen grid place-items-center">
     <div v-if="state.status === 'pending'">Loading...</div>