feat: add questions to quiz

frontend/src/pages/QuizCreation.vue

@@ -3,6 +3,9 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
+		<Button variant="solid" @click="submitQuiz()">
+			{{ __('Save') }}
+		</Button>
 	</header>
 	<div class="w-3/4 mx-auto py-5">
 		<!-- Details -->
@@ -10,107 +13,128 @@
 			<div class="text-sm font-semibold mb-4">
 				{{ __('Details') }}
 			</div>
-			<div class="grid grid-cols-2 gap-5">
-				<div class="space-y-2">
-					<FormControl v-model="quiz.title" :label="__('Title')" />
-					<FormControl
-						v-model="quiz.max_attempts"
-						:label="__('Maximun Attempts')"
-					/>
-					<FormControl
-						v-model="quiz.limit_questions_to"
-						:label="__('Limit Questions To')"
-					/>
+			<FormControl
+				v-model="quiz.title"
+				:label="
+					quizDetails.data?.name
+						? __('Title')
+						: __('Enter a title and save the quiz to proceed')
+				"
+			/>
+			<div v-if="quizDetails.data?.name">
+				<div class="grid grid-cols-2 gap-5 mt-2 mb-8">
+					<div class="space-y-2">
+						<FormControl
+							v-model="quiz.max_attempts"
+							:label="__('Maximun Attempts')"
+						/>
+						<FormControl
+							v-model="quiz.limit_questions_to"
+							:label="__('Limit Questions To')"
+						/>
+					</div>
+					<div class="space-y-2">
+						<FormControl
+							v-model="quiz.total_marks"
+							:label="__('Total Marks')"
+							disabled
+						/>
+						<FormControl
+							v-model="quiz.passing_percentage"
+							:label="__('Passing Percentage')"
+						/>
+					</div>
 				</div>
-				<div class="space-y-2">
-					<FormControl v-model="quiz.total_marks" :label="__('Total Marks')" />
-					<FormControl
-						v-model="quiz.passing_percentage"
-						:label="__('Passing Percentage')"
-					/>
-				</div>
-			</div>
-		</div>
 
-		<!-- Settings -->
-		<div class="mb-8">
-			<div class="text-sm font-semibold mb-4">
-				{{ __('Settings') }}
-			</div>
-			<div class="grid grid-cols-3 gap-5 my-4">
-				<FormControl
-					v-model="quiz.show_answers"
-					type="checkbox"
-					:label="__('Show Answers')"
-				/>
-				<FormControl
-					v-model="quiz.show_submission_history"
-					type="checkbox"
-					:label="__('Show Submission History')"
-				/>
-				<FormControl
-					v-model="quiz.shuffle_questions"
-					type="checkbox"
-					:label="__('Shuffle Questions')"
-				/>
-			</div>
-		</div>
-
-		<!-- Questions -->
-		<div>
-			<div class="flex items-center justify-between mb-4">
-				<div class="text-sm font-semibold">
-					{{ __('Questions') }}
+				<!-- Settings -->
+				<div class="mb-8">
+					<div class="text-sm font-semibold mb-4">
+						{{ __('Settings') }}
+					</div>
+					<div class="grid grid-cols-3 gap-5 my-4">
+						<FormControl
+							v-model="quiz.show_answers"
+							type="checkbox"
+							:label="__('Show Answers')"
+						/>
+						<FormControl
+							v-model="quiz.show_submission_history"
+							type="checkbox"
+							:label="__('Show Submission History')"
+						/>
+						<FormControl
+							v-model="quiz.shuffle_questions"
+							type="checkbox"
+							:label="__('Shuffle Questions')"
+						/>
+					</div>
 				</div>
