From 685e09ce4b1cedefc779b28aefb72e5f3948bc2a Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Fri, 9 Aug 2024 20:38:14 +0530
Subject: [PATCH] feat: question update

---
 .../src/components/Controls/Autocomplete.vue  |   3 +-
 .../src/components/Modals/ChapterModal.vue    |   4 +-
 frontend/src/components/Modals/Question.vue   |  65 ++++--
 frontend/src/pages/QuizCreation.vue           | 198 +++++++++++-------
 lms/lms/doctype/lms_quiz/lms_quiz.json        |  33 ++-
 5 files changed, 189 insertions(+), 114 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 980a7fd3..65a95183 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -91,8 +91,7 @@
 												<div>
 													{{ option.label }}
 												</div>
-												<div class="text-xs text-gray-700">
-													{{ option.description }}
+												<div class="text-xs text-gray-700" v-html="option.description">
 												</div>
 											</div>
 										</slot>
diff --git a/frontend/src/components/Modals/ChapterModal.vue b/frontend/src/components/Modals/ChapterModal.vue
index 0ec46085..59794507 100644
--- a/frontend/src/components/Modals/ChapterModal.vue
+++ b/frontend/src/components/Modals/ChapterModal.vue
@@ -21,8 +21,8 @@
 </template>
 <script setup>
 import { Dialog, FormControl, createResource } from 'frappe-ui'
-import { defineModel, reactive, watch, inject } from 'vue'
-import { createToast, formatTime } from '@/utils/'
+import { defineModel, reactive, watch } from 'vue'
+import { createToast } from '@/utils/'
 
 const show = defineModel()
 const outline = defineModel('outline')
diff --git a/frontend/src/components/Modals/Question.vue b/frontend/src/components/Modals/Question.vue
index 29ec5031..24689788 100644
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -138,8 +138,8 @@ const props = defineProps({
 		type: String,
 		default: __('Add a new question'),
 	},
-	questionName: {
-		type: [String, null],
+	questionDetail: {
+		type: [Object, null],
 		required: true,
 	},
 })
