fix: linting + small fixes
This commit is contained in:
		
							parent
							
								
									5facb54290
								
							
						
					
					
						commit
						0f1009ba43
					
				
					 6 changed files with 150 additions and 169 deletions
				
			
		|  | @ -1,37 +1,37 @@ | |||
| <script setup lang="ts"> | ||||
| import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; | ||||
| import { computed } from "vue"; | ||||
| import type { Language } from "@/data-objects/language.ts"; | ||||
| import {calculateProgress} from "@/utils/assignment-utils.ts"; | ||||
|     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; | ||||
|     import { computed } from "vue"; | ||||
|     import type { Language } from "@/data-objects/language.ts"; | ||||
|     import { calculateProgress } from "@/utils/assignment-utils.ts"; | ||||
| 
 | ||||
| const props = defineProps<{ | ||||
|     groupNumber: number; | ||||
|     learningPath: string; | ||||
|     language: Language; | ||||
|     assignmentId: number; | ||||
|     classId: string; | ||||
| }>(); | ||||
|     const props = defineProps<{ | ||||
|         groupNumber: number; | ||||
|         learningPath: string; | ||||
|         language: Language; | ||||
|         assignmentId: number; | ||||
|         classId: string; | ||||
|     }>(); | ||||
| 
 | ||||
| const query = useGetLearningPathQuery( | ||||
|     () => props.learningPath, | ||||
|     () => props.language, | ||||
|     () => ({ | ||||
|         forGroup: props.groupNumber, | ||||
|         assignmentNo: props.assignmentId, | ||||
|         classId: props.classId, | ||||
|     }), | ||||
| ); | ||||
|     const query = useGetLearningPathQuery( | ||||
|         () => props.learningPath, | ||||
|         () => props.language, | ||||
|         () => ({ | ||||
|             forGroup: props.groupNumber, | ||||
|             assignmentNo: props.assignmentId, | ||||
|             classId: props.classId, | ||||
|         }), | ||||
|     ); | ||||
| 
 | ||||
| const progress = computed(() => { | ||||
|     if (!query.data.value) return 0; | ||||
|     return calculateProgress(query.data.value); | ||||
| }); | ||||
|     const progress = computed(() => { | ||||
|         if (!query.data.value) return 0; | ||||
|         return calculateProgress(query.data.value); | ||||
|     }); | ||||
| 
 | ||||
| const progressColor = computed(() => { | ||||
|     if (progress.value < 50) return "error"; | ||||
|     if (progress.value < 80) return "warning"; | ||||
|     return "success"; | ||||
| }); | ||||
|     const progressColor = computed(() => { | ||||
|         if (progress.value < 50) return "error"; | ||||
|         if (progress.value < 80) return "warning"; | ||||
|         return "success"; | ||||
|     }); | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|  |  | |||
|  | @ -1,27 +1,23 @@ | |||
| <script setup lang="ts"> | ||||
| import type {Language} from "@/data-objects/language.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 { useI18n } from "vue-i18n"; | ||||
|     import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||
|     import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts"; | ||||
|     import type { SubmissionsResponse } from "@/controllers/submissions.ts"; | ||||
| 
 | ||||
| const props = defineProps<{ | ||||
|     lpHruid: string, | ||||
|     group: object; | ||||
|     assignmentId: number; | ||||
|     classId: string; | ||||
|     language: Language; | ||||
|     goToGroupSubmissionLink: (groupNo: number) => void; | ||||
| }>(); | ||||
|     const props = defineProps<{ | ||||
|         group: object; | ||||
|         assignmentId: number; | ||||
|         classId: string; | ||||
|         goToGroupSubmissionLink: (groupNo: number) => void; | ||||
|     }>(); | ||||
| 
 | ||||
