fix(frontend): Submission status per groep
This commit is contained in:
		
							parent
							
								
									fa0e45ea48
								
							
						
					
					
						commit
						c9406f52aa
					
				
					 4 changed files with 34 additions and 21 deletions
				
			
		|  | @ -1,11 +1,13 @@ | |||
| <script setup lang="ts"> | ||||
|     import { useI18n } from "vue-i18n"; | ||||
|     import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||
|     import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts"; | ||||
|     import type { SubmissionsResponse } from "@/controllers/submissions.ts"; | ||||
|     import { watch } from "vue"; | ||||
|     import { ref, watch } from 'vue'; | ||||
|     import { useGetLearningPathQuery } from '@/queries/learning-paths.ts'; | ||||
| 
 | ||||
|     const props = defineProps<{ | ||||
|         learningPathHruid: string; | ||||
|         language: string, | ||||
|         group: object; | ||||
|         assignmentId: number; | ||||
|         classId: string; | ||||
|  | @ -15,18 +17,24 @@ | |||
|     const emit = defineEmits<(e: "update:hasSubmission", hasSubmission: boolean) => void>(); | ||||
| 
 | ||||
|     const { t } = useI18n(); | ||||
|     const submissionsQuery = useAssignmentSubmissionsQuery( | ||||
|         () => props.classId, | ||||
|         () => props.assignmentId, | ||||
|         () => props.group.originalGroupNo, | ||||
|         () => true, | ||||
|     const hasMadeProgress = ref(false); | ||||
| 
 | ||||
|     const getLearningPathQuery = useGetLearningPathQuery( | ||||
|         () => props.learningPathHruid, | ||||
|         () => props.language, | ||||
|         () => ({ | ||||
|             forGroup: props.group.originalGroupNo, | ||||
|             assignmentNo: props.assignmentId, | ||||
|             classId: props.classId, | ||||
|         }), | ||||
|     ); | ||||
| 
 | ||||
|     watch( | ||||
|         () => submissionsQuery.data.value, | ||||
|         (data) => { | ||||
|             if (data) { | ||||
|                 emit("update:hasSubmission", data.submissions.length > 0); | ||||
|         () => getLearningPathQuery.data.value, | ||||
|         (learningPath) => { | ||||
|             if (learningPath) { | ||||
|                 hasMadeProgress.value = learningPath.amountOfNodes === learningPath.amountOfNodesLeft; | ||||
|                 emit("update:hasSubmission", hasMadeProgress.value); | ||||
|             } | ||||
|         }, | ||||
|         { immediate: true }, | ||||
|  | @ -35,16 +43,16 @@ | |||
| 
 | ||||
| <template> | ||||
|     <using-query-result | ||||
|         :query-result="submissionsQuery" | ||||
|         :query-result="getLearningPathQuery" | ||||
|         v-slot="{ data }: { data: SubmissionsResponse }" | ||||
|     > | ||||
|         <v-btn | ||||
|             :color="data?.submissions?.length > 0 ? 'green' : 'red'" | ||||
|             :color="hasMadeProgress ? 'green' : 'red'" | ||||
|             variant="text" | ||||
|             :to="data.submissions.length > 0 ? goToGroupSubmissionLink(props.group.originalGroupNo) : undefined" | ||||
|             :disabled="data.submissions.length === 0" | ||||
|             :to="hasMadeProgress ? goToGroupSubmissionLink(props.group.originalGroupNo) : undefined" | ||||
|             :disabled="!hasMadeProgress" | ||||
|         > | ||||
|             {{ data.submissions.length > 0 ? t("submission") : t("noSubmissionsYet") }} | ||||
|             {{ hasMadeProgress ? t("submission") : t("noSubmissionsYet") }} | ||||
|         </v-btn> | ||||
|     </using-query-result> | ||||
| </template> | ||||
|  |  | |||
|  | @ -48,4 +48,8 @@ export class AssignmentController extends BaseController { | |||
|     async getGroups(assignmentNumber: number, full = true): Promise<GroupsResponse> { | ||||
|         return this.get<GroupsResponse>(`/${assignmentNumber}/groups`, { full }); | ||||
|     } | ||||
| 
 | ||||
|     async getSubmissionsByGroup(assignmentNumber: number, groupNumber: number, full = true): Promise<SubmissionsResponse> { | ||||
|         return this.get<SubmissionsResponse>(`/${assignmentNumber}/groups/${groupNumber}/submissions`, { full }); | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -181,7 +181,7 @@ export function useAssignmentSubmissionsQuery( | |||
| 
 | ||||
|     return useQuery({ | ||||
|         queryKey: computed(() => assignmentSubmissionsQueryKey(cid!, an!, f)), | ||||
|         queryFn: async () => new AssignmentController(cid!).getSubmissions(an!, f), | ||||
|         queryFn: async () => new AssignmentController(cid!).getSubmissionsByGroup(an!, gn!, f), | ||||
|         enabled: () => checkEnabled(cid, an, gn), | ||||
|     }); | ||||
| } | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <script setup lang="ts"> | ||||
|     import { computed, ref, watch, watchEffect } from "vue"; | ||||
|     import { computed, ref, watchEffect } from "vue"; | ||||
|     import { useI18n } from "vue-i18n"; | ||||
|     import { | ||||
|         useAssignmentQuery, | ||||
|  | @ -14,7 +14,7 @@ | |||
|     import type { GroupDTO, GroupDTOId } from "@dwengo-1/common/interfaces/group"; | ||||
|     import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; | ||||
|     import GroupProgressRow from "@/components/GroupProgressRow.vue"; | ||||
|     import type { AssignmentDTO } from "@dwengo-1/common/dist/interfaces/assignment.ts"; | ||||
|     import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment"; | ||||
|     import GroupSelector from "@/components/assignments/GroupSelector.vue"; | ||||
|     import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue"; | ||||
| 
 | ||||
|  | @ -132,7 +132,7 @@ | |||
| 
 | ||||
|     const updateAssignmentMutate = useUpdateAssignmentMutation(); | ||||
| 
 | ||||
|     function updateAssignment(assignmentDTO) { | ||||
|     function updateAssignment(assignmentDTO): void { | ||||
|         updateAssignmentMutate.mutate( | ||||
|             { | ||||
|                 cid: assignmentQueryResult.data.value?.assignment.within, | ||||
|  | @ -408,10 +408,11 @@ | |||
| 
 | ||||
|                                         <td> | ||||
|                                             <GroupSubmissionStatus | ||||
|                                                 :learning-path-hruid="learningPath.hruid" | ||||
|                                                 :language="lang" | ||||
|                                                 :group="g" | ||||
|                                                 :assignment-id="assignmentId" | ||||
|                                                 :class-id="classId" | ||||
|                                                 :language="lang" | ||||
|                                                 :go-to-group-submission-link="goToGroupSubmissionLink" | ||||
|                                                 @update:hasSubmission=" | ||||
|                                                     (hasSubmission) => (hasSubmissions = hasSubmission) | ||||
|  |  | |||
		Reference in a new issue