Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@cedrikv
cedrikv committed Nov 14, 2023
2 parents f956cc8 + 68f01b5 commit c6896b1
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 51 deletions.
55 changes: 31 additions & 24 deletions src/__tests__/OeWizard.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ describe('OeWizard', () => {
components: { OeWizard },
setup() {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down Expand Up @@ -152,10 +152,10 @@ describe('OeWizard', () => {
components: { OeWizard },
setup() {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand All @@ -178,10 +178,10 @@ describe('OeWizard', () => {
components: { OeWizard },
setup() {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(false) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: false }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down Expand Up @@ -210,10 +210,17 @@ describe('OeWizard', () => {
components: { OeWizard },
setup() {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(false) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{
name: 'Mijn gegevens',
validate: () =>
Promise.resolve({
valid: false,
error: { id: '1', title: 'Error titel', content: 'Er heeft zich een error voorgedaan', type: 'error' },
}),
},
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down Expand Up @@ -242,10 +249,10 @@ describe('OeWizard', () => {
},
setup(props) {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(props.lastStepValid) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: props.lastStepValid }) },
];

return { steps };
Expand Down Expand Up @@ -288,10 +295,10 @@ describe('OeWizard', () => {
components: { OeWizard },
setup() {
const steps: IStep[] = [
{ name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true), nextStepDisabled: true },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }), nextStepDisabled: true },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down
4 changes: 2 additions & 2 deletions src/components/dumb/OeWizard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const totalSteps = ref(props.steps.length);
const submitDisabled = computedAsync(
async () => {
if (props.disableSubmitWhenInvalid) {
return !(await props.steps[totalSteps.value - 1].validate());
return !(await props.steps[totalSteps.value - 1].validate()).valid;
}
return false;
},
Expand Down Expand Up @@ -112,7 +112,7 @@ const previousStepsAreValid = async (step: number) => {
const steps = props.steps.slice(0, step);
const validations = await Promise.all(steps.map((s) => s.validate()));
return validations.every((v) => v);
return validations.every((v) => v.valid);
};
const reset = () => (currentStep.value = 0);
Expand Down
1 change: 1 addition & 0 deletions src/models/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ export * from './oe-openlayers';
export * from './oe-zoneerder-config';
export * from './status';
export * from './system-fields';
export * from './toast';
export * from './wizard';
8 changes: 8 additions & 0 deletions src/models/toast.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export interface IToast {
id?: string;
type: ToastType;
title: string;
content: string | string[];
}

export type ToastType = 'default' | 'error' | 'success' | 'warning';
4 changes: 3 additions & 1 deletion src/models/wizard.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import type { IToast } from './toast';

export interface IWizardProps {
steps: IStep[];
allowBarNavigation?: boolean;
Expand All @@ -6,6 +8,6 @@ export interface IWizardProps {

export interface IStep {
name: string;
validate: () => Promise<boolean>;
validate: () => Promise<{ valid: boolean; error?: IToast }>;
nextStepDisabled?: boolean;
}
91 changes: 67 additions & 24 deletions src/stories/dumb-components/wizard.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ export const Default: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down Expand Up @@ -86,10 +86,10 @@ export const BarNavigationAllowed: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand Down Expand Up @@ -119,10 +119,29 @@ export const BlockedWhenStepInvalid: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(false) },
{ name: 'Overzicht', validate: () => Promise.resolve(false) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{
name: 'Bijlagen',
validate: () =>
Promise.resolve({
valid: false,
error: { id: '1', type: 'error', title: 'Er is een fout opgetreden.', content: 'Fout bij de bijlagen.' },
}),
},
{
name: 'Overzicht',
validate: () =>
Promise.resolve({
valid: false,
error: {
id: '2',
type: 'error',
title: 'Er is een fout opgetreden.',
content: 'Fout bij het overzicht.',
},
}),
},
];

return { steps };
Expand Down Expand Up @@ -157,10 +176,10 @@ export const Mobile: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(true) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
];

return { steps };
Expand All @@ -182,10 +201,22 @@ export const SubmitDisabledLastStepInvalid: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(false) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{
name: 'Overzicht',
validate: () =>
Promise.resolve({
valid: false,
error: {
id: '2',
type: 'error',
title: 'Er is een fout opgetreden.',
content: 'Fout bij het overzicht.',
},
}),
},
];

return { steps };
Expand All @@ -207,10 +238,22 @@ export const DisableNextStepButton: Story = {
},
setup() {
const steps: IStep[] = [
{ name: 'Gegevens EPC', validate: () => Promise.resolve(true) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve(true), nextStepDisabled: true },
{ name: 'Bijlagen', validate: () => Promise.resolve(true) },
{ name: 'Overzicht', validate: () => Promise.resolve(false) },
{ name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) },
{ name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }), nextStepDisabled: true },
{ name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
{
name: 'Overzicht',
validate: () =>
Promise.resolve({
valid: false,
error: {
id: '2',
type: 'error',
title: 'Er is een fout opgetreden.',
content: 'Fout bij het overzicht.',
},
}),
},
];

return { steps };
Expand Down

0 comments on commit c6896b1

Please sign in to comment.