fix: added the missing delete collection on the collections details page#1790
fix: added the missing delete collection on the collections details page#1790
Conversation
Signed-off-by: Efren Lim <elim@linuxfoundation.org>
frontend/app/components/modules/collection/components/details/header.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Adds a “Delete collection” action to the collection details header and introduces a reusable, app-wide confirmation modal system to support the delete confirmation flow.
Changes:
- Added a global confirm modal (Pinia store + modal + global mount in default layout).
- Added a delete action (with confirmation + deleting overlay) to the “My collections” details header.
- Tweaked delete icon styling to ensure negative color styling wins in dropdown contexts.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/app/layouts/default.vue | Mounts the global confirm modal component so confirmations can be triggered from anywhere. |
| frontend/app/components/shared/modules/confirm/store/confirm.store.ts | Adds a Pinia store API for opening/confirming/canceling a global confirmation modal. |
| frontend/app/components/shared/modules/confirm/components/confirm-modal.vue | Implements the reusable confirmation modal UI. |
| frontend/app/components/shared/modules/confirm/components/confirm-global.vue | Wires the confirm store state/actions to the confirm modal component. |
| frontend/app/components/shared/components/collection-card.vue | Ensures delete icon styling uses !text-negative-500 for consistent appearance. |
| frontend/app/components/modules/collection/components/details/header.vue | Adds delete dropdown action, confirmation prompt, and full-page deleting overlay for collection deletion. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
frontend/app/components/modules/collection/components/details/header.vue
Outdated
Show resolved
Hide resolved
|
|
||
| const invalidateMyCollections = () => { | ||
| queryClient.invalidateQueries({ | ||
| queryKey: [TanstackKey.MY_COLLECTIONS, 'starred_desc', undefined, 99, undefined, user.value?.sub], |
There was a problem hiding this comment.
invalidateMyCollections() uses a fully-specified/hardcoded queryKey ('starred_desc', 99, etc.), which is unlikely to match the actual fetchMyCollections query keys in all cases. Prefer invalidating by prefix (e.g., [TanstackKey.MY_COLLECTIONS]) or derive the key from the same params source used to build the query key.
| queryKey: [TanstackKey.MY_COLLECTIONS, 'starred_desc', undefined, 99, undefined, user.value?.sub], | |
| queryKey: [TanstackKey.MY_COLLECTIONS], |
Signed-off-by: Efren Lim <elim@linuxfoundation.org>
Signed-off-by: Efren Lim <elim@linuxfoundation.org>
Signed-off-by: Efren Lim <elim@linuxfoundation.org>
In this PR
Ticket
IN-1061