feat(editors/ied): Add toggle for LDevice child elements (openscd#484)

Author: Rob Tjalma

src/editors/ied/ldevice-container.ts

@@ -4,19 +4,24 @@ import {
   html,
   LitElement,
   property,
+  query,
   TemplateResult,
 } from 'lit-element';
 
 import '../../action-pane.js';
 import './ln-container.js'
 import { nothing } from 'lit-html';
 import { getDescriptionAttribute, getInstanceAttribute, getNameAttribute } from '../../foundation.js';
+import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
+import { translate } from 'lit-translate';
 
 /** [[`IED`]] plugin subeditor for editing `LDevice` element. */
 @customElement('ldevice-container')
 export class LDeviceContainer extends LitElement {
   @property({ attribute: false })
   element!: Element;
+  
+  @query('#toggleButton') toggleButton!: IconButtonToggle | undefined;
 
   private header(): TemplateResult {
     const nameOrInst = getNameAttribute(this.element) ?? getInstanceAttribute(this.element);
@@ -25,14 +30,29 @@ export class LDeviceContainer extends LitElement {
     return html`${nameOrInst}${desc ? html` — ${desc}` : nothing}`;
   }
 
+  protected firstUpdated(): void {
+    this.requestUpdate();
+  }
+
   render(): TemplateResult {
+    const lnElements = Array.from(this.element.querySelectorAll(':scope > LN,LN0'));
+    
     return html`<action-pane .label="${this.header()}">
-    <div id="lnContainer">
-      ${Array.from(this.element.querySelectorAll(':scope > LN,LN0')).map(
-        server => html`<ln-container
-          .element=${server}
-        ></ln-container>`)}
-    </div>
+      ${lnElements.length > 0 ? html`<abbr slot="action" title="${translate('iededitor.toggleChildElements')}">
+        <mwc-icon-button-toggle
+          on
+          id="toggleButton"
+          onIcon="keyboard_arrow_up"
+          offIcon="keyboard_arrow_down"
+          @click=${() => this.requestUpdate()}
+        ></mwc-icon-button-toggle>
+      </abbr>` : nothing}
+      <div id="lnContainer">
+        ${this.toggleButton?.on ? lnElements.map(server => html`<ln-container
+            .element=${server}
+          ></ln-container>
+          `) : nothing}
+      </div>
     </action-pane>`;
   }
 

test/testfiles/valid2007B4withIEDModifications.scd

@@ -211,6 +211,8 @@
 						</DOI>
 					</LN>
 				</LDevice>
+				<LDevice inst="EmptyLDevice">
+				</LDevice>
 			</Server>
 		</AccessPoint>
 		<KDC iedName="IED1" apName="P1"/>

test/unit/editors/ied/__snapshots__/ldevice-container.test.snap.js

@@ -3,6 +3,18 @@ export const snapshots = {};
 
 snapshots["ldevice-container looks like the latest snapshot"] = 
 `<action-pane tabindex="0">
+  <abbr
+    slot="action"
+    title="[iededitor.toggleChildElements]"
+  >
+    <mwc-icon-button-toggle
+      id="toggleButton"
+      officon="keyboard_arrow_down"
+      on=""
+      onicon="keyboard_arrow_up"
+    >
+    </mwc-icon-button-toggle>
+  </abbr>
   <div id="lnContainer">
     <ln-container>
     </ln-container>
@@ -14,8 +26,24 @@ snapshots["ldevice-container looks like the latest snapshot"] =
     </ln-container>
     <ln-container>
     </ln-container>
+    <ln-container>
+    </ln-container>
+    <ln-container>
+    </ln-container>
+    <ln-container>
+    </ln-container>
+    <ln-container>
+    </ln-container>
   </div>
 </action-pane>
 `;
 /* end snapshot ldevice-container looks like the latest snapshot */
 
+snapshots["ldevice-container looks like the latest snapshot with a LDevice without LN elements"] = 
+`<action-pane tabindex="0">
+  <div id="lnContainer">
+  </div>
+</action-pane>
+`;
+/* end snapshot ldevice-container looks like the latest snapshot with a LDevice without LN elements */
+

test/unit/editors/ied/ldevice-container.test.ts

@@ -8,16 +8,22 @@ describe('ldevice-container', () => {
   let validSCL: XMLDocument;
 
   beforeEach(async () => {
-    validSCL = await fetch('/test/testfiles/valid2007B4.scd')
+    validSCL = await fetch('/test/testfiles/valid2007B4withIEDModifications.scd')
       .then(response => response.text())
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
 
+  it('looks like the latest snapshot', async () => {
     element = await fixture(html`<ldevice-container
-      .element=${validSCL.querySelector('LDevice')}
+      .element=${validSCL.querySelector('LDevice[inst="Disconnectors"]')}
     ></ldevice-container>`);
+    await expect(element).shadowDom.to.equalSnapshot();
   });
 
-  it('looks like the latest snapshot', async () => {
+  it('looks like the latest snapshot with a LDevice without LN elements', async () => {
+    element = await fixture(html`<ldevice-container
+      .element=${validSCL.querySelector('LDevice[inst="EmptyLDevice"]')}
+    ></ldevice-container>`);
     await expect(element).shadowDom.to.equalSnapshot();
   });
 });