Skip to content

Commit 6e9c928

Browse files
JakobVogelsangJakobVogelsang
authored
feat(wizards): add function type create wizards (openscd#768)
* feat(wizards/function): add edit wizard (openscd#762) * feat(wizards/function): add edit wizard * test(editors/substation/function-editor): make linter happy * refactor(wizards/function): review comments * feat(wizards/subfunction): add edit wizard (openscd#763) * feat(wizards/eqfunction): add edit wizard (openscd#764) * feat(wizards/eqfunction): add edit wizard * refactor(wizards/eqfunction): review comments * feat(wizards/eqsubfunction): add edit wizard (openscd#765) * feat(wizards/eqsubfunction): add edit wizard * refactor(wizards/eqsubfunction): review comments
1 parent ce9dea1 commit 6e9c928

26 files changed

+1237
-35
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@ export class EqFunctionEditor extends LitElement {
5454
@query('mwc-menu') addMenu!: Menu;
5555
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5656

57+
private openEditWizard(): void {
58+
const wizard = wizards['EqFunction'].edit(this.element);
59+
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
60+
}
61+
5762
remove(): void {
5863
if (this.element.parentElement)
5964
this.dispatchEvent(
@@ -116,6 +121,11 @@ export class EqFunctionEditor extends LitElement {
116121
icon="functions"
117122
secondary
118123
highlighted
124+
><abbr slot="action" title="${translate('edit')}">
125+
<mwc-icon-button
126+
icon="edit"
127+
@click=${() => this.openEditWizard()}
128+
></mwc-icon-button> </abbr
119129
><abbr slot="action" title="${translate('remove')}">
120130
<mwc-icon-button
121131
icon="delete"
@@ -144,6 +154,11 @@ export class EqFunctionEditor extends LitElement {
144154
}
145155

146156
static styles = css`
157+
abbr {
158+
text-decoration: none;
159+
border-bottom: none;
160+
}
161+
147162
.container.lnode {
148163
display: grid;
149164
grid-gap: 12px;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ export class EqSubFunctionEditor extends LitElement {
5353
@query('mwc-menu') addMenu!: Menu;
5454
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5555

56+
private openEditWizard(): void {
57+
const wizard = wizards['EqSubFunction'].edit(this.element);
58+
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
59+
}
60+
5661
remove(): void {
5762
if (this.element.parentElement)
5863
this.dispatchEvent(
@@ -111,6 +116,11 @@ export class EqSubFunctionEditor extends LitElement {
111116

112117
render(): TemplateResult {
113118
return html`<action-pane label="${this.header}" icon="functions" secondary
119+
><abbr slot="action" title="${translate('edit')}">
120+
<mwc-icon-button
121+
icon="edit"
122+
@click=${() => this.openEditWizard()}
123+
></mwc-icon-button> </abbr
114124
><abbr slot="action" title="${translate('remove')}">
115125
<mwc-icon-button
116126
icon="delete"
@@ -139,6 +149,11 @@ export class EqSubFunctionEditor extends LitElement {
139149
}
140150

141151
static styles = css`
152+
abbr {
153+
text-decoration: none;
154+
border-bottom: none;
155+
}
156+
142157
.container.lnode {
143158
display: grid;
144159
grid-gap: 12px;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ export class FunctionEditor extends LitElement {
5050
@query('mwc-menu') addMenu!: Menu;
5151
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5252

53+
private openEditWizard(): void {
54+
const wizard = wizards['Function'].edit(this.element);
55+
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
56+
}
57+
5358
remove(): void {
5459
if (this.element.parentElement)
5560
this.dispatchEvent(
@@ -109,6 +114,11 @@ export class FunctionEditor extends LitElement {
109114
icon="functions"
110115
secondary
111116
highlighted
117+
><abbr slot="action" title="${translate('edit')}">
118+
<mwc-icon-button
119+
icon="edit"
120+
@click=${() => this.openEditWizard()}
121+
></mwc-icon-button> </abbr
112122
><abbr slot="action" title="${translate('remove')}">
113123
<mwc-icon-button
114124
icon="delete"
@@ -137,6 +147,11 @@ export class FunctionEditor extends LitElement {
137147
}
138148

139149
static styles = css`
150+
abbr {
151+
text-decoration: none;
152+
border-bottom: none;
153+
}
154+
140155
.container.lnode {
141156
display: grid;
142157
grid-gap: 12px;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@ export class SubFunctionEditor extends LitElement {
5454
@query('mwc-menu') addMenu!: Menu;
5555
@query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
5656

57+
private openEditWizard(): void {
58+
const wizard = wizards['SubFunction'].edit(this.element);
59+
if (wizard) this.dispatchEvent(newWizardEvent(wizard));
60+
}
61+
5762
remove(): void {
5863
if (this.element.parentElement)
5964
this.dispatchEvent(
@@ -109,6 +114,11 @@ export class SubFunctionEditor extends LitElement {
109114

110115
render(): TemplateResult {
111116
return html`<action-pane label="${this.header}" icon="functions" secondary
117+
><abbr slot="action" title="${translate('edit')}">
118+
<mwc-icon-button
119+
icon="edit"
120+
@click=${() => this.openEditWizard()}
121+
></mwc-icon-button> </abbr
112122
><abbr slot="action" title="${translate('remove')}">
113123
<mwc-icon-button
114124
icon="delete"
@@ -137,6 +147,11 @@ export class SubFunctionEditor extends LitElement {
137147
}
138148

139149
static styles = css`
150+
abbr {
151+
text-decoration: none;
152+
border-bottom: none;
153+
}
154+
140155
.container.lnode {
141156
display: grid;
142157
grid-gap: 12px;

‎src/wizards/eqfunction.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,72 @@
11
import { get } from 'lit-translate';
22

33
import {
4+
cloneElement,
45
createElement,
6+
getChildElementsByTagName,
57
getValue,
8+
SimpleAction,
69
Wizard,
710
WizardActor,
811
WizardInputElement,
912
} from '../foundation.js';
1013
import { contentFunctionWizard } from './function.js';
1114

15+
function updateEqFunctionAction(element: Element): WizardActor {
16+
return (inputs: WizardInputElement[]): SimpleAction[] => {
17+
const functionAttrs: Record<string, string | null> = {};
18+
const functionKeys = ['name', 'desc', 'type'];
19+
functionKeys.forEach(key => {
20+
functionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
21+
});
22+
23+
if (
24+
functionKeys.some(key => functionAttrs[key] !== element.getAttribute(key))
25+
) {
26+
const newElement = cloneElement(element, functionAttrs);
27+
return [
28+
{
29+
old: { element },
30+
new: { element: newElement },
31+
},
32+
];
33+
}
34+
35+
return [];
36+
};
37+
}
38+
39+
export function editEqFunctionWizard(element: Element): Wizard {
40+
const name = element.getAttribute('name');
41+
const desc = element.getAttribute('desc');
42+
const type = element.getAttribute('type');
43+
const reservedNames: string[] = getChildElementsByTagName(
44+
element.parentElement!,
45+
'EqFunction'
46+
)
47+
.filter(sibling => sibling !== element)
48+
.map(sibling => sibling.getAttribute('name')!);
49+
50+
return [
51+
{
52+
title: get('wizard.title.edit', { tagName: 'EqFunction' }),
53+
primary: {
54+
icon: 'save',
55+
label: get('save'),
56+
action: updateEqFunctionAction(element),
57+
},
58+
content: [
59+
...contentFunctionWizard({
60+
name,
61+
desc,
62+
type,
63+
reservedNames,
64+
}),
65+
],
66+
},
67+
];
68+
}
69+
1270
function createEqFunctionAction(parent: Element): WizardActor {
1371
return (inputs: WizardInputElement[]) => {
1472
const eqFunctionAttrs: Record<string, string | null> = {};

‎src/wizards/eqsubfunction.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,72 @@
11
import { get } from 'lit-translate';
22

33
import {
4+
cloneElement,
45
createElement,
6+
getChildElementsByTagName,
57
getValue,
8+
SimpleAction,
69
Wizard,
710
WizardActor,
811
WizardInputElement,
912
} from '../foundation.js';
1013
import { contentFunctionWizard } from './function.js';
1114

15+
function updateEqSubFunctionAction(element: Element): WizardActor {
16+
return (inputs: WizardInputElement[]): SimpleAction[] => {
17+
const functionAttrs: Record<string, string | null> = {};
18+
const functionKeys = ['name', 'desc', 'type'];
19+
functionKeys.forEach(key => {
20+
functionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
21+
});
22+
23+
if (
24+
functionKeys.some(key => functionAttrs[key] !== element.getAttribute(key))
25+
) {
26+
const newElement = cloneElement(element, functionAttrs);
27+
return [
28+
{
29+
old: { element },
30+
new: { element: newElement },
31+
},
32+
];
33+
}
34+
35+
return [];
36+
};
37+
}
38+
39+
export function editEqSubFunctionWizard(element: Element): Wizard {
40+
const name = element.getAttribute('name');
41+
const desc = element.getAttribute('desc');
42+
const type = element.getAttribute('type');
43+
const reservedNames: string[] = getChildElementsByTagName(
44+
element.parentElement!,
45+
'EqSubFunction'
46+
)
47+
.filter(sibling => sibling !== element)
48+
.map(sibling => sibling.getAttribute('name')!);
49+
50+
return [
51+
{
52+
title: get('wizard.title.edit', { tagName: 'EqSubFunction' }),
53+
primary: {
54+
icon: 'save',
55+
label: get('save'),
56+
action: updateEqSubFunctionAction(element),
57+
},
58+
content: [
59+
...contentFunctionWizard({
60+
name,
61+
desc,
62+
type,
63+
reservedNames,
64+
}),
65+
],
66+
},
67+
];
68+
}
69+
1270
function createEqSubFunctionAction(parent: Element): WizardActor {
1371
return (inputs: WizardInputElement[]) => {
1472
const eqSubFunctionAttrs: Record<string, string | null> = {};

‎src/wizards/function.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import { html, TemplateResult } from 'lit-element';
22
import { get, translate } from 'lit-translate';
33

44
import {
5+
cloneElement,
56
createElement,
7+
getChildElementsByTagName,
68
getValue,
9+
SimpleAction,
710
Wizard,
811
WizardActor,
912
WizardInputElement,
@@ -44,6 +47,61 @@ export function contentFunctionWizard(
4447
];
4548
}
4649

50+
function updateFunctionAction(element: Element): WizardActor {
51+
return (inputs: WizardInputElement[]): SimpleAction[] => {
52+
const functionAttrs: Record<string, string | null> = {};
53+
const functionKeys = ['name', 'desc', 'type'];
54+
functionKeys.forEach(key => {
55+
functionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
56+
});
57+
58+
if (
59+
functionKeys.some(key => functionAttrs[key] !== element.getAttribute(key))
60+
) {
61+
const newElement = cloneElement(element, functionAttrs);
62+
return [
63+
{
64+
old: { element },
65+
new: { element: newElement },
66+
},
67+
];
68+
}
69+
70+
return [];
71+
};
72+
}
73+
74+
export function editFunctionWizard(element: Element): Wizard {
75+
const name = element.getAttribute('name');
76+
const desc = element.getAttribute('desc');
77+
const type = element.getAttribute('type');
78+
const reservedNames: string[] = getChildElementsByTagName(
79+
element.parentElement!,
80+
'Function'
81+
)
82+
.filter(sibling => sibling !== element)
83+
.map(sibling => sibling.getAttribute('name')!);
84+
85+
return [
86+
{
87+
title: get('wizard.title.edit', { tagName: 'Function' }),
88+
primary: {
89+
icon: 'save',
90+
label: get('save'),
91+
action: updateFunctionAction(element),
92+
},
93+
content: [
94+
...contentFunctionWizard({
95+
name,
96+
desc,
97+
type,
98+
reservedNames,
99+
}),
100+
],
101+
},
102+
];
103+
}
104+
47105
function createFunctionAction(parent: Element): WizardActor {
48106
return (inputs: WizardInputElement[]) => {
49107
const functionAttrs: Record<string, string | null> = {};

0 commit comments

Comments
 (0)