refactor: use useField composable in RouteField component

components/Fields/RoutesField.vue

@@ -6,12 +6,6 @@ import FieldsHeader from '~/components/UI/FieldsHeader.vue'
 import type { ApiPoiProperties } from '~/lib/apiPois'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
 
-interface Route {
-  duration?: number
-  length?: number
-  difficulty?: string
-}
-
 export function isRoutesFieldEmpty(properties: {
   [key: string]: string
 }): boolean {
@@ -43,79 +37,35 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const {
+      getRouteDifficulty,
+      getRouteDuration,
+      getRouteLength,
+      getRouteNoDetails,
+      getRoutes,
+    } = useField()
+
+    return {
+      getRouteDifficulty,
+      getRouteDuration,
+      getRouteLength,
+      getRouteNoDetails,
+      getRoutes,
+    }
+  },
+
   computed: {
     propertyTranslations() {
       return this.$propertyTranslations
     },
 
-    isCompact(): boolean {
+    isCompact() {
       return this.context === PropertyTranslationsContextEnum.Card
     },
 
-    routes(): { [key: string]: Route } {
-      const activitiesStruct: { [key: string]: { [key: string]: string } } = {}
-      Object.entries(this.properties || {})
-        .map(([key, value]) => [key.split(':'), value])
-        .filter(([keys, _value]) => keys[0] === 'route' && keys.length === 3)
-        .forEach(([[_, activity, property], value]) => {
-          if (activitiesStruct[activity]) {
-            activitiesStruct[activity][property] = value
-          }
-          else {
-            activitiesStruct[activity] = {}
-            activitiesStruct[activity][property] = value
-          }
-        })
-
-      const ret: { [key: string]: Route } = {}
-      Object.entries(activitiesStruct).forEach(([acivity, properties]) => {
-        ret[acivity] = properties
-      })
-      return ret
-    },
-
-    length(): string | undefined {
-      const route = Object.values(this.routes)[0]
-      return route?.length
-        ? this.$t('units.km', { length: route.length })
-        : undefined
-    },
-  },
-
-  methods: {
-    duration(route: Route): string | undefined {
-      if (route.duration) {
-        const hours = Math.floor(route.duration / 60)
-        const minutes = route.duration % 60
-
-        let string = ''
-        if (hours > 0)
-          string += this.$t('units.hours', { hours })
-
-        if (minutes > 0)
-          string += `${hours > 0 ? ' ' : ''}${this.$t('units.min', { minutes })}`
-
-        return string
-      }
-      else {
-        return undefined
-      }
-    },
-
-    difficulty(activity: string, route: Route): string | undefined {
-      return route.difficulty
-        ? this.$propertyTranslations.pv(
-            `route:${activity}:difficulty`,
-            route.difficulty,
-            this.context,
-        )
-        : undefined
-    },
-
-    formatNoDetails(activity: string, route: Route): string {
-      return [this.duration(route), this.difficulty(activity, route)]
-        .filter(x => x)
-        .join(', ')
+    routes() {
+      return this.getRoutes(this.properties)
     },
   },
 })
@@ -127,30 +77,31 @@ export default defineNuxtComponent({
     <div v-if="isCompact">
       <p v-for="(route, activity) in routes" :key="activity">
         {{ propertyTranslations.pv('route', `${activity}`, context) }} :
-        {{ formatNoDetails(activity as string, route) }}.
-      </p>
-      <p v-if="length">
-        {{ length }}
+        {{ getRouteNoDetails(activity.toString(), route, context) }}.
+        <br>
+        <span v-if="route.length">
+          {{ getRouteLength(route.length) }}
+        </span>
       </p>
     </div>
     <div v-else>
-      <div v-if="length" class="field">
-        {{ $t('fields.route.length') }} {{ length }}
-      </div>
-      <div v-for="(route, activity) in routes" :key="activity" class="field">
+      <div v-for="(route, activity, index) in routes" :key="activity" class="field">
+        <div v-if="route.length && index === 0" class="field">
+          {{ $t('fields.route.length') }} {{ getRouteLength(route.length) }}
+        </div>
         <FieldsHeader
           :recursion-stack="[...recursionStack, `${activity}`]"
           :class="`field_header_level_${[...recursionStack, activity].length}`"
         >
           {{ propertyTranslations.pv('route', `${activity}`, context) }}
         </FieldsHeader>
         <ul class="tw-list-disc tw-ml-6">
-          <li v-if="difficulty(activity as string, route)">
+          <li v-if="route.difficulty">
             {{ $t('fields.route.difficulty') }}
-            {{ difficulty(activity as string, route) }}
+            {{ getRouteDifficulty(activity.toString(), route.difficulty, context) }}
           </li>
-          <li v-if="duration(route)">
-            {{ $t('fields.route.duration') }} {{ duration(route) }}
+          <li v-if="route.duration">
+            {{ $t('fields.route.duration') }} {{ getRouteDuration(route.duration) }}
           </li>
         </ul>
       </div>