feat: add sorting on specific data field #172

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<DataTableHeader> => {
   // Basic Fields
   const headers: Array<DataTableHeader> = 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) {
             </IconButton>
             <Field
               v-else
-              :context="getContext(col.key)"
-              :recursion-stack="[col.key]"
-              :field="{ field: col.key }"
+              :context="getContext(col.key.split('.').pop())"
+              :recursion-stack="[col.key.split('.').pop()]"
+              :field="{ field: col.key.split('.').pop() }"
               :details="t('poisTable.details')"
               :properties="item.properties"
               :geom="item.geometry"