Add deep links for pending approval notifications

web/src/views/ExperimentGradesView.vue

@@ -14,6 +14,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import http, { apiErrorMessage } from '../api/http'
 import { downloadApiFile, importExcel } from '../api/excel'
 import { useAuthStore } from '../stores/auth'
+import { useRoute } from 'vue-router'
 import {
   academicTermLabel,
   academicTermOptionClass,
@@ -22,6 +23,7 @@ import {
 import { useScoreGridNavigation } from '../utils/scoreGridNavigation'
 
 const auth = useAuthStore()
+const route = useRoute()
 const { handleScoreGridKeydown } = useScoreGridNavigation('experiment-grade-entry')
 const isStudent = computed(() => auth.user?.roles.includes('Student') ?? false)
 const canViewAllColleges = computed(() =>
@@ -34,6 +36,7 @@ const autoSaveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
 let autoSaveTimer: ReturnType<typeof setTimeout> | undefined
 let savedRecordSnapshot = ''
 let autoSaving = false
+const openedTargetSheetId = ref<string | undefined>()
 const terms = ref<any[]>([])
 const colleges = ref<any[]>([])
 const termId = ref('')
@@ -55,6 +58,11 @@ const editingScheme = ref(false)
 const schemeProject = ref<any | null>(null)
 const importFileInput = ref<HTMLInputElement>()
 
+const targetSheetId = computed(() => {
+  const value = route.query.sheetId
+  return typeof value === 'string' ? value : undefined
+})
+
 const schemeForm = reactive({
   contributionWeight: 1,
   passScore: 60,
@@ -208,20 +216,29 @@ async function load() {
     if (isStudent.value) {
       studentResults.value = (await http.get('/experiment-grades/mine')).data
     } else {
+      const locatingSheet = targetSheetId.value
       const data = (await http.get('/experiment-grades/management', {
         params: {
-          academicTermId: termId.value || undefined,
-          status: statusFilter.value || undefined,
-          collegeId: collegeId.value || undefined,
-          keyword: projectKeyword.value.trim() || undefined,
+          academicTermId: locatingSheet ? undefined : termId.value || undefined,
+          status: locatingSheet ? undefined : statusFilter.value || undefined,
+          collegeId: locatingSheet ? undefined : collegeId.value || undefined,
+          keyword: locatingSheet ? undefined : projectKeyword.value.trim() || undefined,
           page: projectPage.value,
           pageSize: projectPageSize.value,
+          sheetId: locatingSheet,
         },
       })).data
       courses.value = data.items
       courseTotal.value = data.total
       projectPage.value = data.page
       projectPageSize.value = data.pageSize
+      const targetProject = targetSheetId.value && courses.value
+        .flatMap((course: any) => course.projects)
+        .find((project: any) => project.sheet?.id === targetSheetId.value)
+      if (targetProject && openedTargetSheetId.value !== targetSheetId.value) {
+        openedTargetSheetId.value = targetSheetId.value
+        await openDetail(targetProject)
+      }
     }
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
@@ -343,6 +360,13 @@ async function saveRecords(automatic = false) {
 }
 
 watch(() => detail.value?.records, scheduleAutoSave, { deep: true })
+watch(targetSheetId, async () => {
+  openedTargetSheetId.value = undefined
+  if (!isStudent.value) {
+    projectPage.value = 1
+    await load()
+  }
+})
 
 function downloadTemplate() {
   if (!detail.value) return