Develop Content Flagging UI Modal

Overview

This issue aims to create a modal that will be triggered when a user clicks on the "Flag" option associated with a specific content node. The modal will provide predefined checkboxes for common reasons for flagging regarding why they believe the content should be flagged. We would also want to implement proper logic to accumulate all the parameters required to create a FlagFeedbackEvent object and call the utility functions to make the API request to the backend.

Description and outcomes

• Create a Vue component for the flag modal.
• Trigger the modal when the user clicks on the "Flag" option associated with a content node.
• The Checkboxes should have the following options:
  • Violent or repulsive content
  • Hateful or abusive content
  • Harmful or dangerous acts
  • Spam or misleading
  • Sexual Content
• User should be able to check multiple checkboxes.
• Capture user selections made with the checkboxes provided in the feedback_reason field of the FlagFeedbackEvent Class.
• In the ContentNodeOptions vue component, add a method that would be triggered when the user completes the procedure of flagging content.
• This method should retrieve the corresponding parameter values required to create an instance of FlagFeedbackEvent Class i.e user, target_channel_id, context, contentnode_id, content_id, feedback_type, feedback_reason, target_topic_id for the ContentNode.
• Create an object of FlagFeedbackEvent Class and make an API request using sendRequest utility functions implemented in feedbackApiUtils.js.

Related Screenshot

• The modal should look something similar to this with an option to submit selected !

Acceptance criteria

• UI modal with checkboxes for retrieving feedback_reason from the user trying to flag a contentNode.
• Above mentioned methods triggered and implemented correctly according to specifications provided above.

Resources

• To understand more about FlagFeedbackEvent Class refer to #4366