Improved search filter in explorer ui

- create search filter for fields - simple session based history of searches Signed-off-by: thfries <thomas.fries0@gmail.com>
eclipse-ditto · Nov 5, 2022 · aa75f0f · aa75f0f
1 parent 9998bc1
commit aa75f0f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/ui/index.css b/ui/index.css
@@ -151,3 +151,8 @@ h5, h6 {
 hr {
     margin: 0.25rem;
 }
+
+.dropdown-menu {
+    max-height: 80vh;
+    overflow-y: auto;
+}
diff --git a/ui/modules/things/searchFilter.js b/ui/modules/things/searchFilter.js
@@ -25,10 +25,14 @@ const filterExamples = [
   'like(attributes/key1,"known-chars-at-start*")',
 ];
 
+const filterHistory = [];
+
 let keyStrokeTimeout;
 
 let lastSearch = '';
 
+const FILTER_PLACEHOLDER = '*****';
+
 const dom = {
   filterList: null,
   favIcon: null,
@@ -51,7 +55,10 @@ export async function ready() {
     if (event.target && event.target.classList.contains('dropdown-item')) {
       dom.searchFilterEdit.value = event.target.textContent;
       checkIfFavourite();
-      Things.searchThings(event.target.textContent);
+      const filterEditNeeded = checkAndMarkParameter();
+      if (!filterEditNeeded) {
+        Things.searchThings(event.target.textContent);
+      }
     }
   });
 
@@ -103,6 +110,7 @@ function onEnvironmentChanged() {
  */
 function searchTriggered(filter) {
   lastSearch = filter;
+  fillHistory(filter);
   const regex = /^(eq\(|ne\(|gt\(|ge\(|lt\(|le\(|in\(|like\(|exists\(|and\(|or\(|not\().*/;
   if (filter === '' || regex.test(filter)) {
     Things.searchThings(filter);
@@ -140,8 +148,13 @@ function updateFilterList() {
   dom.filterList.innerHTML = '';
   Utils.addDropDownEntries(dom.filterList, ['Favourite search filters'], true);
   Utils.addDropDownEntries(dom.filterList, Environments.current().filterList);
+  Utils.addDropDownEntries(dom.filterList, ['Field search filters'], true);
+  Utils.addDropDownEntries(dom.filterList, Environments.current().fieldList
+      .map((f) => `eq(${f.path},${FILTER_PLACEHOLDER})`));
   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);
 }
 
 /**
@@ -174,3 +187,21 @@ function checkIfFavourite() {
   }
 }
 
+function checkAndMarkParameter() {
+  const index = dom.searchFilterEdit.value.indexOf(FILTER_PLACEHOLDER);
+  if (index >= 0) {
+    dom.searchFilterEdit.focus();
+    dom.searchFilterEdit.setSelectionRange(index, index + FILTER_PLACEHOLDER.length);
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function fillHistory(filter) {
+  if (!filterHistory.includes(filter)) {
+    filterHistory.unshift(filter);
+    updateFilterList();
+  }
+}
+