diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue index 27f7cedd0..3eaa84909 100644 --- a/components/PoisList/PoisTable.vue +++ b/components/PoisList/PoisTable.vue @@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { localeIncludes } from 'locale-includes' import { PropertyTranslationsContextEnum } from '~/plugins/property-translations' -import type { ApiPoi, ApiPoiProperties, FieldsListItem } from '~/lib/apiPois' +import type { ApiPoi, FieldsListItem } from '~/lib/apiPois' import type { ApiMenuCategory } from '~/lib/apiMenu' import Field from '~/components/Fields/Field.vue' import IconButton from '~/components/UI/IconButton.vue' @@ -25,7 +25,7 @@ const props = defineProps<{ category: ApiMenuCategory }>() -const { toString } = useRouteField() +const { routeToString, addressToString } = useField() const { t, locale } = useI18n() const siteStore = useSiteStore() const { $propertyTranslations } = useNuxtApp() @@ -37,6 +37,7 @@ const cachedKey = computed(() => `pois-${props.category.id}`) const pois = ref() const loadingState = ref(false) const { data: cachedPois } = useNuxtData(cachedKey.value) + if (cachedPois.value) { pois.value = cachedPois.value } @@ -54,7 +55,7 @@ else { loadingState.value = pending.value } -// Handle default config field if not provided by API +// Set default config field if not provided by API const fields = computed((): FieldsListItem[] => { return ( (pois.value?.features[0].properties.editorial?.list_fields) @@ -69,10 +70,10 @@ pois.value.features = pois.value.features.map((f: ApiPoi) => { const arrayProps: { [key: string]: any } = [] if (fieldEntries.includes('route')) - arrayProps.route = toString(f.properties, getContext('route')) + arrayProps.route = routeToString(f.properties, getContext('route')) if (fieldEntries.includes('addr')) - arrayProps.addr = getAddrString(f.properties) + arrayProps.addr = addressToString(f.properties) return { ...f, @@ -95,8 +96,8 @@ const headers = computed((): Array => { PropertyTranslationsContextEnum.List, ), sort: (a: string, b: string) => { - const first = transformValue(a) - const second = transformValue(b) + const first = valueToString(a) + const second = valueToString(b) if (!first && second) return -1 @@ -132,22 +133,7 @@ const headers = computed((): Array => { return headers }) -function getAddrString(properties: ApiPoiProperties) { - const addressFields = [ - 'addr:housenumber', - 'addr:street', - 'addr:postcode', - 'addr:city', - ] - - return addressFields - .map(field => properties[field]) - .map(f => (f || '').toString().trim()) - .filter(f => f) - .join(' ') -} - -function transformValue(item: any) { +function valueToString(item: any) { if (Array.isArray(item)) return item.join(' ') @@ -155,7 +141,7 @@ function transformValue(item: any) { } function customFilter(value: any, query: string): boolean { - value = transformValue(value) + value = valueToString(value) if (!value) return false diff --git a/composables/useRouteField.ts b/composables/useField.ts similarity index 52% rename from composables/useRouteField.ts rename to composables/useField.ts index 6d494ea70..8edd4b170 100644 --- a/composables/useRouteField.ts +++ b/composables/useField.ts @@ -1,10 +1,27 @@ import type { ApiPoiProperties } from '~/lib/apiPois' +const ADDRESS_FIELDS = [ + 'addr:housenumber', + 'addr:street', + 'addr:postcode', + 'addr:city', +] + export default function () { const { $propertyTranslations } = useNuxtApp() const { t } = useI18n() - const getActivity = (properties: ApiPoiProperties, context: string): { key: string, translatedValue: string } | undefined => { + // Address Field + const addressToString = (properties: ApiPoiProperties): string => { + return ADDRESS_FIELDS + .map(field => properties[field]) + .map(f => (f || '').toString().trim()) + .filter(f => f) + .join(' ') + } + + // Route Field + const getRouteActivity = (properties: ApiPoiProperties, context: string): { key: string, translatedValue: string } | undefined => { const activity = Object.entries(properties) .find(([key, _value]) => { if (!key.includes(':')) @@ -25,13 +42,13 @@ export default function () { : { key: activityKey, translatedValue: $propertyTranslations.pv('route', `${activityKey}`, context) } } - const getDifficulty = (activity: string, difficulty: string, context: string): string | undefined => { + const getRouteDifficulty = (activity: string, difficulty: string, context: string): string | undefined => { return !difficulty ? undefined : $propertyTranslations.pv(`route:${activity}:difficulty`, difficulty, context) } - const getDuration = (duration: number): string | undefined => { + const getRouteDuration = (duration: number): string | undefined => { if (!duration) return undefined @@ -48,22 +65,22 @@ export default function () { return string } - const getLength = (length: number): string | undefined => { + const getRouteLength = (length: number): string | undefined => { return !length ? undefined : t('units.km', { length }) } - const toString = (properties: ApiPoiProperties, context: string): string => { + const routeToString = (properties: ApiPoiProperties, context: string): string => { let routeData = [] - const activity = getActivity(properties, context) + const activity = getRouteActivity(properties, context) if (!activity) return '' - const difficulty = getDifficulty(activity.key, properties[`route:${activity.key}:difficulty`], context) - const duration = getDuration(properties[`route:${activity.key}:duration`]) - const length = getLength(properties[`route:${activity.key}:length`]) + const difficulty = getRouteDifficulty(activity.key, properties[`route:${activity.key}:difficulty`], context) + const duration = getRouteDuration(properties[`route:${activity.key}:duration`]) + const length = getRouteLength(properties[`route:${activity.key}:length`]) routeData = [ activity.translatedValue, @@ -76,10 +93,11 @@ export default function () { } return { - getActivity, - getDifficulty, - getDuration, - getLength, - toString, + addressToString, + getRouteActivity, + getRouteDifficulty, + getRouteDuration, + getRouteLength, + routeToString, } }