| const {t} = useI18n(); | ||||
| // Call the submissions query | ||||
| const submissionsQuery = useAssignmentSubmissionsQuery( | ||||
|     () => props.classId, | ||||
|     () => props.assignmentId, | ||||
|     () => props.group.originalGroupNo,  // Using the classId for both class and group-related data | ||||
|     () => true | ||||
| ); | ||||
|     const { t } = useI18n(); | ||||
|     const submissionsQuery = useAssignmentSubmissionsQuery( | ||||
|         () => props.classId, | ||||
|         () => props.assignmentId, | ||||
|         () => props.group.originalGroupNo, | ||||
|         () => true, | ||||
|     ); | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|  | @ -30,11 +26,12 @@ const submissionsQuery = useAssignmentSubmissionsQuery( | |||
|         v-slot="{ data }: { data: SubmissionsResponse }" | ||||
|     > | ||||
|         <v-btn | ||||
|             :color="(data.submissions.length > 0) ? 'green' : 'red'" | ||||
|             :color="data.submissions.length > 0 ? 'green' : 'red'" | ||||
|             variant="text" | ||||
|             :to="(data.submissions.length > 0) ? goToGroupSubmissionLink(props.group.groupNo) : undefined" | ||||
|             :to="data.submissions.length > 0 ? goToGroupSubmissionLink(props.group.groupNo) : undefined" | ||||
|             :disabled="data.submissions.length === 0" | ||||
|         > | ||||
|             {{ (data.submissions.length > 0) ? t("see-submission") :  t("no-submission")}} | ||||
|             {{ data.submissions.length > 0 ? t("see-submission") : t("no-submission") }} | ||||
|         </v-btn> | ||||
|     </using-query-result> | ||||
| </template> | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts"; | ||||
| import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts"; | ||||
| 
 | ||||
| export function calculateProgress(lp: LearningPath): number { | ||||
|     return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100; | ||||
|  |  | |||
|  | @ -11,7 +11,6 @@ | |||
|     const route = useRoute(); | ||||
|     const classId = ref<string>(route.params.classId as string); | ||||
|     const assignmentId = ref(Number(route.params.id)); | ||||
| 
 | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| <script setup lang="ts"> | ||||
| import {ref, computed, type Ref, watchEffect} from "vue"; | ||||
|     import { ref, computed, watchEffect } from "vue"; | ||||
|     import auth from "@/services/auth/auth-service.ts"; | ||||
|     import { useI18n } from "vue-i18n"; | ||||
|     import { useAssignmentQuery } from "@/queries/assignments.ts"; | ||||
|  | @ -10,8 +10,7 @@ import {ref, computed, type Ref, watchEffect} from "vue"; | |||
|     import { useGroupsQuery } from "@/queries/groups.ts"; | ||||
|     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; | ||||
|     import type { Language } from "@/data-objects/language.ts"; | ||||
|     import type { GroupDTO } from "@dwengo-1/common/interfaces/group"; | ||||
| import {calculateProgress} from "@/utils/assignment-utils.ts"; | ||||
|     import { calculateProgress } from "@/utils/assignment-utils.ts"; | ||||
| 
 | ||||
|     const props = defineProps<{ | ||||
|         classId: string; | ||||
|  | @ -46,13 +45,10 @@ import {calculateProgress} from "@/utils/assignment-utils.ts"; | |||
|                 ...group, | ||||
|                 groupNo: index + 1, // Renumbered index | ||||
|             })) | ||||
|             .find((group) => | ||||
|                 group.members?.some((m) => m.username === username.value), | ||||
|             ); | ||||
|             .find((group) => group.members?.some((m) => m.username === username.value)); | ||||
|     }); | ||||
| 
 | ||||
| 
 | ||||
