feat(substation/general-equipment-editor):add_button_general-equipmen…

…t_container (openscd#1110) * feat(substation/general-equipment-editor):add_button_general-equipment_container * fix(../substation/general-equipment-editor.ts):set_the_anchor_for_the_menu * fix(general-equipment-editor.ts):merge_conflicts
sprinteins · Jan 4, 2023 · 812ff94 · 812ff94
1 parent b3def87
commit 812ff94
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 2 deletions.
diff --git a/src/editors/substation/general-equipment-editor.ts b/src/editors/substation/general-equipment-editor.ts
@@ -6,10 +6,18 @@ import {
   property,
   state,
   css,
+  query,
 } from 'lit-element';
 
+import { translate } from 'lit-translate';
+
 import '@material/mwc-icon-button';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-menu';
 import '@material/mwc-fab';
+import { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { Menu } from '@material/mwc-menu';
 
 import '../../action-pane.js';
 import '../../editors/substation/eq-function-editor.js';
@@ -19,9 +27,18 @@ import {
   getChildElementsByTagName,
   newActionEvent,
   newWizardEvent,
+  SCLTag,
+  tags,
 } from '../../foundation.js';
-import { translate } from 'lit-translate';
-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('general-equipment-editor')
 export class GeneralEquipmentEditor extends LitElement {
@@ -44,11 +61,25 @@ export class GeneralEquipmentEditor extends LitElement {
     return `${name} ${desc ? `—  ${desc}` : ''}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
   openEditWizard(): void {
     const wizard = wizards['GeneralEquipment'].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));
+  }
+
+  firstUpdated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -91,6 +122,15 @@ export class GeneralEquipmentEditor 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 {
     if (this.showfunctions)
       return html`<action-pane label=${this.header}>
@@ -106,6 +146,25 @@ export class GeneralEquipmentEditor 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/general-equipment-editor-wizard-editing.test.ts b/test/integration/editors/substation/general-equipment-editor-wizard-editing.test.ts
@@ -3,9 +3,48 @@ 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/general-equipment-editor.js';
 import { GeneralEquipmentEditor } from '../../../../src/editors/substation/general-equipment-editor.js';
 import { WizardTextField } from '../../../../src/wizard-textfield.js';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+
+const openAndCancelMenu: (
+  parent: MockWizardEditor,
+  element: GeneralEquipmentEditor
+) => Promise<void> = (
+  parent: MockWizardEditor,
+  element: GeneralEquipmentEditor
+): 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('general-equipment-editor wizarding editing integration', () => {
   let doc: XMLDocument;
@@ -136,4 +175,37 @@ describe('general-equipment-editor wizarding editing integration', () => {
       });
     });
   });
+
+  describe('Open add wizard', () => {
+    let doc: XMLDocument;
+    let parent: MockWizardEditor;
+    let element: GeneralEquipmentEditor | null;
+
+    beforeEach(async () => {
+      doc = await fetch(
+        '/test/testfiles/editors/substation/generalequipment.scd'
+      )
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+      parent = <MockWizardEditor>(
+        await fixture(
+          html`<mock-wizard-editor
+            ><general-equipment-editor
+              .element=${doc.querySelector('GeneralEquipment')}
+              ?showfunctions=${true}
+            ></general-equipment-editor
+          ></mock-wizard-editor>`
+        )
+      );
+
+      element = parent.querySelector('general-equipment-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__/general-equipment-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/general-equipment-editor.test.snap.js
@@ -51,6 +51,41 @@ snapshots["Editor web component for GeneralEquipment SCL element rendered as act
     <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="-1"
+        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-menu>
+  </abbr>
   <div class="container lnode">
     <l-node-editor>
     </l-node-editor>