Skip to content

Commit 2ccb7b0

Browse files
JakobVogelsangJakobVogelsang
authored
refactor(editors/template/enumtype): move buttons in content to menuA…
1 parent f8c5a93 commit 2ccb7b0

File tree

3 files changed

+132
-98
lines changed

3 files changed

+132
-98
lines changed

‎src/editors/templates/enumtype-wizard.ts‎

Lines changed: 59 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,24 @@ import {
1818
getValue,
1919
identity,
2020
isPublic,
21-
newActionEvent,
2221
newSubWizardEvent,
23-
newWizardEvent,
2422
patterns,
2523
Replace,
2624
selector,
2725
Wizard,
26+
WizardAction,
2827
WizardActor,
2928
WizardInput,
29+
WizardMenuActor,
3030
} from '../../foundation.js';
3131
import { CreateOptions, UpdateOptions, WizardOptions } from './foundation.js';
3232

33+
function remove(element: Element): WizardMenuActor {
34+
return (): EditorAction[] => {
35+
return [{ old: { parent: element.parentElement!, element } }];
36+
};
37+
}
38+
3339
function nextOrd(parent: Element): string {
3440
const maxOrd = Math.max(
3541
...Array.from(parent.children).map(child =>
@@ -98,39 +104,28 @@ function eNumValWizard(options: WizardOptions): Wizard {
98104
)
99105
).find(isPublic) ?? null;
100106

101-
const [title, action, ord, desc, value, deleteButton] = enumval
107+
const [title, action, ord, desc, value, menuActions] = enumval
102108
? [
103109
get('enum-val.wizard.title.edit'),
104110
updateEnumValAction(enumval),
105111
enumval.getAttribute('ord'),
106112
enumval.getAttribute('desc'),
107113
enumval.textContent,
108-
html`<mwc-button
109-
icon="delete"
110-
trailingIcon
111-
label=${translate('delete')}
112-
@click=${(e: MouseEvent) => {
113-
e.target!.dispatchEvent(newWizardEvent());
114-
e.target!.dispatchEvent(
115-
newActionEvent({
116-
old: {
117-
parent: enumval.parentElement!,
118-
element: enumval,
119-
reference: enumval.nextSibling,
120-
},
121-
})
122-
);
123-
}}
124-
fullwidth
125-
></mwc-button>`,
114+
[
115+
{
116+
icon: 'delete',
117+
label: get('remove'),
118+
action: remove(enumval),
119+
},
120+
],
126121
]
127122
: [
128123
get('enum-val.wizard.title.add'),
129124
createEnumValAction((<CreateOptions>options).parent),
130125
nextOrd((<CreateOptions>options).parent),
131126
null, // desc is uncommon on EnumVal
132127
'',
133-
html``,
128+
undefined,
134129
];
135130

136131
return [
@@ -142,8 +137,8 @@ function eNumValWizard(options: WizardOptions): Wizard {
142137
label: 'Save',
143138
action: action,
144139
},
140+
menuActions,
145141
content: [
146-
deleteButton,
147142
html`<wizard-textfield
148143
label="ord"
149144
helper="${translate('scl.ord')}"
@@ -254,6 +249,12 @@ export function createEnumTypeWizard(
254249
];
255250
}
256251

252+
function openAddEnumVal(parent: Element): WizardMenuActor {
253+
return (): WizardAction[] => {
254+
return [() => eNumValWizard({ parent })];
255+
};
256+
}
257+
257258
function updateEnumTpyeAction(element: Element): WizardActor {
258259
return (inputs: WizardInput[]): EditorAction[] => {
259260
const id = getValue(inputs.find(i => i.label === 'id')!)!;
@@ -302,25 +303,19 @@ export function eNumTypeEditWizard(
302303
label: get('save'),
303304
action: updateEnumTpyeAction(enumtype),
304305
},
306+
menuActions: [
307+
{
308+
label: get('remove'),
309+
icon: 'delete',
310+
action: remove(enumtype),
311+
},
312+
{
313+
label: get('scl.EnumVal'),
314+
icon: 'playlist_add',
315+
action: openAddEnumVal(enumtype),
316+
},
317+
],
305318
content: [
306-
html`<mwc-button
307-
icon="delete"
308-
trailingIcon
309-
label="${translate('remove')}"
310-
@click=${(e: MouseEvent) => {
311-
e.target!.dispatchEvent(newWizardEvent());
312-
e.target!.dispatchEvent(
313-
newActionEvent({
314-
old: {
315-
parent: enumtype.parentElement!,
316-
element: enumtype,
317-
reference: enumtype.nextSibling,
318-
},
319-
})
320-
);
321-
}}
322-
fullwidth
323-
></mwc-button> `,
324319
html`<wizard-textfield
325320
label="id"
326321
helper="${translate('scl.id')}"
@@ -338,41 +333,30 @@ export function eNumTypeEditWizard(
338333
nullable
339334
pattern="${patterns.normalizedString}"
340335
></wizard-textfield>`,
341-
html`<mwc-button
342-
slot="graphic"
343-
icon="playlist_add"
344-
label="${translate('scl.EnumVal')}"
345-
@click=${(e: Event) => {
346-
const wizard = eNumValWizard({
347-
parent: enumtype,
348-
});
349-
if (wizard) e.target!.dispatchEvent(newSubWizardEvent(wizard));
350-
}}
351-
></mwc-button>
352-
<mwc-list
353-
style="margin-top: 0px;"
354-
@selected=${(e: SingleSelectedEvent) => {
355-
const wizard = eNumValWizard({
356-
identity: (<ListItem>(<List>e.target).selected).value,
357-
doc,
358-
});
359-
if (wizard) e.target!.dispatchEvent(newSubWizardEvent(wizard));
360-
}}
361-
>${Array.from(enumtype.querySelectorAll('EnumVal')).map(
362-
enumval =>
363-
html`<mwc-list-item
364-
graphic="icon"
365-
hasMeta
366-
tabindex="0"
367-
value="${identity(enumval)}"
336+
html`<mwc-list
337+
style="margin-top: 0px;"
338+
@selected=${(e: SingleSelectedEvent) => {
339+
const wizard = eNumValWizard({
340+
identity: (<ListItem>(<List>e.target).selected).value,
341+
doc,
342+
});
343+
if (wizard) e.target!.dispatchEvent(newSubWizardEvent(wizard));
344+
}}
345+
>${Array.from(enumtype.querySelectorAll('EnumVal')).map(
346+
enumval =>
347+
html`<mwc-list-item
348+
graphic="icon"
349+
hasMeta
350+
tabindex="0"
351+
value="${identity(enumval)}"
352+
>
353+
<span>${enumval.textContent ?? ''}</span>
354+
<span slot="graphic"
355+
>${enumval.getAttribute('ord') ?? '-1'}</span
368356
>
369-
<span>${enumval.textContent ?? ''}</span>
370-
<span slot="graphic"
371-
>${enumval.getAttribute('ord') ?? '-1'}</span
372-
>
373-
</mwc-list-item>`
374-
)}</mwc-list
375-
> `,
357+
</mwc-list-item>`
358+
)}</mwc-list
359+
> `,
376360
],
377361
},
378362
];

‎test/integration/editors/templates/__snapshots__/enumtype-wizarding.test.snap.js‎

Lines changed: 62 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1372,14 +1372,45 @@ snapshots["EnumType wizards defines an eNumTypeEditWizard looks like the latest
13721372
heading="[enum.wizard.title.edit]"
13731373
open=""
13741374
>
1375-
<div id="wizard-content">
1376-
<mwc-button
1377-
fullwidth=""
1378-
icon="delete"
1379-
label="[remove]"
1380-
trailingicon=""
1375+
<nav>
1376+
<mwc-icon-button icon="more_vert">
1377+
</mwc-icon-button>
1378+
<mwc-menu
1379+
class="actions-menu"
1380+
corner="BOTTOM_RIGHT"
1381+
menucorner="END"
13811382
>
1382-
</mwc-button>
1383+
<mwc-list-item
1384+
aria-disabled="false"
1385+
graphic="icon"
1386+
mwc-list-item=""
1387+
role="menuitem"
1388+
tabindex="0"
1389+
>
1390+
<span>
1391+
[remove]
1392+
</span>
1393+
<mwc-icon slot="graphic">
1394+
delete
1395+
</mwc-icon>
1396+
</mwc-list-item>
1397+
<mwc-list-item
1398+
aria-disabled="false"
1399+
graphic="icon"
1400+
mwc-list-item=""
1401+
role="menuitem"
1402+
tabindex="-1"
1403+
>
1404+
<span>
1405+
[scl.EnumVal]
1406+
</span>
1407+
<mwc-icon slot="graphic">
1408+
playlist_add
1409+
</mwc-icon>
1410+
</mwc-list-item>
1411+
</mwc-menu>
1412+
</nav>
1413+
<div id="wizard-content">
13831414
<wizard-textfield
13841415
dialoginitialfocus=""
13851416
helper="[scl.id]"
@@ -1398,12 +1429,6 @@ snapshots["EnumType wizards defines an eNumTypeEditWizard looks like the latest
13981429
pattern="([ -~]|[…]|[ -퟿]|[-�])*"
13991430
>
14001431
</wizard-textfield>
1401-
<mwc-button
1402-
icon="playlist_add"
1403-
label="[scl.EnumVal]"
1404-
slot="graphic"
1405-
>
1406-
</mwc-button>
14071432
<mwc-list style="margin-top: 0px;">
14081433
<mwc-list-item
14091434
aria-disabled="false"
@@ -1507,14 +1532,31 @@ snapshots["EnumType wizards defines a eNumValWizard to edit an existing EnumVal
15071532
heading="[enum-val.wizard.title.edit]"
15081533
open=""
15091534
>
1510-
<div id="wizard-content">
1511-
<mwc-button
1512-
fullwidth=""
1513-
icon="delete"
1514-
label="[delete]"
1515-
trailingicon=""
1535+
<nav>
1536+
<mwc-icon-button icon="more_vert">
1537+
</mwc-icon-button>
1538+
<mwc-menu
1539+
class="actions-menu"
1540+
corner="BOTTOM_RIGHT"
1541+
menucorner="END"
15161542
>
1517-
</mwc-button>
1543+
<mwc-list-item
1544+
aria-disabled="false"
1545+
graphic="icon"
1546+
mwc-list-item=""
1547+
role="menuitem"
1548+
tabindex="0"
1549+
>
1550+
<span>
1551+
[remove]
1552+
</span>
1553+
<mwc-icon slot="graphic">
1554+
delete
1555+
</mwc-icon>
1556+
</mwc-list-item>
1557+
</mwc-menu>
1558+
</nav>
1559+
<div id="wizard-content">
15181560
<wizard-textfield
15191561
helper="[scl.ord]"
15201562
label="ord"

‎test/integration/editors/templates/enumtype-wizarding.test.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ describe('EnumType wizards', () => {
110110
(<ListItem>(
111111
eNumTypeList.querySelector('mwc-list-item[value="#Dummy_ctlModel"]')
112112
)).click();
113+
113114
await parent.requestUpdate();
114115
await new Promise(resolve => setTimeout(resolve, 100)); // await animation
115116
idField = <WizardTextField>(
@@ -121,13 +122,14 @@ describe('EnumType wizards', () => {
121122
)
122123
);
123124
deleteButton = <HTMLElement>(
124-
parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
125+
parent.wizardUI.dialog?.querySelectorAll('mwc-menu > mwc-list-item')[0]
125126
);
126127
});
127128

128129
it('looks like the latest snapshot', async () => {
129130
await expect(parent.wizardUI.dialog).to.equalSnapshot();
130131
});
132+
131133
it('edits EnumType attributes id', async () => {
132134
expect(doc.querySelector('EnumType[id="Dummy_ctlModel"]')).to.exist;
133135
idField.value = 'changedEnumType';
@@ -137,6 +139,7 @@ describe('EnumType wizards', () => {
137139
expect(doc.querySelector('EnumType[id="Dummy_ctlModel"]')).to.not.exist;
138140
expect(doc.querySelector('EnumType[id="changedEnumType"]')).to.exist;
139141
});
142+
140143
it('deletes the EnumVal element on delete button click', async () => {
141144
expect(doc.querySelector('EnumType[id="Dummy_ctlModel"]')).to.exist;
142145
expect(doc.querySelectorAll('EnumType').length).to.equal(4);
@@ -145,6 +148,7 @@ describe('EnumType wizards', () => {
145148
expect(doc.querySelector('EnumType[id="Dummy_ctlModel"]')).to.not.exist;
146149
expect(doc.querySelectorAll('EnumType').length).to.equal(3);
147150
});
151+
148152
it('does not edit EnumType element without changes', async () => {
149153
const originData = (<Element>(
150154
doc.querySelector('EnumType[id="Dummy_ctlModel"]')
@@ -195,13 +199,14 @@ describe('EnumType wizards', () => {
195199
)
196200
);
197201
deleteButton = <HTMLElement>(
198-
parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
202+
parent.wizardUI.dialog?.querySelectorAll('mwc-menu > mwc-list-item')[0]
199203
);
200204
});
201205

202206
it('looks like the latest snapshot', async () => {
203207
await expect(parent.wizardUI.dialog).to.equalSnapshot();
204208
});
209+
205210
it('edits EnumVal attributes ord', async () => {
206211
expect(
207212
doc.querySelector('EnumType[id="Dummy_ctlModel"] > EnumVal[ord="1"]')
@@ -217,6 +222,7 @@ describe('EnumType wizards', () => {
217222
doc.querySelector('EnumType[id="Dummy_ctlModel"] > EnumVal[ord="10"]')
218223
).to.exist;
219224
});
225+
220226
it('edits EnumVal attributes value', async () => {
221227
expect(
222228
doc.querySelector('EnumType[id="Dummy_ctlModel"] > EnumVal[ord="1"]')
@@ -234,6 +240,7 @@ describe('EnumType wizards', () => {
234240
)?.textContent
235241
).to.equal('direct-with-normal-security-test');
236242
});
243+
237244
it('deletes the EnumVal element on delete button click', async () => {
238245
expect(
239246
doc.querySelector('EnumType[id="Dummy_ctlModel"] > EnumVal[ord="1"]')
@@ -250,6 +257,7 @@ describe('EnumType wizards', () => {
250257
doc.querySelectorAll('EnumType[id="Dummy_ctlModel"] > EnumVal').length
251258
).to.equal(4);
252259
});
260+
253261
it('does not edit EnumVal element without changes', async () => {
254262
const originData = (<Element>(
255263
doc.querySelector('EnumType[id="Dummy_ctlModel"] > EnumVal[ord="1"]')
@@ -277,7 +285,7 @@ describe('EnumType wizards', () => {
277285
await parent.requestUpdate();
278286
await new Promise(resolve => setTimeout(resolve, 100)); // await animation
279287
(<HTMLElement>(
280-
parent.wizardUI.dialog?.querySelector('mwc-button[icon="playlist_add"]')
288+
parent.wizardUI.dialog?.querySelectorAll('mwc-menu > mwc-list-item')[1]
281289
)).click();
282290
await parent.requestUpdate();
283291
await new Promise(resolve => setTimeout(resolve, 100)); // await animation

0 commit comments

Comments
 (0)