feat(editors/subscriber): use filtered lists (openscd#638)

* refactor(subscriber/subscriber-ied-list): split into functions

* refactor(editors/subscribe): remove ied-element-subscriber

* refactor(editors/subscriber): add filtered list to goose list

* fix(editors/subscriber): add missing import statement

* style(editors/subscriber): fix broken CSS rule

* refactor(editors/substation): show all ieds in the list

* refactor(editors/subscriber): remove unused console.log

* test(editors/Subscriber): fix integration tests

Author: JakobVogelsang

src/editors/subscription/elements/goose-message.ts

@@ -9,12 +9,12 @@ import {
 import { translate } from 'lit-translate';
 
 import '@material/mwc-icon';
-import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 
-import './elements/goose-message.js';
+import '../../filtered-list.js';
 import { compareNames, getNameAttribute } from '../../foundation.js';
-import { styles } from './foundation.js';
+import { newGOOSESelectEvent, styles } from './foundation.js';
+import { gooseIcon } from '../../icons/icons.js';
 
 /** An sub element for showing all published GOOSE messages per IED. */
 @customElement('publisher-goose-list')
@@ -43,33 +43,49 @@ export class PublisherGOOSEList extends LitElement {
     );
   }
 
+  private onGooseSelect(element: Element): void {
+    const ln = element.parentElement;
+    const dataset = ln?.querySelector(
+      `DataSet[name=${element.getAttribute('datSet')}]`
+    );
+    this.dispatchEvent(newGOOSESelectEvent(element, dataset!));
+  }
+
+  renderGoose(element: Element): TemplateResult {
+    return html`<mwc-list-item
+      @click=${() => this.onGooseSelect(element)}
+      graphic="large"
+    >
+      <span>${element.getAttribute('name')}</span>
+      <mwc-icon slot="graphic">${gooseIcon}</mwc-icon>
+    </mwc-list-item>`;
+  }
+
   render(): TemplateResult {
     return html` <section>
       <h1>${translate('subscription.publisherGoose.title')}</h1>
-      <mwc-list>
-        ${this.ieds.map(ied =>
-          ied.querySelector('GSEControl')
-            ? html`
-                <mwc-list-item noninteractive graphic="icon">
-                  <span class="iedListTitle">${getNameAttribute(ied)}</span>
-                  <mwc-icon slot="graphic">developer_board</mwc-icon>
-                </mwc-list-item>
-                <li divider role="separator"></li>
-                ${this.getGSEControls(ied).map(
-                  control =>
-                    html`<goose-message .element=${control}></goose-message>`
-                )}
-              `
-            : ``
+      <filtered-list>
+        ${this.ieds.map(
+          ied =>
+            html`
+              <mwc-list-item noninteractive graphic="icon">
+                <span class="iedListTitle">${getNameAttribute(ied)}</span>
+                <mwc-icon slot="graphic">developer_board</mwc-icon>
+              </mwc-list-item>
+              <li divider role="separator"></li>
+              ${this.getGSEControls(ied).map(control =>
+                this.renderGoose(control)
+              )}
+            `
         )}
-      </mwc-list>
+      </filtered-list>
     </section>`;
   }
 
   static styles = css`
     ${styles}
 
-    mwc-list {
+    filtered-list {
       height: 100vh;
       overflow-y: scroll;
     }