| watchEffect(() => { | ||||
|     watchEffect(() => { | ||||
|         learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath; | ||||
|         lang.value = assignmentQueryResult.data.value?.assignment?.language as Language; | ||||
|     }); | ||||
|  | @ -147,7 +143,6 @@ watchEffect(() => { | |||
|                             </v-progress-linear> | ||||
|                         </using-query-result> | ||||
|                     </v-card-text> | ||||
| 
 | ||||
|                 </v-card-text> | ||||
| 
 | ||||
|                 <v-card-text class="group-section"> | ||||
|  | @ -171,11 +166,6 @@ watchEffect(() => { | |||
| <style scoped> | ||||
|     @import "@/assets/assignment.css"; | ||||
| 
 | ||||
|     .progress-label { | ||||
|         font-weight: bold; | ||||
|         margin-right: 5px; | ||||
|     } | ||||
| 
 | ||||
|     .progress-bar { | ||||
|         width: 40%; | ||||
|     } | ||||
|  |  | |||
|  | @ -1,105 +1,101 @@ | |||
| <script setup lang="ts"> | ||||
| import {computed, ref, watchEffect} from "vue"; | ||||
| import {useI18n} from "vue-i18n"; | ||||
| import {useAssignmentQuery, useDeleteAssignmentMutation} from "@/queries/assignments.ts"; | ||||
| import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||
| import {useGroupsQuery} from "@/queries/groups.ts"; | ||||
| import {useGetLearningPathQuery} from "@/queries/learning-paths.ts"; | ||||
| import type {Language} from "@/data-objects/language.ts"; | ||||
| import type {AssignmentResponse} from "@/controllers/assignments.ts"; | ||||
| import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group"; | ||||
| import GroupProgressRow from "@/components/GroupProgressRow.vue"; | ||||
| import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; | ||||
|     import { computed, ref, watchEffect } from "vue"; | ||||
|     import { useI18n } from "vue-i18n"; | ||||
|     import { useAssignmentQuery, useDeleteAssignmentMutation } from "@/queries/assignments.ts"; | ||||
|     import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||
|     import { useGroupsQuery } from "@/queries/groups.ts"; | ||||
|     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts"; | ||||
|     import type { Language } from "@/data-objects/language.ts"; | ||||
|     import type { AssignmentResponse } from "@/controllers/assignments.ts"; | ||||
|     import type { GroupDTO, GroupDTOId } from "@dwengo-1/common/interfaces/group"; | ||||
|     import GroupProgressRow from "@/components/GroupProgressRow.vue"; | ||||
|     import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue"; | ||||
| 
 | ||||
| const props = defineProps<{ | ||||
|     classId: string; | ||||
|     assignmentId: number; | ||||
| }>(); | ||||
|     const props = defineProps<{ | ||||
|         classId: string; | ||||
|         assignmentId: number; | ||||
|     }>(); | ||||
| 
 | ||||
| const {t} = useI18n(); | ||||
| const lang = ref(); | ||||
| const groups = ref<GroupDTO[] | GroupDTOId[]>([]); | ||||
| const learningPath = ref(); | ||||
|     const { t } = useI18n(); | ||||
|     const lang = ref(); | ||||
|     const groups = ref<GroupDTO[] | GroupDTOId[]>([]); | ||||
|     const learningPath = ref(); | ||||
| 
 | ||||
| const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId); | ||||
| // Get learning path object | ||||
| const lpQueryResult = useGetLearningPathQuery( | ||||
|     computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""), | ||||
|     computed(() => assignmentQueryResult.data.value?.assignment?.language as Language), | ||||
| ); | ||||
| 
 | ||||
| // Get all the groups withing the assignment | ||||
| const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true); | ||||
| groups.value = groupsQueryResult.data.value?.groups ?? []; | ||||
| 
 | ||||
| watchEffect(() => { | ||||
|     learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath; | ||||
|     lang.value = assignmentQueryResult.data.value?.assignment?.language as Language; | ||||
| }); | ||||
| 
 | ||||
| 
 | ||||
| const allGroups = computed(() => { | ||||
|     const groups = groupsQueryResult.data.value?.groups; | ||||
| 
 | ||||
|     if (!groups) return []; | ||||
| 
 | ||||
|     // Sort by original groupNumber | ||||
|     const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber); | ||||
| 
 | ||||
|     // Assign new sequential numbers starting from 1 | ||||
|     return sortedGroups.map((group, index) => ({ | ||||
|         groupNo: index + 1, // New group number that will be used | ||||
|         name: `${t("group")} ${index + 1}`, | ||||
|         members: group.members, | ||||
|         submitted: false, // TODO: fetch from submission | ||||
|         originalGroupNo: group.groupNumber, // Keep original number if needed | ||||
|     })); | ||||
| }); | ||||
| 
 | ||||
| 
 | ||||
| const dialog = ref(false); | ||||
| const selectedGroup = ref({}); | ||||
| 
 | ||||
| function openGroupDetails(group): void { | ||||
|     selectedGroup.value = group; | ||||
|     dialog.value = true; | ||||
| } | ||||
| 
 | ||||
| const headers = computed(() => [ | ||||
|     {title: t("group"), align: "start", key: "name"}, | ||||
|     {title: t("progress"), align: "center", key: "progress"}, | ||||
|     {title: t("submission"), align: "center", key: "submission"}, | ||||
| ]); | ||||
| 
 | ||||
| const {mutate} = useDeleteAssignmentMutation(); | ||||
| 
 | ||||
| async function deleteAssignment(num: number, clsId: string): Promise<void> { | ||||
|     mutate( | ||||
|         {cid: clsId, an: num}, | ||||
|         { | ||||
|             onSuccess: () => { | ||||
|                 window.location.href = "/user/assignment"; | ||||
|             }, | ||||
|         }, | ||||
|     const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId); | ||||
|     // Get learning path object | ||||
|     const lpQueryResult = useGetLearningPathQuery( | ||||
|         computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""), | ||||
|         computed(() => assignmentQueryResult.data.value?.assignment?.language as Language), | ||||
|     ); | ||||
| } | ||||
| 
 | ||||
| function goToLearningPathLink(): string | undefined { | ||||
|     const assignment = assignmentQueryResult.data.value?.assignment; | ||||
|     const lp = lpQueryResult.data.value; | ||||
|     // Get all the groups withing the assignment | ||||
|     const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true); | ||||
|     groups.value = groupsQueryResult.data.value?.groups ?? []; | ||||
| 
 | ||||
|     if (!assignment || !lp) return undefined; | ||||
|     watchEffect(() => { | ||||
|         learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath; | ||||
|         lang.value = assignmentQueryResult.data.value?.assignment?.language as Language; | ||||
|     }); | ||||
| 
 | ||||
|     return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`; | ||||
| } | ||||
|     const allGroups = computed(() => { | ||||
|         const groups = groupsQueryResult.data.value?.groups; | ||||
| 
 | ||||
| function goToGroupSubmissionLink(groupNo: number): string | undefined { | ||||
|     const lp = lpQueryResult.data.value; | ||||
|     if (!lp) return undefined; | ||||
|         if (!groups) return []; | ||||
| 
 | ||||
|     return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; | ||||
| } | ||||
|         // Sort by original groupNumber | ||||
|         const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber); | ||||
| 
 | ||||
|         // Assign new sequential numbers starting from 1 | ||||
|         return sortedGroups.map((group, index) => ({ | ||||
|             groupNo: index + 1, // New group number that will be used | ||||
|             name: `${t("group")} ${index + 1}`, | ||||
|             members: group.members, | ||||
|             originalGroupNo: group.groupNumber, // Keep original number if needed | ||||
|         })); | ||||
|     }); | ||||
| 
 | ||||
|     const dialog = ref(false); | ||||
|     const selectedGroup = ref({}); | ||||
| 
 | ||||
|     function openGroupDetails(group): void { | ||||
|         selectedGroup.value = group; | ||||
|         dialog.value = true; | ||||
|     } | ||||
| 
 | ||||
|     const headers = computed(() => [ | ||||
|         { title: t("group"), align: "start", key: "name" }, | ||||
|         { title: t("progress"), align: "center", key: "progress" }, | ||||
|         { title: t("submission"), align: "center", key: "submission" }, | ||||
|     ]); | ||||
| 
 | ||||
|     const { mutate } = useDeleteAssignmentMutation(); | ||||
| 
 | ||||
|     async function deleteAssignment(num: number, clsId: string): Promise<void> { | ||||
|         mutate( | ||||
|             { cid: clsId, an: num }, | ||||
|             { | ||||
|                 onSuccess: () => { | ||||
|                     window.location.href = "/user/assignment"; | ||||
|                 }, | ||||
|             }, | ||||
|         ); | ||||
|     } | ||||
| 
 | ||||
|     function goToLearningPathLink(): string | undefined { | ||||
|         const assignment = assignmentQueryResult.data.value?.assignment; | ||||
|         const lp = lpQueryResult.data.value; | ||||
| 
 | ||||
|         if (!assignment || !lp) return undefined; | ||||
| 
 | ||||
|         return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`; | ||||
|     } | ||||
| 
 | ||||
