feat: assignment grading

frontend/src/pages/AssignmentSubmissionList.vue

@@ -4,19 +4,23 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
-	<div
-		v-if="submissions.loading || submissions.data?.length"
-		class="md:w-3/4 md:mx-auto py-5 mx-5"
-	>
-		<div class="grid grid-cols-4 gap-5 mb-5">
+	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="grid grid-cols-3 gap-5 mb-5">
 			<Link
 				doctype="LMS Assignment"
 				v-model="assignmentID"
 				:placeholder="__('Assignment')"
 			/>
 			<Link doctype="User" v-model="member" :placeholder="__('Member')" />
+			<FormControl
+				v-model="status"
+				type="select"
+				:options="statusOptions"
+				:placeholder="__('Status')"
+			/>
 		</div>
 		<ListView
+			v-if="submissions.loading || submissions.data?.length"
 			:columns="submissionColumns"
 			:rows="submissions.data"
 			rowKey="name"
@@ -54,22 +58,18 @@
 				</router-link>
 			</ListRows>
 		</ListView>
-	</div>
-	<div
-		v-else
-		class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
-	>
-		<Pencil class="size-8 mx-auto stroke-1 text-gray-500" />
-		<div class="text-xl font-medium">
-			{{ __('No submissions') }}
+		<div
+			v-else
+			class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+		>
+			<Pencil class="size-8 mx-auto stroke-1 text-gray-500" />
+			<div class="text-xl font-medium">
+				{{ __('No submissions') }}
+			</div>
+			<div class="leading-5">
+				{{ __('There are no submissions for this assignment.') }}
+			</div>
 		</div>
-		<!-- <div class="leading-5">
-			{{
-				__(
-					'There are no submissions for the assignment {0}.',
-				).format(assignmentTitle.data?.title)
-			}}
-		</div> -->
 	</div>
 </template>
 <script setup>
@@ -77,7 +77,7 @@ import {
 	Badge,
 	Breadcrumbs,
 	createListResource,
-	createResource,
+	FormControl,
 	ListView,
 	ListHeader,
 	ListHeaderItem,
@@ -95,33 +95,34 @@ const dayjs = inject('$dayjs')
 const router = useRouter()
 const assignmentID = ref('')
 const member = ref('')
+const status = ref('')
 
 onMounted(() => {
 	if (!user.data?.is_instructor && !user.data?.is_moderator) {
 		router.push({ name: 'Courses' })
 	}
-
-	assignmentID.value = router.currentRoute.value.params.assignmentID
-	submissions.reload()
+	assignmentID.value = router.currentRoute.value.query.assignmentID
+	member.value = router.currentRoute.value.query.member
+	status.value = router.currentRoute.value.query.status
+	reloadSubmissions()
 })
 
 const getAssignmentFilters = () => {
 	let filters = {}
 	if (assignmentID.value) {
-		console.log(assignmentID.value)
 		filters.assignment = assignmentID.value
 	}
 	if (member.value) {
-		console.log(member.value)
 		filters.member = member.value
 	}
-	console.log(filters)
+	if (status.value) {
+		filters.status = status.value
+	}
 	return filters
 }
 
 const submissions = createListResource({
 	doctype: 'LMS Assignment Submission',
-	filters: getAssignmentFilters(),
 	fields: [
 		'name',
 		'assignment',
@@ -141,26 +142,31 @@ const submissions = createListResource({
 	},
 })
 
-watch([assignmentID, member], () => {
-	console.log('watch called')
-	submissions.reload()
+// watch changes in assignmentID, member, and status and if changes in any then reload submissions. Also update the url query params for the same
+watch([assignmentID, member, status], () => {
+	router.push({
+		query: {
+			assignmentID: assignmentID.value,
+			member: member.value,
+			status: status.value,
+		},
+	})
+	reloadSubmissions()
 })
 
-/* const assignmentTitle = createResource({
-    url: "frappe.client.get_value",
-    params: {
-        doctype: "LMS Assignment",
-        fieldname: "title",
-        filters: { name: props.assignmentID },
-    },
-}) */
+const reloadSubmissions = () => {
+	submissions.update({
+		filters: getAssignmentFilters(),
+	})
+	submissions.reload()
+}
 
 const submissionColumns = computed(() => {
 	return [
 		{
 			label: 'Member',
 			key: 'member_name',
-			width: 2,
+			width: 1,
 		},
 		{
 			label: 'Assignment',
@@ -182,6 +188,15 @@ const submissionColumns = computed(() => {
 	]
 })
 
+const statusOptions = computed(() => {
+	return [
+		{ label: '', value: '' },
+		{ label: 'Pass', value: 'Pass' },
+		{ label: 'Fail', value: 'Fail' },
+		{ label: 'Not Graded', value: 'Not Graded' },
+	]
+})
+
 const getStatusTheme = (status) => {
 	if (status === 'Pass') {
 		return 'green'