feat(filtered-list): filter on list item value (#876)

* feat(filtered-list): filter on list item value

* fix(editors): hide duplicate li elements in filtered lists

* refactor(editors): better value definition

src/editors/publisher/data-set-editor.ts

@@ -23,6 +23,12 @@ export class DataSetEditor extends LitElement {
               class="listitem header"
               noninteractive
               graphic="icon"
+              value="${Array.from(ied.querySelectorAll('DataSet'))
+                .map(element => {
+                  const id = identity(element) as string;
+                  return typeof id === 'string' ? id : '';
+                })
+                .join(' ')}"
             >
               <span>${ied.getAttribute('name')}</span>
               <mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -55,5 +61,9 @@ export class DataSetEditor extends LitElement {
     .listitem.header {
       font-weight: 500;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/publisher/gse-control-editor.ts

@@ -29,6 +29,12 @@ export class GseControlEditor extends LitElement {
               class="listitem header"
               noninteractive
               graphic="icon"
+              value="${Array.from(ied.querySelectorAll('GSEControl'))
+                .map(element => {
+                  const id = identity(element) as string;
+                  return typeof id === 'string' ? id : '';
+                })
+                .join(' ')}"
             >
               <span>${ied.getAttribute('name')}</span>
               <mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -67,5 +73,9 @@ export class GseControlEditor extends LitElement {
     .listitem.header {
       font-weight: 500;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/publisher/report-control-editor.ts

@@ -29,6 +29,12 @@ export class ReportControlEditor extends LitElement {
               class="listitem header"
               noninteractive
               graphic="icon"
+              value="${Array.from(ied.querySelectorAll('ReportControl'))
+                .map(element => {
+                  const id = identity(element) as string;
+                  return typeof id === 'string' ? id : '';
+                })
+                .join(' ')}"
             >
               <span>${ied.getAttribute('name')}</span>
               <mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -65,5 +71,9 @@ export class ReportControlEditor extends LitElement {
     .listitem.header {
       font-weight: 500;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/publisher/sampled-value-control-editor.ts

@@ -29,6 +29,12 @@ export class SampledValueControlEditor extends LitElement {
               class="listitem header"
               noninteractive
               graphic="icon"
+              value="${Array.from(ied.querySelectorAll('SampledValueControl'))
+                .map(element => {
+                  const id = identity(element) as string;
+                  return typeof id === 'string' ? id : '';
+                })
+                .join(' ')}"
             >
               <span>${ied.getAttribute('name')}</span>
               <mwc-icon slot="graphic">developer_board</mwc-icon>
@@ -67,5 +73,9 @@ export class SampledValueControlEditor extends LitElement {
     .listitem.header {
       font-weight: 500;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/subscription/goose/goose-list.ts

@@ -13,7 +13,11 @@ import '@material/mwc-icon';
 import '@material/mwc-list/mwc-list-item';
 
 import '../../../filtered-list.js';
-import { getNameAttribute, newWizardEvent } from '../../../foundation.js';
+import {
+  getNameAttribute,
+  identity,
+  newWizardEvent,
+} from '../../../foundation.js';
 import { newGOOSESelectEvent } from './foundation.js';
 import { gooseIcon } from '../../../icons/icons.js';
 import { wizards } from '../../../wizards/wizard-library.js';
@@ -31,7 +35,7 @@ addEventListener('open-doc', onOpenDocResetSelectedGooseMsg);
 /** An sub element for showing all published GOOSE messages per IED. */
 @customElement('goose-list')
 export class GooseList extends LitElement {
-  @property()
+  @property({ attribute: false })
   doc!: XMLDocument;
 
   private onSelect(gseControl: Element): void {
@@ -57,6 +61,7 @@ export class GooseList extends LitElement {
       @click=${() => this.onSelect(gseControl)}
       graphic="large"
       hasMeta
+      value="${identity(gseControl)}"
     >
       <mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
       <span>${gseControl.getAttribute('name')}</span>
@@ -89,7 +94,16 @@ export class GooseList extends LitElement {
         ${getOrderedIeds(this.doc).map(
           ied =>
             html`
-              <mwc-list-item noninteractive graphic="icon">
+              <mwc-list-item
+                noninteractive
+                graphic="icon"
+                value="${Array.from(ied.querySelectorAll('GSEControl'))
+                  .map(element => {
+                    const id = identity(element) as string;
+                    return typeof id === 'string' ? id : '';
+                  })
+                  .join(' ')}"
+              >
                 <span>${getNameAttribute(ied)}</span>
                 <mwc-icon slot="graphic">developer_board</mwc-icon>
               </mwc-list-item>
@@ -115,5 +129,9 @@ export class GooseList extends LitElement {
     mwc-icon-button.hidden {
       display: none;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/subscription/goose/subscriber-list.ts

@@ -16,6 +16,7 @@ import {
   Create,
   createElement,
   Delete,
+  identity,
   newActionEvent,
 } from '../../../foundation.js';
 import {
@@ -323,7 +324,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderUnSubscribers(elements: ListElement[]): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${elements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span
           >${translate('subscription.subscriber.availableToSubscribe')}</span
         >
@@ -339,7 +348,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderPartiallySubscribers(elements: ListElement[]): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${elements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span>${translate('subscription.subscriber.partiallySubscribed')}</span>
       </mwc-list-item>
       <li divider role="separator"></li>
@@ -353,7 +370,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderFullSubscribers(): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${this.subscribedElements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span>${translate('subscription.subscriber.subscribed')}</span>
       </mwc-list-item>
       <li divider role="separator"></li>

src/editors/subscription/sampledvalues/smv-list.ts

@@ -12,7 +12,11 @@ import '@material/mwc-icon';
 import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 
-import { getNameAttribute, newWizardEvent } from '../../../foundation.js';
+import {
+  getNameAttribute,
+  identity,
+  newWizardEvent,
+} from '../../../foundation.js';
 import { newSmvSelectEvent } from './foundation.js';
 import { smvIcon } from '../../../icons/icons.js';
 import { getOrderedIeds, styles } from '../foundation.js';
@@ -31,7 +35,7 @@ addEventListener('open-doc', onOpenDocResetSelectedSmvMsg);
 /** An sub element for showing all Sampled Values per IED. */
 @customElement('smv-list')
 export class SmvPublisherList extends LitElement {
-  @property()
+  @property({ attribute: false })
   doc!: XMLDocument;
 
   private onSelect(smvControl: Element) {
@@ -64,6 +68,7 @@ export class SmvPublisherList extends LitElement {
       @click=${() => this.onSelect(smvControl)}
       graphic="large"
       hasMeta
+      value="${identity(smvControl)}"
     >
       <mwc-icon slot="graphic">${smvIcon}</mwc-icon>
       <span>${smvControl.getAttribute('name')}</span>
@@ -85,7 +90,16 @@ export class SmvPublisherList extends LitElement {
         ${getOrderedIeds(this.doc).map(
           ied =>
             html`
-              <mwc-list-item noninteractive graphic="icon">
+              <mwc-list-item
+                noninteractive
+                graphic="icon"
+                value="${Array.from(ied.querySelectorAll('SampledValueControl'))
+                  .map(element => {
+                    const id = identity(element) as string;
+                    return typeof id === 'string' ? id : '';
+                  })
+                  .join(' ')}"
+              >
                 <span>${getNameAttribute(ied)}</span>
                 <mwc-icon slot="graphic">developer_board</mwc-icon>
               </mwc-list-item>
@@ -111,5 +125,9 @@ export class SmvPublisherList extends LitElement {
     mwc-icon-button.hidden {
       display: none;
     }
+
+    mwc-list-item.hidden[noninteractive] + li[divider] {
+      display: none;
+    }
   `;
 }

src/editors/subscription/sampledvalues/subscriber-list.ts

@@ -16,6 +16,7 @@ import {
   Create,
   createElement,
   Delete,
+  identity,
   newActionEvent,
 } from '../../../foundation.js';
 import {
@@ -325,7 +326,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderUnSubscribers(elements: ListElement[]): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${elements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span
           >${translate('subscription.subscriber.availableToSubscribe')}</span
         >
@@ -341,7 +350,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderPartiallySubscribers(elements: ListElement[]): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${elements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span>${translate('subscription.subscriber.partiallySubscribed')}</span>
       </mwc-list-item>
       <li divider role="separator"></li>
@@ -355,7 +372,15 @@ export class SubscriberList extends SubscriberListContainer {
   }
 
   renderFullSubscribers(): TemplateResult {
-    return html`<mwc-list-item noninteractive>
+    return html`<mwc-list-item
+        noninteractive
+        value="${this.subscribedElements
+          .map(element => {
+            const id = identity(element.element) as string;
+            return typeof id === 'string' ? id : '';
+          })
+          .join(' ')}"
+      >
         <span>${translate('subscription.subscriber.subscribed')}</span>
       </mwc-list-item>
       <li divider role="separator"></li>

src/filtered-list.ts

@@ -30,7 +30,13 @@ function hideFiltered(item: ListItemBase, searchText: string): void {
   const childInnerText = Array.from(item.children)
     .map(child => (<HTMLElement>child).innerText)
     .join('\n');
-  const filterTarget: string = (itemInnerText + childInnerText).toUpperCase();
+  const value = item.value;
+
+  const filterTarget: string = (
+    itemInnerText +
+    childInnerText +
+    value
+  ).toUpperCase();
 
   const terms: string[] = searchText.toUpperCase().split(' ');
 
@@ -86,11 +92,9 @@ export class FilteredList extends ListBase {
       this.querySelectorAll(
         'mwc-list-item, mwc-check-list-item, mwc-radio-list-item'
       )
-    )
-      .filter(item => !(item as ListItemBase).noninteractive)
-      .forEach(item =>
-        hideFiltered(item as ListItemBase, this.searchField.value)
-      );
+    ).forEach(item =>
+      hideFiltered(item as ListItemBase, this.searchField.value)
+    );
   }
 
   protected onListItemConnected(e: CustomEvent): void {