[1465] Add edit wizards for ln and ln0

packages/openscd/src/translations/de.ts

@@ -272,6 +272,29 @@ export const de: Translations = {
       },
     },
   },
+  ln: {
+    wizard: {
+      title: {
+        edit: 'LN bearbeiten',
+      },
+      descHelper: 'Logical Node Beschreibung',
+      lnTypeHelper: 'Logical Node Typ',
+      prefixHelper: 'Prefix des Logical Nodes',
+      lnClassHelper: 'Logical Node Klasse',
+      instHelper: 'Instanz',
+    }
+  },
+  ln0: {
+    wizard: {
+      title: {
+        edit: 'LN0 bearbeiten',
+      },
+      descHelper: 'Logical Node Beschreibung',
+      lnTypeHelper: 'Logical Node Typ',
+      lnClassHelper: 'Logical Node Klasse',
+      instHelper: 'Instanz',
+    }
+  },
   powertransformer: {
     wizard: {
       nameHelper: '`Name des Leistungstransformators',

packages/openscd/src/translations/en.ts

@@ -269,6 +269,29 @@ export const en = {
       },
     },
   },
+  ln: {
+    wizard: {
+      title: {
+        edit: 'Edit LN',
+      },
+      descHelper: 'Logical node description',
+      lnTypeHelper: 'Logical node type',
+      prefixHelper: 'Prefix of the logical node',
+      lnClassHelper: 'Logical node class',
+      instHelper: 'Instance',
+    }
+  },
+  ln0: {
+    wizard: {
+      title: {
+        edit: 'Edit LN0',
+      },
+      descHelper: 'Logical node description',
+      lnTypeHelper: 'Logical node type',
+      lnClassHelper: 'Logical node class',
+      instHelper: 'Instance',
+    }
+  },
   powertransformer: {
     wizard: {
       nameHelper: 'Power transformer name',

packages/plugins/src/editors/ied/ln-container.ts

@@ -6,13 +6,15 @@ import { get } from 'lit-translate';
 import {
   getInstanceAttribute,
   getNameAttribute,
+  newWizardEvent,
 } from '@openscd/open-scd/src/foundation.js';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 
 import '@openscd/open-scd/src/action-pane.js';
 import './do-container.js';
 
 import { Container } from './foundation.js';
+import { wizards } from '../../wizards/wizard-library.js';
 
 /** [[`IED`]] plugin subeditor for editing `LN` and `LN0` element. */
 @customElement('ln-container')
@@ -23,11 +25,13 @@ export class LNContainer extends Container {
   private header(): TemplateResult {
     const prefix = this.element.getAttribute('prefix');
     const inst = getInstanceAttribute(this.element);
+    const desc = this.element.getAttribute('desc');
 
     const data = this.nsdoc.getDataDescription(this.element);
 
     return html`${prefix != null ? html`${prefix} — ` : nothing}
-    ${data.label} ${inst ? html` — ${inst}` : nothing}`;
+    ${data.label} ${inst ? html` — ${inst}` : nothing}
+    ${desc ? html` — ${desc}` : nothing}`;
   }
 
   /**
@@ -55,12 +59,26 @@ export class LNContainer extends Container {
     return this.element.querySelector(`:scope > DOI[name="${doName}"]`);
   }
 
+  private openEditWizard(): void {
+    const wizardType = this.element.tagName === 'LN' ? 'LN' : 'LN0';
+    const wizard = wizards[wizardType].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   render(): TemplateResult {
     const doElements = this.getDOElements();
 
     return html`<action-pane .label="${until(this.header())}">
       ${doElements.length > 0
-        ? html`<abbr
+        ? html`<abbr slot="action">
+          <mwc-icon-button
+            slot="action"
+            mini
+            icon="edit"
+            @click="${() => this.openEditWizard()}}"
+          ></mwc-icon-button>
+        </abbr>
+        <abbr
             slot="action"
             title="${get('iededitor.toggleChildElements')}"
           >

packages/plugins/src/wizards/ln.ts

@@ -0,0 +1,99 @@
+import { html, TemplateResult } from 'lit-element';
+import { get } from 'lit-translate';
+
+import '@openscd/open-scd/src/wizard-textfield.js';
+import {
+  getValue,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '@openscd/open-scd/src/foundation.js';
+
+import { cloneElement } from '@openscd/xml';
+
+import { SimpleAction } from '@openscd/core/foundation/deprecated/editor.js';
+import { patterns } from './foundation/limits.js';
+
+export function renderLNWizard(
+  lnType: string | null,
+  desc: string | null,
+  prefix: string | null,
+  lnClass: string | null,
+  inst: string | null
+): TemplateResult[] {
+  return [
+    html`<wizard-textfield
+      label="lnType"
+      .maybeValue=${lnType}
+      required
+      helper="${get('ln.wizard.lnTypeHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="desc"
+      .maybeValue=${desc}
+      nullable
+      helper="${get('ln.wizard.descHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="prefix"
+      nullable
+      .maybeValue=${prefix}
+      helper="${get('ln.wizard.prefixHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="lnClass"
+      required
+      .maybeValue=${lnClass}
+      helper="${get('ln.wizard.lnClassHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="inst"
+      required
+      .maybeValue=${inst}
+      helper="${get('ln.wizard.instHelper')}"
+    ></wizard-textfield>`,
+  ];
+}
+
+function updateAction(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): SimpleAction[] => {
+    const ldAttrs: Record<string, string | null> = {};
+    const ldKeys = ['lnType', 'desc', 'prefix', 'lnClass', 'inst'];
+    ldKeys.forEach(key => {
+      ldAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+    });
+
+    if (ldKeys.some(key => ldAttrs[key] !== element.getAttribute(key))) {
+      const newElement = cloneElement(element, ldAttrs);
+      return [
+        {
+          old: { element },
+          new: { element: newElement },
+        },
+      ];
+    }
+    return [];
+  };
+}
+
+
+export function editLNWizard(element: Element): Wizard {
+  return [
+    {
+      title: get('ln.wizard.title.edit'),
+      element,
+      primary: {
+        icon: 'edit',
+        label: get('save'),
+        action: updateAction(element),
+      },
+      content: renderLNWizard(
+        element.getAttribute('lnType'),
+        element.getAttribute('desc'),
+        element.getAttribute('prefix'),
+        element.getAttribute('lnClass'),
+        element.getAttribute('inst')
+      ),
+    },
+  ];
+}

packages/plugins/src/wizards/ln0.ts

@@ -0,0 +1,91 @@
+import { html, TemplateResult } from 'lit-element';
+import { get } from 'lit-translate';
+
+import '@openscd/open-scd/src/wizard-textfield.js';
+import {
+  getValue,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '@openscd/open-scd/src/foundation.js';
+
+import { cloneElement } from '@openscd/xml';
+
+import { SimpleAction } from '@openscd/core/foundation/deprecated/editor.js';
+import { patterns } from './foundation/limits.js';
+
+export function renderLN0Wizard(
+  lnType: string | null,
+  desc: string | null,
+  lnClass: string | null,
+  inst: string | null
+): TemplateResult[] {
+  return [
+    html`<wizard-textfield
+      label="lnType"
+      .maybeValue=${lnType}
+      required
+      helper="${get('ln0.wizard.lnTypeHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="desc"
+      .maybeValue=${desc}
+      nullable
+      helper="${get('ln0.wizard.descHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="lnClass"
+      required
+      .maybeValue=${lnClass}
+      helper="${get('ln0.wizard.lnClassHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="inst"
+      required
+      .maybeValue=${inst}
+      helper="${get('ln0.wizard.instHelper')}"
+    ></wizard-textfield>`,
+  ];
+}
+
+function updateAction(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): SimpleAction[] => {
+    const ldAttrs: Record<string, string | null> = {};
+    const ldKeys = ['lnType', 'desc', 'lnClass', 'inst'];
+    ldKeys.forEach(key => {
+      ldAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+    });
+
+    if (ldKeys.some(key => ldAttrs[key] !== element.getAttribute(key))) {
+      const newElement = cloneElement(element, ldAttrs);
+      return [
+        {
+          old: { element },
+          new: { element: newElement },
+        },
+      ];
+    }
+    return [];
+  };
+}
+
+
+export function editLN0Wizard(element: Element): Wizard {
+  return [
+    {
+      title: get('ln0.wizard.title.edit'),
+      element,
+      primary: {
+        icon: 'edit',
+        label: get('save'),
+        action: updateAction(element),
+      },
+      content: renderLN0Wizard(
+        element.getAttribute('lnType'),
+        element.getAttribute('desc'),
+        element.getAttribute('lnClass'),
+        element.getAttribute('inst')
+      ),
+    },
+  ];
+}

packages/plugins/src/wizards/wizard-library.ts

@@ -52,6 +52,8 @@ import {
 import { createTapChangerWizard, editTapChangerWizard } from './tapchanger.js';
 import { createLineWizard, editLineWizard } from './line.js';
 import { createProcessWizard, editProcessWizard } from './process.js';
+import { editLNWizard } from './ln.js';
+import { editLN0Wizard } from './ln0.js';
 
 type SclElementWizard = (
   element: Element,
@@ -322,11 +324,11 @@ export const wizards: Record<
     create: emptyWizard,
   },
   LN: {
-    edit: emptyWizard,
+    edit: editLNWizard,
     create: emptyWizard,
   },
   LN0: {
-    edit: emptyWizard,
+    edit: editLN0Wizard,
     create: emptyWizard,
   },
   LNode: {

packages/plugins/test/unit/editors/ied/__snapshots__/ln-container.test.snap.js

@@ -3,6 +3,14 @@ export const snapshots = {};
 
 snapshots["looks like the latest snapshot with a LN0 element."] = 
 `<action-pane tabindex="0">
+  <abbr slot="action">
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[iededitor.toggleChildElements]"
@@ -20,6 +28,14 @@ snapshots["looks like the latest snapshot with a LN0 element."] =
 
 snapshots["looks like the latest snapshot with a LN0 element and child elements are toggled."] = 
 `<action-pane tabindex="0">
+  <abbr slot="action">
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[iededitor.toggleChildElements]"
@@ -50,6 +66,14 @@ snapshots["looks like the latest snapshot with a LN0 element and child elements
 
 snapshots["looks like the latest snapshot with a LN element."] = 
 `<action-pane tabindex="0">
+  <abbr slot="action">
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[iededitor.toggleChildElements]"
@@ -67,6 +91,14 @@ snapshots["looks like the latest snapshot with a LN element."] =
 
 snapshots["looks like the latest snapshot with a LN element and child elements are toggled."] = 
 `<action-pane tabindex="0">
+  <abbr slot="action">
+    <mwc-icon-button
+      icon="edit"
+      mini=""
+      slot="action"
+    >
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[iededitor.toggleChildElements]"