Modal view for all organizations involved in an event

[andrewtavis]

Terms

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

Description

In line with the general designs of activist where modals are used to show further information, it'd be great if we could create a modal ModalOrganizationOverview.vue that would house a scrollable flex col list of all organizations that are involved in an event. This modal would be triggered by clicking (+# more) on events on the About page as seen in the Figma designs.

Testing for this can be done on the test events page at events/ANY_NUMBER/about. This component would use ModalBase as its base, with the (+# more) being the normalDisplay and the flex col display of organization names and their icons to the left would be the modal.

Contribution

Happy to discuss the implementation for this or get to it myself eventually 😊

[tasawar-hussain]

I would like to pick this up

[andrewtavis]

Thanks, @tasawar-hussain! Would be great to get some help here :) Do your best with the styling, and I'll clean it up in review if need be 😊 Let us know if there's anything we can do to help!

[andrewtavis]

Hey @tasawar-hussain 👋 Let us know if there's anything we can do to support here :) There's no pressure on this for the coming weeks, but it will start to be more pressing in July 😊

[andrewtavis]

Hey @tasawar-hussain 👋 I'm going to unassign this one and #870 so that others can try, but please let me know if you'd like to be reassigned one of them. Hope you're well!

[rahulharpal1603]

Hello @andrewtavis can I take up this issue?

[andrewtavis]

Sure thing, @rahulharpal1603! Please let us know if there are any questions 😊 As of now you'll likely need to create an event in the DB to test this, but hopefully in the coming days we'll get fixtures up so that you can work directly without creating events yourself. You can start orienting yourself to the project, and hopefully the events will be there for you to start working on this?

[rahulharpal1603]

Sure thing, @rahulharpal1603! Please let us know if there are any questions 😊 As of now you'll likely need to create an event in the DB to test this, but hopefully in the coming days we'll get fixtures up so that you can work directly without creating events yourself. You can start orienting yourself to the project, and hopefully the events will be there for you to start working on this?

I would be starting to work on this soon.
I was busy with some pending PRs and college work.

[andrewtavis]

Sounds good, @rahulharpal1603! We're quite close on the fixtures. Was a bit held up with other projects, but moving back here now :)

Let me know if you have any questions setting the project up!

[Siddharthgup]

Hi @andrewtavis , Can I take up this issue ?

[andrewtavis]

@rahulharpal1603 is working on this one, @Siddharthgup :) Do you want me to suggest other issues you could check out?

@rahulharpal1603, the fixtures will be merged in with #977! Let us know if there are any questions 😊

[rahulharpal1603]

@andrewtavis I finished setting up the local environment using Docker, but how to enter the actual website from this page?:

[andrewtavis]

It'll be more clear after this evening, @rahulharpal1603 :) I'll bring in the PR, which will also include directions for how to access the platform 😊

[rahulharpal1603]

Okay, thanks🙏

[rahulharpal1603]

It'll be more clear after this evening, @rahulharpal1603 :) I'll bring in the PR, which will also include directions for how to access the platform 😊

Now can I access the page?

Also, I wanted to ask if this project can have the "hacktoberfest" topic attached to it. Also a "hacktoberfest" label to this issue?
I have registered for Hacktober Fest and this PR could help me complete one of my 4 open-source contributions 😃.

https://hacktoberfest.com/participation/#maintainers

Also, adding that topic to this project can bring in new contributors to accelerate the development cycle 😀

[andrewtavis]

Now can I access the page?

Not quite yet, but hopefully this evening :)

We are participating in Hacktoberfest, and I'll update the repo now with the Hacktoberfest topic. We don't need to add the label to this issue, but your PR will be marked with it. Remember to open it after October starts though!

[rahulharpal1603]

Now can I access the page?

Not quite yet, but hopefully this evening :)

We are participating in Hacktoberfest, and I'll update the repo now with the Hacktoberfest topic. We don't need to add the label to this issue, but your PR will be marked with it. Remember to open it after October starts though!

Okay 😃

[andrewtavis]

Saw that they do want us marking the issues with the tags this year :)

[andrewtavis]