-				<Button @click="openQuestionModal()">
-					<template #prefix>
-						<Plus class="w-4 h-4" />
-					</template>
-					{{ __('New Question') }}
-				</Button>
-			</div>
-			<ListView
-				:columns="questionColumns"
-				:rows="quiz.questions"
-				row-key="name"
-				:options="{
-					showTooltip: false,
-				}"
-			>
-				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
-				>
-					<ListHeaderItem :item="item" v-for="item in questionColumns" />
-				</ListHeader>
-				<ListRows>
-					<ListRow
-						:row="row"
-						v-slot="{ idx, column, item }"
-						v-for="row in quiz.questions"
-						@click="openQuestionModal(row.question)"
+
+				<!-- Questions -->
+				<div>
+					<div class="flex items-center justify-between mb-4">
+						<div class="text-sm font-semibold">
+							{{ __('Questions') }}
+						</div>
+						<Button @click="openQuestionModal()">
+							<template #prefix>
+								<Plus class="w-4 h-4" />
+							</template>
+							{{ __('New Question') }}
+						</Button>
+					</div>
+					<ListView
+						:columns="questionColumns"
+						:rows="quiz.questions"
+						row-key="name"
+						:options="{
+							showTooltip: false,
+						}"
 					>
-						<ListRowItem :item="item">
-							<div
-								v-if="column.key == 'question_detail'"
-								class="text-xs truncate"
+						<ListHeader
+							class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+						>
+							<ListHeaderItem :item="item" v-for="item in questionColumns" />
+						</ListHeader>
+						<ListRows>
+							<ListRow
+								:row="row"
+								v-slot="{ idx, column, item }"
+								v-for="row in quiz.questions"
+								@click="openQuestionModal(row.question)"
 							>
-								{{ item }}
-							</div>
-							<div v-else class="text-xs">
-								{{ item }}
-							</div>
-						</ListRowItem>
-					</ListRow>
-				</ListRows>
-			</ListView>
+								<ListRowItem :item="item">
+									<div
+										v-if="column.key == 'question_detail'"
+										class="text-xs truncate"
+									>
+										{{ item }}
+									</div>
+									<div v-else class="text-xs">
+										{{ item }}
+									</div>
+								</ListRowItem>
+							</ListRow>
+						</ListRows>
+					</ListView>
+				</div>
+			</div>
 		</div>
 	</div>
