From 2cfb3de5ccabb8e3cb57e8ca6dfaa158381a10e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 12 Mar 2024 17:28:23 +0100
Subject: [PATCH 1/3] chore: change datatable 'search' placeholder to 'filter'
 #194

---
 components/PoisList/PoisTable.vue | 2 +-
 locales/en-GB.ts                  | 2 +-
 locales/es-ES.ts                  | 2 +-
 locales/fr-FR.ts                  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index d31f9af0f..b4c582795 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -167,7 +167,7 @@ function getContext(key: string) {
 
       <VTextField
         v-model="search"
-        :label="t('poisTable.search')"
+        :label="t('poisTable.filter')"
         clearable
         variant="solo-filled"
         hide-details="auto"
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index bb24c371d..d71ad5701 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -138,7 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Details',
       downloadCsv: 'Download in CSV',
       downloadGeojson: 'Download in GeoJSON',
-      search: 'Search into the list',
+      filter: 'Filter into the list',
       showOnMap: 'Show on Map',
     },
     categorySelector: {
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index 949c18b0d..f81fbecbc 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -138,7 +138,7 @@ export default defineI18nLocale(() => {
       details: 'Detalles',
       downloadCsv: 'Descargar como CSV',
       downloadGeojson: 'Descargar como GeoJSON',
-      search: 'Buscar en la lista',
+      filter: 'Filtrar en la lista',
       showOnMap: 'Mostrar en el mapa',
     },
     categorySelector: {
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index 21db8731a..e8b4610f1 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -139,7 +139,7 @@ export default defineI18nLocale(() => {
       details: 'Détails',
       downloadCsv: 'Télécharger en CSV',
       downloadGeojson: 'Télécharger en GeoJSON',
-      search: 'Recherchez dans la liste',
+      filter: 'Filtrer dans la liste',
       showOnMap: 'Afficher sur la carte',
     },
     categorySelector: {

From d265163fbe81f6df8530345c72567a88ca8ec9f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 12 Mar 2024 18:09:18 +0100
Subject: [PATCH 2/3] feat: add i18n support to vuetify #194

---
 components/MainMap/NavMenu.vue | 11 ++++++++++-
 plugins/vuetify.ts             |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/MainMap/NavMenu.vue b/components/MainMap/NavMenu.vue
index 59fe63de2..a8aff19d4 100644
--- a/components/MainMap/NavMenu.vue
+++ b/components/MainMap/NavMenu.vue
@@ -6,7 +6,7 @@ import type { LocaleObject } from 'vue-i18n-routing'
 import { VDivider } from 'vuetify/components/VDivider'
 import { VList, VListItem, VListItemTitle } from 'vuetify/components/VList'
 import { VMenu } from 'vuetify/components/VMenu'
-
+import { useLocale } from 'vuetify'
 import { defineNuxtComponent } from '#app'
 import ExternalLink from '~/components/UI/ExternalLink.vue'
 import IconButton from '~/components/UI/IconButton.vue'
@@ -34,6 +34,14 @@ export default defineNuxtComponent({
     },
   },
 
+  setup() {
+    const { current } = useLocale()
+
+    return {
+      vuetifyLocale: current,
+    }
+  },
+
   computed: {
     ...mapWritableState(siteStore, ['locale']),
 
@@ -46,6 +54,7 @@ export default defineNuxtComponent({
     async setLocale(locale: string) {
       await this.$i18n.setLocale(locale)
       this.locale = locale
+      this.vuetifyLocale = locale
     },
     openLink(title: string, url: string) {
       this.$tracking({
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index cbe8b7351..9b98c584a 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -1,11 +1,17 @@
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import { en, es, fr } from 'vuetify/locale'
 import 'vuetify/styles'
 
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
+    locale: {
+      locale: 'en',
+      fallback: 'en',
+      messages: { en, es, fr },
+    },
     icons: {
       defaultSet: 'mdi',
       aliases,

From 7ec4fe51084a629d4129d513065d3514acd3d96c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 13 Mar 2024 18:04:26 +0100
Subject: [PATCH 3/3] chore: responsive datatable header #194

---
 components/PoisList/PoisTable.vue | 70 +++++++++++++++++++------------
 1 file changed, 43 insertions(+), 27 deletions(-)

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index b4c582795..ac3460826 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -24,6 +24,7 @@ const props = defineProps<{
   category: ApiMenuCategory
 }>()
 
+const device = useDevice()
 const { routeToString, addressToString } = useField()
 const { t, locale } = useI18n()
 const siteStore = useSiteStore()
@@ -157,31 +158,6 @@ function getContext(key: string) {
 
 <template>
   <VCard class="mt-8">
-    <VToolbar class="pa-2" flat>
-      <TeritorioIconBadge
-        :color-fill="category.category.color_fill"
-        :picto="category.category.icon"
-        size="xl"
-      />
-      <VToolbarTitle class="d-flex print:tw-pb-4" tag="h1" :text="category.category.name.fr" />
-
-      <VTextField
-        v-model="search"
-        :label="t('poisTable.filter')"
-        clearable
-        variant="solo-filled"
-        hide-details="auto"
-      >
-        <template #append-inner>
-          <FontAwesomeIcon class="px-2" icon="search" />
-        </template>
-      </VTextField>
-      <Actions
-        class="ma-0 ml-2 w-auto"
-        :category-id="category.id"
-        :color-line="category.category.color_line"
-      />
-    </VToolbar>
     <VDataTable
       :loading="loadingState"
       :headers="headers"
@@ -191,6 +167,38 @@ function getContext(key: string) {
       :custom-filter="customFilter"
       items-per-page="20"
     >
+      <template #top>
+        <header class="d-flex align-center pa-2" :style="{ flexDirection: device.smallScreen ? 'column' : 'row', gap: '8px', background: '#eeeeee' }">
+          <h1 class="d-flex align-center print:tw-pb-4" :style="{ marginRight: device.smallScreen ? 'unset' : 'auto' }">
+            <TeritorioIconBadge
+              :color-fill="category.category.color_fill"
+              :picto="category.category.icon"
+              size="xl"
+            />
+            {{ category.category.name.fr }}
+          </h1>
+          <VTextField
+            v-model="search"
+            :style="{
+              width: device.smallScreen ? '75%' : '25%',
+              flexGrow: device.smallScreen ? 'unset' : '0',
+            }"
+            :label="t('poisTable.filter')"
+            clearable
+            variant="solo-filled"
+            hide-details="auto"
+          >
+            <template #append-inner>
+              <FontAwesomeIcon class="px-2" icon="search" />
+            </template>
+          </VTextField>
+          <Actions
+            class="ma-0 w-auto"
+            :category-id="category.id"
+            :color-line="category.category.color_line"
+          />
+        </header>
+      </template>
       <template #item="{ item, columns }">
         <tr>
           <td v-for="col in columns" :key="col.key">
@@ -227,10 +235,18 @@ function getContext(key: string) {
   </VCard>
 </template>
 
-<style>
+<style scoped>
 /* stylelint-disable selector-class-pattern */
 .v-data-table .v-table__wrapper > table tbody > tr:nth-child(even) > td,
-.v-data-table .v-table__wrapper > table > thead > tr th {
+:deep(.v-data-table .v-table__wrapper > table > thead > tr th) {
   background: #F3F4F6;
 }
+
+h1 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  gap: 8px;
+  letter-spacing: 0;
+  line-height: 1.75rem;
+}
 </style>