add search bar into BIMDataDropdownList component

bimdata · Oct 6, 2023 · 045b2e7 · 045b2e7
1 parent 856faf0
commit 045b2e7
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 25 deletions.
diff --git 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 => {
+          return element.toLowerCase().includes(lowerCaseSearchText);
+        });
+      }
+    },
   },
   methods: {
     onHeaderClick() {

diff --git 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>