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:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user