-	<Question v-model="showQuestionModal" :questionName="currentQuestion" />
+	<Question
+		v-model="showQuestionModal"
+		:questionName="currentQuestion"
+		v-model:quiz="quizDetails"
+		:title="
+			currentQuestion ? __('Edit the question') : __('Add a new question')
+		"
+	/>
 </template>
 <script setup>
 import {
 	Breadcrumbs,
 	createDocumentResource,
+	createResource,
 	FormControl,
 	ListView,
 	ListHeader,
@@ -120,12 +144,54 @@ import {
 	ListRowItem,
 	Button,
 } from 'frappe-ui'
-import { computed, reactive, ref } from 'vue'
+import {
+	computed,
+	reactive,
+	ref,
+	onMounted,
+	inject,
+	onBeforeUnmount,
+	watch,
+} from 'vue'
 import { Plus } from 'lucide-vue-next'
 import Question from '@/components/Modals/Question.vue'
+import { showToast } from '../utils'
+import { useRouter } from 'vue-router'
 
 const showQuestionModal = ref(false)
 const currentQuestion = ref(null)
+const user = inject('$user')
+const router = useRouter()
+
+onMounted(() => {
+	if (
+		props.quizID == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+	if (props.quizID !== 'new') {
+		console.log('here')
+		quizDetails.reload()
+	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		submitQuiz()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
 
 const props = defineProps({
 	quizID: {
@@ -136,8 +202,8 @@ const props = defineProps({
 
 const quiz = reactive({
 	title: '',
-	total_marks: '',
-	passing_percentage: '',
+	total_marks: 0,
+	passing_percentage: 0,
 	max_attempts: 0,
 	limit_questions_to: 0,
 	show_answers: true,
@@ -146,11 +212,14 @@ const quiz = reactive({
 	questions: [],
 })
 
-const quizDetails = createDocumentResource({
-	doctype: 'LMS Quiz',
-	name: props.quizID,
-	auto: true,
+const quizDetails = createResource({
+	url: 'frappe.client.get',
+	makeParams(values) {
+		return { doctype: 'LMS Quiz', name: props.quizID }
+	},
 	cache: ['quiz', props.quizID],
+	auto: false,
+
 	onSuccess(data) {
 		Object.keys(data).forEach((key) => {
 			if (Object.hasOwn(quiz, key)) quiz[key] = data[key]
@@ -168,6 +237,82 @@ const quizDetails = createDocumentResource({
 	},
 })
 
+const quizCreate = createResource({
+	url: 'frappe.client.insert',
+	auto: false,
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Quiz',
+				...quiz,
+			},
+		}
+	},
+})
+
+const quizUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Quiz',
+			name: values.quizID,
+			fieldname: {
+				total_marks: calculateTotalMarks(),
+				...quiz,
+			},
+		}
+	},
+})
+
+const submitQuiz = () => {
+	if (quizDetails.data?.name) updateQuiz()
+	else createQuiz()
+}
+
+const createQuiz = () => {
+	quizCreate.submit(
+		{},
+		{
+			onSuccess(data) {
+				showToast(__('Success'), __('Quiz created successfully', 'check'))
+				router.push({
+					name: 'QuizCreation',
+					params: { quizID: data.name },
+				})
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
+
+const updateQuiz = () => {
+	quizUpdate.submit(
+		{ quizID: quizDetails.data?.name },
+		{
+			onSuccess(data) {
+				quiz.total_marks = data.total_marks
+				showToast(__('Success'), __('Quiz updated successfully'), 'check')
+			},
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
+
+const calculateTotalMarks = () => {
+	let totalMarks = 0
+	if (quiz.limit_questions_to && quiz.questions.length > 0)
+		return quiz.questions[0].marks * quiz.limit_questions_to
+	quiz.questions.forEach((question) => {
+		totalMarks += question.marks
+	})
+	return totalMarks
+}
+
 const questionColumns = computed(() => {
 	return [
 		{
@@ -188,11 +333,20 @@ const questionColumns = computed(() => {
 	]
 })
 
+watch(
+	() => props.quizID !== 'new',
+	(newVal) => {
+		console.log(props.quizID)
+		if (newVal) {
+			quizDetails.reload()
+		}
+	}
+)
+
 const openQuestionModal = (question = null) => {
-	console.log('called')
-	console.log(question)
 	currentQuestion.value = question
 	showQuestionModal.value = true
+	console.log(currentQuestion.value)
 }
 
 const breadcrumbs = computed(() => {
@@ -204,6 +358,15 @@ const breadcrumbs = computed(() => {
 			},
 		},
 	]
+	/* if (quizDetails.data) {
+		crumbs.push({
+			label: quiz.title,
+		})
+	} */
+	crumbs.push({
+		label: props.quizID == 'new' ? 'New Quiz' : quizDetails.data?.title,
+		route: { name: 'QuizCreation', params: { quizID: props.quizID } },
+	})
 	return crumbs
 })
 </script>

frontend/src/pages/Quizzes.vue

@@ -3,12 +3,21 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<Button variant="solid">
-			<template #prefix>
-				<Plus class="w-4 h-4"/>
-			</template>
-			{{ __('New Quiz') }}
-		</Button>
+		<router-link
+			:to="{
+				name: 'QuizCreation',
+				params: {
+					quizID: 'new',
+				},
+			}"
+		>
+			<Button variant="solid">
+				<template #prefix>
+					<Plus class="w-4 h-4" />
+				</template>
+				{{ __('New Quiz') }}
+			</Button>
+		</router-link>
 	</header>
 	<div v-if="quizzes.data?.length" class="w-3/4 mx-auto py-5">
 		<ListView
@@ -50,10 +59,18 @@ import {
 	ListHeaderItem,
 	Button,
 } from 'frappe-ui'
-import { computed, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { computed, inject, onMounted } from 'vue'
 import { Plus } from 'lucide-vue-next'
 
 const user = inject('$user')
+const router = useRouter()
+
+onMounted(() => {
+	if (!user.data?.is_moderator && !user.data?.is_instructor) {
+		router.push({ name: 'Courses' })
+	}
+})
 
 const quizFilter = computed(() => {
 	if (user.data?.is_moderator) return {}
@@ -68,6 +85,7 @@ const quizzes = createListResource({
 	fields: ['name', 'title', 'passing_percentage', 'total_marks'],
 	auto: true,
 	cache: ['quizzes', user.data?.name],
+	orderBy: 'modified desc',
 	onSuccess(data) {
 		data.forEach((row) => {})
 	},