Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Wizard flow #288

Closed
wants to merge 5 commits into from

Conversation

@louisgv
Copy link
Contributor

commented Jan 17, 2018

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
Add vue-form-wizard
Fix RSNA's header
@lamby

This comment has been minimized.

Copy link
Contributor

commented Jan 17, 2018

👍

@lamby

This comment has been minimized.

Copy link
Contributor

commented Jan 19, 2018

Let me know when this is ready for review :

@lamby

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

Hey, any update on this? :)

@louisgv

This comment has been minimized.

Copy link
Contributor Author

commented Jan 26, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

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

@louisgv

This comment has been minimized.

Copy link
Contributor Author

commented Jan 26, 2018

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

@louisgv louisgv referenced this pull request Jan 26, 2018
5 of 5 tasks complete
@louisgv

This comment has been minimized.

Copy link
Contributor Author

commented Jan 26, 2018

@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:

output

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

output

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

  • 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:
    output

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

@louisgv louisgv referenced this pull request Jan 26, 2018
5 of 5 tasks complete
@louisgv

This comment has been minimized.

Copy link
Contributor Author

commented Jan 26, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2018

@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.

"vue-resource": "^1.3.4",
"vue": "^2.5.6"
"vue": "^2.5.6",
"vue-resource": "^1.3.4"

This comment has been minimized.

Copy link
@isms

isms Jan 26, 2018

Contributor

This project is using Axios instead of Vue Resource.

This comment has been minimized.

Copy link
@louisgv

louisgv Jan 27, 2018

Author Contributor

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

This comment has been minimized.

Copy link
Contributor Author

commented Jan 27, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Jan 28, 2018

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

@isms isms closed this Jan 28, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.