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