feat(filtered-list): Add ? and * wildcards to filtered-search, closes openscd#1006. (openscd#1007)

* Add ? and * wildcards to filtered-search, closes openscd#1006.

* Ensure wildcard matches at least one character, add tests

* Add documentation

* Improve algorithm and refactor

* Review comments, split on regex for multiple spaces

Author: danyill

public/md/Home.md

@@ -3,6 +3,7 @@ This is an open repository of information on OpenSCD and IEC 61850-6. You are we
 You can find information related to topics like
 
 - [Installation](https://github.com/openscd/open-scd/wiki/Install-OpenSCD)
+- [Interface](https://github.com/openscd/open-scd/wiki/Interface)
 - [Project workflow](https://github.com/openscd/open-scd/wiki/Project-workflow)
 - [Validators used in OpenSCD](https://github.com/openscd/open-scd/wiki/Validators)
 - [Extensions](https://github.com/openscd/open-scd/wiki/Extensions)

public/md/Interface.md

@@ -0,0 +1,6 @@
+OpenSCD makes extensive use of lists which allow filtering by a search query.
+
+You can use wildcards as part of a search query:
+
+* A question mark, `?` will match any single character 
+* An asterisk, `*` will match one or more characters

public/md/_Sidebar.md

@@ -2,6 +2,8 @@
 
 ### 1.1 [Install OpenSCD](https://github.com/openscd/open-scd/wiki/Install-OpenSCD)
 
+### 1.2 [Interface](https://github.com/openscd/open-scd/wiki/Interface)
+
 ## 2. [Project management](https://github.com/openscd/open-scd/wiki/Project-workflow)
 
 ### 2.1 [Import IEDs](https://github.com/openscd/open-scd/wiki/Import-IEDs)

src/filtered-list.ts

@@ -18,6 +18,7 @@ import { List } from '@material/mwc-list';
 import { ListBase } from '@material/mwc-list/mwc-list-base';
 import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 import { TextField } from '@material/mwc-textfield';
+import { ReportControlElementEditor } from './editors/publisher/report-control-element-editor';
 
 function slotItem(item: Element): Element {
   if (!item.closest('filtered-list') || !item.parentElement) return item;
@@ -38,11 +39,23 @@ function hideFiltered(item: ListItemBase, searchText: string): void {
     value
   ).toUpperCase();
 
-  const terms: string[] = searchText.toUpperCase().split(' ');
-
-  terms.some(term => !filterTarget.includes(term))
-    ? slotItem(item).classList.add('hidden')
-    : slotItem(item).classList.remove('hidden');
+  const terms: string[] = searchText
+    .toUpperCase()
+    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+    .trim()
+    .split(/\s+/g);
+
+  (terms.length === 1 && terms[0] === '') ||
+  terms.every(term => {
+    // regexp escape
+    const reTerm = new RegExp(
+      `*${term}*`.replace(/\*/g, '.*').replace(/\?/g, '.{1}'),
+      'i'
+    );
+    return reTerm.test(filterTarget);
+  })
+    ? slotItem(item).classList.remove('hidden')
+    : slotItem(item).classList.add('hidden');
 }
 
 /**

test/unit/filtered-list.test.ts

@@ -207,5 +207,57 @@ describe('filtered-list', () => {
       expect(element.children[5].classList.contains('hidden')).to.be.true;
       expect(element.children[6].classList.contains('hidden')).to.be.false;
     });
+
+    it('allows filtering with a ? wildcard', async () => {
+      element.searchField.value = 'item?';
+      element.onFilterInput();
+      element.requestUpdate();
+      await element.updateComplete;
+      expect(element.children[0].classList.contains('hidden')).to.be.false;
+      expect(element.children[1].classList.contains('hidden')).to.be.false;
+      expect(element.children[2].classList.contains('hidden')).to.be.false;
+      expect(element.children[3].classList.contains('hidden')).to.be.false;
+      expect(element.children[4].classList.contains('hidden')).to.be.false;
+      expect(element.children[5].classList.contains('hidden')).to.be.false;
+    });
+
+    it('allows filtering with a * wildcard', async () => {
+      element.searchField.value = 'te*sec';
+      element.onFilterInput();
+      element.requestUpdate();
+      await element.updateComplete;
+      expect(element.children[0].classList.contains('hidden')).to.be.false;
+      expect(element.children[1].classList.contains('hidden')).to.be.false;
+      expect(element.children[2].classList.contains('hidden')).to.be.false;
+      expect(element.children[3].classList.contains('hidden')).to.be.false;
+      expect(element.children[4].classList.contains('hidden')).to.be.true;
+      expect(element.children[5].classList.contains('hidden')).to.be.true;
+    });
+
+    it('allows filtering with two ? wildcards', async () => {
+      element.searchField.value = 'nest??item';
+      element.onFilterInput();
+      element.requestUpdate();
+      await element.updateComplete;
+      expect(element.children[0].classList.contains('hidden')).to.be.true;
+      expect(element.children[1].classList.contains('hidden')).to.be.true;
+      expect(element.children[2].classList.contains('hidden')).to.be.true;
+      expect(element.children[3].classList.contains('hidden')).to.be.true;
+      expect(element.children[4].classList.contains('hidden')).to.be.false;
+      expect(element.children[5].classList.contains('hidden')).to.be.false;
+    });
+
+    it('allows filtering with a * and ? wildcard', async () => {
+      element.searchField.value = 'n*tem?';
+      element.onFilterInput();
+      element.requestUpdate();
+      await element.updateComplete;
+      expect(element.children[0].classList.contains('hidden')).to.be.true;
+      expect(element.children[1].classList.contains('hidden')).to.be.true;
+      expect(element.children[2].classList.contains('hidden')).to.be.true;
+      expect(element.children[3].classList.contains('hidden')).to.be.true;
+      expect(element.children[4].classList.contains('hidden')).to.be.false;
+      expect(element.children[5].classList.contains('hidden')).to.be.false;
+    });
   });
 });