PATCH: Fix/search in components (#321)

* add elementLabelKey to BIMDataDropdownList component * fix DropdownList documentation * fix search for object * fix search for object in BIMDataSelectMulti component * refactoring
bimdata · Oct 13, 2023 · e77ac42 · e77ac42
1 parent 60e6d55
commit e77ac42
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 94 deletions.
diff --git a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
@@ -90,6 +90,9 @@ export default {
     elementKey: {
       type: String,
     },
+    elementLabelKey: {
+      type: String,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -152,6 +155,13 @@ export default {
         return this.list;
       } else {
         const lowerCaseSearchText = this.searchText.toLowerCase();
+        if (this.elementLabelKey) {
+          return this.list.filter(element =>
+            element[this.elementLabelKey]
+              .toLowerCase()
+              .includes(lowerCaseSearchText),
+          );
+        }
         return this.list.filter(element =>
           element.toLowerCase().includes(lowerCaseSearchText),
         );

diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectMulti.vue
@@ -137,9 +137,26 @@ export default {
         return this.options;
       } else {
         const lowerCaseSearchText = this.searchText.toLowerCase();
-        return this.options.filter(option =>
-          option.toLowerCase().includes(lowerCaseSearchText),
-        );
+        if (this.optionLabelKey) {
+          return this.options.filter(option =>
+            option[this.optionLabelKey]
+              .toLowerCase()
+              .includes(lowerCaseSearchText),
+          );
+        }
+        if (this.optionKey) {
+          return this.options.filter(
+            option =>
+              option.optionGroup ||
+              option[this.optionKey]
+                .toLowerCase()
+                .includes(lowerCaseSearchText),
+          );
+        } else {
+          return this.options.filter(option =>
+            option.toLowerCase().includes(lowerCaseSearchText),
+          );
+        }
       }
     },
   },

diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue b/src/BIMDataComponents/BIMDataSelect/BIMDataSelectSingle.vue
@@ -138,9 +138,26 @@ export default {
         return this.options;
       } else {
         const lowerCaseSearchText = this.searchText.toLowerCase();
-        return this.options.filter(option =>
-          option.toLowerCase().includes(lowerCaseSearchText),
-        );
+        if (this.optionLabelKey) {
+          return this.options.filter(option =>
+            option[this.optionLabelKey]
+              .toLowerCase()
+              .includes(lowerCaseSearchText),
+          );
+        }
+        if (this.optionKey) {
+          return this.options.filter(
+            option =>
+              option.optionGroup ||
+              option[this.optionKey]
+                .toLowerCase()
+                .includes(lowerCaseSearchText),
+          );
+        } else {
+          return this.options.filter(option =>
+            option.toLowerCase().includes(lowerCaseSearchText),
+          );
+        }
       }
     },
   },

diff --git a/src/web/views/Components/DropdownList/DropdownList.vue b/src/web/views/Components/DropdownList/DropdownList.vue
@@ -18,6 +18,7 @@
             :closeOnElementClick="checkboxCloseOnElementClickChecked"
             @element-click="onItemClick"
             :search="checkboxSearchChecked"
+            :elementLabelKey="elementLabelKey"
           >
             <template #header v-if="checkboxHeaderChecked">
               <span v-if="selectedItem">{{ item }}</span>
@@ -37,7 +38,8 @@
                   class="fill-primary"
                   margin="0 6px 0 0"
                 />
-                {{ element }}
+                <span v-if="optionSet === 'object'">{{ element.label }}</span>
+                <span v-else>{{ element }}</span>
               </div>
             </template>
           </BIMDataDropdownList>
@@ -77,6 +79,14 @@
             placeholder="Number of items per page"
             type="number"
           ></BIMDataInput>
+          <div class="m-t-24">
+            <BIMDataSelect
+              label="Option set"
+              :options="['string', 'object']"
+              :modelValue="optionSet"
+              @update:modelValue="changeOptionSet"
+            />
+          </div>
           <div
             v-for="[key, values] in Object.entries(dropdownOptions)"
             :key="key"
