refactor(editor/communication): move wizards to wizard library

src/wizards/subnetwork.ts

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html, TemplateResult } from 'lit-element';
 import { get, translate } from 'lit-translate';
 
 import '../wizard-textfield.js';
@@ -25,90 +25,50 @@ const initial = {
   multiplier: 'M',
 };
 
-function getBitRateAction(
-  oldBitRate: Element | null,
-  BitRate: string | null,
-  multiplier: string | null,
-  SubNetwork: Element
-): EditorAction {
-  if (oldBitRate === null)
-    return {
-      new: {
-        parent: SubNetwork,
-        element: new DOMParser().parseFromString(
-          `<BitRate unit="b/s" ${
-            multiplier === null ? '' : `multiplier="${multiplier}"`
-          }>${BitRate === null ? '' : BitRate}</BitRate>`,
-          'application/xml'
-        ).documentElement,
-        reference: SubNetwork.firstElementChild,
-      },
-    };
-
-  if (BitRate === null)
-    return {
-      old: {
-        parent: SubNetwork,
-        element: oldBitRate,
-        reference: oldBitRate.nextSibling,
-      },
-    };
-
-  const newBitRate = cloneElement(oldBitRate, { multiplier });
-  newBitRate.textContent = BitRate;
-
-  return {
-    old: { element: oldBitRate },
-    new: { element: newBitRate },
-  };
+interface ContentOptions {
+  name: string | null;
+  desc: string | null;
+  type: string | null;
+  BitRate: string | null;
+  multiplier: string | null;
 }
 
-export function updateSubNetworkAction(element: Element): WizardActor {
-  return (inputs: WizardInput[], wizard: Element): EditorAction[] => {
-    const name = inputs.find(i => i.label === 'name')!.value!;
-    const desc = getValue(inputs.find(i => i.label === 'desc')!);
-    const type = getValue(inputs.find(i => i.label === 'type')!);
-    const BitRate = getValue(inputs.find(i => i.label === 'BitRate')!);
-    const multiplier = getMultiplier(inputs.find(i => i.label === 'BitRate')!);
-
-    let subNetworkAction: EditorAction | null;
-    let bitRateAction: EditorAction | null;
-
-    if (
-      name === element.getAttribute('name') &&
-      desc === element.getAttribute('desc') &&
-      type === element.getAttribute('type')
-    ) {
-      subNetworkAction = null;
-    } else {
-      const newElement = cloneElement(element, { name, desc, type });
-      subNetworkAction = { old: { element }, new: { element: newElement } };
-    }
-
-    if (
-      BitRate ===
-        (element.querySelector('SubNetwork > BitRate')?.textContent?.trim() ??
-          null) &&
-      multiplier ===
-        (element
-          .querySelector('SubNetwork > BitRate')
-          ?.getAttribute('multiplier') ?? null)
-    ) {
-      bitRateAction = null;
-    } else {
-      bitRateAction = getBitRateAction(
-        element.querySelector('SubNetwork > BitRate'),
-        BitRate,
-        multiplier,
-        subNetworkAction?.new.element ?? element
-      );
-    }
-
-    const actions: EditorAction[] = [];
-    if (subNetworkAction) actions.push(subNetworkAction);
-    if (bitRateAction) actions.push(bitRateAction);
-    return actions;
-  };
+function contentSubNetwork(options: ContentOptions): TemplateResult[] {
+  return [
+    html`<wizard-textfield
+      label="name"
+      .maybeValue=${options.name}
+      helper="${translate('subnetwork.wizard.nameHelper')}"
+      required
+      validationMessage="${translate('textfield.required')}"
+      dialogInitialFocus
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="desc"
+      .maybeValue=${options.desc}
+      nullable
+      helper="${translate('subnetwork.wizard.descHelper')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="type"
+      .maybeValue=${options.type}
+      nullable
+      helper="${translate('subnetwork.wizard.typeHelper')}"
+      pattern="${patterns.normalizedString}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="BitRate"
+      .maybeValue=${options.BitRate}
+      nullable
+      unit="b/s"
+      .multipliers=${[null, 'M']}
+      .multiplier=${options.multiplier}
+      helper="${translate('subnetwork.wizard.bitrateHelper')}"
+      required
+      validationMessage="${translate('textfield.nonempty')}"
+      pattern="${patterns.decimal}"
+    ></wizard-textfield>`,
+  ];
 }
 
 export function createSubNetworkAction(parent: Element): WizardActor {
@@ -234,3 +194,113 @@ export function subNetworkWizard(options: WizardOptions): Wizard {
     },
   ];
 }
+
+function getBitRateAction(
+  oldBitRate: Element | null,
+  BitRate: string | null,
+  multiplier: string | null,
+  SubNetwork: Element
+): EditorAction {
+  if (oldBitRate === null)
+    return {
+      new: {
+        parent: SubNetwork,
+        element: new DOMParser().parseFromString(
+          `<BitRate unit="b/s" ${
+            multiplier === null ? '' : `multiplier="${multiplier}"`
+          }>${BitRate === null ? '' : BitRate}</BitRate>`,
+          'application/xml'
+        ).documentElement,
+        reference: SubNetwork.firstElementChild,
+      },
+    };
+
+  if (BitRate === null)
+    return {
+      old: {
+        parent: SubNetwork,
+        element: oldBitRate,
+        reference: oldBitRate.nextSibling,
+      },
+    };
+
+  const newBitRate = cloneElement(oldBitRate, { multiplier });
+  newBitRate.textContent = BitRate;
+
+  return {
+    old: { element: oldBitRate },
+    new: { element: newBitRate },
+  };
+}
+
+function updateSubNetworkAction(element: Element): WizardActor {
+  return (inputs: WizardInput[]): EditorAction[] => {
+    const name = inputs.find(i => i.label === 'name')!.value!;
+    const desc = getValue(inputs.find(i => i.label === 'desc')!);
+    const type = getValue(inputs.find(i => i.label === 'type')!);
+    const BitRate = getValue(inputs.find(i => i.label === 'BitRate')!);
+    const multiplier = getMultiplier(inputs.find(i => i.label === 'BitRate')!);
+
+    let subNetworkAction: EditorAction | null;
+    let bitRateAction: EditorAction | null;
+
+    if (
+      name === element.getAttribute('name') &&
+      desc === element.getAttribute('desc') &&
+      type === element.getAttribute('type')
+    ) {
+      subNetworkAction = null;
+    } else {
+      const newElement = cloneElement(element, { name, desc, type });
+      subNetworkAction = { old: { element }, new: { element: newElement } };
+    }
+
+    if (
+      BitRate ===
+        (element.querySelector('SubNetwork > BitRate')?.textContent?.trim() ??
+          null) &&
+      multiplier ===
+        (element
+          .querySelector('SubNetwork > BitRate')
+          ?.getAttribute('multiplier') ?? null)
+    ) {
+      bitRateAction = null;
+    } else {
+      bitRateAction = getBitRateAction(
+        element.querySelector('SubNetwork > BitRate'),
+        BitRate,
+        multiplier,
+        subNetworkAction?.new.element ?? element
+      );
+    }
+
+    const actions: EditorAction[] = [];
+    if (subNetworkAction) actions.push(subNetworkAction);
+    if (bitRateAction) actions.push(bitRateAction);
+    return actions;
+  };
+}
+
+export function editSubNetworkWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const BitRate =
+    element.querySelector('SubNetwork > BitRate')?.textContent?.trim() ?? null;
+  const multiplier =
+    element.querySelector('SubNetwork > BitRate')?.getAttribute('multiplier') ??
+    null;
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: element.tagName }),
+      element,
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateSubNetworkAction(element),
+      },
+      content: contentSubNetwork({ name, desc, type, BitRate, multiplier }),
+    },
+  ];
+}

