Use SearchComponent on bouquets & données page (#584)

* Adapt component to simple search too

* Remove unnecessary duplicated ids

* Remove css tests

* Add forgotten props

* Reviews

* Fix - Keep query in url

* Review - Label

* add a simple input option for filter use cases
update relevant components

* fix search query behaviour + height change
fix placeholder

---------

Co-authored-by: Tarik Amar <tarik.amar@multi.coop>
Co-authored-by: nico <contact@nardu.in>

src/components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     DsfrHeaderMenuLink: typeof import('./components/header/DsfrHeaderMenuLink.vue')['default']
     DsfrHeaderMenuLinks: typeof import('@gouvminint/vue-dsfr')['DsfrHeaderMenuLinks']
     DsfrInput: typeof import('@gouvminint/vue-dsfr')['DsfrInput']
+    DsfrInputGroup: typeof import('@gouvminint/vue-dsfr')['DsfrInputGroup']
     DsfrLogo: typeof import('@gouvminint/vue-dsfr')['DsfrLogo']
     DsfrModal: typeof import('@gouvminint/vue-dsfr')['DsfrModal']
     DsfrNavigation: typeof import('@gouvminint/vue-dsfr')['DsfrNavigation']

src/components/SearchComponent.vue

@@ -6,11 +6,10 @@ import 'vue-multiselect/dist/vue-multiselect.css'
 import { useRouter } from 'vue-router'
 
 import '@/assets/multiselect.css'
-import config from '@/config'
 
 const router = useRouter()
 
-defineProps({
+const props = defineProps({
   searchLabel: {
     type: String,
     required: true
@@ -22,17 +21,38 @@ defineProps({
   id: {
     type: String,
     required: true
+  },
+  isFilter: {
+    type: Boolean,
+    default: false
+  },
+  dropdown: {
+    type: Array,
+    default: () => []
+  },
+  searchEndpoint: {
+    type: String,
+    default: () => null
   }
 })
 
+const selectedQuery = defineModel({
+  type: String,
+  required: false,
+  default: ''
+})
+
 const emits = defineEmits(['search'])
 
-const dropdown = config.website.header_search.dropdown
 const query = ref('')
 const selectedMultiSearch = ref()
 
-const doSimpleSearch = () => {
-  router.push({ path: '/datasets', query: { q: query.value } })
+const doSimpleSearch = (event: string) => {
+  query.value = event
+  router.push({
+    path: props.searchEndpoint || router.resolve({ name: 'datasets' }).href,
+    query: { q: query.value }
+  })
   query.value = ''
   emits('search')
 }
@@ -56,8 +76,21 @@ const dropdownLabel = (text: string) => {
 </script>
 
 <template>
+  <DsfrInputGroup
+    v-if="isFilter"
+    :id="id"
+    v-model="selectedQuery"
+    :label="searchLabel"
+    class="filter-input"
+    label-visible
+  >
+    <template #before-input>
+      <span class="fr-icon-search-line search-icon" aria-hidden></span>
+    </template>
+  </DsfrInputGroup>
+
   <DsfrSearchBar
-    v-if="!dropdown"
+    v-else-if="!dropdown.length"
     v-model="query"
     :label="searchLabel"
     :placeholder="placeholder"
@@ -76,7 +109,7 @@ const dropdownLabel = (text: string) => {
       :options="dropdown"
       label="text"
       track-by="route"
-      :placeholder="placeholder"
+      placeholder=""
       select-label=""
       deselect-label=""
       :aria-labelledby="`${id}-label`"
@@ -107,58 +140,63 @@ const dropdownLabel = (text: string) => {
 </template>
 
 <style scoped>
-.select-search {
+:global(:root) {
   --icon-width: 24px;
+}
+
+:deep(.filter-input) {
+  padding-inline-start: calc(var(--icon-width) + 1rem);
+}
+.select-search {
   position: relative;
   display: flex;
+}
+.visible-label {
+  margin-inline-start: var(--icon-width);
+}
 
-  .search-icon {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 10px;
-    translate: 0 -50%;
-    max-width: var(--icon-width);
-  }
-  .visible-label {
-    margin-left: var(--icon-width);
-  }
-  .multiselect__placeholder {
-    margin-inline-start: var(--icon-width);
-    font-style: italic;
-    color: var(--text-mention-grey);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 100%;
-    overflow: hidden;
-  }
-  ::placeholder {
-    font-style: italic;
-    color: var(--text-mention-grey);
-  }
+:deep(.multiselect__placeholder) {
+  margin: 0;
+  font-style: italic;
+  color: var(--text-mention-grey);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  inline-size: 100%;
+  overflow: hidden;
+}
+::placeholder {
+  font-style: italic;
+  color: var(--text-mention-grey);
+}
+
+.search-icon {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 10px;
+  translate: 0 -10px;
+  max-inline-size: var(--icon-width);
 }
 :deep(.multiselect__tags) {
   border: 0;
   box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france);
   margin: 0;
-  max-height: none;
+  max-block-size: none;
   --hover: var(--background-contrast-grey-hover);
   --active: var(--background-contrast-grey-active);
   background-color: var(--background-contrast-grey);
   padding: 6px 40px 0 15px;
-  min-height: 42px;
-  width: 100%;
-  order: 1;
+  min-inline-size: 42px;
+  inline-size: 100%;
 }
 :deep(.multiselect__input),
 :deep(.multiselect__single) {
   background: var(--background-contrast-grey);
 }
 .select-search :deep(input) {
-  padding-top: 4px;
   margin-inline-start: var(--icon-width);
-  width: 100%;
+  inline-size: 100%;
 }
 :deep(.multiselect__content-wrapper) {
-  margin-top: 42px;
+  margin-block-start: 40px;
 }
 </style>

src/components/header/HeaderComponent.vue

@@ -9,6 +9,7 @@ import {
   type StyleValue
 } from 'vue'
 
+import config from '@/config'
 import SearchComponent from '../SearchComponent.vue'
 import type { DsfrHeaderMenuLinkProps } from './DsfrHeaderMenuLink.vue'
 
@@ -52,6 +53,7 @@ const props = withDefaults(defineProps<DsfrHeaderProps>(), {
   badgeText: 'BETA',
   badgeStyle: ''
 })
+const dropdown = config.website.header_search.dropdown
 
 const onKeyDown = (e: KeyboardEvent) => {
   if (e.key === 'Escape') {
@@ -200,6 +202,8 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
               <SearchComponent
                 id="header-select-search"
                 :search-label="searchLabel"
+                :dropdown="dropdown"
+                placeholder="Rechercher"
               />
             </div>
           </div>
@@ -229,6 +233,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
                 v-if="searchModalOpened"
                 id="header-select-search-modal"
                 :search-label="searchLabel"
+                placeholder="Rechercher"
                 @search="hideModal(false)"
               />
             </div>

src/custom/ecospheres/views/HomeView.vue

@@ -33,6 +33,7 @@ useHead({
   ],
   link: [{ rel: 'canonical', href: window.location.origin }]
 })
+const dropdown = config.website.header_search.dropdown
 </script>
 
 <template>
@@ -48,6 +49,7 @@ useHead({
           id="big-select-search"
           placeholder="Rechercher"
           search-label="Rechercher"
+          :dropdown="dropdown"
         />
         <p class="text-grey-300 fr-text--sm">
           Exemple&nbsp;: "&nbsp;Itinéraires fraîcheur&nbsp;" dans les bouquets

src/views/bouquets/BouquetsListView.vue

@@ -149,11 +149,13 @@ watch(
       </div>
     </div>
     <div class="fr-col-md-12 fr-mb-2w">
-      <DsfrSearchBar
+      <SearchComponent
+        id="search-bouquet"
         v-model="selectedQuery"
-        :label="`Rechercher un ${topicsName}`"
-        button-text="Rechercher"
-        placeholder=""
+        :is-filter="true"
+        :search-label="`Filtrer les ${topicsName}s`"
+        :label="`Filtrer les ${topicsName}s`"
+        :search-endpoint="router.resolve({ name: 'bouquets' }).href"
         @update:model-value="search"
       />
     </div>

src/views/datasets/DatasetsListView.vue

@@ -255,11 +255,13 @@ onMounted(() => {
     </p>
 
     <div class="fr-col-md-12 fr-mb-2w">
-      <DsfrSearchBar
+      <SearchComponent
+        id="search-bouquet"
         v-model="localQuery"
-        label="Rechercher des données"
-        button-text="Rechercher"
-        placeholder=""
+        :is-filter="true"
+        search-label="Filtrer des données"
+        label="Filtrer des données"
+        :search-endpoint="router.resolve({ name: 'datasets' }).href"
         @update:model-value="search()"
         @search="$emit('search', $event)"
       />