Allow for closing modals when another is opened

[andrewtavis]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

A major bug with how activist was functioning was solved in #657. With this, modals are no longer directly dependent on the elements that produce them. Rather than crashing when a modal within a modal is opened, we now just see the new one on top. Ideally, if the user was opening new modal, then we'd close one that's currently open such that only one modal is open at a given time. Changes to achieve this would be made within the components in the components/modal directory and possibly within instances of these modals.

The way that you can see the current functionality is to go to an organization or event page and then click on the share button in the top right. Then within that modal click on View QR code and you'll see that another modal opens on top of the original, with both needing to be closed ot get back to the normal display.

Contribution

Happy to support on this and possibly implement at some point! 😊

[andrewtavis]

Likely the best way to do this would be to implement a listener at the base app.vue level that picks up if a modal is open, and then closes all modals, which can then be triggered on an open modal call :)

[andrewtavis]

Hey @nicomaz 👋 Feel free to write in here and I'll assign :) Let me know as well if you need some context here!

[nicomaz]

Hi! I'll have a look now, I'll let you know if I need anymore info! :-)

[andrewtavis]

Thanks @nicomaz! :) Looking forward to the PR 😊

[andrewtavis]

Hey @nicomaz 👋 Checking in with you on this :) Anything we can do to support?

[nicomaz]

Hi @andrewtavis! I've got the modals working. I used a pinia store to add modals to the store when they're opened and close all other opened modals before opening them. I've just encountered a bug where en/organizations/ & en/events/ isn't loading in, so I'm just fixing that now but it shouldn't take long!

[andrewtavis]

Amazing, @nicomaz! Really looking forward to the PR 😊 Let me know if there are any further questions beforehand :)

[nicomaz]

Hi @andrewtavis, I have a question. I'm running the frontend, and I thought that the error that I am currently encountering was caused by my refactoring of the modals but I've gotten a fresh cloning of the repo in it's current state(without my refactor) and I'm having the same problem which leads me to believe it's not actually caused by my refactoring of modals.

When I head to /en/organizations/ I'm met with infinite logging of errors that are along the same lines as

Invalid prop: type check failed for prop "organization". Expected Object, got String with value ''''

and the page is stuck endlessly loading. Each error refers back to an invalid prop for organization. I've had a look in the currently opened issues and haven't seen anything similar reported.

I'm wondering whether this is something you've seen before, or if when you run the frontend, you are also faced with this issue? I want to make sure that what I have currently isn't the cause of this problem.

[andrewtavis]

I think that this is just from the backend not quite being hooked up, @nicomaz :) Given your investigation, is likely from the script tag in pages/organizations/index. You're free to open a PR with your change, and we should be able to handle the other error by end of week once we have hydration up 😊

[nicomaz]

Ah, I thought so, just wanted to make sure! Thank you for the quick response @andrewtavis. PR incoming!  😁

[andrewtavis]

Super grateful for the help here on this, @nicomaz! Really great implementation that's going to be very easy to maintain in the future :) Sorry that the review took a bit of time, but should all be faster once hydration's all the way done. Looking forward to the next issue you pick up!

[andrewtavis]

Let me know as well if you have any questions on the project and if a call would be helpful to discuss 😊