[WIP] Wizard flow

[louisgv]

Description

Work in progress wizard flow.

Reference to official issue

#279

Motivation and Context

Adding a wizard flow for each tab to assist user on what they should be doing next.

How Has This Been Tested?

Screenshots (if appropriate):

CLA

• I have signed the CLA; if other committers are in the commit history, they have signed the CLA as well

[lamby]

👍

[lamby]

Let me know when this is ready for review :

[lamby]

Hey, any update on this? :)

[louisgv]

@lamby After experimenting with the dependency it seems to me it's not fit for the job (some of the UI element are enforced, like the next/back buttons) so I've been drafting out our own component.

[lamby]

Getcha. Shall we close up this PR for the time being? :)

[louisgv]

@lamby I'm actually pretty close to have something that I can show. Will ping back status within the weekends.

[louisgv]

@lamby Here's some progress:

I created a Wizard Flow component (no styling as of yet) that accept a steps computed prop. The steps prop basically tell the component the step and its active state, and will be controlled by the parent component (Which is the view). The parent can either bind the active state by watching the store state, or toggle it manually if it wishes to.

Below demonstrate three working scenario:

• If I select an invalid case, none of the wizard are highlighted:

• If I select an imagery, the first wizard will be highlighted:

• If I start a case, the second will be highlighted:
  

• If the case was created is valid and I select it, all three will be highlighted. (For some reason, I couldn't create a valid case, so no screencaps available)

• If I select a valid case from the beginning, the first and last will be highlighted:
  

This is a standalone component so implement it for the remaining two should be simple once it is further nailed down.

[louisgv]

@lamby @Serhiy-Shekhovtsov @isms please feedback on features you think would be nice to have for this component. Like onclick binding, metadata, image, step number indicator, subtitle, etc...

[isms]

@louisgv I think this is an interesting proof of concept but the layout doesn't seem like something users would be used to. It's not really a wizard like those in the example pictures, and it's not really like the "tour" feature we've seen that guides users through specific steps.

Edit: most of a wizard's value would be in indicating where in the across-screens process the user is, not within-screen.

[isms]

This project is using Axios instead of Vue Resource.

[louisgv]

vue-resoure as a dep was there from the beginning. I can remove it once we confirm there are no trace of its usage.

[louisgv]

@isms I see! If that's the case, I imagine this wizard would be more of a horizontal element than vertical?
If so, we might be able to utilize the vue wizard dependency (tho, some of its UI might still not make sense for our app), or I can create a common Flow component extending what I have that will observe the global cross-page steps.

[isms]

@louisgv I'm going to go ahead and close this, but we'll still recognize the effort. Thanks for working on it.