972 create wizard tapchanger (openscd#1172)

* feat(tapchanger-editor.ts):editor_added * feat(tapchanger-editor.test.ts):setup * feat(TapChanger-editor):editor_and_unit_test * feat(tapchanger-editor):start_edit_button * feat(tapchanger-editor):add_edit_wizard * fix(tapChanger.ts)changed_to_tapchanger.ts * feat(tapchanger.ts):create_wizard_added * feat(tapchanger.test.ts):added_create_wizard_test * 973 remove tapchanger (openscd#1174) * feat(tapchanger-editor.ts):remove_added * feat(tapchanger-editor):add_button (openscd#1175) Co-authored-by: Steffen van den Driest <35229971+Stef3st@users.noreply.github.com> * fix: Empty disabled typefield in Add TapChanger --------- Co-authored-by: Steffen van den Driest <35229971+Stef3st@users.noreply.github.com> Co-authored-by: Stef3st <steffen.van.den.driest@alliander.com> * fix: tapchanger file rename * fix:remove 'TapChanger.' text in TapChanger header * fix: removes duplicate snapshot * test: update snapshot to match correct labels --------- Co-authored-by: Steffen van den Driest <35229971+Stef3st@users.noreply.github.com> Co-authored-by: Stef3st <steffen.van.den.driest@alliander.com> Co-authored-by: Juan Muñoz <juan.munoz@alliander.com>
apupier · Mar 2, 2023 · fc3714c · fc3714c
1 parent 6cae0da
commit fc3714c
Show file tree

Hide file tree

Showing 10 changed files with 553 additions and 23 deletions.
diff --git a/src/editors/substation/tapchanger-editor.ts b/src/editors/substation/tapchanger-editor.ts
@@ -1,23 +1,45 @@
 import {
+ css,
  customElement,
  html,
  LitElement,
  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 '../../action-pane.js';
 import './eq-function-editor.js';
 import './l-node-editor.js';
 import './sub-equipment-editor.js';
-import { getChildElementsByTagName, newWizardEvent } from '../../foundation.js';
-import { wizards } from '../../wizards/wizard-library.js';
+
+import { styles } from './foundation.js';
+import {
+ getChildElementsByTagName,
+ newActionEvent,
+ newWizardEvent,
+ SCLTag,
+ tags,
+} from '../../foundation.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('tapchanger-editor')
 export class TapChangerEditor extends LitElement {
@@ -36,9 +58,39 @@ export class TapChangerEditor extends LitElement {
  const name = this.element.getAttribute('name') ?? '';
  const desc = this.element.getAttribute('desc');
 
- return `TapChanger.${name} ${desc ? `—TapChanger.${desc}` : ''}`;
+ return `${name} ${desc ? `—${desc}` : ''}`;
+ }
+
+ @query('mwc-menu') addMenu!: Menu;
+ @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
+ openEditWizard(): void {
+ const wizard = wizards['TapChanger'].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));
  }
 
+ updated(): void {
+ if (this.addMenu && this.addButton)
+ this.addMenu.anchor = <HTMLElement>this.addButton;
+ }
+
+ remove(): void {
+ if (this.element.parentElement)
+ this.dispatchEvent(
+ newActionEvent({
+ old: {
+ parent: this.element.parentElement,
+ element: this.element,
+ },
+ })
+ );
+ }
  private renderLNodes(): TemplateResult {
  const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -55,12 +107,7 @@ export class TapChangerEditor extends LitElement {
  : html``;
  }
 
- openEditWizard(): void {
- const wizard = wizards['TapChanger'].edit(this.element);
- if (wizard) this.dispatchEvent(newWizardEvent(wizard));
- }
-
- renderEqFunctions(): TemplateResult {
+ private renderEqFunctions(): TemplateResult {
  if (!this.showfunctions) return html``;
 
  const eqFunctions = getChildElementsByTagName(this.element, 'EqFunction');
@@ -90,15 +137,63 @@ export class TapChangerEditor extends LitElement {
  )}`;
  }
 
+ 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')}">
- <mwc-icon-button
- icon="edit"
- @click=${() => this.openEditWizard()}
- ></mwc-icon-button>
- </abbr>
+ <mwc-icon-button
+ icon="edit"
+ @click=${() => this.openEditWizard()}
+ ></mwc-icon-button>
+ </abbr>
+ <abbr slot="action" title="${translate('remove')}">
+ <mwc-icon-button
+ icon="delete"
+ @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()} ${this.renderSubEquipments()}</action-icon>`;
+ ${this.renderEqFunctions()} ${this.renderSubEquipments()}
+ </action-icon>`;
  }
+
+ static styles = css`
+ ${styles}
+
+ :host(.moving) {
+ opacity: 0.3;
+ }
+
+ abbr {
+ text-decoration: none;
+ border-bottom: none;
+ }
+ `;
 }
diff --git a/src/wizards/tapChanger.ts → src/wizards/tapchanger.ts b/src/wizards/tapChanger.ts → src/wizards/tapchanger.ts
@@ -12,6 +12,24 @@ import {
  WizardInputElement,
 } from '../foundation.js';
 
+function createTapChangerAction(parent: Element): WizardActor {
+ return (inputs: WizardInputElement[]) => {
+ const tapChangerAttrs: Record<string, string | null> = {};
+ const tapChangerKeys = ['name', 'desc', 'type', 'virtual'];
+ tapChangerKeys.forEach(key => {
+ tapChangerAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+ });
+
+ const tapChanger = createElement(
+ parent.ownerDocument,
+ 'TapChanger',
+ tapChangerAttrs
+ );
+
+ return [{ new: { parent, element: tapChanger } }];
+ };
+}
+
 function updateTapChangerAction(element: Element): WizardActor {
  return (inputs: WizardInputElement[]): SimpleAction[] => {
  const tapChangerAttrs: Record<string, string | null> = {};
@@ -79,6 +97,36 @@ export function contentTapChangerWizard(
  ];
 }
 
+export function createTapChangerWizard(parent: Element): Wizard {
+ const name = '';
+ const desc = null;
+ const type = 'LTC';
+ const virtual = null;
+ const reservedNames = Array.from(parent.querySelectorAll('TapChanger')).map(
+ TapChanger => TapChanger.getAttribute('name')!
+ );
+
+ return [
+ {
+ title: get('wizard.title.add', { tagName: 'TapChanger' }),
+ primary: {
+ icon: 'save',
+ label: get('save'),
+ action: createTapChangerAction(parent),
+ },
+ content: [
+ ...contentTapChangerWizard({
+ name,
+ desc,
+ type,
+ virtual,
+ reservedNames,
+ }),
+ ],
+ },
+ ];
+}
+
 export function editTapChangerWizard(element: Element): Wizard {
  const name = element.getAttribute('name');
  const desc = element.getAttribute('desc');

diff --git a/src/wizards/wizard-library.ts b/src/wizards/wizard-library.ts
@@ -48,7 +48,7 @@ import {
  createTransformerWindingWizard,
  editTransformerWindingWizard,
 } from './transformerWinding.js';
-import { editTapChangerWizard } from './tapChanger.js';
+import { createTapChangerWizard, editTapChangerWizard } from './tapchanger.js';
 
 type SclElementWizard = (
  element: Element,
@@ -520,7 +520,7 @@ export const wizards: Record<
  },
  TapChanger: {
  edit: editTapChangerWizard,
- create: emptyWizard,
+ create: createTapChangerWizard,
  },
  Terminal: {
  edit: editTerminalWizard,

diff --git a/test/integration/editors/substation/tapchanger-editor-wizard-editing.test.ts b/test/integration/editors/substation/tapchanger-editor-wizard-editing.test.ts
@@ -10,6 +10,42 @@ 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: TapChangerEditor
+) => Promise<void> = (
+ parent: MockWizardEditor,
+ element: TapChangerEditor
+): 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('tapchanger-editor wizarding editing integration', () => {
  let doc: XMLDocument;
  let parent: MockWizardEditor;
@@ -108,5 +144,63 @@ describe('tapchanger-editor wizarding editing integration', () => {
  ?.getAttribute('virtual')
  ).to.equal('false');
  });
+
+ 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 TapChanger element from the document', async () => {
+ expect(
+ doc.querySelector(
+ 'TransformerWinding[name="withTapChanger1"] > TapChanger[name="tapChComplet"]'
+ )
+ ).to.exist;
+
+ await deleteButton.click();
+
+ expect(
+ doc.querySelector(
+ 'TransformerWinding[name="withTapChanger1"] > TapChanger[name="tapChComplet"]'
+ )
+ ).to.not.exist;
+ });
+ });
+ });
+ describe('Open add wizard', () => {
+ let doc: XMLDocument;
+ let parent: MockWizardEditor;
+ let element: TapChangerEditor | null;
+
+ beforeEach(async () => {
+ doc = await fetch('/test/testfiles/editors/substation/TapChanger.scd')
+ .then(response => response.text())
+ .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+ parent = <MockWizardEditor>(
+ await fixture(
+ html`<mock-wizard-editor
+ ><tapchanger-editor
+ .element=${doc.querySelector(
+ 'TransformerWinding[name="withTapChanger1"] > TapChanger[name="tapChComplet"]'
+ )}
+ ></tapchanger-editor
+ ></mock-wizard-editor>`
+ )
+ );
+
+ element = parent.querySelector('tapchanger-editor');
+
+ await parent.updateComplete;
+ });
+
+ it('Should open the same wizard for the second time', async () => {
+ await openAndCancelMenu(parent, element!);
+ await openAndCancelMenu(parent, element!);
+ });
  });
 });