web: Fix issues surrounding wizard step behavior. (#12779)

This resolves a few stateful situations which may arise when opening and
closing wizard pages.
This commit is contained in:
Teffen Ellis
2025-02-14 02:12:46 +01:00
committed by GitHub
parent 46a968d1dd
commit 3d2bd4d8dd
6 changed files with 302 additions and 153 deletions

View File

@ -52,6 +52,21 @@ export class PolicyWizard extends AKElement {
});
}
selectListener = ({ detail }: CustomEvent<TypeCreate>) => {
if (!this.wizard) return;
const { component, modelName } = detail;
const idx = this.wizard.steps.indexOf("initial") + 1;
// Exclude all current steps starting with type-,
// this happens when the user selects a type and then goes back
this.wizard.steps = this.wizard.steps.filter((step) => !step.startsWith("type-"));
this.wizard.steps.splice(idx, 0, `type-${component}-${modelName}`);
this.wizard.isValid = true;
};
render(): TemplateResult {
return html`
<ak-wizard
@ -62,23 +77,10 @@ export class PolicyWizard extends AKElement {
<ak-wizard-page-type-create
slot="initial"
.types=${this.policyTypes}
@select=${(ev: CustomEvent<TypeCreate>) => {
if (!this.wizard) return;
const idx = this.wizard.steps.indexOf("initial") + 1;
// Exclude all current steps starting with type-,
// this happens when the user selects a type and then goes back
this.wizard.steps = this.wizard.steps.filter(
(step) => !step.startsWith("type-"),
);
this.wizard.steps.splice(
idx,
0,
`type-${ev.detail.component}-${ev.detail.modelName}`,
);
this.wizard.isValid = true;
}}
@select=${this.selectListener}
>
</ak-wizard-page-type-create>
${this.policyTypes.map((type) => {
return html`
<ak-wizard-page-form