feat(wizards/transformerwinding): add edit wizard (openscd#1137)

* feat(../substation/transformer-winding-editor.ts):edit_wizard_added

* feat(../wizards/tarnsformerWinding.ts):included

* add_editor_wizard

* fix(transformerWinding.ts):import_ordering_issues

* fix(../TransformwerWinding.scd):one_scd_test_file

* fix(wizards/transformerwinding): required removed

Author: marcvanraalte

src/editors/substation/transformer-winding-editor.ts

@@ -7,6 +7,8 @@ import {
   TemplateResult,
 } from 'lit-element';
 
+import { translate } from 'lit-translate';
+
 import '@material/mwc-fab';
 import '@material/mwc-icon';
 import '@material/mwc-icon-button';
@@ -16,7 +18,8 @@ import '../../action-icon.js';
 import '../../action-pane.js';
 
 import { styles } from './foundation.js';
-import { getChildElementsByTagName } from '../../foundation.js';
+import { getChildElementsByTagName, newWizardEvent } from '../../foundation.js';
+import { wizards } from '../../wizards/wizard-library.js';
 
 @customElement('transformer-winding-editor')
 export class TransformerWindingEditor extends LitElement {
@@ -48,6 +51,11 @@ export class TransformerWindingEditor extends LitElement {
     return `${name}${description}`;
   }
 
+  openEditWizard(): void {
+    const wizard = wizards['TransformerWinding'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   private renderLNodes(): TemplateResult {
     const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -81,6 +89,12 @@ export class TransformerWindingEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label="${this.label}">
+      <abbr slot="action" title="${translate('edit')}">
+        <mwc-icon-button
+          icon="edit"
+          @click=${() => this.openEditWizard()}
+        ></mwc-icon-button>
+      </abbr>
       ${this.renderLNodes()} ${this.renderEqFunctions()}
     </action-pane> `;
   }

src/wizards/transformerWinding.ts

@@ -0,0 +1,114 @@
+import { html, TemplateResult } from 'lit-element';
+import { get, translate } from 'lit-translate';
+
+import {
+  cloneElement,
+  getChildElementsByTagName,
+  getValue,
+  SimpleAction,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '../foundation.js';
+
+function updateTransformerWindingAction(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): SimpleAction[] => {
+    const transformerWindingAttrs: Record<string, string | null> = {};
+    const transformerWindingKeys = ['name', 'desc', 'type', 'virtual'];
+    transformerWindingKeys.forEach(key => {
+      transformerWindingAttrs[key] = getValue(
+        inputs.find(i => i.label === key)!
+      );
+    });
+
+    if (
+      transformerWindingKeys.some(
+        key => transformerWindingAttrs[key] !== element.getAttribute(key)
+      )
+    ) {
+      const newElement = cloneElement(element, transformerWindingAttrs);
+      return [
+        {
+          old: { element },
+          new: { element: newElement },
+        },
+      ];
+    }
+    return [];
+  };
+}
+
+interface ContentOptions {
+  name: string | null;
+  desc: string | null;
+  type: string | null;
+  virtual: string | null;
+  reservedNames: string[];
+}
+
+export function contentTransformerWindingWizard(
+  content: ContentOptions
+): TemplateResult[] {
+  return [
+    html`<wizard-textfield
+      label="name"
+      .maybeValue=${content.name}
+      helper="${translate('scl.name')}"
+      required
+      validationMessage="${translate('textfield.required')}"
+      .reservedValues=${content.reservedNames}
+      dialogInitialFocus
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="desc"
+      .maybeValue=${content.desc}
+      nullable
+      helper="${translate('scl.desc')}"
+    ></wizard-textfield>`,
+    html`<wizard-textfield
+      label="type"
+      .maybeValue=${content.type}
+      disabled
+      helper="${translate('scl.type')}"
+    ></wizard-textfield>`,
+    html`<wizard-checkbox
+      label="virtual"
+      .maybeValue=${content.virtual}
+      helper="${translate('scl.virtual')}"
+      nullable
+    ></wizard-checkbox>`,
+  ];
+}
+
+export function editTransformerWindingWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const virtual = element.getAttribute('virtual');
+  const reservedNames: string[] = getChildElementsByTagName(
+    element.parentElement!,
+    'TransformerWinding'
+  )
+    .filter(sibling => sibling !== element)
+    .map(sibling => sibling.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: 'TransformerWinding' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateTransformerWindingAction(element),
+      },
+      content: [
+        ...contentTransformerWindingWizard({
+          name,
+          desc,
+          type,
+          virtual,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}

src/wizards/wizard-library.ts

@@ -44,6 +44,7 @@ import {
   createGeneralEquipmentWizard,
   editGeneralEquipmentWizard,
 } from './generalEquipment.js';
+import { editTransformerWindingWizard } from './transformerWinding.js';
 
 type SclElementWizard = (
   element: Element,
@@ -534,7 +535,7 @@ export const wizards: Record<
     create: emptyWizard,
   },
   TransformerWinding: {
-    edit: emptyWizard,
+    edit: editTransformerWindingWizard,
     create: emptyWizard,
   },
   TrgOps: {

test/integration/editors/substation/transformer-winding-editor-wizard-editing.test.ts

@@ -0,0 +1,101 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../../../mock-wizard-editor.js';
+import { MockWizardEditor } from '../../../mock-wizard-editor.js';
+
+import '../../../../src/editors/substation/transformer-winding-editor.js';
+import { TransformerWindingEditor } from '../../../../src/editors/substation/transformer-winding-editor.js';
+import { WizardTextField } from '../../../../src/wizard-textfield.js';
+import { WizardCheckbox } from '../../../../src/wizard-checkbox.js';
+
+describe('transformer-winding-editor wizarding editing integration', () => {
+  let doc: XMLDocument;
+  let parent: MockWizardEditor;
+  let element: TransformerWindingEditor | null;
+
+  describe('edit wizard', () => {
+    let nameField: WizardTextField;
+    let descField: WizardTextField;
+    let primaryAction: HTMLElement;
+    let secondaryAction: HTMLElement;
+
+    beforeEach(async () => {
+      doc = await fetch(
+        'test/testfiles/editors/substation/TransformerWinding.scd'
+      )
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+      parent = <MockWizardEditor>(
+        await fixture(
+          html`<mock-wizard-editor
+            ><transformer-winding-editor
+              .element=${doc.querySelector('TransformerWinding')}
+            ></transformer-winding-editor
+          ></mock-wizard-editor>`
+        )
+      );
+      element = parent.querySelector('transformer-winding-editor');
+      await (<HTMLElement>(
+        element?.shadowRoot?.querySelector('mwc-icon-button[icon="edit"]')
+      )).click();
+      await parent.updateComplete;
+
+      nameField = <WizardTextField>(
+        parent.wizardUI.dialog?.querySelector('wizard-textfield[label="name"]')
+      );
+      descField = <WizardTextField>(
+        parent.wizardUI.dialog?.querySelector('wizard-textfield[label="desc"]')
+      );
+
+      secondaryAction = <HTMLElement>(
+        parent.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="secondaryAction"]'
+        )
+      );
+      primaryAction = <HTMLElement>(
+        parent.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="primaryAction"]'
+        )
+      );
+    });
+    it('closes on secondary action', async () => {
+      secondaryAction.click();
+      await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+      expect(parent.wizardUI.dialog).to.not.exist;
+    });
+    it('does not change name attribute if not unique within parent element', async () => {
+      const oldName = nameField.value;
+      nameField.value = 'some1';
+      primaryAction.click();
+      await parent.updateComplete;
+      expect(
+        doc.querySelector('TransformerWinding')?.getAttribute('name')
+      ).to.equal(oldName);
+    });
+    it('changes desc attribute on primary action', async () => {
+      await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+      descField.nullSwitch!.click();
+      await parent.updateComplete;
+      descField.value = 'newDesc';
+      primaryAction.click();
+      await parent.updateComplete;
+      expect(
+        doc.querySelector('TransformerWinding')?.getAttribute('desc')
+      ).to.equal('newDesc');
+    });
+    it('changes virtual attribute on primary action', async () => {
+      const virtualCheckbox = <WizardCheckbox>(
+        parent.wizardUI.dialog?.querySelector(
+          'wizard-checkbox[label="virtual"]'
+        )
+      );
+      virtualCheckbox.nullSwitch!.click();
+      virtualCheckbox.maybeValue = 'true';
+      primaryAction.click();
+      await parent.updateComplete;
+      expect(
+        doc.querySelector('TransformerWinding')?.getAttribute('virtual')
+      ).to.equal('true');
+    });
+  });
+});