feat(ui): add My Issues filter button (#63)#161
Conversation
Adds source_project filter support to fetchIssues API and useIssues composable. "My Issues" toggle filters to source_project=dashboard (issues created by the operator). Purple highlight when active.
ПояснениеИзменения добавляют возможность фильтрации проблем по исходному проекту через новый реактивный фильтр Изменения
Смета на рецензирование кода🎯 2 (Простое) | ⏱️ ~12 минут Возможно связанные MR
Предлагаемые метки
Стихотворение
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
ui/src/views/IssuesView.vue (1)
11-16: Сведите фильтр к одному источнику правды.На Line 11-16
myIssuesOnlyиsourceProjectFilterхранят один и тот же смысл, из-за чего возможна рассинхронизация состояния UI и фактического фильтра.♻️ Предложение
-import { ref, onMounted } from 'vue' +import { ref, computed, onMounted } from 'vue' const { issues, total, loading, error, statusFilter, sourceProjectFilter, typeFilter, load } = useIssues() -const myIssuesOnly = ref(false) +const myIssuesOnly = computed(() => sourceProjectFilter.value === 'dashboard') function toggleMyIssues() { - myIssuesOnly.value = !myIssuesOnly.value - sourceProjectFilter.value = myIssuesOnly.value ? 'dashboard' : '' + sourceProjectFilter.value = myIssuesOnly.value ? '' : 'dashboard' }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/src/views/IssuesView.vue` around lines 11 - 16, The code keeps duplicate state in myIssuesOnly and sourceProjectFilter which can drift; remove the redundant ref and collapse to a single source of truth by either (A) deleting the myIssuesOnly ref and have toggleMyIssues update only sourceProjectFilter, or (B) make myIssuesOnly a computed with get() returning sourceProjectFilter.value === 'dashboard' and set(v) updating sourceProjectFilter.value = v ? 'dashboard' : ''. Update the toggleMyIssues function (and any consumers) to use the single source (either the computed myIssuesOnly or sourceProjectFilter) and remove any direct writes to the removed ref.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui/src/views/IssuesView.vue`:
- Around line 140-150: Добавьте состояние доступности к кнопке-фильтру, привязав
атрибут aria-pressed к булевому состоянию myIssuesOnly (например
:aria-pressed="myIssuesOnly") на том же элементе button, где используется
`@click`="toggleMyIssues", чтобы скринридеры корректно озвучивали включённость
фильтра; убедитесь, что myIssuesOnly действительно булево и обновляется в методе
toggleMyIssues.
---
Nitpick comments:
In `@ui/src/views/IssuesView.vue`:
- Around line 11-16: The code keeps duplicate state in myIssuesOnly and
sourceProjectFilter which can drift; remove the redundant ref and collapse to a
single source of truth by either (A) deleting the myIssuesOnly ref and have
toggleMyIssues update only sourceProjectFilter, or (B) make myIssuesOnly a
computed with get() returning sourceProjectFilter.value === 'dashboard' and
set(v) updating sourceProjectFilter.value = v ? 'dashboard' : ''. Update the
toggleMyIssues function (and any consumers) to use the single source (either the
computed myIssuesOnly or sourceProjectFilter) and remove any direct writes to
the removed ref.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5837d2bc-a0be-452a-8b44-e53ea7aef1bb
📒 Files selected for processing (3)
ui/src/composables/useIssues.tsui/src/utils/api.tsui/src/views/IssuesView.vue
| <button | ||
| @click="toggleMyIssues" | ||
| :class="[ | ||
| 'px-3 py-1.5 text-sm rounded-md transition-colors', | ||
| myIssuesOnly | ||
| ? 'bg-purple-600 text-white hover:bg-purple-500' | ||
| : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600' | ||
| ]" | ||
| > | ||
| <i class="fas fa-user mr-1" />My Issues | ||
| </button> |
There was a problem hiding this comment.
Добавьте состояние переключателя для доступности.
Для toggle-кнопки на Line 140-150 лучше явно выставить aria-pressed, чтобы screen reader корректно озвучивал включённость фильтра.
♿ Небольшое улучшение
<button
`@click`="toggleMyIssues"
+ type="button"
+ :aria-pressed="myIssuesOnly"
:class="[🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@ui/src/views/IssuesView.vue` around lines 140 - 150, Добавьте состояние
доступности к кнопке-фильтру, привязав атрибут aria-pressed к булевому состоянию
myIssuesOnly (например :aria-pressed="myIssuesOnly") на том же элементе button,
где используется `@click`="toggleMyIssues", чтобы скринридеры корректно озвучивали
включённость фильтра; убедитесь, что myIssuesOnly действительно булево и
обновляется в методе toggleMyIssues.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a 'My Issues' filter by introducing a sourceProjectFilter state and updating the fetchIssues API call to support the source_project query parameter. The UI now includes a toggle button to activate this filter. Reviewers suggested refactoring the fetchIssues function to use an options object to avoid a long list of positional arguments. It was also noted that the myIssuesOnly ref is redundant and can be replaced by checking the filter value directly.
| type?: string, | ||
| sourceProject?: string |
There was a problem hiding this comment.
The fetchIssues function is accumulating a large number of positional arguments (now 7), most of which are optional. This makes the function difficult to call and maintain, as it often requires passing multiple undefined values to reach later parameters. Consider refactoring this to use a single options object for better readability and extensibility.
| const myIssuesOnly = ref(false) | ||
|
|
||
| function toggleMyIssues() { | ||
| myIssuesOnly.value = !myIssuesOnly.value | ||
| sourceProjectFilter.value = myIssuesOnly.value ? 'dashboard' : '' | ||
| } |
There was a problem hiding this comment.
The myIssuesOnly ref is redundant because its state is strictly tied to whether sourceProjectFilter is set to 'dashboard'. You can simplify the component state by removing this ref and checking the filter value directly. Additionally, consider defining a constant for the 'dashboard' string to avoid magic strings in the logic.
function toggleMyIssues() {
sourceProjectFilter.value = sourceProjectFilter.value === 'dashboard' ? '' : 'dashboard'
}
| @click="toggleMyIssues" | ||
| :class="[ | ||
| 'px-3 py-1.5 text-sm rounded-md transition-colors', | ||
| myIssuesOnly |
There was a problem hiding this comment.
Use the sourceProjectFilter directly to determine the active state of the button, avoiding redundant local state.
sourceProjectFilter === 'dashboard'
1 participant
Adds "My Issues" toggle to filter issues by source_project=dashboard (operator-created issues).
Part 1 of #63. Part 2 (reserved operator project ID for agent→operator issues) needs design.
Summary by CodeRabbit
Новые возможности