Skip to content

Commit e22e42d

Browse files
marcvanraaltepascalwilbrink
marcvanraalte
and
pascalwilbrink
authored
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 <[email protected]> * Fixed merge conflicts on test Signed-off-by: Pascal Wilbrink <[email protected]> --------- Signed-off-by: Pascal Wilbrink <[email protected]> Co-authored-by: Pascal Wilbrink <[email protected]>
1 parent a01e0ed commit e22e42d

File tree

3 files changed

+294
-1
lines changed

3 files changed

+294
-1
lines changed

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
LitElement,
66
property,
77
TemplateResult,
8+
query,
89
} from 'lit-element';
910

1011
import { translate } from 'lit-translate';
@@ -13,6 +14,9 @@ import '@material/mwc-fab';
1314
import '@material/mwc-icon';
1415
import '@material/mwc-icon-button';
1516
import '@material/mwc-menu';
17+
import { IconButton } from '@material/mwc-icon-button';
18+
import { ListItem } from '@material/mwc-list/mwc-list-item';
19+
import { Menu } from '@material/mwc-menu';
1620

1721
import '../../action-icon.js';
1822
import '../../action-pane.js';
@@ -22,8 +26,18 @@ import {
2226
getChildElementsByTagName,
2327
newActionEvent,
2428
newWizardEvent,
29+
SCLTag,
30+
tags,
2531
} from '../../foundation.js';
26-
import { wizards } from '../../wizards/wizard-library.js';
32+
import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
33+
34+
function childTags(element: Element | null | undefined): SCLTag[] {
35+
if (!element) return [];
36+
37+
return tags[<SCLTag>element.tagName].children.filter(
38+
child => wizards[child].create !== emptyWizard
39+
);
40+
}
2741

