From ccaaedfd3d1266a711ec9e01b82ab4f450f01b42 Mon Sep 17 00:00:00 2001
From: Maxime GRANDCOLAS <maxime.grandcolas@scille.fr>
Date: Tue, 17 Sep 2024 12:45:13 +0200
Subject: [PATCH] [MS] Adds a popover option to search input

---
 lib/components/ms-input/MsSearchInput.vue | 87 ++++++++++++++++++-----
 src/views/HomePage.vue                    |  6 +-
 2 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/lib/components/ms-input/MsSearchInput.vue b/lib/components/ms-input/MsSearchInput.vue
index b20d614..1805c69 100644
--- a/lib/components/ms-input/MsSearchInput.vue
+++ b/lib/components/ms-input/MsSearchInput.vue
@@ -5,22 +5,54 @@
     class="input-content ms-search-input"
     id="ms-search-input"
   >
-    <ion-icon
-      :icon="search"
-      slot="start"
-      class="icon"
-    />
-    <ion-input
-      class="form-input input"
-      ref="inputRef"
-      :value="modelValue"
-      :placeholder="$msTranslate(placeholder)"
-      :clear-input="true"
-      @ion-input="onChange($event.target.value)"
-      @keyup.enter="onEnterPress()"
-      mode="ios"
-    />
-    <!-- mode=ios to change the clear icon style -->
+    <div
+      v-if="asPopover"
+      @click="openPopover"
+    >
+      <div>
+        <ion-icon
+          :icon="search"
+          slot="start"
+          class="icon"
+        />
+        <span>{{ $msTranslate(placeholder) }}</span>
+      </div>
+      <div
+        class="popover-container"
+        v-show="showPopover"
+      >
+        <ion-input
+          class="form-input input"
+          ref="inputRef"
+          :value="modelValue"
+          :placeholder="$msTranslate(placeholder)"
+          :clear-input="true"
+          @ion-input="onChange($event.target.value)"
+          @keyup.enter="onEnterPress()"
+          @ion-blur="showPopover = false"
+          mode="ios"
+        />
+      </div>
+    </div>
+
+    <div v-else>
+      <ion-icon
+        :icon="search"
+        slot="start"
+        class="icon"
+      />
+      <ion-input
+        class="form-input input"
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="$msTranslate(placeholder)"
+        :clear-input="true"
+        @ion-input="onChange($event.target.value)"
+        @keyup.enter="onEnterPress()"
+        mode="ios"
+      />
+      <!-- mode=ios to change the clear icon style -->
+    </div>
   </div>
 </template>
 
@@ -28,14 +60,16 @@
 import { Translatable } from '@lib/services';
 import { IonIcon, IonInput } from '@ionic/vue';
 import { search } from 'ionicons/icons';
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 
 const props = defineProps<{
   modelValue?: string;
   placeholder?: Translatable;
+  asPopover?: boolean;
 }>();
 
 const inputRef = ref();
+const showPopover = ref(false);
 
 const emits = defineEmits<{
   (e: 'change', value: string): void;
@@ -48,6 +82,12 @@ defineExpose({
   selectText,
 });
 
+async function openPopover(): Promise<void> {
+  showPopover.value = true;
+  await nextTick();
+  await inputRef.value.$el.setFocus();
+}
+
 function setFocus(): void {
   setTimeout(() => {
     if (inputRef.value && inputRef.value.$el) {
@@ -99,4 +139,17 @@ function onChange(value: any): void {
     color: var(--parsec-color-light-secondary-light);
   }
 }
+
+.popover-container {
+  padding: 0.5rem 0;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  border: 1px solid var(--parsec-color-light-secondary-light);
+  background: var(--parsec-color-light-secondary-white);
+  border-radius: var(--parsec-radius-8);
+  margin-top: 0.5rem;
+  z-index: 12;
+}
 </style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index edcbbaf..bf08223 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -167,9 +167,11 @@
               <ion-label class="title-h3">{{ $msTranslate('usage.components.inputs.msSearchInput.title') }}</ion-label>
               <ms-search-input
                 placeholder="lib.components.msSearchInput.placeholder"
-                v-model="searchIInputExample"
+                v-model="searchInputExample"
                 id="searchInputExample"
+                :as-popover="true"
               />
+              {{ searchInputExample }}
             </div>
             <div class="example-divider-item">
               <ion-label class="title-h3">{{ $msTranslate('usage.components.inputs.msPasswordInput.title') }}</ion-label>
@@ -515,7 +517,7 @@ const inputExample = ref('');
 const msInputRef = ref();
 const textareaExample = ref('');
 const passwordInputExample = ref('');
-const searchIInputExample = ref('');
+const searchInputExample = ref('');
 const msReportTheme = ref(MsReportTheme.Info);
 const toastOffset = ref('0');
 const toastManager = new ToastManager();