diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue index e076a0313..cebba5de5 100644 --- a/components/PoisList/PoisTable.vue +++ b/components/PoisList/PoisTable.vue @@ -16,16 +16,16 @@ interface DataTableHeader { filterable?: boolean key: string sortable?: boolean - sort?: (a: ApiPoi, b: ApiPoi) => number + sort?: (a: string, b: string) => number title: string - value?: string | Function + value?: string | ((item: ApiPoi) => string) } const props = defineProps<{ category: ApiMenuCategory }>() -const routeField = useRouteField() +const { toString } = useRouteField() const { t, locale } = useI18n() const siteStore = useSiteStore() const { $propertyTranslations } = useNuxtApp() @@ -62,26 +62,70 @@ const fields = computed((): FieldsListItem[] => { ) }) +pois.value.features = pois.value.features.map((f: ApiPoi) => { + const fieldEntries = fields.value.map(f => f.field) + const arrayProps: { [key: string]: any } = [] + + Object.entries(f.properties) + .forEach(([key, value]) => { + if (fieldEntries.includes(key) && Array.isArray(value)) + arrayProps[`${key}Sortable`] = value.join(' ') + }) + + if (fieldEntries.includes('route')) + arrayProps.route = toString(f.properties, getContext('route')) + + if (fieldEntries.includes('addr')) + arrayProps.addr = getAddrString(f.properties) + + return { + ...f, + properties: { + ...f.properties, + ...arrayProps, + }, + } +}) + +function transformValue(item: any) { + if (Array.isArray(item)) + return item.join(' ') + + return item === undefined ? '' : item +} + // Transform headers data to be compliant with Vuetify's standards const headers = computed((): Array => { // Basic Fields const headers: Array = fields.value.map(f => ({ filterable: true, - key: f.field, + key: `properties.${f.field}`, sortable: true, title: $propertyTranslations.p( f.field, PropertyTranslationsContextEnum.List, ), - value: (item: ApiPoi) => { - if (f.field === 'addr') - return getAddrString(item.properties) + sort: (a: string, b: string) => { + const first = transformValue(a) + const second = transformValue(b) + + if (!first && second) + return -1 - if (f.field === 'route') - return routeField.toString(item.properties, getContext('route')) + if (first && !second) + return 1 + if (!first && !second) + return 0 + + return first.localeCompare(second, locale.value, { sensitivity: 'base' }) + }, + value: (item: ApiPoi) => { if (Array.isArray(item.properties[f.field])) - return item.properties[f.field].join(' ') + return item.properties[`${f.field}Sortable`] + + if (item.properties[f.field] === undefined) + return '' return item.properties[f.field] }, @@ -190,9 +234,9 @@ function getContext(key: string) {