|     function goToGroupSubmissionLink(groupNo: number): string | undefined { | ||||
|         const lp = lpQueryResult.data.value; | ||||
|         if (!lp) return undefined; | ||||
| 
 | ||||
|         return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; | ||||
|     } | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|  | @ -209,7 +205,7 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined { | |||
|                                 > | ||||
|                                     <v-list-item-content> | ||||
|                                         <v-list-item-title | ||||
|                                         >{{ member.firstName + " " + member.lastName }} | ||||
|                                             >{{ member.firstName + " " + member.lastName }} | ||||
|                                         </v-list-item-title> | ||||
|                                     </v-list-item-content> | ||||
|                                 </v-list-item> | ||||
|  | @ -219,9 +215,8 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined { | |||
|                             <v-btn | ||||
|                                 color="primary" | ||||
|                                 @click="dialog = false" | ||||
|                             >Close | ||||
|                             </v-btn | ||||
|                             > | ||||
|                                 >Close | ||||
|                             </v-btn> | ||||
|                         </v-card-actions> | ||||
|                     </v-card> | ||||
|                 </v-dialog> | ||||
|  | @ -242,10 +237,10 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined { | |||
| </template> | ||||
| 
 | ||||
| <style scoped> | ||||
| @import "@/assets/assignment.css"; | ||||
|     @import "@/assets/assignment.css"; | ||||
| 
 | ||||
| .table-scroll { | ||||
|     overflow-x: auto; | ||||
|     -webkit-overflow-scrolling: touch; | ||||
| } | ||||
|     .table-scroll { | ||||
|         overflow-x: auto; | ||||
|         -webkit-overflow-scrolling: touch; | ||||
|     } | ||||
| </style> | ||||
|  |  | |||
		Reference in a new issue
	
	 Joyelle Ndagijimana
						Joyelle Ndagijimana