From c1e873efe4c560c5db26bc6b96a7b6009d160825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 11 Mar 2024 11:13:52 +0100
Subject: [PATCH 1/3] chore: update vuetify to v3.4.0 #172

---
 components/PoisList/PoisTable.vue | 10 +++++-----
 package.json                      |  2 +-
 plugins/vuetify.ts                |  6 ------
 yarn.lock                         | 12 ++++++------
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index d4ac6647d..a80ff6560 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -139,13 +139,13 @@ function getContext(key: string) {
         <tr>
           <td v-for="col in columns" :key="col.key">
             <ContribFieldGroup
-              v-if="col.key === 'contrib' && isContribEligible(item.raw.properties)"
-              v-bind="getContributorFields(item.raw)"
+              v-if="col.key === 'contrib' && isContribEligible(item.properties)"
+              v-bind="getContributorFields(item)"
             />
             <IconButton
               v-else-if="col.key === 'details'"
               class="tw-h-10"
-              :href="`/poi/${item.raw.properties.metadata.id}/details`"
+              :href="`/poi/${item.properties.metadata.id}/details`"
               :label="t('poisTable.details')"
               target="_self"
             >
@@ -158,8 +158,8 @@ function getContext(key: string) {
               :recursion-stack="[col.key]"
               :field="{ field: col.key }"
               :details="t('poisTable.details')"
-              :properties="item.raw.properties"
-              :geom="item.raw.geometry"
+              :properties="item.properties"
+              :geom="item.geometry"
             />
           </td>
         </tr>
diff --git a/package.json b/package.json
index 04c05d3d2..7945e3b9b 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "vue-matomo": "^4.2.0",
     "vue-screen": "^2.2.0",
     "vue3-touch-events": "^4.1.3",
-    "vuetify": "^3.3.4"
+    "vuetify": "3.4.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.2",
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index ffbfaf68e..cbe8b7351 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -1,17 +1,11 @@
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
-import { VDataTable } from 'vuetify/labs/VDataTable'
-import { VSkeletonLoader } from 'vuetify/labs/VSkeletonLoader'
 import 'vuetify/styles'
 
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
-    components: {
-      VDataTable,
-      VSkeletonLoader,
-    },
     icons: {
       defaultSet: 'mdi',
       aliases,
diff --git a/yarn.lock b/yarn.lock
index 04dade413..da6e31f54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3214,7 +3214,7 @@ __metadata:
     vue-screen: ^2.2.0
     vue-tsc: ^1.8.27
     vue3-touch-events: ^4.1.3
-    vuetify: ^3.3.4
+    vuetify: 3.4.0
   languageName: unknown
   linkType: soft
 
@@ -16304,13 +16304,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vuetify@npm:^3.3.4":
-  version: 3.3.4
-  resolution: "vuetify@npm:3.3.4"
+"vuetify@npm:3.4.0":
+  version: 3.4.0
+  resolution: "vuetify@npm:3.4.0"
   peerDependencies:
     typescript: ">=4.7"
     vite-plugin-vuetify: ^1.0.0-alpha.12
-    vue: ^3.2.0
+    vue: ^3.3.0
     vue-i18n: ^9.0.0
     webpack-plugin-vuetify: ^2.0.0-alpha.11
   peerDependenciesMeta:
@@ -16322,7 +16322,7 @@ __metadata:
       optional: true
     webpack-plugin-vuetify:
       optional: true
-  checksum: adf51155a353f8cf21e88e96d72f89aa9f504ba4f0213326237595139e75918eecb7133eb084a6ec0d0a36f7a28b8cc0e1f4125e3e148c4d8c0137d0131b66c7
+  checksum: c28b901a575b75110d05c1cd4a9c596573af5245d11a2e02dcfb5137ef88d3375d20a281a9ac849f6ee2895a74195f18a091aa5f44e0d177a18e6d8ed9cd77a6
   languageName: node
   linkType: hard
 

From 49d900d9c8c87ced5df58b90613a2b123609d3ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 11 Mar 2024 15:17:23 +0100
Subject: [PATCH 2/3] feat: column sort support on datatable #172

---
 components/PoisList/PoisTable.vue | 80 +++++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index a80ff6560..62f4120a4 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
-import type { 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'
@@ -12,27 +12,30 @@ import { getPoiByCategoryId } from '~/lib/apiPois'
 import { siteStore as useSiteStore } from '~/stores/site'
 
 interface DataTableHeader {
-  filterable: boolean
+  filterable?: boolean
   key: string
+  sortable?: boolean
+  sort?: (a: string, b: string) => number
   title: string
-  value?: string | Function
 }
 
 const props = defineProps<{
   category: ApiMenuCategory
 }>()
 
-const { t } = useI18n()
+const { routeToString, addressToString } = useField()
+const { t, locale } = useI18n()
 const siteStore = useSiteStore()
 const { $propertyTranslations } = useNuxtApp()
 const { contribMode, isContribEligible, getContributorFields } = useContrib()
 const search = ref('')
-const cachedKey = computed(() => `pois-${props.category.id}`)
 
 // Fetch POIs by Cache or API
 const pois = ref()
 const loadingState = ref(false)
+const cachedKey = computed(() => `pois-${props.category.id}`)
 const { data: cachedPois } = useNuxtData(cachedKey.value)
+
 if (cachedPois.value) {
   pois.value = cachedPois.value
 }
@@ -58,38 +61,85 @@ const fields = computed((): FieldsListItem[] => {
   )
 })
 
+// Transform non-string values to single string
+// Used for sort and filter comparisons
+pois.value.features = pois.value.features.map((f: ApiPoi) => {
+  const fieldEntries = fields.value.map(f => f.field)
+  const arrayProps: { [key: string]: any } = []
+
+  if (fieldEntries.includes('route'))
+    arrayProps.route = routeToString(f.properties, getContext('route'))
+
+  if (fieldEntries.includes('addr'))
+    arrayProps.addr = addressToString(f.properties)
+
+  return {
+    ...f,
+    properties: {
+      ...f.properties,
+      ...arrayProps,
+    },
+  }
+})
+
 // Transform headers data to be compliant with Vuetify's standards
-const headers = computed((): Array<DataTableHeader> => {
+const headers = computed(() => {
   // Basic Fields
-  const headers: Array<DataTableHeader> = fields.value.map(f => ({
+  const h: DataTableHeader[] = fields.value.map(f => ({
     filterable: true,
-    key: f.field,
+    key: `properties.${f.field}`,
+    sortable: true,
     title: $propertyTranslations.p(
       f.field,
       PropertyTranslationsContextEnum.List,
     ),
-    value: `properties.${f.field}`,
+    sort: customSort,
   }))
 
   // Contrib Field
   if (contribMode) {
-    headers.push({
+    h.push({
       filterable: false,
+      sortable: false,
       key: 'contrib',
       title: t('fields.contrib.heading'),
     })
   }
 
   // Details Field
-  headers.push({
+  h.push({
     filterable: false,
+    sortable: false,
     key: 'details',
     title: 'Actions',
   })
 
-  return headers
+  return h
 })
 
+function valueToString(item: any) {
+  if (Array.isArray(item))
+    return item.join(' ')
+
+  return item === undefined || typeof item === 'object' ? '' : item
+}
+
+function customSort(a: string, b: string) {
+  const first = valueToString(a)
+  const second = valueToString(b)
+
+  if (!first && second)
+    return -1
+
+  if (first && !second)
+    return 1
+
+  if (!first && !second)
+    return 0
+
+  return first.localeCompare(second, locale.value, { sensitivity: 'base' })
+}
+
 function customFilter(value: any, query: string): boolean {
   return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
 }
@@ -154,9 +204,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"

From d957790208649f63075213df181f2beab327cfda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 7 Mar 2024 17:10:30 +0100
Subject: [PATCH 3/3] feat: use locale-includes in datatable filtering function
 #172

---
 components/PoisList/PoisTable.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index 62f4120a4..d31f9af0f 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { localeIncludes } from 'locale-includes'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
 import type { ApiPoi, FieldsListItem } from '~/lib/apiPois'
 import type { ApiMenuCategory } from '~/lib/apiMenu'
@@ -141,7 +142,12 @@ function customSort(a: string, b: string) {
 }
 
 function customFilter(value: any, query: string): boolean {
-  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
+  value = valueToString(value)
+
+  if (!value)
+    return false
+
+  return localeIncludes(value, query, { locales: locale.value, sensitivity: 'base' })
 }
 
 function getContext(key: string) {