@@ -132,6 +142,7 @@
                 : ""
             }}
               {{ checkboxSearchChecked ? ':search="true"' : "" }}
+              {{ elementLabelKey ? ':elementLabelKey="label"' : "" }}
             &gt;
               {{ getHeader() }} {{ getContentAfterBtn() }} {{ getElement() }} {{
               getEmpty()
@@ -160,13 +171,18 @@
         <BIMDataText component="h5" color="color-primary" margin="15px 0 10px"
           >Events:</BIMDataText
         >
-        <BIMDataTable :columns="eventData[0]" :rows="eventData.slice(1)" />
+        <BIMDataTable :columns="eventsData[0]" :rows="eventsData.slice(1)" />
       </div>
     </div>
   </main>
 </template>
 
 <script>
+import { stringElements, objectElements } from "./option-sets";
+import propsData from "./props-data";
+import slotData from "./slots-data";
+import eventsData from "./events-data";
+
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
 export default {
@@ -192,88 +208,12 @@ export default {
       },
       selectedDropdownOptionstransition: "up",
       selectedDropdownOptionsdirection: "down",
-      list: [
-        "item 01",
-        "item 02",
-        "item 03",
-        "item 04",
-        "item 05",
-        "item 06",
-        "item 07",
-        "item 08",
-        "item 09",
-        "item 10",
-        "item 11",
-        "item 12",
-      ],
-      propsData: [
-        ["Props", "Type", "Default value", "Validator", "Description"],
-        ["list", "Array", "() => []", "", ""],
-        [
-          "perPage",
-          "Number",
-          "10",
-          "",
-          "Use this props to choose the number of elements per page, before displaying the pagination.",
-        ],
-        ["elementKey", "String", "", "", ""],
-        ["disabled", "Boolean", "false", "", ""],
-        [
-          "transitionName",
-          "String",
-          "'up'",
-          "'up' or 'down' values",
-          "Use this props to choose the opening transition of the submenu",
-        ],
-        [
-          "directionClass",
-          "String",
-          "'down'",
-          "'up', 'down', 'right' or 'left' values",
-          "Use this props to choose the opening of the submenu.",
-        ],
-        [
-          "loading",
-          "Boolean",
-          "false",
-          "",
-          "Use this props to display a loader.",
-        ],
-        [
-          "closeOnElementClick",
-          "Boolean",
-          "false",
-          "",
-          "Use this props to close the dropdown submenu when clicking on the item.",
-        ],
-        [
-          "width",
-          "String",
-          "220px",
-          "",
-          "Use this props to custom width of BIMDataDropdownList component.",
-        ],
-        [
-          "height",
-          "String",
-          "36px",
-          "",
-          "Use this props to custom height of BIMDataDropdownList component.",
-        ],
-      ],
-      slotData: [
-        ["Slot name", "Description"],
-        ["header", "Use this slot for add content before the icon button"],
-        [
-          "contentAfterBtn",
-          "Use this slot for add content after the icon button",
-        ],
-        ["element", "Use this slot to custum the elements list"],
-      ],
-      eventData: [
-        ["Event name", "Description"],
-        ["element-click", "Use this event to get the clicked element data"],
-      ],
+      list: stringElements,
+      optionSet: "string",
+      elementLabelKey: null,
+      propsData,
+      slotData,
+      eventsData,
     };
   },
   computed: {
@@ -282,9 +222,8 @@ export default {
     },
   },
   methods: {
-    onItemClick(list) {
-      // console.log(this.selectedItem = list);
-      this.selectedItem = list;
+    onItemClick(element) {
+      this.selectedItem = this.optionSet === "string" ? element : element.label;
     },
     getHeader() {
       if (this.checkboxHeaderChecked) {
@@ -303,7 +242,15 @@ export default {
       }
     },
     getElement() {
-      if (this.checkboxElementChecked) {
+      if (this.checkboxElementChecked && this.optionSet === "object") {
+        return `<template #element="{ element }">
+                <div class="flex items-center">
+                  <BIMDataIconChevron size="xxxs" class="fill-primary" margin="0 6px 0 0" />
+                  {{ element.label }}
+                </div>
+             </template>`;
+      }
+      if (this.checkboxElementChecked && this.optionSet === "string") {
         return `<template #element="{ element }">
                 <div class="flex items-center">
                   <BIMDataIconChevron size="xxxs" class="fill-primary" margin="0 6px 0 0" />
@@ -312,6 +259,20 @@ export default {
              </template>`;
       }
     },
+    changeOptionSet(value) {
+      switch (value) {
+        case "string":
+          this.elementLabelKey = null;
+          this.list = stringElements;
+          break;
+        case "object":
+          this.elementLabelKey = "label";
+          this.list = objectElements;
+          this.checkboxElementChecked = true;
+          break;
+      }
+      this.optionSet = value;
+    },
     getEmpty() {
       if (this.checkboxEmptyChecked) {
         return "<template #empty>No result</template>";

diff --git a/src/web/views/Components/DropdownList/events-data.js b/src/web/views/Components/DropdownList/events-data.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+export default [
+  ["Event name", "Description"],
+  ["element-click", "Use this event to get the clicked element data"],
+];
diff --git a/src/web/views/Components/DropdownList/option-sets.js b/src/web/views/Components/DropdownList/option-sets.js
@@ -0,0 +1,21 @@
+const stringElements = [
+  "element 1",
+  "element 2",
+  "element 3",
+  "element 4",
+  "element 5",
+  "element 6",
+  "element 7",
+  "element 8",
+];
+
+const objectElements = [
+  { id: 0, label: "element 1", value: "v1" },
+  { id: 1, label: "element 2", value: "v2" },
+  { id: 2, label: "element 3", value: "v3" },
+  { id: 3, label: "element 4", value: "v4" },
+  { id: 4, label: "element 5", value: "v5" },
+  { id: 5, label: "element 6", value: "v6" },
+];
+
+export { stringElements, objectElements };
diff --git a/src/web/views/Components/DropdownList/props-data.js b/src/web/views/Components/DropdownList/props-data.js
@@ -0,0 +1,57 @@
+/* eslint-disable */
+export default [
+  ["Props", "Type", "Default value", "Validator", "Description"],
+  ["list", "Array", "() => []", "", ""],
+  [
+    "perPage",
+    "Number",
+    "10",
+    "",
+    "Use this props to choose the number of elements per page, before displaying the pagination.",
+  ],
+  ["elementKey", "String", "", "", ""],
+  [
+    "elementLabelKey",
+    "String",
+    "null",
+    "",
+    "Only use this props if the 'list' props is an array of objects. Specify which field of the object represent the option label.",
+  ],
+  ["disabled", "Boolean", "false", "", ""],
+  [
+    "transitionName",
+    "String",
+    "'up'",
+    "'up' or 'down' values",
+    "Use this props to choose the opening transition of the submenu",
+  ],
+  [
+    "directionClass",
+    "String",
+    "'down'",
+    "'up', 'down', 'right' or 'left' values",
+    "Use this props to choose the opening of the submenu.",
+  ],
+  ["loading", "Boolean", "false", "", "Use this props to display a loader."],
+  [
+    "closeOnElementClick",
+    "Boolean",
+    "false",
+    "",
+    "Use this props to close the dropdown submenu when clicking on the item.",
+  ],
+  [
+    "width",
+    "String",
+    "220px",
+    "",
+    "Use this props to custom width of BIMDataDropdownList component.",
+  ],
+  [
+    "height",
+    "String",
+    "36px",
+    "",
+    "Use this props to custom height of BIMDataDropdownList component.",
+  ],
+];
diff --git a/src/web/views/Components/DropdownList/slots-data.js b/src/web/views/Components/DropdownList/slots-data.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default [
+  ["Slot name", "Description"],
+  ["header", "Use this slot for add content before the icon button"],
+  [
+    "contentAfterBtn",
+    "Use this slot for add content after the icon button",
+  ],
+  ["element", "Use this slot to custum the elements list"],
+];