feat: add enum type for stars component #147

components/Fields/Stars.vue

@@ -1,28 +1,55 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
+import type { PropType } from 'nuxt/dist/app/compat/capi'
 import { defineNuxtComponent } from '#app'
 
+enum StarsEnum {
+  One = '1',
+  OneS = '1S',
+  Two = '2',
+  TwoS = '2S',
+  Three = '3',
+  ThreeS = '3S',
+  Four = '4',
+  FourS = '4S',
+  Five = '5',
+  FiveS = '5S',
+}
+
 export default defineNuxtComponent({
   components: {
     FontAwesomeIcon,
   },
 
   props: {
     stars: {
-      type: Number,
+      type: String as PropType<StarsEnum>,
       required: true,
     },
   },
+  computed: {
+    isSNotation(): boolean {
+      return Boolean(this.stars.includes('S'))
+    },
+    numericProp(): number {
+      let stars: string = this.stars
+      if (this.isSNotation)
+        stars = this.stars.slice(0, -1)
+
+      return Number(stars)
+    },
+  },
 })
 </script>
 
 <template>
   <div class="stars-data tw-text-amber-500 tw-mb-1">
     <FontAwesomeIcon
-      v-for="index in stars"
+      v-for="(_item, index) in numericProp"
       :key="index"
       icon="star"
     />
+    {{ isSNotation ? 'S' : '' }}
   </div>
 </template>

stores/map.ts

@@ -60,10 +60,9 @@ export const mapStore = defineStore('map', {
           const cleanProperties: { [key: string]: any } = {}
 
           Object.keys(feature.properties).forEach((key) => {
-            if (IsJsonString(feature.properties[key]))
+            if (key !== 'stars' && IsJsonString(feature.properties[key]))
               cleanProperties[key] = JSON.parse(feature.properties[key])
-            else
-              cleanProperties[key] = feature.properties[key]
+            else cleanProperties[key] = feature.properties[key]
           })
 
           goodFeature.properties = cleanProperties as ApiPoiProperties