refactor score label

Author: QuentinMadura

front/src/components/map/ScoreLabel.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue"
+import type { ScoreLabelSize } from "@/utils/enum"
 
-const props = defineProps({
-  score: {
-    required: true,
-    type: Number
-  },
-  label: {
-    required: true,
-    type: String
-  },
-  size: {
-    required: true,
-    type: String
-  }
-})
-
-const scoreBg: Record<number, string> = {
+interface ScoreLabelProps {
+  score: number
+  label: string
+  size: ScoreLabelSize
+}
+const SCORE_BG_CLASSES: Record<number, string> = {
   0: "bg-scale-0 border-scale-0",
   1: "bg-scale-1 border-scale-1",
   2: "bg-scale-2 border-scale-2",
@@ -30,29 +21,32 @@ const scoreBg: Record<number, string> = {
   10: "bg-scale-10 border-scale-10 text-white"
 }
 
-const backgroundClass = computed(() => scoreBg[props.score])
+const props = defineProps<ScoreLabelProps>()
+
+const backgroundClass = computed(() => SCORE_BG_CLASSES[props.score] || SCORE_BG_CLASSES[0])
 const sizeClass = computed(() => props.size)
 </script>
 
 <template>
-  <div class="hexagon relative m-[5px] block text-center" :class="[backgroundClass, sizeClass]">
+  <div
+    class="hexagon relative m-[5px] block text-center flex justify-center items-center"
+    :class="[backgroundClass, sizeClass]"
+  >
     <span>{{ label }}</span>
   </div>
 </template>
 
 <style scoped>
 .hexagon {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
+
 .hexagon.small {
   height: 2em;
   width: 2em;
   font-size: 1.5em;
 }
+
 .hexagon.huge {
   height: 4em;
   width: 4em;

front/src/components/map/legend/PlantabilityLegend.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ScoreLabel from "../ScoreLabel.vue"
+import { ScoreLabelSize } from "@/utils/enum"
 </script>
 
 <template>
@@ -15,7 +16,7 @@ import ScoreLabel from "../ScoreLabel.vue"
         class="flex items-center justify-center"
         :score="index"
         :label="`${index}`"
-        size="small"
+        :size="ScoreLabelSize.SMALL"
       />
     </div>
     <span class="text-[0.9rem] leading-3">Plantable</span>

front/src/components/map/popup/MapScorePopup.vue

@@ -5,7 +5,7 @@ import { useMapStore } from "@/stores/map"
 import { DataType } from "@/utils/enum"
 
 const mapStore = useMapStore()
-const props = defineProps({
+defineProps({
   index: {
     required: true,
     type: String

front/src/components/map/popup/PlantabilityScorePopupContent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ScoreLabel from "@/components/map/ScoreLabel.vue"
 import { computed } from "vue"
+import { ScoreLabelSize } from "@/utils/enum"
 
 const props = defineProps({
   index: {
@@ -20,7 +21,7 @@ const label = computed(() => {
 <template>
   <div data-cy="plantability-score-popup" class="p-2.5 max-w-xs">
     <div class="flex-grow mr-1.25">
-      <score-label :score="score" :label="`${score}/10`" size="huge" />
+      <score-label :score="score" :label="`${score}/10`" :size="ScoreLabelSize.HUGE" />
     </div>
     <div class="flex-grow ml-1.25">
       <h3 class="font-mono text-lg">{{ label }}</h3>

front/src/utils/enum.ts

@@ -8,6 +8,10 @@ export enum DataType {
   LOCAL_CLIMATE_ZONES = "lcz"
 }
 
+export enum ScoreLabelSize {
+  SMALL = "small",
+  HUGE = "huge"
+}
 export const DataTypeToLabel: Record<DataType, string> = {
   [DataType.PLANTABILITY]: "Plantabilité",
   [DataType.LOCAL_CLIMATE_ZONES]: "Zones climatiques locales"