From 4ac0f5aedfbf3c4d9e4d4e793fb751b2b84ba338 Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Fri, 10 Oct 2025 13:59:59 +0200
Subject: [PATCH] WIP: added empty search bar and search component

---
 front/src/AppNavBar.vue    |  9 ++++-----
 front/src/NavBarSearch.vue | 28 ++++++++++++++++++++++++++++
 front/src/SearchBook.vue   | 12 ++++++++++++
 front/src/locales/en.json  |  1 -
 front/src/locales/fr.json  |  1 -
 front/src/router.js        |  2 ++
 6 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 front/src/NavBarSearch.vue
 create mode 100644 front/src/SearchBook.vue

diff --git a/front/src/AppNavBar.vue b/front/src/AppNavBar.vue
index 666e531..e6692e3 100644
--- a/front/src/AppNavBar.vue
+++ b/front/src/AppNavBar.vue
@@ -1,5 +1,6 @@
 <script setup>
   import { RouterLink } from 'vue-router'
+  import NavBarSearch from './NavBarSearch.vue'
   import { useAuthStore } from './auth.store.js'
   import { useRouter } from 'vue-router'
 
@@ -15,15 +16,13 @@
 <template>
   <nav class="navbar">
     <div class="navbar-brand">
-      <div class="navbar-item">
+        <RouterLink to="/" class="navbar-item" activeClass="is-active">
         PLM
-      </div>
+        </RouterLink>
     </div>
     <div class="navbar-menu">
       <div class="navbar-start">
-        <RouterLink to="/" class="navbar-item" activeClass="is-active">
-        {{ $t('navbar.home')}}
-        </RouterLink>
+        <NavBarSearch/>
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks')}}
         </RouterLink>
diff --git a/front/src/NavBarSearch.vue b/front/src/NavBarSearch.vue
new file mode 100644
index 0000000..7ce1ffe
--- /dev/null
+++ b/front/src/NavBarSearch.vue
@@ -0,0 +1,28 @@
+<script setup>
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const searchterm = ref("");
+  const router = useRouter();
+
+  function onSearchClick() {
+    router.push('/search/' + searchterm.value);
+  }
+</script>
+
+<template>
+  <div class="navbar-item">
+    <div class="field has-addons">
+      <div class="control">
+        <input v-model="searchterm" class="input" type="text" />
+      </div>
+      <div class="control">
+        <button @click="onSearchClick()" class="button">
+          <span class="icon icon-search" title="Search"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/front/src/SearchBook.vue b/front/src/SearchBook.vue
new file mode 100644
index 0000000..0942f01
--- /dev/null
+++ b/front/src/SearchBook.vue
@@ -0,0 +1,12 @@
+<script setup>
+  const props = defineProps({
+    searchterm: String
+  })
+</script>
+
+<template>
+  <div> You are searching for {{ searchterm }} </div>
+</template>
+
+<style scoped></style>
+
diff --git a/front/src/locales/en.json b/front/src/locales/en.json
index 2015cf4..f332733 100644
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@@ -4,7 +4,6 @@
     "welcome": "Welcome to PersonalLibraryManager. Please login ou sign in to continue."
   },
   "navbar": {
-    "home": "Home",
     "mybooks": "My Books",
     "addbook": "Add Book",
     "logout": "Log out",
diff --git a/front/src/locales/fr.json b/front/src/locales/fr.json
index 74d1c02..ce026ad 100644
--- a/front/src/locales/fr.json
+++ b/front/src/locales/fr.json
@@ -4,7 +4,6 @@
     "welcome": "Bienvenue sur PersonalLibraryManager. Merci de se connecter ou de s'inscrire pour continuer."
   },
   "navbar": {
-    "home": "Accueil",
     "mybooks": "Mes Livres",
     "addbook": "Ajouter Un Livre",
     "logout": "Se déconnecter",
diff --git a/front/src/router.js b/front/src/router.js
index 3213bba..0a6132c 100644
--- a/front/src/router.js
+++ b/front/src/router.js
@@ -5,11 +5,13 @@ import AddBook from './AddBook.vue'
 import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'
+import SearchBook from './SearchBook.vue'
 import { useAuthStore } from './auth.store'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/books', component: BooksBrowser },
+  { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
   { path: '/login', component: LogIn },