2842
@customElement('transformer-winding-editor')
2943
export class TransformerWindingEditor extends LitElement {
@@ -55,6 +69,9 @@ export class TransformerWindingEditor extends LitElement {
5569
return `${name}${description}`;
5670
}
5771

72+
@query('mwc-menu') addMenu!: Menu;
73+
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
74+
5875
openEditWizard(): void {
5976
const wizard = wizards['TransformerWinding'].edit(this.element);
6077
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -72,6 +89,17 @@ export class TransformerWindingEditor extends LitElement {
7289
);
7390
}
7491

92+
private openCreateWizard(tagName: string): void {
93+
const wizard = wizards[<SCLTag>tagName].create(this.element!);
94+
95+
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
96+
}
97+
98+
updated(): void {
99+
if (this.addMenu && this.addButton)
100+
this.addMenu.anchor = <HTMLElement>this.addButton;
101+
}
102+
75103
private renderLNodes(): TemplateResult {
76104
const lNodes = getChildElementsByTagName(this.element, 'LNode');
77105

@@ -103,6 +131,15 @@ export class TransformerWindingEditor extends LitElement {
103131
: html``;
104132
}
105133

134+
private renderAddButtons(): TemplateResult[] {
135+
return childTags(this.element).map(
136+
child =>
137+
html`<mwc-list-item value="${child}"
138+
><span>${child}</span></mwc-list-item
139+
>`
140+
);
141+
}
142+
106143
render(): TemplateResult {
107144
return html`<action-pane label="${this.label}">
108145
<abbr slot="action" title="${translate('edit')}">
@@ -117,6 +154,25 @@ export class TransformerWindingEditor extends LitElement {
117154
@click=${() => this.remove()}
118155
></mwc-icon-button>
119156
</abbr>
157+
<abbr
158+
slot="action"
159+
style="position:relative;"
160+
title="${translate('add')}"
161+
>
162+
<mwc-icon-button
163+
icon="playlist_add"
164+
@click=${() => (this.addMenu.open = true)}
165+
></mwc-icon-button
166+
><mwc-menu
167+
corner="BOTTOM_RIGHT"
168+
menuCorner="END"
169+
@action=${(e: Event) => {
170+
const tagName = (<ListItem>(<Menu>e.target).selected).value;
171+
this.openCreateWizard(tagName);
172+
}}
173+
>${this.renderAddButtons()}</mwc-menu
174+
></abbr
175+
>
120176
${this.renderLNodes()} ${this.renderEqFunctions()}
121177
</action-pane> `;
122178
}

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,49 @@ import { expect, fixture, html } from '@open-wc/testing';
22

33
import '../../../mock-wizard-editor.js';
44
import { MockWizardEditor } from '../../../mock-wizard-editor.js';
5+
import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
56

67
import '../../../../src/editors/substation/transformer-winding-editor.js';
78
import { TransformerWindingEditor } from '../../../../src/editors/substation/transformer-winding-editor.js';
89
import { WizardTextField } from '../../../../src/wizard-textfield.js';
910
import { WizardCheckbox } from '../../../../src/wizard-checkbox.js';
11+
import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
12+
13+
const openAndCancelMenu: (
14+
parent: MockWizardEditor,
15+
element: TransformerWindingEditor
16+
) => Promise<void> = (
17+
parent: MockWizardEditor,
18+
element: TransformerWindingEditor
19+
): Promise<void> =>
20+
new Promise(async resolve => {
21+
expect(parent.wizardUI.dialog).to.be.undefined;
22+
23+
element?.shadowRoot
24+
?.querySelector<MenuBase>("mwc-icon-button[icon='playlist_add']")!
25+
.click();
26+
const lnodMenuItem: ListItemBase =
27+
element?.shadowRoot?.querySelector<ListItemBase>(
28+
`mwc-list-item[value='LNode']`
29+
)!;
30+
lnodMenuItem.click();
31+
await new Promise(resolve => setTimeout(resolve, 100)); // await animation
32+
33+
expect(parent.wizardUI.dialog).to.exist;
34+
35+
const secondaryAction: HTMLElement = <HTMLElement>(
36+
parent.wizardUI.dialog?.querySelector(
37+
'mwc-button[slot="secondaryAction"][dialogaction="close"]'
38+
)
39+
);
40+
41+
secondaryAction.click();
42+
await new Promise(resolve => setTimeout(resolve, 100)); // await animation
43+
44+
expect(parent.wizardUI.dialog).to.be.undefined;
45+
46+
return resolve();
47+
});
1048

1149
describe('transformer-winding-editor wizarding editing integration', () => {
1250
let doc: XMLDocument;
@@ -138,5 +176,66 @@ describe('transformer-winding-editor wizarding editing integration', () => {
138176
).to.not.exist;
139177
});
140178
});
179+
180+
describe('has a delete icon button that', () => {
181+
let deleteButton: HTMLElement;
182+
183+
beforeEach(async () => {
184+
deleteButton = <HTMLElement>(
185+
element?.shadowRoot?.querySelector('mwc-icon-button[icon="delete"]')
186+
);
187+
await parent.updateComplete;
188+
});
189+
190+
it('removes the attached TransformerWinding element from the document', async () => {
191+
expect(
192+
doc.querySelector(
193+
'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
194+
)
195+
).to.exist;
196+
197+
await deleteButton.click();
198+
199+
expect(
200+
doc.querySelector(
201+
'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
202+
)
203+
).to.not.exist;
204+
});
205+
});
206+
});
207+
208+
describe('Open add wizard', () => {
209+
let doc: XMLDocument;
210+
let parent: MockWizardEditor;
211+
let element: TransformerWindingEditor | null;
212+
213+
beforeEach(async () => {
214+
doc = await fetch(
215+
'/test/testfiles/editors/substation/TransformerWinding.scd'
216+
)
217+
.then(response => response.text())
218+
.then(str => new DOMParser().parseFromString(str, 'application/xml'));
219+
parent = <MockWizardEditor>(
220+
await fixture(
221+
html`<mock-wizard-editor
222+
><transformer-winding-editor
223+
.element=${doc.querySelector(
224+
'PowerTransformer[name="pTransVolt"] > TransformerWinding[name="some"]'
225+
)}
226+
></transformer-winding-editor
227+
></mock-wizard-editor>`
228+
)
229+
);
230+
231+
element = parent.querySelector('transformer-winding-editor');
232+
233+
await parent.updateComplete;
234+
});
235+
236+
it('Should open the same wizard for the second time', async () => {
237+
await openAndCancelMenu(parent, element!);
238+
await openAndCancelMenu(parent, element!);
239+
});
141240
});
142241
});

