[FEAT]: Add create tag in tag component #122

New issue

Closed

opened 2024-06-20 03:55:57 +00:00 by imAsparky · 1 comment

imAsparky commented

2024-06-20 03:55:57 +00:00

(Migrated from github.com)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here.

imAsparky commented

2024-06-20 08:24:34 +00:00

(Migrated from github.com)

Great, thanks for confirming these final details! I've removed the questions for clarification and updated the scope of work one last time to reflect everything we've discussed:

Scope of Work: Extension of Alpine Tag-Me MultiSelect Component

Project Goal:

Enhance the existing alpineTagMeMultiSelect component to enable seamless tag creation within the input field.
Allow users to add new tags when no matching tag is found during their search.
Maintain consistent integration with the existing tag suggestion interface and overall visual style, specifically replicating the use of the <kbd> tag for the "Add Tag" option as defined in the provided HTML file.

Key Deliverables:

Component Extension:
- Modify the alpineTagMeMultiSelect component to include tag creation functionality.
- Ensure the component receives the following JSON context (add_tag) from the custom widget (if it doesn't already):
  - content_type_id (Content Type ID from the content field of TaggedFieldModel)
  - model_name (Model name from TaggedFieldModel)
  - field_name (Field name from TaggedFieldModel)
  - user_id (Required for tag creation)
- Display a visually consistent "Add Tag" option using the <kbd> tag, replicating the exact styling from the existing HTML file, when a user's search doesn't match existing tags.
Tag Creation Functionality:
- Capture the new tag name entered by the user when they select the "Add Tag" option.
- Bundle the new tag name with the existing add_tag context data.
- Send a POST request to the Django-provided tag creation endpoint URL (to be determined later, using the {% url "" %} format).
- Handle the response from the endpoint:
  - Add the newly created tag to the list of available tags if successful.
  - Display a generic error message ("Tag creation failed.") if the request fails.
Testing and Integration:
- Write comprehensive tests to ensure the extended functionality works correctly:
  - Verify proper context data handling.
  - Validate successful communication with the tag creation endpoint (using mock responses).
  - Test the generic error message display.
  - Ensure seamless integration with existing tag suggestion behavior.

Additional Considerations:

Visual Style: Replicate the exact styling of the <kbd> tag used for existing tag suggestions, as defined in the provided HTML file.
Customization: Allow developers to customize the tag creation endpoint URL using the Django template tag format.
Error Handling: Implement the generic error message ("Tag creation failed.") as per the current requirements.

Performance Considerations:

Monitor response times from the backend endpoint to ensure a smooth user experience, but performance impact is expected to be minimal due to the limited use case of the tag creation functionality.

Great, thanks for confirming these final details! I've removed the questions for clarification and updated the scope of work one last time to reflect everything we've discussed: **Scope of Work: Extension of Alpine Tag-Me MultiSelect Component** **Project Goal:** * Enhance the existing `alpineTagMeMultiSelect` component to enable seamless tag creation within the input field. * Allow users to add new tags when no matching tag is found during their search. * Maintain consistent integration with the existing tag suggestion interface and overall visual style, specifically replicating the use of the `<kbd>` tag for the "Add Tag" option as defined in the provided HTML file. **Key Deliverables:** 1. **Component Extension:** * Modify the `alpineTagMeMultiSelect` component to include tag creation functionality. * Ensure the component receives the following JSON context (`add_tag`) from the custom widget (if it doesn't already): * `content_type_id` (Content Type ID from the `content` field of `TaggedFieldModel`) * `model_name` (Model name from `TaggedFieldModel`) * `field_name` (Field name from `TaggedFieldModel`) * `user_id` (Required for tag creation) * Display a visually consistent "Add Tag" option using the `<kbd>` tag, replicating the exact styling from the existing HTML file, when a user's search doesn't match existing tags. 2. **Tag Creation Functionality:** * Capture the new tag name entered by the user when they select the "Add Tag" option. * Bundle the new tag name with the existing `add_tag` context data. * Send a POST request to the Django-provided tag creation endpoint URL (to be determined later, using the `{% url "" %}` format). * Handle the response from the endpoint: * Add the newly created tag to the list of available tags if successful. * Display a generic error message ("Tag creation failed.") if the request fails. 3. **Testing and Integration:** * Write comprehensive tests to ensure the extended functionality works correctly: * Verify proper context data handling. * Validate successful communication with the tag creation endpoint (using mock responses). * Test the generic error message display. * Ensure seamless integration with existing tag suggestion behavior. **Additional Considerations:** * **Visual Style:** Replicate the exact styling of the `<kbd>` tag used for existing tag suggestions, as defined in the provided HTML file. * **Customization:** Allow developers to customize the tag creation endpoint URL using the Django template tag format. * **Error Handling:** Implement the generic error message ("Tag creation failed.") as per the current requirements. **Performance Considerations:** * Monitor response times from the backend endpoint to ensure a smooth user experience, but performance impact is expected to be minimal due to the limited use case of the tag creation functionality.