Hey @rahulharpal1603 👋 The factories have been loaded in, and there are now View organizations and View events buttons on the landing page to take you to the app. There is event page content that you can get to by click on the events, but it's not populated by the backend just yet. With that being said, maybe you can start working on the component on frontend/pages/events/[id]/about.vue and from there we can make sure that that page is getting data hydrated as soon as we can 😊

[andrewtavis]

Note @rahulharpal1603 that the component should be its own file, but it will appear on the page I specified :)

[andrewtavis]

Edited the above as that grid component doesn't exist. It should be in CardAboutEvent.vue :)

[rahulharpal1603]

@andrewtavis

Is there a way to create an event in my local dev. environment.?

[andrewtavis]

Yes, @rahulharpal1603 :) I was also noting that the new generated events don't work for you as they're all one organization events. Go to localhost:8000, the backend port, and then log in with admin admin for the dev user and pass. From there you can add things into the backend via the Django admin UI 😊

[rahulharpal1603]

Yes, @rahulharpal1603 :) I was also noting that the new generated events don't work for you as they're all one organization events. Go to localhost:8000, the backend port, and then log in with admin admin for the dev user and pass. From there you can add things into the backend via the Django admin UI 😊

I tried accesssing that, but it returns this error:

Although the backend is running:

This is probably due to these errors, the backend is exiting:

[andrewtavis]

Can you check that you have topics.json locally? You've pulled the most recent changes and update your branch with them?

[rahulharpal1603]

Can you check that you have topics.json locally? You've pulled the most recent changes and update your branch with them?

Yes, I have the topics.json locally:

[andrewtavis]

How are you building the project? Can you try:

docker compose --env-file .env.dev up --build

[andrewtavis]

This will rebuild the project and hopefully also load in the topics :)

[rahulharpal1603]

This will rebuild the project and hopefully also load in the topics :)

Yeah, got it. I was not running with --build

[andrewtavis]

Nice! Would you suggest maybe changing the directions to with --build and including a comment that says that build isn't required if there are no new dependencies? As of now we have the --build command in a comment below the base one 🤔

[andrewtavis]

Also considering the backend, I'm not sure if more than one organization is allowed just yet, so you can make the modal for it showing just one :)

[rahulharpal1603]

Nice! Would you suggest maybe changing the directions to with --build and including a comment that says that build isn't required if there are no new dependencies? As of now we have the --build command in a comment below the base one 🤔

Yes, I am confused when to use --build and when to not.
What are the type of changes for which we would need to call the command with --build?

[andrewtavis]

New frontend dependencies or new files on general would require a rebuild :) Do you want to send along a change for this in the readme and the corresponding place in CONTRIBUTING.md? We'd change the uncommented command, add a comment that build can be removed, and remove the commented lines discussing build below :)

[rahulharpal1603]

New frontend dependencies or new files on general would require a rebuild :) Do you want to send along a change for this in the readme and the corresponding place in CONTRIBUTING.md? We'd change the uncommented command, add a comment that build can be removed, and remove the commented lines discussing build below :)

Sure, I can add those changes in CONTRIBUTION.md

[andrewtavis]

Also in README.md :)

[andrewtavis]

Note on this as well, we should add a note that people may need to reset their browser cookies for changes to be displayed :)

[rahulharpal1603]

@andrewtavis

The above type of behaviour is not implemented right? As far as I have looked up, the current behaviour is:

(I changed the testTechEvent to include more orgs. to see if I can get the (+# more) to display, but it isn't displaying)

[andrewtavis]

Hey @rahulharpal1603 👋 I think the (+2 more) was pre-hydration where we had just strings instead of the full organizations 🤔 You'd be free to also code that in and then use it as the target for the modal :)

[andrewtavis]

Hey @rahulharpal1603 👋 I went ahead and updated the docs really quick as this was something I felt was important to just get done for others as well. Thanks for the discussion on it!

[rahulharpal1603]

@andrewtavis Please check out the PR that I created.

[andrewtavis]

Thanks for it, @rahulharpal1603! I'll check it out and also do any needed changes as we're also quite close on the backend updates 😊