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

[awGoToStep] Help in understanding how awGoToStep works (angular 9, archwizard 6) #299

Open
theCrius opened this issue Jun 11, 2020 · 5 comments
Labels

Comments

@theCrius
Copy link

Hi there, first of all, thank you so much for this module. Really love that it's highly configurable, plenty of hooks and easy to style :)

I'm running in an issue that probably is just me not understanding how to properly use awGoToStep.

In short, what happens is that it doesn't work as I read it should in the readme.

I've put together a quick sandbox to show the issue, if you could point me to what am I doing wrong, i'd greatly appreciate it :)

The sandbox use the stepIndex but I tried also with the stepId and it didn't work as well.

https://stackblitz.com/edit/angular-ivy-9cviay

@madoar
Copy link
Owner

madoar commented Jun 11, 2020

@theCrius it is nice to hear that you like angular-archwizard :)

About your issue:
angular-archwizard checks the to be performed navigation before executing it. This check entails that the wizard allows a navigation only if all previous steps of the destination step are completed. In simpler terms this means that a user can only navigate to the first uncompleted step and is unable to skip uncompleted steps.

If you want to allow a user to skip a specific step you can declare that step as optional by using the awOptionalStep directive on the wizard step element. This in turn allows the user to skip this specific step.

Therefore the following changes should make your awGoToStep directive work:

  • update typescript to a newer version like ´3.8.0´ (this is required because otherwise the next change will lead to an error)
  • change your second step to:
    <!-- STEP 2 -->
    <aw-wizard-step awOptionalStep>
      <div>Step 3</div>
      <button awPreviousStep>back</button>
      <button awNextStep>next</button>
    </aw-wizard-step>   

If you don't want that the optional step is shown with a green color by default you can change this by providing a custom stylesheet. For an example how this can be done see here and here.

@theCrius
Copy link
Author

That's making perfect sense @madoar. Thank you for the explanation.

I'm hiding the progress bar at the top and managing the progress through the steps with a series of if that shows the buttons to continue so for me it's good to just set every step as optional even if they are not really optional to the users :)

It may be worth to add this information (awOptionalStep) somewhere in the documentation?

Thanks again!

@madoar
Copy link
Owner

madoar commented Jun 11, 2020

It may be worth to add this information (awOptionalStep) somewhere in the documentation?

[awOptionalStep] is already documented in the README file, see here. Do you think this should be extended?

@theCrius
Copy link
Author

theCrius commented Jun 11, 2020

Maybe add a reference here? https://github.com/madoar/angular-archwizard#awgotostep

I read that section as I was interested in how the awGoToStep works and I didn't see mention of other steps before the one I want to skip as being required to be optional.

I also recognise that my use case may be unusual as I'm basically adding a button to jump the the last step as it shows the results of a questionnaire, if already completed, as a way to access them quickly by reusing the same UI.

@theCrius theCrius changed the title [awGoToStep] seems to not be working (angular 9, archwizard 6) [awGoToStep] Help in understanding how awGoToStep works (angular 9, archwizard 6) Jun 11, 2020
@theCrius
Copy link
Author

Created a pull request to save you from going and edit. I'm still new to this repo so I might have missed or misinterpreted how the constraint works, feel free to reject / edit the pull request.

#301

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants