recherche criteres front

frontend/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "vue": "^3.3.4",
+        "vue-multiselect": "^3.0.0-beta.3",
+        "vue-range-multi": "^0.2.0",
         "vue-router": "^4.2.5",
         "vue-star-rating": "^2.1.0"
       },
@@ -725,6 +727,26 @@
         }
       }
     },
+    "node_modules/vue-multiselect": {
+      "version": "3.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.3.tgz",
+      "integrity": "sha512-P7Fx+ovVF7WMERSZ0lw6N3p4H4bnQ3NcaY3ORjzFPv0r/6lpIqvFWmK9Xnwze9mgAvmNV1foI1VWrBmjnfBTLQ==",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/vue-range-multi": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/vue-range-multi/-/vue-range-multi-0.2.0.tgz",
+      "integrity": "sha512-qKXKovD26EiNMT3CZgMvxdb07jGWUTMwWbFryuQ86OtIO35FWBrMNzE2eIXejf255pqJNNV8lIsMKoxRZ8Yejg==",
+      "funding": {
+        "url": "https://wiidede.space/sponsor"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
@@ -1137,6 +1159,17 @@
         "@vue/shared": "3.3.6"
       }
     },
+    "vue-multiselect": {
+      "version": "3.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.3.tgz",
+      "integrity": "sha512-P7Fx+ovVF7WMERSZ0lw6N3p4H4bnQ3NcaY3ORjzFPv0r/6lpIqvFWmK9Xnwze9mgAvmNV1foI1VWrBmjnfBTLQ=="
+    },
+    "vue-range-multi": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/vue-range-multi/-/vue-range-multi-0.2.0.tgz",
+      "integrity": "sha512-qKXKovD26EiNMT3CZgMvxdb07jGWUTMwWbFryuQ86OtIO35FWBrMNzE2eIXejf255pqJNNV8lIsMKoxRZ8Yejg==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

frontend/package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "vue": "^3.3.4",
+    "vue-multiselect": "^3.0.0-beta.3",
+    "vue-range-multi": "^0.2.0",
     "vue-router": "^4.2.5",
     "vue-star-rating": "^2.1.0"
   },

frontend/src/components/SearchBar.vue

 <script setup>
 import { ref, onMounted } from 'vue';
 import router from '@/router/index.js'
+import { Range } from 'vue-range-multi'
+import 'vue-range-multi/style.css'
 
 const searchQuery = ref('');
+const model=ref([0,0]);
 
 async function searchMovies() {
     router.push({ path: '/search', query: { q: searchQuery.value } });
@@ -16,6 +19,7 @@ async function searchMovies() {
         <input v-model="searchQuery" type="text" placeholder="Exemple : Cars">
         <button>Rechercher</button>
     </form>
+    <Range v-model="model" rangeHighlight="true" />
 </template>
 
 <style scoped>
@@ -56,4 +60,11 @@ button {
     /* color: var(--color-text); */
     border-radius: 0 4px 4px 0;
 }
+
+.m-range-theme {
+  --c-primary: #E6007E; /* primary color */
+  --c-fill: #E4E7ED; /* track's fill color */
+  --c-fill-stop: #F5F5F5; /* stop's fill color */
+  --c-fill-thumb: #fff;  /* thumb's fill color */
+}
 </style>
\ No newline at end of file