[Feat] Responses: update to new UI

[Andrei0872]

Closes #232

This PR comes with a significant change: the /answers route will be rendered with the help of a lazy-loaded module. The reason behind it is that if we keep adding stuff to our bundle, it will start to take more and more time to load the page. Although the loading time is not a problem at the moment, I thought it was a good idea to follow this approach now, so that it will not become more complicated in the long run. Moreover, this change is easy to add and it also improves the file's organization.

There are a few things that are unclear to me/left undone:

1. when filtering from the /answers page, the filters are not used when sending the request
2. some columns that are required in the table are missing from the answer's properties: Location Type and Date&Time
3. what is the API for updating the answers(check/uncheck option, new text) from the sections page? also, should the updates be done as the user does them, or should there be confirmation button?
4. where should the extraDetails be added? For example, here the details are added before the form tabs
5. where should notes that do not belong to a specific question be displayed?
6. some options of some questions can be of type text, instead of type checkbox; should that be a textarea?
7. in some cases, after a route is rendered, the corresponding data is refetched, although what's needed is already in the store. should I fix this in this PR or should it be considered a separate issue?
8. What's the API for sending a notification? (referring to the action that should be done after pressing the Send Notification button)

And this is my todo list:

• fix the hamburger menu's height; although not related to the problem in question, right now the hamburger menu does not contain all of its items; the fix is simple, I just have to increase its max-height value.
• add a canLoad guard to the answers module
• add some translations
• Send Notification page

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/code4romania/monitorizare-vot-ong/azbacv4j2
✅ Preview: https://monitorizare-vot-ong-git-feat-responses-update-to-new-ui.code4romania.vercel.app

[Utwo]

Congrats for the hard work! Impressive skills! Really like the detailed PR comment and the lazy-route approach. 💯

[aniri]

@Andrei0872 Woooh, looks great!! 🚀

I'll add some small adjustments that could be made (in this PR or we could open separate issues):

• the filter by county input should be a dropdown with available counties (GET ​/api​/v1​/county)
• the total number of responses shown at the top of the page is wrong, it only shows the total from the current page (please mention if an api update is needed for this)
• the clear filter button doesn't seem to reset the search
• after filtering by phone number, then deleting the number and pressing 'filter' again (with empty filters) -> the number of responses shown on a page changes from 10 to 5 :/
• the location & time should be taken from polling-station-info -> arrival time and urban / rural (the ones that are shown here https://monitorizare-vot-ong-git-feat-observers-update-to-new-ui.code4romania.vercel.app/answers/details/12/3530 above the tabs)

And to answer your questions:

1. when filtering from the /answers page, the filters are not used when sending the request

I think we could comment out the from/to filters that are not used until the API will support these as well

2. some columns that are required in the table are missing from the answer's properties: Location Type and Date&Time

These correspond to the arrival time and location type (urban or rural) from the polling-station-info

3. what is the API for updating the answers(check/uncheck option, new text) from the sections page? also, should the updates be done as the user does them, or should there be confirmation button?

Everything should be readonly :) The answers are send by the users of the mobile apps and only viewed by admins here.

4. where should the extraDetails be added? For example, here the details are added before the form tabs

Those details should be added here and in the table (arrival time & location type)

5. where should notes that do not belong to a specific question be displayed?

There should be another tab with all notes, as seen in the design. This is a bigger fix though and also added as a separate issue #290 . It could be implemented in this PR or another :)

6. some options of some questions can be of type text, instead of type checkbox; should that be a textarea?

Yes

7. in some cases, after a route is rendered, the corresponding data is refetched, although what's needed is already in the store. should I fix this in this PR or should it be considered a separate issue?

Good catch! If it you could fix it in this PR it would be awesome, if not, we'll add a different issue.

8. What's the API for sending a notification? (referring to the action that should be done after pressing the Send Notification button)

The api is POST ​/api​/v1​/notification​/send with body:

{
  "channel": "Firebase",
  "from": "Monitorizare Vot",
  "title": "string",
  "message": "string",
  "recipients": [
    "THE_ID_OF_THE_OBSERVER"
  ]
}

It is similar to the endpoint used in the notifications page.

[Andrei0872]

@aniri Thanks for such a detailed reply!

I think we could comment out the from/to filters that are not used until the API will support these as well

So, I guess I should hide the form controls from the UI as well, right?

Everything should be readonly :) The answers are send by the users of the mobile apps and only viewed by admins here.

Makes sense! :)

I'd say everything can be done in this PR. If that's okay, I could also include #290, it would be my pleasure. I'll start working tomorrow and I'll keep you updated. Thanks!

[aniri]

So, I guess I should hide the form controls from the UI as well, right?

Yes, please :)

I'd say everything can be done in this PR. If that's okay, I could also include #290, it would be my pleasure. I'll start working tomorrow and I'll keep you updated.

@Andrei0872 That sounds awesome!! Thank you!! 🚀

[Andrei0872]

Hello @aniri, I've just submitted the latest changes, please let me know if I missed something.

Here are some things that I think are worth mentioning:

1. When the user is on the /answer/details/ page, if it refreshed the page, it will be redirected back to /answers page.

2. In the Notes tab, I didn't manage to also add an image/video at the right of the note's text, since I think a much smaller image should be used there.

3. When a note does not belong to a question(i.e the note does not have a question link), I've simply put '/'. Should there by other message?

[aniri]

awesome work!!! 🚀