Skip to content

Commit ce9dea1

Browse files
JakobVogelsangJakobVogelsang
authored
feat(editors/substation): remove button to function type editors (openscd#761)
* feat(editors/substation/function-editor): add remove button * feat(editors/substation/sub-function-editor): add remove button * feat(editors/substation/eq-function-editor): add remove button * feat(editors/substation/eq-sub-function-editor): add remove button
1 parent 4cbbf1b commit ce9dea1

12 files changed

+345
-82
lines changed

‎src/editors/substation/eq-function-editor.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import '../../action-pane.js';
2121
import './eq-sub-function-editor.js';
2222
import {
2323
getChildElementsByTagName,
24+
newActionEvent,
2425
newWizardEvent,
2526
SCLTag,
2627
tags,
@@ -53,6 +54,18 @@ export class EqFunctionEditor extends LitElement {
5354
@query('mwc-menu') addMenu!: Menu;
5455
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5556

57+
remove(): void {
58+
if (this.element.parentElement)
59+
this.dispatchEvent(
60+
newActionEvent({
61+
old: {
62+
parent: this.element.parentElement,
63+
element: this.element,
64+
},
65+
})
66+
);
67+
}
68+
5669
private openCreateWizard(tagName: string): void {
5770
const wizard = wizards[<SCLTag>tagName].create(this.element!);
5871

@@ -103,6 +116,11 @@ export class EqFunctionEditor extends LitElement {
103116
icon="functions"
104117
secondary
105118
highlighted
119+
><abbr slot="action" title="${translate('remove')}">
120+
<mwc-icon-button
121+
icon="delete"
122+
@click=${() => this.remove()}
123+
></mwc-icon-button> </abbr
106124
><abbr
107125
slot="action"
108126
style="position:relative;"

‎src/editors/substation/eq-sub-function-editor.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { Menu } from '@material/mwc-menu';
2121
import '../../action-pane.js';
2222
import {
2323
getChildElementsByTagName,
24+
newActionEvent,
2425
newWizardEvent,
2526
SCLTag,
2627
tags,
@@ -52,6 +53,18 @@ export class EqSubFunctionEditor extends LitElement {
5253
@query('mwc-menu') addMenu!: Menu;
5354
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5455

56+
remove(): void {
57+
if (this.element.parentElement)
58+
this.dispatchEvent(
59+
newActionEvent({
60+
old: {
61+
parent: this.element.parentElement,
62+
element: this.element,
63+
},
64+
})
65+
);
66+
}
67+
5568
private openCreateWizard(tagName: string): void {
5669
const wizard = wizards[<SCLTag>tagName].create(this.element!);
5770

@@ -98,6 +111,11 @@ export class EqSubFunctionEditor extends LitElement {
98111

99112
render(): TemplateResult {
100113
return html`<action-pane label="${this.header}" icon="functions" secondary
114+
><abbr slot="action" title="${translate('remove')}">
115+
<mwc-icon-button
116+
icon="delete"
117+
@click=${() => this.remove()}
118+
></mwc-icon-button> </abbr
101119
><abbr
102120
slot="action"
103121
style="position:relative;"

‎src/editors/substation/function-editor.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import '../../action-pane.js';
1313
import './sub-function-editor.js';
1414
import {
1515
getChildElementsByTagName,
16+
newActionEvent,
1617
newWizardEvent,
1718
SCLTag,
1819
tags,
@@ -49,6 +50,18 @@ export class FunctionEditor extends LitElement {
4950
@query('mwc-menu') addMenu!: Menu;
5051
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5152

53+
remove(): void {
54+
if (this.element.parentElement)
55+
this.dispatchEvent(
56+
newActionEvent({
57+
old: {
58+
parent: this.element.parentElement,
59+
element: this.element,
60+
},
61+
})
62+
);
63+
}
64+
5265
private openCreateWizard(tagName: string): void {
5366
const wizard = wizards[<SCLTag>tagName].create(this.element!);
5467

@@ -96,6 +109,11 @@ export class FunctionEditor extends LitElement {
96109
icon="functions"
97110
secondary
98111
highlighted
112+
><abbr slot="action" title="${translate('remove')}">
113+
<mwc-icon-button
114+
icon="delete"
115+
@click=${() => this.remove()}
116+
></mwc-icon-button> </abbr
99117
><abbr
100118
slot="action"
101119
style="position:relative;"

‎src/editors/substation/sub-function-editor.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import '../../action-pane.js';
2121
import './sub-function-editor.js';
2222
import {
2323
getChildElementsByTagName,
24+
newActionEvent,
2425
newWizardEvent,
2526
SCLTag,
2627
tags,
@@ -53,6 +54,18 @@ export class SubFunctionEditor extends LitElement {
5354
@query('mwc-menu') addMenu!: Menu;
5455
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5556

57+
remove(): void {
58+
if (this.element.parentElement)
59+
this.dispatchEvent(
60+
newActionEvent({
61+
old: {
62+
parent: this.element.parentElement,
63+
element: this.element,
64+
},
65+
})
66+
);
67+
}
68+
5669
private openCreateWizard(tagName: string): void {
5770
const wizard = wizards[<SCLTag>tagName].create(this.element!);
5871

@@ -96,6 +109,11 @@ export class SubFunctionEditor extends LitElement {
96109

97110
render(): TemplateResult {
98111
return html`<action-pane label="${this.header}" icon="functions" secondary
112+
><abbr slot="action" title="${translate('remove')}">
113+
<mwc-icon-button
114+
icon="delete"
115+
@click=${() => this.remove()}
116+
></mwc-icon-button> </abbr
99117
><abbr
100118
slot="action"
101119
style="position:relative;"

‎test/integration/editors/substation/eq-function-wizarding-editing.test.ts‎

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,34 @@ import { EqFunctionEditor } from '../../../../src/editors/substation/eq-function
88
import { WizardTextField } from '../../../../src/wizard-textfield.js';
99

1010
describe('eq-function-editor wizarding editing integration', () => {
11-
describe('open create wizard for element EqSubFunction', () => {
12-
let doc: XMLDocument;
13-
let parent: MockWizardEditor;
14-
let element: EqFunctionEditor | null;
11+
let doc: XMLDocument;
12+
let parent: MockWizardEditor;
13+
let element: EqFunctionEditor | null;
14+
15+
beforeEach(async () => {
16+
doc = await fetch('/test/testfiles/zeroline/functions.scd')
17+
.then(response => response.text())
18+
.then(str => new DOMParser().parseFromString(str, 'application/xml'));
19+
parent = <MockWizardEditor>(
20+
await fixture(
21+
html`<mock-wizard-editor
22+
><eq-function-editor
23+
.element=${doc.querySelector(
24+
'ConductingEquipment[name="QA1"] > EqFunction'
25+
)}
26+
></eq-function-editor
27+
></mock-wizard-editor>`
28+
)
29+
);
30+
31+
element = parent.querySelector('eq-function-editor');
32+
});
1533

34+
describe('open create wizard for element EqSubFunction', () => {
1635
let nameField: WizardTextField;
1736
let primaryAction: HTMLElement;
1837

1938
beforeEach(async () => {
20-
doc = await fetch('/test/testfiles/zeroline/functions.scd')
21-
.then(response => response.text())
22-
.then(str => new DOMParser().parseFromString(str, 'application/xml'));
23-
parent = <MockWizardEditor>(
24-
await fixture(
25-
html`<mock-wizard-editor
26-
><eq-function-editor
27-
.element=${doc.querySelector(
28-
'ConductingEquipment[name="QA1"] > EqFunction'
29-
)}
30-
></eq-function-editor
31-
></mock-wizard-editor>`
32-
)
33-
);
34-
35-
element = parent.querySelector('eq-function-editor');
36-
3739
(<HTMLElement>(
3840
element?.shadowRoot?.querySelector(
3941
'mwc-list-item[value="EqSubFunction"]'
@@ -88,4 +90,31 @@ describe('eq-function-editor wizarding editing integration', () => {
8890
).to.exist;
8991
});
9092
});
93+
94+
describe('has a delete icon button that', () => {
95+
let deleteButton: HTMLElement;
96+
97+
beforeEach(async () => {
98+
deleteButton = <HTMLElement>(
99+
element?.shadowRoot?.querySelector('mwc-icon-button[icon="delete"]')
100+
);
101+
await parent.updateComplete;
102+
});
103+
104+
it('removes the attached EqFunction element from the document', async () => {
105+
expect(
106+
doc.querySelector(
107+
'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubFunc"]'
108+
)
109+
).to.exist;
110+
111+
await deleteButton.click();
112+
113+
expect(
114+
doc.querySelector(
115+
'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubFunc"]'
116+
)
117+
).to.not.exist;
118+
});
119+
});
91120
});

‎test/integration/editors/substation/eq-sub-function-editor-wizarding-editing.test.ts‎

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,34 @@ import { EqSubFunctionEditor } from '../../../../src/editors/substation/eq-sub-f
88
import { WizardTextField } from '../../../../src/wizard-textfield.js';
99

1010
describe('eq-sub-function-editor wizarding editing integration', () => {
11-
describe('open create wizard for element EqSubFunction', () => {
12-
let doc: XMLDocument;
13-
let parent: MockWizardEditor;
14-
let element: EqSubFunctionEditor | null;
11+
let doc: XMLDocument;
12+
let parent: MockWizardEditor;
13+
let element: EqSubFunctionEditor | null;
14+
15+
beforeEach(async () => {
16+
doc = await fetch('/test/testfiles/zeroline/functions.scd')
17+
.then(response => response.text())
18+
.then(str => new DOMParser().parseFromString(str, 'application/xml'));
19+
parent = <MockWizardEditor>(
20+
await fixture(
21+
html`<mock-wizard-editor
22+
><eq-sub-function-editor
23+
.element=${doc.querySelector(
24+
'ConductingEquipment[name="QA1"] EqSubFunction'
25+
)}
26+
></eq-sub-function-editor
27+
></mock-wizard-editor>`
28+
)
29+
);
30+
31+
element = parent.querySelector('eq-sub-function-editor');
32+
});
1533

34+
describe('open create wizard for element EqSubFunction', () => {
1635
let nameField: WizardTextField;
1736
let primaryAction: HTMLElement;
1837

1938
beforeEach(async () => {
20-
doc = await fetch('/test/testfiles/zeroline/functions.scd')
21-
.then(response => response.text())
22-
.then(str => new DOMParser().parseFromString(str, 'application/xml'));
23-
parent = <MockWizardEditor>(
24-
await fixture(
25-
html`<mock-wizard-editor
26-
><eq-sub-function-editor
27-
.element=${doc.querySelector(
28-
'ConductingEquipment[name="QA1"] EqSubFunction'
29-
)}
30-
></eq-sub-function-editor
31-
></mock-wizard-editor>`
32-
)
33-
);
34-
35-
element = parent.querySelector('eq-sub-function-editor');
36-
3739
(<HTMLElement>(
3840
element?.shadowRoot?.querySelector(
3941
'mwc-list-item[value="EqSubFunction"]'
@@ -88,4 +90,31 @@ describe('eq-sub-function-editor wizarding editing integration', () => {
8890
).to.exist;
8991
});
9092
});
93+
94+
describe('has a delete icon button that', () => {
95+
let deleteButton: HTMLElement;
96+
97+
beforeEach(async () => {
98+
deleteButton = <HTMLElement>(
99+
element?.shadowRoot?.querySelector('mwc-icon-button[icon="delete"]')
100+
);
101+
await parent.updateComplete;
102+
});
103+
104+
it('removes the attached Function element from the document', async () => {
105+
expect(
106+
doc.querySelector(
107+
'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubSubFunction"]'
108+
)
109+
).to.exist;
110+
111+
await deleteButton.click();
112+
113+
expect(
114+
doc.querySelector(
115+
'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubSubFunction"]'
116+
)
117+
).to.not.exist;
118+
});
119+
});
91120
});

0 commit comments

Comments
 (0)