984 add add line

src/editors/substation/line-editor.ts

@@ -6,12 +6,17 @@ import {
   TemplateResult,
   property,
   state,
+  query,
 } from 'lit-element';
 
 import { translate } from 'lit-translate';
 
 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 './conducting-equipment-editor.js';
 import './function-editor.js';
@@ -23,8 +28,19 @@ import {
   getChildElementsByTagName,
   newWizardEvent,
   newActionEvent,
+  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('line-editor')
 export class LineEditor extends LitElement {
@@ -46,10 +62,19 @@ export class LineEditor extends LitElement {
     return `${name} ${desc ? `—${desc}` : ''}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
   private openEditWizard(): void {
     const wizard = wizards['Line'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
+
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
 
   private renderConductingEquipments(): TemplateResult {
     const ConductingEquipments = getChildElementsByTagName(
@@ -94,6 +119,12 @@ export class LineEditor extends LitElement {
         ></function-editor>`
     )}`;
   }
+
+  updated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -123,6 +154,14 @@ export class LineEditor 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.header}>
       <abbr slot="action" title="${translate('edit')}">
@@ -135,7 +174,26 @@ export class LineEditor extends LitElement {
         <mwc-icon-button
           icon="delete"
           @click=${() => this.remove()}
-        ></mwc-icon-button> </abbr
+        ></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.renderConductingEquipments()}${this.renderGeneralEquipments()}${this.renderFunctions()}${this.renderLNodes()}
     </action-pane>`;
   }

test/integration/editors/substation/line-editor-wizard-editing.test.ts

@@ -7,9 +7,44 @@ import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 import '../../../../src/editors/substation/line-editor.js';
 import { LineEditor } from '../../../../src/editors/substation/line-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: LineEditor
+) => Promise<void> = (
+  parent: MockWizardEditor,
+  element: LineEditor
+): 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('line-editor wizarding editing integration', () => {
   let doc: XMLDocument;
   let parent: MockWizardEditor;
@@ -123,4 +158,33 @@ describe('line-editor wizarding editing integration', () => {
       });
     });
   });
+  describe('Open add wizard', () => {
+    let doc: XMLDocument;
+    let parent: MockWizardEditor;
+    let element: LineEditor | null;
+
+    beforeEach(async () => {
+      doc = await fetch('/test/testfiles/editors/substation/Line.scd')
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+      parent = <MockWizardEditor>(
+        await fixture(
+          html`<mock-wizard-editor
+            ><line-editor
+              .element=${doc.querySelector('Line[name="Berlin"]')}
+            ></line-editor
+          ></mock-wizard-editor>`
+        )
+      );
+
+      element = parent.querySelector('line-editor');
+
+      await parent.updateComplete;
+    });
+
+    it('Should open the same wizard for the second time', async () => {
+      await openAndCancelMenu(parent, element!);
+      await openAndCancelMenu(parent, element!);
+    });
+  });
 });

test/unit/editors/substation/__snapshots__/line-editor.test.snap.js

@@ -20,6 +20,63 @@ snapshots["web component rendering Line element rendering LNode and Function chi
     <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="GeneralEquipment"
+      >
+        <span>
+          GeneralEquipment
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="Function"
+      >
+        <span>
+          Function
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <conducting-equipment-editor showfunctions="">
   </conducting-equipment-editor>
   <function-editor showfunctions="">
@@ -51,6 +108,63 @@ snapshots["web component rendering Line element rendering ConductingEquipment lo
     <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="GeneralEquipment"
+      >
+        <span>
+          GeneralEquipment
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="Function"
+      >
+        <span>
+          Function
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <conducting-equipment-editor showfunctions="">
   </conducting-equipment-editor>
   <function-editor showfunctions="">
@@ -82,6 +196,63 @@ snapshots["web component rendering Line element rendering GeneralEquipment looks
     <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="GeneralEquipment"
+      >
+        <span>
+          GeneralEquipment
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="Function"
+      >
+        <span>
+          Function
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <conducting-equipment-editor showfunctions="">
   </conducting-equipment-editor>
   <general-equipment-editor showfunctions="">