‎test/unit/editors/substation/__snapshots__/transformer-winding-editor.test.snap.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,52 @@ snapshots["transformer-winding-editor with children when EqFunction elements are
2020
<mwc-icon-button icon="delete">
2121
</mwc-icon-button>
2222
</abbr>
23+
<abbr
24+
slot="action"
25+
style="position:relative;"
26+
title="[add]"
27+
>
28+
<mwc-icon-button icon="playlist_add">
29+
</mwc-icon-button>
30+
<mwc-menu
31+
corner="BOTTOM_RIGHT"
32+
menucorner="END"
33+
>
34+
<mwc-list-item
35+
aria-disabled="false"
36+
mwc-list-item=""
37+
role="menuitem"
38+
tabindex="0"
39+
value="LNode"
40+
>
41+
<span>
42+
LNode
43+
</span>
44+
</mwc-list-item>
45+
<mwc-list-item
46+
aria-disabled="false"
47+
mwc-list-item=""
48+
role="menuitem"
49+
tabindex="-1"
50+
value="EqFunction"
51+
>
52+
<span>
53+
EqFunction
54+
</span>
55+
</mwc-list-item>
56+
<mwc-list-item
57+
aria-disabled="false"
58+
mwc-list-item=""
59+
role="menuitem"
60+
tabindex="-1"
61+
value="SubEquipment"
62+
>
63+
<span>
64+
SubEquipment
65+
</span>
66+
</mwc-list-item>
67+
</mwc-menu>
68+
</abbr>
2369
<div class="container lnode">
2470
<l-node-editor>
2571
</l-node-editor>
@@ -49,6 +95,52 @@ snapshots["transformer-winding-editor with children when hiding EqFunction eleme
4995
<mwc-icon-button icon="delete">
5096
</mwc-icon-button>
5197
</abbr>
98+
<abbr
99+
slot="action"
100+
style="position:relative;"
101+
title="[add]"
102+
>
103+
<mwc-icon-button icon="playlist_add">
104+
</mwc-icon-button>
105+
<mwc-menu
106+
corner="BOTTOM_RIGHT"
107+
menucorner="END"
108+
>
109+
<mwc-list-item
110+
aria-disabled="false"
111+
mwc-list-item=""
112+
role="menuitem"
113+
tabindex="0"
114+
value="LNode"
115+
>
116+
<span>
117+
LNode
118+
</span>
119+
</mwc-list-item>
120+
<mwc-list-item
121+
aria-disabled="false"
122+
mwc-list-item=""
123+
role="menuitem"
124+
tabindex="-1"
125+
value="EqFunction"
126+
>
127+
<span>
128+
EqFunction
129+
</span>
130+
</mwc-list-item>
131+
<mwc-list-item
132+
aria-disabled="false"
133+
mwc-list-item=""
134+
role="menuitem"
135+
tabindex="-1"
136+
value="SubEquipment"
137+
>
138+
<span>
139+
SubEquipment
140+
</span>
141+
</mwc-list-item>
142+
</mwc-menu>
143+
</abbr>
52144
<div class="container lnode">
53145
<l-node-editor>
54146
</l-node-editor>
@@ -76,6 +168,52 @@ snapshots["transformer-winding-editor without children looks like the latest sna
76168
<mwc-icon-button icon="delete">
77169
</mwc-icon-button>
78170
</abbr>
171+
<abbr
172+
slot="action"
173+
style="position:relative;"
174+
title="[add]"
175+
>
176+
<mwc-icon-button icon="playlist_add">
177+
</mwc-icon-button>
178+
<mwc-menu
179+
corner="BOTTOM_RIGHT"
180+
menucorner="END"
181+
>
182+
<mwc-list-item
183+
aria-disabled="false"
184+
mwc-list-item=""
185+
role="menuitem"
186+
tabindex="0"
187+
value="LNode"
188+
>
189+
<span>
190+
LNode
191+
</span>
192+
</mwc-list-item>
193+
<mwc-list-item
194+
aria-disabled="false"
195+
mwc-list-item=""
196+
role="menuitem"
197+
tabindex="-1"
198+
value="EqFunction"
199+
>
200+
<span>
201+
EqFunction
202+
</span>
203+
</mwc-list-item>
204+
<mwc-list-item
205+
aria-disabled="false"
206+
mwc-list-item=""
207+
role="menuitem"
208+
tabindex="-1"
209+
value="SubEquipment"
210+
>
211+
<span>
212+
SubEquipment
213+
</span>
214+
</mwc-list-item>
215+
</mwc-menu>
216+
</abbr>
79217
</action-pane>
80218
`;
81219
/* end snapshot transformer-winding-editor without children looks like the latest snapshot */

0 commit comments

Comments
 (0)