Merge pull request openscd#827 from openscd/104-refresh-issue

fix(104): Temporary fix to refresh components.

Author: Rob Tjalma

src/editors/protocol104/base-container.ts

@@ -0,0 +1,6 @@
+import { LitElement, property } from 'lit-element';
+
+export class Base104Container extends LitElement {
+  @property()
+  doc!: XMLDocument;
+}

src/editors/protocol104/connectedap-editor.ts

@@ -1,20 +1,15 @@
-import {
-  LitElement,
-  TemplateResult,
-  customElement,
-  html,
-  property,
-} from 'lit-element';
+import { customElement, html, property, TemplateResult } from 'lit-element';
 
 import '@material/mwc-fab';
 
 import '../../action-icon.js';
-import { newWizardEvent, newActionEvent } from '../../foundation.js';
+import { newActionEvent, newWizardEvent } from '../../foundation.js';
 import { editConnectedApWizard } from './wizards/connectedap.js';
+import { Base104Container } from './base-container.js';
 
 /** [[`104`]] subeditor for a `ConnectedAP` element. */
 @customElement('connectedap-104-editor')
-export class ConnectedAP104Editor extends LitElement {
+export class ConnectedAP104Editor extends Base104Container {
   /** SCL element ConnectedAP */
   @property({ attribute: false })
   element!: Element;
@@ -45,7 +40,9 @@ export class ConnectedAP104Editor extends LitElement {
 
   render(): TemplateResult {
     return html`
-      <action-icon label="${this.element.getAttribute('apName') ?? 'UNDEFINED'}" icon="settings_input_hdmi"
+      <action-icon
+        label="${this.element.getAttribute('apName') ?? 'UNDEFINED'}"
+        icon="settings_input_hdmi"
         ><mwc-fab
           slot="action"
           mini

src/editors/protocol104/doi-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   query,
   TemplateResult,
@@ -30,13 +29,14 @@ import {
 import { editAddressWizard } from './wizards/address.js';
 import { showDOIInfoWizard } from './wizards/doi.js';
 import { PROTOCOL_104_PRIVATE } from './foundation/private.js';
+import { Base104Container } from './base-container.js';
 
 /**
  * Container showing all the DAI Elements, related to the 104 Protocol, of the passed DOI Element in a list.
  * The DAI Element can be edited by pressing the Edit button at the end of the line.
  */
 @customElement('doi-104-container')
-export class Doi104Container extends LitElement {
+export class Doi104Container extends Base104Container {
   @property()
   element!: Element;
 

src/editors/protocol104/ied-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   query,
   TemplateResult,
@@ -23,12 +22,13 @@ import { getFullPath } from './foundation/foundation.js';
 
 import './doi-container.js';
 import { PROTOCOL_104_PRIVATE } from './foundation/private.js';
+import { Base104Container } from './base-container.js';
 
 /**
  * Container showing all the DOI Elements, related to the 104 Protocol, of the passed IED Element in a container.
  */
 @customElement('ied-104-container')
-export class Ied104Container extends LitElement {
+export class Ied104Container extends Base104Container {
   @property()
   element!: Element;
 
@@ -65,7 +65,8 @@ export class Ied104Container extends LitElement {
     const dois = this.doiElements;
     return html`${dois.map(doiElement => {
       return html`
-        <doi-104-container .element="${doiElement}"></doi-104-container>
+        <doi-104-container .doc="${this.doc}" .element="${doiElement}">
+        </doi-104-container>
       `;
     })}`;
   }

src/editors/protocol104/network-container.ts

@@ -1,31 +1,24 @@
-import { get } from "lit-translate";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult
-} from "lit-element";
+import { get } from 'lit-translate';
+import { css, customElement, html, TemplateResult } from 'lit-element';
 
 import './subnetwork-container.js';
 import {
   compareNames,
   createElement,
   newActionEvent,
-  newWizardEvent
-} from "../../foundation.js";
-import { createSubNetworkWizard } from "./wizards/subnetwork.js";
+  newWizardEvent,
+} from '../../foundation.js';
+import { createSubNetworkWizard } from './wizards/subnetwork.js';
+import { Base104Container } from './base-container.js';
 
 @customElement('network-104-container')
-export class Network104Container extends LitElement {
-  @property()
-  doc!: XMLDocument;
-
+export class Network104Container extends Base104Container {
   private getSubNetworkElements(): Element[] {
-    return Array.from(this.doc.querySelectorAll('Communication > SubNetwork') ?? [])
+    return Array.from(
+      this.doc.querySelectorAll('Communication > SubNetwork') ?? []
+    )
       .filter(network => network.getAttribute('type') === '104')
-      .sort((a,b) => compareNames(a,b));
+      .sort((a, b) => compareNames(a, b));
   }
 
   /** Opens a [[`WizardDialog`]] for creating a new `SubNetwork` element. */
@@ -46,27 +39,27 @@ export class Network104Container extends LitElement {
 
   render(): TemplateResult {
     return html`<mwc-fab
-      extended
-      icon="add"
-      label="${get('subnetwork.wizard.title.add')}"
-      @click=${() => this.openCreateSubNetworkWizard()}
-    ></mwc-fab>
-    <section>
-    ${this.getSubNetworkElements()
-        .map(
+        extended
+        icon="add"
+        label="${get('subnetwork.wizard.title.add')}"
+        @click=${() => this.openCreateSubNetworkWizard()}
+      ></mwc-fab>
+      <section>
+        ${this.getSubNetworkElements().map(
           subnetwork =>
             html`<subnetwork-104-container
-            .element=${subnetwork}
-          ></subnetwork-104-container>`
+              .doc="${this.doc}"
+              .element=${subnetwork}
+            ></subnetwork-104-container>`
         )}
-    </section>`;
+      </section>`;
   }
 
   static styles = css`
     :host {
       width: 100vw;
     }
-    
+
     mwc-fab {
       position: fixed;
       bottom: 32px;

src/editors/protocol104/subnetwork-container.ts

@@ -1,10 +1,9 @@
 import {
-  LitElement,
-  TemplateResult,
+  css,
   customElement,
   html,
   property,
-  css,
+  TemplateResult,
 } from 'lit-element';
 
 import '@material/mwc-icon-button';
@@ -13,14 +12,15 @@ import './connectedap-editor.js';
 import { compareNames, newWizardEvent } from '../../foundation.js';
 import { translate } from 'lit-translate';
 import { createConnectedApWizard } from './wizards/connectedap.js';
+import { Base104Container } from './base-container.js';
 
 /** [[`104`]] subeditor for a `SubNetwork` element. */
 @customElement('subnetwork-104-container')
-export class SubNetwork104Container extends LitElement {
+export class SubNetwork104Container extends Base104Container {
   /** SCL element SubNetwork */
   @property({ attribute: false })
   element!: Element;
-  
+
   get bitrate(): string | null {
     const bitRate = this.element.querySelector('BitRate');
     if (bitRate === null) return null;
@@ -51,6 +51,7 @@ export class SubNetwork104Container extends LitElement {
                 class="${connectedAP.parentElement !== this.element
                   ? 'disabled'
                   : ''}"
+                .doc="${this.doc}"
                 .element=${connectedAP}
               ></connectedap-104-editor>`
           )}
@@ -63,9 +64,7 @@ export class SubNetwork104Container extends LitElement {
 
     if (!type && !this.bitrate) return '';
 
-    return `(${type}${
-      type && this.bitrate ? ` — ${this.bitrate}` : ``
-    })`;
+    return `(${type}${type && this.bitrate ? ` — ${this.bitrate}` : ``})`;
   }
 
   private header(): string {

src/editors/protocol104/values-container.ts

@@ -2,7 +2,6 @@ import {
   css,
   customElement,
   html,
-  LitElement,
   property,
   TemplateResult,
 } from 'lit-element';
@@ -14,16 +13,14 @@ import './ied-container.js';
 
 import { selectDoWizard } from './wizards/selectDo.js';
 import { PROTOCOL_104_PRIVATE } from './foundation/private.js';
+import { Base104Container } from './base-container.js';
 
 /**
  * Container that will render an 'ied-104-container' for every IED which contains DAI Elements related to the
  * 104 Protocol.
  */
 @customElement('values-104-container')
-export class Values104Container extends LitElement {
-  @property()
-  doc!: XMLDocument;
-
+export class Values104Container extends Base104Container {
   @property()
   get iedElements(): Element[] {
     return Array.from(this.doc.querySelectorAll('IED'))
@@ -59,6 +56,7 @@ export class Values104Container extends LitElement {
       return html`
         ${ieds.map(iedElement => {
           return html`<ied-104-container
+            .doc="${this.doc}"
             .element="${iedElement}"
           ></ied-104-container>`;
         })}