@@ -149,11 +149,10 @@ const questionData = createResource({
 	makeParams() {
 		return {
 			doctype: 'LMS Question',
-			name: props.questionName,
+			name: props.questionDetail.question,
 		}
 	},
 	auto: false,
-	cache: ['question', props.questionName],
 	onSuccess(data) {
 		let counter = 1
 		editMode.value = true
@@ -166,17 +165,35 @@ const questionData = createResource({
 				: false
 			counter++;
 		}
+		question.marks = props.questionDetail.marks
 	},
 });
 
 watch(show, () => {
-	if (show.value && props.questionName) questionData.fetch()
+	if (show.value) {
+		editMode.value = false
+		if (props.questionDetail.question)
+			questionData.fetch()
+
+		else {
+			question.question = "",
+			question.marks = 0
+			question.type = "Choices"
+			existingQuestion.question = ""
+			existingQuestion.marks = 0
+			questionType.value = null
+			populateFields()
+		}
+
+		if (props.questionDetail.marks)
+			question.marks = props.questionDetail.marks
+		
+	}
 })
 
 const questionRow = createResource({
 	url: 'frappe.client.insert',
 	makeParams(values) {
-		console.log(values)
 		return {
 			doc: {
 				doctype: 'LMS Quiz Question',
@@ -270,20 +287,38 @@ const questionUpdate = createResource({
 	}
 })
 
+const marksUpdate = createResource({
+	url: 'frappe.client.set_value',
+	auto: false,
+	makeParams(values) {
+		return {
+			doctype: 'LMS Quiz Question',
+			name: props.questionDetail.name,
+			fieldname: {
+				marks: question.marks,
+			},
+		}
+	}
+})
+
 const updateQuestion = (close) => {
 	questionUpdate.submit(
 		{},
 		{
 			onSuccess() {
-				show.value = false
-				showToast(__('Success'), __('Question updated successfully'), 'check')
-				quiz.value.reload()
-				close()
-			},
-			onError(err) {
-				showToast(__('Error'), __(err.message?.[0] || err), 'x')
-				close()
-			},
+				marksUpdate.submit({}, {
+					onSuccess() {
+						show.value = false
+						showToast(__('Success'), __('Question updated successfully'), 'check')
+						quiz.value.reload()
+						close()
+					},
+					onError(err) {
+						showToast(__('Error'), __(err.message?.[0] || err), 'x')
+						close()
+					},
+				})
+			}
 		}
 	)
 }
diff --git a/frontend/src/pages/QuizCreation.vue b/frontend/src/pages/QuizCreation.vue
index fb637356..f47381c1 100644
--- a/frontend/src/pages/QuizCreation.vue
+++ b/frontend/src/pages/QuizCreation.vue
@@ -13,7 +13,6 @@
 			<div class="text-sm font-semibold mb-4">
 				{{ __('Details') }}
 			</div>
-			{{ quiz }}
 			<FormControl
 				v-model="quiz.title"
 				:label="
@@ -23,28 +22,20 @@
 				"
 			/>
 			<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 class="grid grid-cols-3 gap-5 mt-2 mb-8">
+					<FormControl
+						v-model="quiz.max_attempts"
+						:label="__('Maximun Attempts')"
+					/>
+					<FormControl
+						v-model="quiz.total_marks"
+						:label="__('Total Marks')"
+						disabled
+					/>
+					<FormControl
+						v-model="quiz.passing_percentage"
+						:label="__('Passing Percentage')"
+					/>
 				</div>
 
 				<!-- Settings -->
@@ -63,14 +54,29 @@
 							type="checkbox"
 							:label="__('Show Submission History')"
 						/>
+						
+					</div>
+				</div>
+
+				<div class="mb-8">
+					<div class="text-sm font-semibold mb-4">
+						{{ __('Shuffle Settings') }}
+					</div>
+					<div class="grid grid-cols-3">
 						<FormControl
 							v-model="quiz.shuffle_questions"
 							type="checkbox"
 							:label="__('Shuffle Questions')"
 						/>
+						<FormControl v-if="quiz.shuffle_questions"
+							v-model="quiz.limit_questions_to"
+							:label="__('Limit Questions To')"
+						/>
 					</div>
 				</div>
 
+				
+
 				<!-- Questions -->
 				<div>
 					<div class="flex items-center justify-between mb-4">
@@ -102,12 +108,12 @@
 								:row="row"
 								v-slot="{ idx, column, item }"
 								v-for="row in quiz.questions"
-								@click="openQuestionModal(row.question)"
+								@click="openQuestionModal(row)"
 							>
 								<ListRowItem :item="item">
 									<div
 										v-if="column.key == 'question_detail'"
-										class="text-xs truncate" v-html="item"
+										class="text-xs truncate h-4" v-html="item"
 									>
 									</div>
 									<div v-else class="text-xs">
@@ -116,6 +122,18 @@
 								</ListRowItem>
 							</ListRow>
 						</ListRows>
+						<ListSelectBanner>
+							<template #actions="{ unselectAll, selections }">
+								<div class="flex gap-2">
+									<Button
+										variant="ghost"
+										@click="deleteQuizzes(selections, unselectAll)"
+									>
+										<Trash2 class="h-4 w-4 stroke-1.5" />
+									</Button>
+								</div>
+							</template>
+						</ListSelectBanner>
 					</ListView>
 				</div>
 			</div>
@@ -123,10 +141,10 @@
 	</div>
 	<Question
 		v-model="showQuestionModal"
-		:questionName="currentQuestion"
+		:questionDetail="currentQuestion"
 		v-model:quiz="quizDetails"
 		:title="
-			currentQuestion ? __('Edit the question') : __('Add a new question')
+			currentQuestion.question ? __('Edit the question') : __('Add a new question')
 		"
 	/>
 </template>
@@ -141,6 +159,7 @@ import {
 	ListRows,
 	ListRow,
 	ListRowItem,
+	ListSelectBanner,
 	Button,
 } from 'frappe-ui'
 import {
@@ -151,47 +170,22 @@ import {
 	inject,
 	onBeforeUnmount,
 	watch,
+	isReactive,
 } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { Plus, Trash2 } 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 currentQuestion = reactive({
+	question: '',
+	marks: 0,
+	name: ''
+})
 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("mounted")
-		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: {
 		type: String,
@@ -211,16 +205,51 @@ const quiz = reactive({
 	questions: [],
 })
 
+onMounted(() => {
+	if (
+		props.quizID == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+	if (props.quizID !== 'new') {
+		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)
+})
+
+watch(
+	() => props.quizID !== 'new',
+	(newVal) => {
+		if (newVal) {
+			quizDetails.reload()
+		}
+	}
+)
+
 const quizDetails = createResource({
 	url: 'frappe.client.get',
 	makeParams(values) {
 		return { doctype: 'LMS Quiz', name: props.quizID }
 	},
-	cache: ['quiz', props.quizID],
 	auto: false,
-
 	onSuccess(data) {
-		console.log(data)
 		Object.keys(data).forEach((key) => {
 			if (Object.hasOwn(quiz, key)) quiz[key] = data[key]
 		})
@@ -234,7 +263,6 @@ const quizDetails = createResource({
 			let key = checkboxes[idx]
 			quiz[key] = quiz[key] ? true : false
 		}
-		console.log(quiz)
 	},
 })
 
@@ -276,7 +304,7 @@ const createQuiz = () => {
 		{},
 		{
 			onSuccess(data) {
-				showToast(__('Success'), __('Quiz created successfully', 'check'))
+				showToast(__('Success'), __('Quiz created successfully'), 'check')
 				router.push({
 					name: 'QuizCreation',
 					params: { quizID: data.name },
@@ -334,22 +362,40 @@ const questionColumns = computed(() => {
 	]
 })
 
-watch(
-	() => props.quizID !== 'new',
-	(newVal) => {
-		console.log(props.quizID)
-		if (newVal) {
-			console.log("in watch")
-			quizDetails.reload()
-		}
-	}
-)
-
 const openQuestionModal = (question = null) => {
-	currentQuestion.value = question
+	if (question) {
+		currentQuestion.question = question.question
+		currentQuestion.marks = question.marks
+		currentQuestion.name = question.name
+	} else {
+		currentQuestion.question = ''
+		currentQuestion.marks = 0
+		currentQuestion.name = ''
+	}
 	showQuestionModal.value = true
 }
 
+const deleteQuiz = createResource({
+	url: 'frappe.client.delete',
+	makeParams(values) {
+		return {
+			doctype: 'LMS Quiz Question',
+			name: values.quiz,
+		}
+	},
+})
+
+
+const deleteQuizzes = (selections, unselectAll) => {
+	selections.forEach(async (quiz) => {
+		deleteQuiz.submit({ quiz })
+	})
+	setTimeout(() => {
+		quizDetails.reload()
+		unselectAll()
+	}, 500)
+}
+
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
diff --git a/lms/lms/doctype/lms_quiz/lms_quiz.json b/lms/lms/doctype/lms_quiz/lms_quiz.json
index 38d23b9a..dd5de78d 100644
--- a/lms/lms/doctype/lms_quiz/lms_quiz.json
+++ b/lms/lms/doctype/lms_quiz/lms_quiz.json
@@ -9,16 +9,15 @@
  "field_order": [
   "title",
   "max_attempts",
-  "limit_questions_to",
+  "show_answers",
   "column_break_gaac",
   "total_marks",
   "passing_percentage",
-  "section_break_hsiv",
-  "show_answers",
-  "column_break_rocd",
   "show_submission_history",
-  "column_break_dsup",
+  "section_break_tzbu",
   "shuffle_questions",
+  "column_break_clsh",
+  "limit_questions_to",
   "section_break_sbjx",
   "questions",
   "section_break_3",
@@ -91,11 +90,6 @@
    "fieldtype": "Check",
    "label": "Show Submission History"
   },
-  {
-   "fieldname": "section_break_hsiv",
-   "fieldtype": "Section Break",
-   "label": "Settings"
-  },
   {
    "fieldname": "passing_percentage",
    "fieldtype": "Int",
@@ -105,10 +99,6 @@
    "non_negative": 1,
    "reqd": 1
   },
-  {
-   "fieldname": "column_break_rocd",
-   "fieldtype": "Column Break"
-  },
   {
    "default": "0",
    "fieldname": "total_marks",
@@ -119,10 +109,6 @@
    "read_only": 1,
    "reqd": 1
   },
-  {
-   "fieldname": "column_break_dsup",
-   "fieldtype": "Column Break"
-  },
   {
    "default": "0",
    "fieldname": "shuffle_questions",
@@ -130,14 +116,23 @@
    "label": "Shuffle Questions"
   },
   {
+   "depends_on": "shuffle_questions",
    "fieldname": "limit_questions_to",
    "fieldtype": "Int",
    "label": "Limit Questions To"
+  },
+  {
+   "fieldname": "section_break_tzbu",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "column_break_clsh",
+   "fieldtype": "Column Break"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-07-19 18:21:26.681501",
+ "modified": "2024-08-09 12:21:36.256522",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Quiz",