Merge pull request #1584 from thfries/ui-autocomplete-search

UI - removed old dropdown for searchfilters

Author: thjaeckle

ui/modules/things/searchFilter.js

@@ -36,7 +36,6 @@ const FILTER_PLACEHOLDER = '...';
 let autoCompleteJS;
 
 const dom = {
-  filterList: null,
   favIcon: null,
   searchFilterEdit: null,
   searchThings: null,
@@ -61,12 +60,6 @@ export async function ready() {
     fillSearchFilterEdit(selection.rql);
   });
 
-  dom.filterList.addEventListener('click', (event) => {
-    if (event.target && event.target.classList.contains('dropdown-item')) {
-      fillSearchFilterEdit(event.target.textContent);
-    }
-  });
-
   dom.searchThings.onclick = () => {
     fillHistory(dom.searchFilterEdit.value);
     ThingsSearch.searchTriggered(dom.searchFilterEdit.value);
@@ -106,7 +99,6 @@ function onEnvironmentChanged() {
   if (!Environments.current()['pinnedThings']) {
     Environments.current().pinnedThings = [];
   }
-  updateFilterList();
 }
 
 function fillSearchFilterEdit(fillString) {
@@ -119,19 +111,6 @@ function fillSearchFilterEdit(fillString) {
   }
 }
 
-/**
- * Updates the UI filterList
- */
-function updateFilterList() {
-  dom.filterList.innerHTML = '';
-  Utils.addDropDownEntries(dom.filterList, ['Favorite search filters'], true);
-  Utils.addDropDownEntries(dom.filterList, Environments.current().filterList ?? []);
-  Utils.addDropDownEntries(dom.filterList, ['Example search filters'], true);
-  Utils.addDropDownEntries(dom.filterList, filterExamples);
-  Utils.addDropDownEntries(dom.filterList, ['Recent search filters'], true);
-  Utils.addDropDownEntries(dom.filterList, filterHistory);
-}
-
 async function createFilterList(query) {
   const date24h = new Date();
   const date1h = new Date();
@@ -181,11 +160,6 @@ async function createFilterList(query) {
       rql: `like(thingId,"${FILTER_PLACEHOLDER}*")`,
       group: 'ThingId',
     },
-    {
-      label: `exists ${FILTER_PLACEHOLDER}`,
-      rql: `exists(${FILTER_PLACEHOLDER})`,
-      group: 'Other',
-    },
     ...(Environments.current().filterList ?? []).map((f) => ({label: f, rql: f, group: 'Favorite'})),
     ...(Environments.current().fieldList ?? []).map((f) => ({
       label: `${f.label} = ${FILTER_PLACEHOLDER}`,
@@ -198,6 +172,7 @@ async function createFilterList(query) {
       group: 'Field',
     })),
     ...filterHistory.map((f) => ({label: f, rql: f, group: 'Recent'})),
+    ...filterExamples.map((f) => ({label: f, rql: f, group: 'Example'})),
   ];
 }
 
@@ -247,7 +222,6 @@ function checkAndMarkParameter() {
 function fillHistory(filter) {
   if (!filterHistory.includes(filter)) {
     filterHistory.unshift(filter);
-    updateFilterList();
   }
 }
 

ui/modules/things/things.html

@@ -22,9 +22,6 @@ <h5>Things</h5>
                             title="Toggle favorite for search filter">
                             <i id="favIcon" class="bi bi-star"></i>
                         </button>
-                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split"
-                            data-bs-toggle="dropdown"></button>
-                        <ul id="filterList" class="dropdown-menu" style="position: fixed; top: auto;"></ul>
                     </div>
                     <input type="search" class="form-control form-control-sm" 
                         id="searchFilterEdit" spellcheck=false autocomplete="off"></input>

ui/modules/utils.js

@@ -321,7 +321,7 @@ export function createAutoComplete(selector, src, placeHolder) {
     selector: selector,
     data: {
       src: src,
-      keys: ['label'],
+      keys: ['label', 'group'],
     },
     placeHolder: placeHolder,
     resultsList: {
@@ -333,8 +333,9 @@ export function createAutoComplete(selector, src, placeHolder) {
       highlight: true,
       element: (item, data) => {
         item.style = 'display: flex;';
-        item.innerHTML = `<span style="flex-grow: 1;" >${data.match}</span>
-            <span style="color: 3a8c9a;" class="fw-light fst-italic ms-1">${data.value.group}</span>`;
+        item.innerHTML = `<span style="flex-grow: 1;" >${data.key === 'label' ? data.match : data.value.label}</span>
+            <span style="color: 3a8c9a;" class="fw-light fst-italic ms-1">
+              ${data.key === 'group' ? data.match : data.value.group}</span>`;
       },
     },
     events: {