home page

src/views/HomeView.vue

@@ -30,32 +30,43 @@ const projectStore = useProjectStore()
 const statusStore = useStatusStore()
 
 const { stats } = storeToRefs(issueStore)
-const { projects, currentProjectId } = storeToRefs(projectStore)
+const { projects, current, currentProjectId } = storeToRefs(projectStore)
 
 const currentUserId = computed(() => session.value.data?.user.id ?? null)
 
 const myIssues = ref<Issue[]>([])
 const loadingMyIssues = ref(false)
+let myIssuesRequestId = 0
 
-async function loadMyIssues(userId: string) {
+async function loadMyIssues(userId: string, projectId: string | null) {
+  // Ignore responses that arrive after the user or project has changed again
+  const requestId = ++myIssuesRequestId
   loadingMyIssues.value = true
   try {
-    const res = await issueStore.list({ page: 1, limit: 50, assigneeId: userId })
-    myIssues.value = res.list.filter((issue) => ACTIVE_STATUSES.includes(issue.status))
+    const res = await issueStore.list({ page: 1, limit: 50, assigneeId: userId, projectId, status: ACTIVE_STATUSES })
+    if (requestId !== myIssuesRequestId) return
+    myIssues.value = res.list
   } finally {
-    loadingMyIssues.value = false
+    if (requestId === myIssuesRequestId) loadingMyIssues.value = false
   }
 }
 
 watch(
-  currentUserId,
-  (id) => {
-    if (id) void loadMyIssues(id)
+  [currentUserId, currentProjectId],
+  ([userId, projectId]) => {
+    if (userId) void loadMyIssues(userId, projectId)
     else myIssues.value = []
   },
   { immediate: true },
 )
 
+const myIssuesTitle = computed(() => (current.value ? `My issues · ${current.value.key}` : 'My issues'))
+
+const myIssuesLink = computed(() => ({
+  path: '/issues',
+  query: currentUserId.value ? { assignee: currentUserId.value } : {},
+}))
+
 watch(
   currentProjectId,
   (id) => {
@@ -134,8 +145,8 @@ function onClickCard(status?: string) {
         <v-col cols="12" md="8">
           <v-card border>
             <v-card-title class="d-flex align-center justify-space-between">
-              <span>My issues</span>
-              <v-btn size="small" variant="text" to="/issues">All issues</v-btn>
+              <span>{{ myIssuesTitle }}</span>
+              <v-btn size="small" variant="text" :to="myIssuesLink">View all mine</v-btn>
             </v-card-title>
             <v-divider />
             <v-list v-if="sortedMyIssues.length" density="compact">