src/wizards/wizard-library.ts

@@ -1,14 +1,21 @@
 import { SCLTag, Wizard } from '../foundation.js';
 
 import { createBayWizard, editBayWizard } from './bay.js';
-import { createConductingEquipmentWizard, editConductingEquipmentWizard} from './conductingequipment.js';
+import {
+  createConductingEquipmentWizard,
+  editConductingEquipmentWizard,
+} from './conductingequipment.js';
 import { editConnectivityNodeWizard } from './connectivitynode.js';
 import { createFCDAsWizard } from './fcda.js';
 import { lNodeWizard } from './lnode.js';
 import { createSubstationWizard, substationEditWizard } from './substation.js';
 import { editTerminalWizard } from './terminal.js';
-import { voltageLevelCreateWizard, voltageLevelEditWizard } from './voltagelevel.js';
-import { editPowerTransformerWizard } from "./powertransformer.js";
+import {
+  voltageLevelCreateWizard,
+  voltageLevelEditWizard,
+} from './voltagelevel.js';
+import { editPowerTransformerWizard } from './powertransformer.js';
+import { editSubNetworkWizard } from './subnetwork.js';
 
 type SclElementWizard = (element: Element) => Wizard | undefined;
 
@@ -460,7 +467,7 @@ export const wizards: Record<
     create: emptyWizard,
   },
   SubNetwork: {
-    edit: emptyWizard,
+    edit: editSubNetworkWizard,
     create: emptyWizard,
   },
   Subject: {

test/integration/editors/communication/__snapshots__/subnetwork-editor-wizarding.test.snap.js

@@ -4,7 +4,7 @@ export const snapshots = {};
 snapshots["subnetwork-editor wizarding integration edit/add Subnetwork wizard looks like the latest snapshot"] = 
 `<mwc-dialog
   defaultaction="close"
-  heading="[subnetwork.wizard.title.edit]"
+  heading="[wizard.title.edit]"
   open=""
 >
   <div id="wizard-content">
@@ -49,7 +49,7 @@ snapshots["subnetwork-editor wizarding integration edit/add Subnetwork wizard lo
   </mwc-button>
   <mwc-button
     dialoginitialfocus=""
-    icon="edit"
+    icon="save"
     label="[save]"
     slot="primaryAction"
     trailingicon=""

test/testfiles/valid2003.scd

@@ -36,7 +36,7 @@
 		</VoltageLevel>
 	</Substation>
 	<Communication>
-		<SubNetwork name="StationBus" desc="desc" type="8-MMS">
+		<SubNetwork name="StationBus" type="8-MMS">
 			<BitRate unit="b/s">100.0</BitRate>
 			<ConnectedAP iedName="IED1" apName="P1">
 				<Address>