#155 export toaster, fix stories + update IStep interface

OnroerendErfgoed · Nov 13, 2023 · 6d698df · 6d698df
1 parent 013c7c4
commit 6d698df
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 45 deletions.
diff --git a/src/__tests__/OeWizard.cy.ts b/src/__tests__/OeWizard.cy.ts
@@ -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 };
@@ -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 };
@@ -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: true }) },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };
@@ -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 };
@@ -283,10 +290,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 };

diff --git a/src/models/index.ts b/src/models/index.ts
@@ -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';
diff --git a/src/models/toast.ts b/src/models/toast.ts
@@ -0,0 +1,8 @@
+export interface IToast {
+  id?: string;
+  type: ToastType;
+  title: string;
+  content: string | string[];
+}
+
+export type ToastType = 'default' | 'error' | 'success' | 'warning';
diff --git a/src/models/wizard.ts b/src/models/wizard.ts
@@ -1,3 +1,5 @@
+import type { IToast } from './toast';
+
 export interface IWizardProps {
   steps: IStep[];
   allowBarNavigation?: boolean;
@@ -6,6 +8,6 @@ export interface IWizardProps {
 
 export interface IStep {
   name: string;
-  validate: () => Promise<boolean>;
+  validate: () => Promise<{ valid: boolean; error?: IToast }>;
   nextStepDisabled?: boolean;
 }
diff --git a/src/stories/dumb-components/wizard.stories.ts b/src/stories/dumb-components/wizard.stories.ts
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };