github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-11-15 10:19:17 -06:00
Code Issues 690 Packages Projects Releases 13 Wiki Activity

[PR #1825] [MERGED] feat: add clickable labels on Labels page for task filtering #5256

New Issue
Closed
opened 2026-04-16 13:32:06 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-16 13:32:06 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/1825
Author: @Copilot
Created: 11/15/2025
Status: ✅ Merged
Merged: 11/15/2025
Merged by: @kolaente

Base: main ← Head: copilot/add-clickable-labels-for-filtering

📝 Commits (9)

  • 8bb0240 Initial plan
  • c16ca20 feat: add clickable labels with filtering support
  • 8013f0e fix: prevent labels from being clickable in selection contexts
  • 31a101e refactor: implement review feedback
  • 42fb36e fix: address review feedback
  • ae19962 fix: implement review feedback on ListLabels and ShowTasks
  • 17bcb51 refactor: simplify implementation - make labels clickable only on ListLabels page
  • 7c954ac imrpve
  • 1f72999 fix: remove disabled

📊 Changes

4 files changed (+126 additions, -19 deletions)

View changed files

📝 frontend/src/i18n/lang/en.json (+3 -1)
📝 frontend/src/views/Home.vue (+23 -0)
📝 frontend/src/views/labels/ListLabels.vue (+26 -18)
📝 frontend/src/views/tasks/ShowTasks.vue (+74 -0)

📄 Description

Clickable Labels for Filtering Tasks

Implements the feature requested in: https://community.vikunja.io/t/click-label-to-show-all-matching-tasks/3082

Summary

Labels on the Labels management page are now clickable. Clicking a label navigates to the home page with that label selected for filtering, making it easy to view all tasks with a specific label. This implementation uses inline clickable labels only on the ListLabels page without modifying the shared Label component.

Implementation Checklist

  • Understand the current label display and filtering architecture
  • Add label filtering to ShowTasks.vue via query parameters
  • Update Home.vue to accept and pass label query parameters
  • Add visual indicator when filtering by label
  • Make labels clickable ONLY on ListLabels page (inline implementation)
  • Simplify approach - no changes to Label component
  • Add tooltip to clear filter button
  • Test the implementation (manual verification needed)
  • Run security checks (CodeQL)
  • Code review

Changes Made

1. Label Component (frontend/src/components/tasks/partials/Label.vue)

  • NO CHANGES - Left in original state for simplicity
  • Labels on tasks remain non-clickable by default

2. ListLabels View (frontend/src/views/labels/ListLabels.vue)

  • Implemented clickable labels using inline RouterLink components
  • Each label navigates to home page with ?labels=<labelId> query parameter
  • Each label shows: clickable label + edit button (delete icon opens edit form)
  • Added hover effect (opacity: 0.8) for clickable labels
  • Uses getLabelStyles composable for consistent label styling
  • No dependency on Label component

3. ShowTasks Component (frontend/src/views/tasks/ShowTasks.vue)

  • Added labelIds prop to accept array of label IDs from query params
  • Updated loadPendingTasks() to add label filter to API query using syntax: labels in <labelId>
  • Added visual filter indicator section using i18n-t component with label slot
  • Emits clearLabelFilter event instead of calling router.push directly
  • Filter indicator uses non-clickable labels (default Label component behavior)
  • Added tooltip to clear filter button
  • Removed bold font-weight from filter text for cleaner look
  • Fixed Icon import path (removed .vue extension)

4. Home View (frontend/src/views/Home.vue)

  • Extracts labels query parameter from route
  • Handles both single and array of label IDs
  • Passes label IDs to ShowTasks component via prop
  • Handles clearLabelFilter event by removing labels from query and navigating

5. Translations (frontend/src/i18n/lang/en.json)

  • Updated task.show.filterByLabel to "Filtering by label {label}"
  • Added task.show.clearLabelFilter to "Clear label filter"
  • Allows label chips to be rendered within the translated text

Technical Details

Filter Syntax: Uses the existing API filter syntax labels in <labelId> which is already supported by the Vikunja backend.

Reactivity: The ShowTasks component uses watchEffect which automatically tracks props.labelIds and reloads tasks when the filter changes.

Component Architecture:

  • Simple inline implementation for ListLabels page only
  • No modifications to shared Label component
  • Emitting events from child components instead of calling router directly
  • Using i18n-t component for complex translations with dynamic content

User Experience

  1. Label Management: On the Labels page, click any label to filter tasks by that label
  2. Edit Labels: Click the delete icon next to each label to open the edit form
  3. Task View: Labels on tasks are NOT clickable (uses standard Label component)
  4. Visual Feedback: Active filter shows "Filtering by label [Label Chips]" at the top of home page
  5. Clear Filter: Click the X button (with tooltip) to remove the filter and return to all tasks
  6. Persistent: Filter is preserved in URL, so you can bookmark or share the filtered view
Original prompt

Read this: https://community.vikunja.io/t/click-label-to-show-all-matching-tasks/3082

Make a plan for implementing this. The labels should be clickable, when clicking on them, open the home page with the label selected for filtering. Filtering should happen via query with link etc. Make it visible to the user that they're filtering by label when on the home page and filtering.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/1825 **Author:** [@Copilot](https://github.com/apps/copilot-swe-agent) **Created:** 11/15/2025 **Status:** ✅ Merged **Merged:** 11/15/2025 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `copilot/add-clickable-labels-for-filtering` --- ### 📝 Commits (9) - [`8bb0240`](https://github.com/go-vikunja/vikunja/commit/8bb02408c762305fcab600f720e7fad7a970d0d4) Initial plan - [`c16ca20`](https://github.com/go-vikunja/vikunja/commit/c16ca20db5d80f2631d827e74f7e8b19a9b5759c) feat: add clickable labels with filtering support - [`8013f0e`](https://github.com/go-vikunja/vikunja/commit/8013f0e51aa2e9f79d09c77a3565e06d8eb6e132) fix: prevent labels from being clickable in selection contexts - [`31a101e`](https://github.com/go-vikunja/vikunja/commit/31a101e352ec48522f4ce0d8123a6059b6d6d311) refactor: implement review feedback - [`42fb36e`](https://github.com/go-vikunja/vikunja/commit/42fb36e40908d8578c11c2fb52f81c4855c94329) fix: address review feedback - [`ae19962`](https://github.com/go-vikunja/vikunja/commit/ae19962f5959b0b9698eb6a41b1d84f754f895ce) fix: implement review feedback on ListLabels and ShowTasks - [`17bcb51`](https://github.com/go-vikunja/vikunja/commit/17bcb51ceb0c759ed8b0e9f604089833919b55de) refactor: simplify implementation - make labels clickable only on ListLabels page - [`7c954ac`](https://github.com/go-vikunja/vikunja/commit/7c954acbae13d434d7cfeed6a71908d07137d10e) imrpve - [`1f72999`](https://github.com/go-vikunja/vikunja/commit/1f7299931319a31abb8a5e1dbce11e5ee5481230) fix: remove disabled ### 📊 Changes **4 files changed** (+126 additions, -19 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/i18n/lang/en.json` (+3 -1) 📝 `frontend/src/views/Home.vue` (+23 -0) 📝 `frontend/src/views/labels/ListLabels.vue` (+26 -18) 📝 `frontend/src/views/tasks/ShowTasks.vue` (+74 -0) </details> ### 📄 Description ## Clickable Labels for Filtering Tasks Implements the feature requested in: https://community.vikunja.io/t/click-label-to-show-all-matching-tasks/3082 ### Summary Labels on the **Labels management page** are now clickable. Clicking a label navigates to the home page with that label selected for filtering, making it easy to view all tasks with a specific label. This implementation uses inline clickable labels only on the ListLabels page without modifying the shared Label component. ### Implementation Checklist - [x] Understand the current label display and filtering architecture - [x] Add label filtering to ShowTasks.vue via query parameters - [x] Update Home.vue to accept and pass label query parameters - [x] Add visual indicator when filtering by label - [x] Make labels clickable ONLY on ListLabels page (inline implementation) - [x] Simplify approach - no changes to Label component - [x] Add tooltip to clear filter button - [x] Test the implementation (manual verification needed) - [x] Run security checks (CodeQL) - [x] Code review ### Changes Made #### 1. Label Component (`frontend/src/components/tasks/partials/Label.vue`) - **NO CHANGES** - Left in original state for simplicity - Labels on tasks remain non-clickable by default #### 2. ListLabels View (`frontend/src/views/labels/ListLabels.vue`) - Implemented clickable labels using inline `RouterLink` components - Each label navigates to home page with `?labels=<labelId>` query parameter - Each label shows: clickable label + edit button (delete icon opens edit form) - Added hover effect (opacity: 0.8) for clickable labels - Uses `getLabelStyles` composable for consistent label styling - No dependency on Label component #### 3. ShowTasks Component (`frontend/src/views/tasks/ShowTasks.vue`) - Added `labelIds` prop to accept array of label IDs from query params - Updated `loadPendingTasks()` to add label filter to API query using syntax: `labels in <labelId>` - Added visual filter indicator section using `i18n-t` component with label slot - Emits `clearLabelFilter` event instead of calling router.push directly - Filter indicator uses non-clickable labels (default Label component behavior) - Added tooltip to clear filter button - Removed bold font-weight from filter text for cleaner look - Fixed Icon import path (removed .vue extension) #### 4. Home View (`frontend/src/views/Home.vue`) - Extracts `labels` query parameter from route - Handles both single and array of label IDs - Passes label IDs to ShowTasks component via prop - Handles `clearLabelFilter` event by removing labels from query and navigating #### 5. Translations (`frontend/src/i18n/lang/en.json`) - Updated `task.show.filterByLabel` to "Filtering by label {label}" - Added `task.show.clearLabelFilter` to "Clear label filter" - Allows label chips to be rendered within the translated text ### Technical Details **Filter Syntax**: Uses the existing API filter syntax `labels in <labelId>` which is already supported by the Vikunja backend. **Reactivity**: The ShowTasks component uses `watchEffect` which automatically tracks `props.labelIds` and reloads tasks when the filter changes. **Component Architecture**: - Simple inline implementation for ListLabels page only - No modifications to shared Label component - Emitting events from child components instead of calling router directly - Using i18n-t component for complex translations with dynamic content ### User Experience 1. **Label Management**: On the Labels page, click any label to filter tasks by that label 2. **Edit Labels**: Click the delete icon next to each label to open the edit form 3. **Task View**: Labels on tasks are NOT clickable (uses standard Label component) 4. **Visual Feedback**: Active filter shows "Filtering by label [Label Chips]" at the top of home page 5. **Clear Filter**: Click the X button (with tooltip) to remove the filter and return to all tasks 6. **Persistent**: Filter is preserved in URL, so you can bookmark or share the filtered view <!-- START COPILOT CODING AGENT SUFFIX --> <details> <summary>Original prompt</summary> > Read this: https://community.vikunja.io/t/click-label-to-show-all-matching-tasks/3082 > > Make a plan for implementing this. The labels should be clickable, when clicking on them, open the home page with the label selected for filtering. Filtering should happen via query with link etc. Make it visible to the user that they're filtering by label when on the home page and filtering. </details> <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-16 13:32:06 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 pull-request
Mirrored from GitHub Pull Request
 pull-request
Mirrored from GitHub Pull Request
 pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#5256