From 7f768e81f45afa9c6edc00ce83d0ed0211247cc4 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 26 Dec 2024 18:16:46 +0530
Subject: [PATCH] feat: assignment grading

---
 frontend/src/components/Assessments.vue       |  18 +-
 frontend/src/components/Controls/Link.vue     |  27 +-
 frontend/src/pages/AssignmentForm.vue         |   2 +-
 frontend/src/pages/AssignmentSubmission.vue   | 296 ++++++++++--------
 .../src/pages/AssignmentSubmissionList.vue    |  95 +++---
 frontend/src/pages/Assignments.vue            | 115 +++++--
 6 files changed, 342 insertions(+), 211 deletions(-)

diff --git a/frontend/src/components/Assessments.vue b/frontend/src/components/Assessments.vue
index db293da1..ee528636 100644
--- a/frontend/src/components/Assessments.vue
+++ b/frontend/src/components/Assessments.vue
@@ -41,6 +41,11 @@
 								<div v-if="column.key == 'assessment_type'">
 									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
 								</div>
+								<div v-else-if="column.key == 'status'">
+									<Badge :theme="getStatusTheme(row[column.key])">
+										{{ row[column.key] }}
+									</Badge>
+								</div>
 								<div v-else>
 									{{ row[column.key] }}
 								</div>
@@ -83,6 +88,7 @@ import {
 	ListSelectBanner,
 	createResource,
 	Button,
+	Badge,
 } from 'frappe-ui'
 import { inject, ref } from 'vue'
 import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
