969 add button transformer winding (openscd#1159)

* feat(../wizard-library.ts):add_create_wizard * feat(../transformerwinding.test.ts):test * feat(transformer-winding-editor):add_delete_butt * fix(transformer-winding...):use_correct_element * feat(transformer-winding-editor):add_button * Fixed merge conflicts on test Signed-off-by: Pascal Wilbrink <pascal.wilbrink@alliander.com> * Fixed merge conflicts on test Signed-off-by: Pascal Wilbrink <pascal.wilbrink@alliander.com> --------- Signed-off-by: Pascal Wilbrink <pascal.wilbrink@alliander.com> Co-authored-by: Pascal Wilbrink <pascal.wilbrink@alliander.com>
danyill · Feb 7, 2023 · e22e42d · e22e42d
1 parent a01e0ed
commit e22e42d
Show file tree

Hide file tree

Showing 3 changed files with 294 additions and 1 deletion.
diff --git a/src/editors/substation/transformer-winding-editor.ts b/src/editors/substation/transformer-winding-editor.ts
@@ -5,6 +5,7 @@ import {
   LitElement,
   property,
   TemplateResult,
+  query,
 } from 'lit-element';
 
 import { translate } from 'lit-translate';
@@ -13,6 +14,9 @@ import '@material/mwc-fab';
 import '@material/mwc-icon';
 import '@material/mwc-icon-button';
 import '@material/mwc-menu';
+import { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { Menu } from '@material/mwc-menu';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
@@ -22,8 +26,18 @@ import {
   getChildElementsByTagName,
   newActionEvent,
   newWizardEvent,
+  SCLTag,
+  tags,
 } from '../../foundation.js';
-import { wizards } from '../../wizards/wizard-library.js';
+import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
+
+function childTags(element: Element | null | undefined): SCLTag[] {
+  if (!element) return [];
+
+  return tags[<SCLTag>element.tagName].children.filter(
+    child => wizards[child].create !== emptyWizard
+  );
+}
 
 @customElement('transformer-winding-editor')
 export class TransformerWindingEditor extends LitElement {
@@ -55,6 +69,9 @@ export class TransformerWindingEditor extends LitElement {
     return `${name}${description}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
   openEditWizard(): void {
     const wizard = wizards['TransformerWinding'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -72,6 +89,17 @@ export class TransformerWindingEditor extends LitElement {
       );
   }
 
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
+  updated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   private renderLNodes(): TemplateResult {
     const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -103,6 +131,15 @@ export class TransformerWindingEditor extends LitElement {
       : html``;
   }
 
+  private renderAddButtons(): TemplateResult[] {
+    return childTags(this.element).map(
+      child =>
+        html`<mwc-list-item value="${child}"
+          ><span>${child}</span></mwc-list-item
+        >`
+    );
+  }
+
   render(): TemplateResult {
     return html`<action-pane label="${this.label}">
       <abbr slot="action" title="${translate('edit')}">
@@ -117,6 +154,25 @@ export class TransformerWindingEditor extends LitElement {
           @click=${() => this.remove()}
         ></mwc-icon-button>
       </abbr>
+      <abbr
+        slot="action"
+        style="position:relative;"
+        title="${translate('add')}"
+      >
+        <mwc-icon-button
+          icon="playlist_add"
+          @click=${() => (this.addMenu.open = true)}
+        ></mwc-icon-button
+        ><mwc-menu
+          corner="BOTTOM_RIGHT"
+          menuCorner="END"
+          @action=${(e: Event) => {
+            const tagName = (<ListItem>(<Menu>e.target).selected).value;
+            this.openCreateWizard(tagName);
+          }}
+          >${this.renderAddButtons()}</mwc-menu
+        ></abbr
+      >
       ${this.renderLNodes()} ${this.renderEqFunctions()}
     </action-pane> `;
   }

diff --git a/test/integration/editors/substation/transformer-winding-editor-wizard-editing.test.ts b/test/integration/editors/substation/transformer-winding-editor-wizard-editing.test.ts
@@ -2,11 +2,49 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 import '../../../mock-wizard-editor.js';
 import { MockWizardEditor } from '../../../mock-wizard-editor.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
 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';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+
+const openAndCancelMenu: (
+  parent: MockWizardEditor,
+  element: TransformerWindingEditor
+) => Promise<void> = (
+  parent: MockWizardEditor,
+  element: TransformerWindingEditor
+): Promise<void> =>
+  new Promise(async resolve => {
+    expect(parent.wizardUI.dialog).to.be.undefined;
+
+    element?.shadowRoot
+      ?.querySelector<MenuBase>("mwc-icon-button[icon='playlist_add']")!
+      .click();
+    const lnodMenuItem: ListItemBase =
+      element?.shadowRoot?.querySelector<ListItemBase>(
+        `mwc-list-item[value='LNode']`
+      )!;
+    lnodMenuItem.click();
+    await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+    expect(parent.wizardUI.dialog).to.exist;
+
+    const secondaryAction: HTMLElement = <HTMLElement>(
+      parent.wizardUI.dialog?.querySelector(
+        'mwc-button[slot="secondaryAction"][dialogaction="close"]'
+      )
+    );
+
+    secondaryAction.click();
+    await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+    expect(parent.wizardUI.dialog).to.be.undefined;
+
+    return resolve();
+  });
 
 describe('transformer-winding-editor wizarding editing integration', () => {
   let doc: XMLDocument;
@@ -138,5 +176,66 @@ describe('transformer-winding-editor wizarding editing integration', () => {
         ).to.not.exist;
       });
     });
+
+    describe('has a delete icon button that', () => {
+      let deleteButton: HTMLElement;
+
+      beforeEach(async () => {
+        deleteButton = <HTMLElement>(
+          element?.shadowRoot?.querySelector('mwc-icon-button[icon="delete"]')
+        );
+        await parent.updateComplete;
+      });
+
+      it('removes the attached TransformerWinding element from the document', async () => {
+        expect(
+          doc.querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+        ).to.exist;
+
+        await deleteButton.click();
+
+        expect(
+          doc.querySelector(
+            'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+          )
+        ).to.not.exist;
+      });
+    });
+  });
+
+  describe('Open add wizard', () => {
+    let doc: XMLDocument;
+    let parent: MockWizardEditor;
+    let element: TransformerWindingEditor | null;
+
+    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(
+                'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
+              )}
+            ></transformer-winding-editor
+          ></mock-wizard-editor>`
+        )
+      );
+
+      element = parent.querySelector('transformer-winding-editor');
+
+      await parent.updateComplete;
+    });
+
+    it('Should open the same wizard for the second time', async () => {
+      await openAndCancelMenu(parent, element!);
+      await openAndCancelMenu(parent, element!);
+    });
   });
 });
diff --git a/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js
@@ -20,6 +20,52 @@ snapshots["transformer-winding-editor with children when EqFunction elements are
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="EqFunction"
+      >
+        <span>
+          EqFunction
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="SubEquipment"
+      >
+        <span>
+          SubEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <div class="container lnode">
     <l-node-editor>
     </l-node-editor>
@@ -49,6 +95,52 @@ snapshots["transformer-winding-editor with children when hiding EqFunction eleme
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="EqFunction"
+      >
+        <span>
+          EqFunction
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="SubEquipment"
+      >
+        <span>
+          SubEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <div class="container lnode">
     <l-node-editor>
     </l-node-editor>
@@ -76,6 +168,52 @@ snapshots["transformer-winding-editor without children looks like the latest sna
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="EqFunction"
+      >
+        <span>
+          EqFunction
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="SubEquipment"
+      >
+        <span>
+          SubEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
 </action-pane>
 `;
 /* end snapshot transformer-winding-editor without children looks like the latest snapshot */