Add layout with menu, tests setup and update form

georchestra · Jan 28, 2025 · a4f90db · a4f90db
1 parent cbe0480
commit a4f90db
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 39 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
   <body>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,8 @@
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "pinia": "^2.3.0",
+    "primeicons": "^7.0.0",
+    "primelocale": "^1.5.0",
     "primevue": "^4.2.5",
     "vue": "^3.5.13",
     "vue-i18n": "^10.0.5",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,17 +1,5 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <header></header>
-  <div class="locale-changer">
-    <select v-model="$i18n.locale">
-      <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
-        {{ locale }}
-      </option>
-    </select>
-  </div>
-  <main>
-    <RouterView />
-  </main>
+  <RouterView />
 </template>
diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { RouterView } from 'vue-router'
+import Menubar from 'primevue/menubar'
+import { Select } from 'primevue'
+
+const { t } = useI18n()
+
+const menuItems = [
+  { label: t('Synchronize'), icon: 'pi pi-sync', command: () => {} },
+  { label: t('Operations log'), icon: 'pi pi-list', command: () => {} },
+  { label: t('User guide'), icon: 'pi pi-book', command: () => {} },
+]
+</script>
+
+<template>
+  <Menubar :model="menuItems">
+    <template #end>
+      <Select :options="$i18n.availableLocales" v-model="$i18n.locale"></Select>
+    </template>
+  </Menubar>
+  <main>
+    <RouterView />
+  </main>
+</template>
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -1,7 +1,12 @@
 {
-  "Source dataset": "Jeux de données source",
+  "Source dataset": "Jeu de données source",
   "Source layer": "Couche source",
   "Target platform": "Plateforme destination",
   "Synchronize": "Synchroniser",
-  "Synchronization of datasets between platforms": "Synchronisation de jeux de données entre plateformes"
+  "Synchronization of datasets between platforms": "Synchronisation de jeux de données entre plateformes",
+  "Operations log": "Journal des opérations",
+  "User guide": "Guide d'utilisation",
+  "Metadata": "Métadonnées",
+  "Layers": "Couches",
+  "Styles": "Styles"
 }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -1,12 +1,15 @@
 import Aura from '@primevue/themes/aura'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { createApp } from 'vue'
+import PrimeVue, { usePrimeVue, type PrimeVueLocaleOptions } from 'primevue/config'
+import { createApp, watch } from 'vue'
 import App from './App.vue'
 import './assets/main.css'
 import router from './router'
 import { createI18n } from 'vue-i18n'
 import frMessages from './locales/fr.json'
+import primeEnMessages from 'primelocale/en.json'
+import primeFrMessages from 'primelocale/fr.json'
+import 'primeicons/primeicons.css'
 
 function detectBrowserLanguage() {
   const availableLocales = ['en', 'fr']
@@ -29,6 +32,12 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(i18n)
+
+const primeLocales = {
+  en: primeEnMessages.en as unknown as PrimeVueLocaleOptions,
+  fr: primeFrMessages.fr as unknown as PrimeVueLocaleOptions,
+}
+
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
@@ -39,6 +48,15 @@ app.use(PrimeVue, {
       },
     },
   },
+  locale: primeLocales[i18n.global.locale],
 })
 
+watch(
+  () => i18n.global.locale, // Observe la langue actuelle de Vue I18n
+  (newLocale) => {
+    const primevue = usePrimeVue()
+    primevue.config.locale = primeLocales[newLocale] || primeLocales.en
+  },
+)
+
 app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -1,21 +1,36 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import FormView from '../views/FormView.vue'
+import BaseLayout from '@/layouts/BaseLayout.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: FormView,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
+      component: BaseLayout,
+      children: [
+        {
+          path: '',
+          redirect() {
+            return {
+              name: 'synchronize',
+            }
+          },
+        },
+        {
+          path: 'synchronize',
+          name: 'synchronize',
+          component: FormView,
+        },
+        {
+          path: 'about',
+          name: 'about',
+          // route level code-splitting
+          // this generates a separate chunk (About.[hash].js) for this route
+          // which is lazy-loaded when the route is visited.
+          component: () => import('../views/AboutView.vue'),
+        },
+      ],
     },
   ],
 })

diff --git a/frontend/src/tests/setup.ts b/frontend/src/tests/setup.ts
@@ -0,0 +1,8 @@
+import { config } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+
+config.global.mocks = {
+  $t: (key: string) => key,
+}
+
+config.global.plugins = [PrimeVue]
diff --git a/frontend/src/views/FormView.vue b/frontend/src/views/FormView.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { Form, FormField } from '@primevue/forms'
-import { Button } from 'primevue'
+import { Button, ToggleSwitch } from 'primevue'
 import InputText from 'primevue/inputtext'
+import { ref } from 'vue'
+
+const parameters = ref({
+  sourceDataset: null,
+  targetPlatform: null,
+  contentMetadata: true,
+  contentLayers: true,
+  contentStyles: true,
+})
 </script>
 
 <template>
@@ -12,15 +21,23 @@ import InputText from 'primevue/inputtext'
     <Form class="flex flex-col gap-5">
       <FormField name="sourceDataset" class="flex gap-5 items-center">
         <label for="sourceDataset" class="w-36">{{ $t('Source dataset') }}</label>
-        <InputText id="sourceDataset" placeholder="" />
-      </FormField>
-      <FormField name="sourceLayer" class="flex gap-5 items-center">
-        <label for="sourceLayer" class="w-36">{{ $t('Source layer') }}</label>
-        <InputText id="sourceLayer" placeholder="" />
+        <InputText id="sourceDataset" placeholder="" v-model="parameters.sourceDataset" />
       </FormField>
       <FormField name="targetPlatform" class="flex gap-5 items-center">
         <label for="targetPlatform" class="w-36">{{ $t('Target platform') }}</label>
-        <InputText id="targetPlatform" placeholder="" />
+        <InputText id="targetPlatform" placeholder="" v-model="parameters.targetPlatform" />
+      </FormField>
+      <FormField name="contentMetadata" class="flex gap-5 items-center">
+        <label for="contentMetadata" class="w-36">{{ $t('Metadata') }}</label>
+        <ToggleSwitch id="contentMetadata" placeholder="" v-model="parameters.contentMetadata" />
+      </FormField>
+      <FormField name="contentLayers" class="flex gap-5 items-center">
+        <label for="contentLayers" class="w-36">{{ $t('Layers') }}</label>
+        <ToggleSwitch id="contentLayers" placeholder="" v-model="parameters.contentLayers" />
+      </FormField>
+      <FormField name="contentStyles" class="flex gap-5 items-center">
+        <label for="contentStyles" class="w-36">{{ $t('Styles') }}</label>
+        <ToggleSwitch id="contentStyles" placeholder="" v-model="parameters.contentStyles" />
       </FormField>
       <Button :label="$t('Synchronize')" class="mt-5" />
     </Form>

diff --git a/frontend/src/views/__test__/FormView.spec.ts b/frontend/src/views/__test__/FormView.spec.ts
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import FormView from '../FormView.vue'
+
+describe('FormView', () => {
+  it('renders properly', () => {
+    const wrapper = mount(FormView)
+    expect(wrapper.text()).toContain('Synchronization of datasets between platforms')
+  })
+})
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
@@ -9,6 +9,7 @@ export default mergeConfig(
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/**'],
       root: fileURLToPath(new URL('./', import.meta.url)),
+      setupFiles: './src/tests/setup.ts',
     },
   }),
 )