@@ -180,7 +186,7 @@ const getAssessmentColumns = () => {
 		{
 			label: 'Assessment',
 			key: 'title',
-			width: '30rem',
+			width: '25rem',
 		},
 		{
 			label: 'Type',
@@ -199,4 +205,14 @@ const getAssessmentColumns = () => {
 	}
 	return columns
 }
+
+const getStatusTheme = (status) => {
+	if (status === 'Pass') {
+		return 'green'
+	} else if (status === 'Not Graded') {
+		return 'orange'
+	} else {
+		return 'red'
+	}
+}
 </script>
diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 6c2de9a5..b25523cb 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -29,8 +29,8 @@
 				<slot name="item-label" v-bind="{ active, selected, option }" />
 			</template>
 
-			<template v-if="attrs.onCreate" #footer="{ value, close }">
-				<div>
+			<template #footer="{ value, close }">
+				<div v-if="attrs.onCreate">
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
@@ -42,6 +42,18 @@
 						</template>
 					</Button>
 				</div>
+				<div>
+					<Button
+						variant="ghost"
+						class="w-full !justify-start"
+						:label="__('Clear')"
+						@click="() => clearValue(close)"
+					>
+						<template #prefix>
+							<X class="h-4 w-4 stroke-1.5" />
+						</template>
+					</Button>
+				</div>
 			</template>
 		</Autocomplete>
 		<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
@@ -52,7 +64,7 @@
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { Plus, X } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
 
 const props = defineProps({
@@ -75,9 +87,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
-
 const attrs = useAttrs()
-
 const valuePropPassed = computed(() => 'value' in attrs)
 
 const value = computed({
@@ -131,7 +141,7 @@ const options = createResource({
 	},
 })
 
-function reload(val) {
+const reload = (val) => {
 	options.update({
 		params: {
 			txt: val,
@@ -142,6 +152,11 @@ function reload(val) {
 	options.reload()
 }
 
+const clearValue = (close) => {
+	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
+	close()
+}
+
 const labelClasses = computed(() => {
 	return [
 		{
diff --git a/frontend/src/pages/AssignmentForm.vue b/frontend/src/pages/AssignmentForm.vue
index 8bdf057d..39e761c2 100644
--- a/frontend/src/pages/AssignmentForm.vue
+++ b/frontend/src/pages/AssignmentForm.vue
@@ -8,7 +8,7 @@
 				v-if="assignment.doc?.name"
 				:to="{
 					name: 'AssignmentSubmissionList',
-					params: {
+					query: {
 						assignmentID: assignment.doc.name,
 					},
 				}"
diff --git a/frontend/src/pages/AssignmentSubmission.vue b/frontend/src/pages/AssignmentSubmission.vue
index f55fe840..357fdede 100644
--- a/frontend/src/pages/AssignmentSubmission.vue
+++ b/frontend/src/pages/AssignmentSubmission.vue
@@ -3,110 +3,128 @@
 		class="flex justify-between sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<Button variant="solid" @click="submitAssignment()">
-			{{ __('Save') }}
-		</Button>
-	</header>
-	<div class="container py-5">
-		<div
-			v-if="submissionResource.data"
-			class="bg-blue-100 p-2 rounded-md leading-5 text-sm mb-4"
-		>
-			{{ __("You've successfully submitted the assignment.") }}
-			{{
-				__(
-					"Once the moderator grades your submission, you'll find the details here."
-				)
-			}}
-			{{ __('Feel free to make edits to your submission if needed.') }}
+		<div class="flex items-center space-x-2">
+			<Badge
+				v-if="submissionResource.doc?.status"
+				:theme="statusTheme"
+				size="lg"
+			>
+				{{ submissionResource.doc.status }}
+			</Badge>
+			<Button variant="solid" @click="submitAssignment()">
+				{{ __('Save') }}
+			</Button>
 		</div>
-		<div v-if="assignment.data">
-			<div>
-				<div class="text-xl font-semibold hidden">
+	</header>
+	<div class="p-5 overflow-hidden h-[calc(100vh-3.2rem)]">
+		<div v-if="assignment.data" class="grid grid-cols-2 gap-5">
+			<div class="p-5 border rounded-md overflow-y-auto h-[calc(100vh-6rem)]">
+				<div class="text-sm text-gray-600 font-medium mb-2">
 					{{ __('Question') }}
 				</div>
-				<div class="text-sm mt-1 hidden">
-					{{
-						__('Read the question carefully before attempting the assignment.')
-					}}
-				</div>
 				<div
 					v-html="assignment.data.question"
 					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
 				></div>
 			</div>
-			<div class="">
-				<div class="text-xl font-semibold mt-10">
-					{{ __('Submission') }}
-				</div>
-				<div v-if="showUploader()">
-					<div class="text-sm mt-1 mb-4">
-						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
+
+			<div class="flex flex-col">
+				<div class="p-5 border rounded-md">
+					<div class="text-sm text-gray-600 font-medium mb-4">
+						{{ __('Submission') }}
 					</div>
-					<FileUploader
-						v-if="!submissionFile"
-						:fileTypes="getType()"
-						:validateFile="validateFile"
-						@success="(file) => saveSubmission(file)"
+					<div
+						v-if="submissionName != 'new'"
+						class="bg-blue-100 p-2 rounded-md leading-5 text-sm mb-4"
 					>
-						<template
-							#default="{
-								file,
-								uploading,
-								progress,
-								uploaded,
-								message,
-								error,
-								total,
-								success,
-								openFileSelector,
-							}"
+						{{ __("You've successfully submitted the assignment.") }}
+						{{
+							__(
+								"Once the moderator grades your submission, you'll find the details here."
+							)
+						}}
+						{{ __('Feel free to make edits to your submission if needed.') }}
+					</div>
+					<div v-if="showUploader()">
+						<div class="text-xs text-gray-600 mt-1 mb-2">
+							{{
+								__('Add your assignment as {0}').format(assignment.data.type)
+							}}
+						</div>
+						<FileUploader
+							v-if="!submissionFile"
+							:fileTypes="getType()"
+							:validateFile="validateFile"
+							@success="(file) => saveSubmission(file)"
 						>
-							<Button @click="openFileSelector" :loading="uploading">
-								{{
-									uploading
-										? __('Uploading {0}%').format(progress)
-										: __('Upload File')
-								}}
-							</Button>
-						</template>
-					</FileUploader>
-					<div v-else>
-						<div class="flex items-center">
-							<div class="border rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							<template #default="{ uploading, progress, openFileSelector }">
+								<Button @click="openFileSelector" :loading="uploading">
+									{{
+										uploading
+											? __('Uploading {0}%').format(progress)
+											: __('Upload File')
+									}}
+								</Button>
+							</template>
+						</FileUploader>
+						<div v-else>
+							<div class="flex items-center">
+								<div class="border rounded-md p-2 mr-2">
+									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+								</div>
+								<div class="flex flex-col">
+									<span>
+										{{ submissionFile.file_name }}
+									</span>
+									<span class="text-sm text-gray-500 mt-1">
+										{{ getFileSize(submissionFile.file_size) }}
+									</span>
+								</div>
+								<X
+									v-if="submissionResource.doc.owner == user.data?.name"
+									@click="removeSubmission()"
+									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								/>
 							</div>
-							<div class="flex flex-col">
-								<span>
-									{{ submissionFile.file_name }}
-								</span>
-								<span class="text-sm text-gray-500 mt-1">
-									{{ getFileSize(submissionFile.file_size) }}
-								</span>
-							</div>
-							<X
-								@click="removeSubmission()"
-								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
-							/>
 						</div>
 					</div>
-				</div>
-				<div v-else-if="assignment.data.type == 'URL'">
-					<div class="text-sm mb-4">
-						{{ __('Enter a URL') }}
+					<div v-else-if="assignment.data.type == 'URL'" class="mt-5">
+						<div class="text-xs text-gray-600 mb-1">
+							{{ __('Enter a URL') }}
+						</div>
+						<FormControl v-model="answer" />
 					</div>
-					<FormControl v-model="answer" />
-				</div>
-				<div v-else>
-					<div class="text-sm mb-4">
-						{{ __('Write your answer here') }}
+					<div v-else>
+						<div class="text-sm mb-4">
+							{{ __('Write your answer here') }}
+						</div>
+						<TextEditor
+							:content="answer"
+							@change="(val) => (answer = val)"
+							:editable="true"
+							:fixedMenu="true"
+							editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+						/>
 					</div>
-					<TextEditor
-						:content="answer"
-						@change="(val) => (answer = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+				</div>
+				<!-- Grading -->
+				<div
+					v-if="canGradeSubmission"
+					class="p-3 border rounded-md mt-5 space-y-4"
+				>
+					<div class="text-sm text-gray-600 font-medium mb-5">
+						{{ __('Grading') }}
+					</div>
+					<FormControl
+						v-model="submissionResource.doc.status"
+						:label="__('Grade')"
+						type="select"
+						:options="submissionStatusOptions"
+					/>
+					<FormControl
+						v-model="submissionResource.doc.comments"
+						:label="__('Comments')"
+						type="textarea"
 					/>
 				</div>
 			</div>
@@ -119,8 +137,10 @@ import {
 	createResource,
 	FileUploader,
 	Button,
+	Badge,
 	FormControl,
 	TextEditor,
+	createDocumentResource,
 } from 'frappe-ui'
 import { FileText, X } from 'lucide-vue-next'
 import { computed, inject, onMounted, ref } from 'vue'
@@ -143,6 +163,12 @@ const props = defineProps({
 	},
 })
 
+onMounted(() => {
+	if (!user.data) {
+		window.location.href = '/login'
+	}
+})
+
 const assignment = createResource({
 	url: 'frappe.client.get',
 	params: {
@@ -150,29 +176,17 @@ const assignment = createResource({
 		name: props.assignmentID,
 	},
 	auto: true,
+	onSuccess(data) {
+		if (props.submissionName != 'new') {
+			submissionResource.reload()
+		}
+	},
 })
 
 const showUploader = () => {
 	return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
 }
 
-const updateSubmission = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		let fieldname = {}
-		if (showUploader()) {
-			fieldname.assignment_attachment = submissionFile.value.file_url
-		} else {
-			fieldname.answer = answer.value
-		}
-		return {
-			doctype: 'LMS Assignment Submission',
-			name: props.submissionName,
-			fieldname: fieldname,
-		}
-	},
-})
-
 const imageResource = createResource({
 	url: 'lms.lms.api.get_file_info',
 	makeParams(values) {
@@ -205,43 +219,25 @@ const newSubmission = createResource({
 	},
 })
 
-const submissionResource = createResource({
-	url: 'frappe.client.get_value',
-	params: {
-		doctype: 'LMS Assignment Submission',
-		fieldname: showUploader() ? 'assignment_attachment' : 'answer',
-		filters: {
-			name: props.submissionName,
-		},
-	},
+const submissionResource = createDocumentResource({
+	doctype: 'LMS Assignment Submission',
+	name: props.submissionName,
+	auto: false,
 	onSuccess(data) {
-		if (data.assignment_attachment)
+		if (data.assignment_attachment) {
 			imageResource.reload({ image: data.assignment_attachment })
-		if (data.answer) answer.value = data.answer
+		}
 	},
 })
-onMounted(() => {
-	if (!user.data) {
-		window.location.href = '/login'
-	}
-	if (props.submissionName != 'new') {
-		submissionResource.reload()
-	}
-})
 
 const submitAssignment = () => {
 	if (props.submissionName != 'new') {
-		updateSubmission.submit(
-			{},
-			{
-				onSuccess(data) {
-					showToast('Success', 'Submission updated successfully.', 'check')
-				},
-				onError(err) {
-					showToast('Error', err.messages?.[0] || err, 'x')
-				},
-			}
-		)
+		let evaluator =
+			submissionResource.doc.owner != user.data?.name ? user.data?.name : null
+		submissionResource.setValue.submit({
+			...submissionResource.doc,
+			evaluator: evaluator,
+		})
 	} else {
 		addNewSubmission()
 	}
@@ -271,7 +267,8 @@ const addNewSubmission = () => {
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
-			label: 'Assignment',
+			label: 'Submissions',
+			route: { name: 'AssignmentSubmissionList' },
 		},
 		{
 			label: assignment.data?.title,
@@ -325,4 +322,31 @@ const validateFile = (file) => {
 const removeSubmission = () => {
 	submissionFile.value = null
 }
+
+const canGradeSubmission = computed(() => {
+	return (
+		(user.data?.is_moderator ||
+			user.data?.is_evaluator ||
+			user.data?.is_instructor) &&
+		props.submissionName != 'new'
+	)
+})
+
+const submissionStatusOptions = computed(() => {
+	return [
+		{ label: 'Not Graded', value: 'Not Graded' },
+		{ label: 'Pass', value: 'Pass' },
+		{ label: 'Fail', value: 'Fail' },
+	]
+})
+
+const statusTheme = computed(() => {
+	if (submissionResource.doc.status == 'Pass') {
+		return 'green'
+	} else if (submissionResource.doc.status == 'Not Graded') {
+		return 'orange'
+	} else {
+		return 'red'
+	}
+})
 </script>
diff --git a/frontend/src/pages/AssignmentSubmissionList.vue b/frontend/src/pages/AssignmentSubmissionList.vue
index 4aa11bfa..1575070b 100644
--- a/frontend/src/pages/AssignmentSubmissionList.vue
+++ b/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'
diff --git a/frontend/src/pages/Assignments.vue b/frontend/src/pages/Assignments.vue
index 098607bb..ecba8bd0 100644
--- a/frontend/src/pages/Assignments.vue
+++ b/frontend/src/pages/Assignments.vue
@@ -20,8 +20,18 @@
 		</router-link>
 	</header>
 
-	<div v-if="assignments.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
+	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
+		<div class="grid grid-cols-3 gap-5 mb-5">
+			<FormControl v-model="titleFilter" :placeholder="__('Search by title')" />
+			<FormControl
+				v-model="typeFilter"
+				type="select"
+				:options="assignmentTypes"
+				:placeholder="__('Type')"
+			/>
+		</div>
 		<ListView
+			v-if="assignments.data?.length"
 			:columns="assignmentColumns"
 			:rows="assignments.data"
 			row-key="name"
@@ -37,50 +47,91 @@
 			}"
 		>
 		</ListView>
-		<div class="flex justify-center my-5">
-			<Button v-if="assignments.hasNextPage" @click="assignments.next()">
+		<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-10 mx-auto stroke-1 text-gray-500" />
+			<div class="text-xl font-medium">
+				{{ __('No assignments found') }}
+			</div>
+			<div class="leading-5">
+				{{
+					__(
+						'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
+					)
+				}}
+			</div>
+		</div>
+		<div v-if="assignments.hasNextPage" class="flex justify-center my-5">
+			<Button @click="assignments.next()">
 				{{ __('Load More') }}
 			</Button>
 		</div>
 	</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-10 mx-auto stroke-1 text-gray-500" />
-		<div class="text-xl font-medium">
-			{{ __('No assignments found') }}
-		</div>
-		<div class="leading-5">
-			{{
-				__(
-					'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
-				)
-			}}
-		</div>
-	</div>
 </template>
 <script setup>
-import { Breadcrumbs, Button, createListResource, ListView } from 'frappe-ui'
-import { computed, inject } from 'vue'
+import {
+	Breadcrumbs,
+	Button,
+	createListResource,
+	FormControl,
+	ListView,
+} from 'frappe-ui'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { Plus, Pencil } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
+const titleFilter = ref('')
+const typeFilter = ref('')
+const router = useRouter()
+
+onMounted(() => {
+	if (!user.data?.is_moderator && !user.data?.is_instructor) {
+		router.push({ name: 'Courses' })
+	}
+
+	titleFilter.value = router.currentRoute.value.query.title
+	typeFilter.value = router.currentRoute.value.query.type
+})
+
+watch([titleFilter, typeFilter], () => {
+	router.push({
+		query: {
+			title: titleFilter.value,
+			type: typeFilter.value,
+		},
+	})
+	reloadAssignments()
+})
+
+const reloadAssignments = () => {
+	assignments.update({
+		filters: assignmentFilter.value,
+	})
+	assignments.reload()
+}
 
 const assignmentFilter = computed(() => {
-	if (user.data?.is_moderator) return {}
-	return {
-		owner: user.data?.name,
+	let filters = {}
+	if (titleFilter.value) {
+		filters.title = ['like', `%${titleFilter.value}%`]
 	}
+	if (typeFilter.value) {
+		filters.type = typeFilter.value
+	}
+	if (!user.data?.is_moderator) {
+		filters.owner = user.data?.email
+	}
+	return filters
 })
 
 const assignments = createListResource({
 	doctype: 'LMS Assignment',
 	fields: ['name', 'title', 'type', 'creation'],
-	filters: assignmentFilter,
 	orderBy: 'modified desc',
-	auto: true,
 	cache: ['assignments'],
 	transform(data) {
 		return data.map((row) => {
@@ -103,7 +154,7 @@ const assignmentColumns = computed(() => {
 			label: __('Type'),
 			key: 'type',
 			width: 1,
-			align: 'center',
+			align: 'left',
 		},
 		{
 			label: __('Created'),
@@ -114,6 +165,16 @@ const assignmentColumns = computed(() => {
 	]
 })
 
+const assignmentTypes = computed(() => {
+	let types = ['', 'Document', 'Image', 'PDF', 'URL', 'Text']
+	return types.map((type) => {
+		return {
+			label: __(type),
+			value: type,
+		}
+	})
+})
+
 const breadcrumbs = computed(() => [
 	{
 		label: 'Assignments',