From e860b408c04013e9fc082ef43e6180f7bf5faead Mon Sep 17 00:00:00 2001
From: LrxGaelle <gaelle@bimdata.io>
Date: Tue, 10 Oct 2023 15:31:42 +0200
Subject: [PATCH] MINOR: add search bar into BIMDataDropdownList component
 (#316)

* add search bar into BIMDataDropdownList component

* use implicit return
---
 .../BIMDataDropdownList.vue                   | 71 ++++++++++++++-----
 .../Components/DropdownList/DropdownList.vue  | 40 +++++++++--
 2 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
index cf92312b..df285faa 100644
--- a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
+++ b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
@@ -26,24 +26,40 @@
       <slot name="contentAfterBtn" :isOpen="displayed"></slot>
     </div>
     <transition :name="`slide-fade-${transitionName}`">
-      <BIMDataPaginatedList
-        :class="`submenu submenu--${directionClass}`"
-        v-show="displayed"
-        :list="list"
-        :perPage="perPage"
-        :elementKey="elementKey"
-        @element-click="onElementClick"
-        :loading="loading"
-      >
-        <template #element="{ element }">
-          <slot
-            name="element"
-            :element="element"
-            :close="away"
-            :isOpen="displayed"
-          ></slot>
-        </template>
-      </BIMDataPaginatedList>
+      <div>
+        <BIMDataPaginatedList
+          :class="`submenu submenu--${directionClass}`"
+          v-show="displayed"
+          :list="filteredList"
+          :perPage="perPage"
+          :elementKey="elementKey"
+          @element-click="onElementClick"
+          :loading="loading"
+        >
+          <template #header>
+            <BIMDataSearch
+              v-if="search"
+              width="calc(100% - 12px)"
+              color="primary"
+              radius
+              :placeholder="searchPlaceholder"
+              v-model="searchText"
+              class="m-6"
+            />
+            <div v-if="filteredList.length === 0" class="p-x-6 p-b-6">
+              <slot name="empty"></slot>
+            </div>
+          </template>
+          <template #element="{ element }">
+            <slot
+              name="element"
+              :element="element"
+              :close="away"
+              :isOpen="displayed"
+            ></slot>
+          </template>
+        </BIMDataPaginatedList>
+      </div>
     </transition>
   </div>
 </template>
@@ -105,11 +121,20 @@ export default {
       type: String,
       default: "36px",
     },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search",
+    },
   },
   emits: ["element-click"],
   data() {
     return {
       displayed: false,
+      searchText: "",
     };
   },
   computed: {
@@ -122,6 +147,16 @@ export default {
     iconRotation() {
       return this.displayed ? (this.directionClass === "up" ? -90 : 90) : 0;
     },
+    filteredList() {
+      if (this.searchText === "") {
+        return this.list;
+      } else {
+        const lowerCaseSearchText = this.searchText.toLowerCase();
+        return this.list.filter(element =>
+          element.toLowerCase().includes(lowerCaseSearchText),
+        );
+      }
+    },
   },
   methods: {
     onHeaderClick() {
diff --git a/src/web/views/Components/DropdownList/DropdownList.vue b/src/web/views/Components/DropdownList/DropdownList.vue
index 45e8687d..284cb2a7 100644
--- a/src/web/views/Components/DropdownList/DropdownList.vue
+++ b/src/web/views/Components/DropdownList/DropdownList.vue
@@ -17,11 +17,15 @@
             :loading="checkboxLoadingChecked"
             :closeOnElementClick="checkboxCloseOnElementClickChecked"
             @element-click="onItemClick"
+            :search="checkboxSearchChecked"
           >
             <template #header v-if="checkboxHeaderChecked">
               <span v-if="selectedItem">{{ item }}</span>
               <span v-else>dropdown list example</span>
             </template>
+            <template #empty v-if="checkboxEmptyChecked">
+              <span class="p-x-6 color-granite">No result</span>
+            </template>
             <template #contentAfterBtn v-if="checkboxAfterBtnChecked">
               hi
             </template>
@@ -46,23 +50,29 @@
           >
           <BIMDataCheckbox
             class="m-y-12"
-            text="disabled"
+            text="Disabled"
             v-model="checkboxDisabledChecked"
           >
           </BIMDataCheckbox>
           <BIMDataCheckbox
             class="m-y-12"
-            text="loading"
+            text="Loading"
             v-model="checkboxLoadingChecked"
           >
           </BIMDataCheckbox>
           <BIMDataCheckbox
-            class="m-t-12 m-b-24"
-            text="close on element click"
+            class="m-y-12"
+            text="Close on element click"
             v-model="checkboxCloseOnElementClickChecked"
           >
           </BIMDataCheckbox>
+          <BIMDataCheckbox
+            class="m-y-12"
+            text="Search"
+            v-model="checkboxSearchChecked"
+          />
           <BIMDataInput
+            class="m-t-30"
             v-model="numberInput"
             placeholder="Number of items per page"
             type="number"
@@ -100,6 +110,7 @@
           </BIMDataCheckbox>
           <BIMDataCheckbox text="element" v-model="checkboxElementChecked">
           </BIMDataCheckbox>
+          <BIMDataCheckbox text="empty" v-model="checkboxEmptyChecked" />
         </template>
 
         <!-- bloc IMPORTS LINES CODE -->
@@ -113,10 +124,18 @@
               :list="list"
               :perPage="{{ numberInput }}"
               elementKey="dropdown"
-              :disabled="{{ checkboxDisabledChecked }}"
-              :closeOnElementClick="{{ checkboxCloseOnElementClickChecked }}"
+              {{ checkboxLoadingChecked ? ':loading="true"' : "" }}
+              {{ checkboxDisabledChecked ? ':disabled="true"' : "" }}
+              {{
+              checkboxCloseOnElementClickChecked
+                ? ':closeOnElementClick="true"'
+                : ""
+            }}
+              {{ checkboxSearchChecked ? ':search="true"' : "" }}
             &gt;
-              {{ getHeader() }} {{ getContentAfterBtn() }} {{ getElement() }}
+              {{ getHeader() }} {{ getContentAfterBtn() }} {{ getElement() }} {{
+              getEmpty()
+            }}
             &lt;/BIMDataDropdownList&gt;
           </pre>
         </template>
@@ -161,9 +180,11 @@ export default {
       checkboxDisabledChecked: false,
       checkboxLoadingChecked: false,
       checkboxCloseOnElementClickChecked: false,
+      checkboxSearchChecked: false,
       checkboxHeaderChecked: true,
       checkboxAfterBtnChecked: false,
       checkboxElementChecked: false,
+      checkboxEmptyChecked: false,
       customListCheckbox: false,
       dropdownOptions: {
         transition: ["up", "down"],
@@ -291,6 +312,11 @@ export default {
              </template>`;
       }
     },
+    getEmpty() {
+      if (this.checkboxEmptyChecked) {
+        return "<template #empty>No result</template>";
+      }
+    },
   },
 };
 </script>