feat: beschrijving van assignment editen werkt
This commit is contained in:
		
							parent
							
								
									862e72ef4a
								
							
						
					
					
						commit
						92e7bccf5f
					
				
					 2 changed files with 39 additions and 46 deletions
				
			
		|  | @ -49,6 +49,8 @@ | ||||||
|         const { valid } = await form.value.validate(); |         const { valid } = await form.value.validate(); | ||||||
|         if (!valid) return; |         if (!valid) return; | ||||||
| 
 | 
 | ||||||
|  |         console.log(selectedLearningPath.value); | ||||||
|  | 
 | ||||||
|         let lp = selectedLearningPath.value; |         let lp = selectedLearningPath.value; | ||||||
|         if (!lpIsSelected) { |         if (!lpIsSelected) { | ||||||
|             lp = selectedLearningPath.value?.hruid; |             lp = selectedLearningPath.value?.hruid; | ||||||
|  | @ -81,7 +83,7 @@ | ||||||
|                 @submit.prevent="submitFormHandler" |                 @submit.prevent="submitFormHandler" | ||||||
|             > |             > | ||||||
|                 <v-container class="step-container pa-0"> |                 <v-container class="step-container pa-0"> | ||||||
|                     <!-- Titel veld --> |                     <!-- Title field --> | ||||||
|                     <v-text-field |                     <v-text-field | ||||||
|                         v-model="assignmentTitle" |                         v-model="assignmentTitle" | ||||||
|                         :label="t('title')" |                         :label="t('title')" | ||||||
|  |  | ||||||
|  | @ -8,12 +8,11 @@ import { | ||||||
| } from "@/queries/assignments.ts"; | } from "@/queries/assignments.ts"; | ||||||
| import UsingQueryResult from "@/components/UsingQueryResult.vue"; | import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||||
| import {useGroupsQuery} from "@/queries/groups.ts"; | import {useGroupsQuery} from "@/queries/groups.ts"; | ||||||
| import {useGetAllLearningPaths, useGetLearningPathQuery} from "@/queries/learning-paths.ts"; | import {useGetLearningPathQuery} from "@/queries/learning-paths.ts"; | ||||||
| import type {Language} from "@/data-objects/language.ts"; | import type {Language} from "@/data-objects/language.ts"; | ||||||
| import type {AssignmentResponse} from "@/controllers/assignments.ts"; | import type {AssignmentResponse} from "@/controllers/assignments.ts"; | ||||||
| import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group"; | import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group"; | ||||||
| import type {LearningPath} from "@/data-objects/learning-paths/learning-path"; | import {descriptionRules} from "@/utils/assignment-rules.ts"; | ||||||
| import {descriptionRules, learningPathRules} from "@/utils/assignment-rules.ts"; |  | ||||||
| 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/dist/interfaces/assignment.ts"; | ||||||
|  | @ -53,8 +52,15 @@ const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true | ||||||
| groups.value = groupsQueryResult.data.value?.groups ?? []; | groups.value = groupsQueryResult.data.value?.groups ?? []; | ||||||
| 
 | 
 | ||||||
| watchEffect(() => { | watchEffect(() => { | ||||||
|     learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath; |     const assignment = assignmentQueryResult.data.value?.assignment; | ||||||
|     lang.value = assignmentQueryResult.data.value?.assignment?.language as Language; |     if (assignment) { | ||||||
|  |         learningPath.value = assignment.learningPath; | ||||||
|  |         lang.value = assignment.language as Language; | ||||||
|  | 
 | ||||||
|  |         if (lpQueryResult.data.value) { | ||||||
|  |             editingLearningPath.value = lpQueryResult.data.value; | ||||||
|  |         } | ||||||
|  |     } | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const allGroups = computed(() => { | const allGroups = computed(() => { | ||||||
|  | @ -77,11 +83,12 @@ const allGroups = computed(() => { | ||||||
| const dialog = ref(false); | const dialog = ref(false); | ||||||
| const selectedGroup = ref({}); | const selectedGroup = ref({}); | ||||||
| 
 | 
 | ||||||
| function openGroupDetails(group): void { | function openGroupDetails(group: object): void { | ||||||
|     selectedGroup.value = group; |     selectedGroup.value = group; | ||||||
|     dialog.value = true; |     dialog.value = true; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
| async function deleteAssignment(num: number, clsId: string): Promise<void> { | async function deleteAssignment(num: number, clsId: string): Promise<void> { | ||||||
|     const {mutate} = useDeleteAssignmentMutation(); |     const {mutate} = useDeleteAssignmentMutation(); | ||||||
|     mutate( |     mutate( | ||||||
|  | @ -110,13 +117,11 @@ function goToGroupSubmissionLink(groupNo: number): string | undefined { | ||||||
|     return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; |     return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| const learningPathsQueryResults = useGetAllLearningPaths(lang); |  | ||||||
| 
 |  | ||||||
| const {mutate, data, isSuccess} = useUpdateAssignmentMutation(); | const {mutate, data, isSuccess} = useUpdateAssignmentMutation(); | ||||||
| 
 | 
 | ||||||
| watch([isSuccess, data], ([success, newData]) => { | watch([isSuccess, data], async ([success, newData]) => { | ||||||
|     if (success && newData?.assignment) { |     if (success && newData?.assignment) { | ||||||
|         window.location.reload(); |         await assignmentQueryResult.refetch(); | ||||||
|     } |     } | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
|  | @ -126,13 +131,9 @@ async function saveChanges(): Promise<void> { | ||||||
| 
 | 
 | ||||||
|     isEditing.value = false; |     isEditing.value = false; | ||||||
| 
 | 
 | ||||||
|     const lp = learningPath.value; |  | ||||||
| 
 |  | ||||||
|     const assignmentDTO: AssignmentDTO = { |     const assignmentDTO: AssignmentDTO = { | ||||||
|         id: assignmentQueryResult.data.value?.assignment.id, |  | ||||||
|         description: description.value, |         description: description.value, | ||||||
|         learningPath: lp || "", |         //deadline: new Date(),TODO: deadline aanpassen | ||||||
|         deadline: new Date(), |  | ||||||
|     }; |     }; | ||||||
| 
 | 
 | ||||||
|     mutate({ |     mutate({ | ||||||
|  | @ -141,6 +142,18 @@ async function saveChanges(): Promise<void> { | ||||||
|         data: assignmentDTO, |         data: assignmentDTO, | ||||||
|     }); |     }); | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> { | ||||||
|  |     const assignmentDTO: AssignmentDTO = { | ||||||
|  |         groups: updatedGroups, | ||||||
|  |     }; | ||||||
|  |     mutate({ | ||||||
|  |         cid: assignmentQueryResult.data.value?.assignment.within, | ||||||
|  |         an: assignmentQueryResult.data.value?.assignment.id, | ||||||
|  |         data: assignmentDTO, | ||||||
|  |     }); | ||||||
|  | } | ||||||
|  | 
 | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <template> | <template> | ||||||
|  | @ -240,10 +253,7 @@ async function saveChanges(): Promise<void> { | ||||||
|                                 <v-card-title class="text-h4 assignmentTopTitle" |                                 <v-card-title class="text-h4 assignmentTopTitle" | ||||||
|                                 >{{ assignmentResponse.data.assignment.title }} |                                 >{{ assignmentResponse.data.assignment.title }} | ||||||
|                                 </v-card-title> |                                 </v-card-title> | ||||||
|                                 <v-card-subtitle |                                 <v-card-subtitle class="subtitle-section"> | ||||||
|                                     v-if="!isEditing" |  | ||||||
|                                     class="subtitle-section" |  | ||||||
|                                 > |  | ||||||
|                                     <using-query-result |                                     <using-query-result | ||||||
|                                         :query-result="lpQueryResult" |                                         :query-result="lpQueryResult" | ||||||
|                                         v-slot="{ data: lpData }" |                                         v-slot="{ data: lpData }" | ||||||
|  | @ -256,34 +266,14 @@ async function saveChanges(): Promise<void> { | ||||||
|                                         > |                                         > | ||||||
|                                             {{ t("learning-path") }} |                                             {{ t("learning-path") }} | ||||||
|                                         </v-btn> |                                         </v-btn> | ||||||
|  |                                         <v-alert | ||||||
|  |                                             v-else | ||||||
|  |                                             type="info" | ||||||
|  |                                         > | ||||||
|  |                                             {{ t("no-learning-path-selected") }} | ||||||
|  |                                         </v-alert> | ||||||
|                                     </using-query-result> |                                     </using-query-result> | ||||||
|                                 </v-card-subtitle> |                                 </v-card-subtitle> | ||||||
|                                 <using-query-result |  | ||||||
|                                     v-else |  | ||||||
|                                     :query-result="learningPathsQueryResults" |  | ||||||
|                                     v-slot="{ data }: { data: LearningPath[] }" |  | ||||||
|                                 > |  | ||||||
|                                     <v-card-text> |  | ||||||
|                                         <v-combobox |  | ||||||
|                                             v-model="editingLearningPath" |  | ||||||
|                                             :items="data" |  | ||||||
|                                             :label="t('choose-lp')" |  | ||||||
|                                             :rules="learningPathRules" |  | ||||||
|                                             variant="outlined" |  | ||||||
|                                             clearable |  | ||||||
|                                             hide-details |  | ||||||
|                                             density="compact" |  | ||||||
|                                             append-inner-icon="mdi-magnify" |  | ||||||
|                                             item-title="title" |  | ||||||
|                                             item-value="hruid" |  | ||||||
|                                             required |  | ||||||
|                                             :filter=" |  | ||||||
|                                                 (item, query: string) => |  | ||||||
|                                                     item.title.toLowerCase().includes(query.toLowerCase()) |  | ||||||
|                                             " |  | ||||||
|                                         ></v-combobox> |  | ||||||
|                                     </v-card-text> |  | ||||||
|                                 </using-query-result> |  | ||||||
| 
 | 
 | ||||||
|                                 <v-card-text |                                 <v-card-text | ||||||
|                                     v-if="!isEditing" |                                     v-if="!isEditing" | ||||||
|  | @ -422,6 +412,7 @@ async function saveChanges(): Promise<void> { | ||||||
|                                 :groups="allGroups" |                                 :groups="allGroups" | ||||||
|                                 :class-id="props.classId" |                                 :class-id="props.classId" | ||||||
|                                 :assignment-id="props.assignmentId" |                                 :assignment-id="props.assignmentId" | ||||||
|  |                                 @groupsUpdated="handleGroupsUpdated" | ||||||
|                                 @close="editGroups = false" |                                 @close="editGroups = false" | ||||||
|                             /> |                             /> | ||||||
|                         </v-card-text> |                         </v-card-text> | ||||||
|  |  | ||||||
		Reference in a new issue
	
	 Joyelle Ndagijimana
						Joyelle Ndagijimana