feat: open modal to edit question

.gitignore

@@ -12,3 +12,4 @@ node_modules
 package-lock.json
 lms/public/frontend
 lms/www/lms.html
+frappe-ui

frontend/src/components/Modals/Question.vue

@@ -1,30 +1,113 @@
 <template>
-    <!-- <Dialog
+	<Dialog v-model="show" :options="dialogOptions">
-        v-model="show"
+		<template #body-content>
-    >
+			<div class="space-y-4">
-        <template>
+				<div>
-            This is life
+					<label class="block text-xs text-gray-600 mb-1">
-        </template>
+						{{ __('Question') }}
-    </Dialog> -->
+					</label>
+					<TextEditor
+						:content="question.question"
+						@change="(val) => (question.question = 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>
+				<FormControl
+					:label="__('Type')"
+					v-model="question.type"
+					type="select"
+					:options="['Choices', 'User Input']"
+					class="pb-2"
+				/>
+				<div v-if="question.type == 'Choices'" class="divide-y">
+					<div v-for="n in 4" class="space-y-4 py-2">
+						<FormControl
+							:label="__('Option') + ' ' + n"
+							v-model="question[`option_${n}`]"
+						/>
+						<FormControl
+							:label="__('Explanation')"
+							v-model="question[`explanation_${n}`]"
+						/>
+						<FormControl
+							:label="__('Correct Answer')"
+							v-model="question[`correct_answer_${n}`]"
+							type="checkbox"
+						/>
+					</div>
+				</div>
+				<div v-else v-for="n in 4" class="space-y-2">
+					<FormControl
+						:label="__('Possibility') + ' ' + n"
+						v-model="question[`possibility_${n}`]"
+					/>
+				</div>
+			</div>
+		</template>
+	</Dialog>
 </template>
 <script setup>
-import { Dialog } from "frappe-ui"
+import { Dialog, FormControl, TextEditor } from 'frappe-ui'
-import { computed } from "vue"
+import { computed, onMounted, reactive } from 'vue'
 
 const show = defineModel()
+const question = reactive({
+	question: '',
+	type: 'Choices',
+})
+
+onMounted(() => {
+	populateFields()
+	populateQuestionDetail()
+})
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: __('Add a Question'),
+	},
+	questionDetail: {
+		type: Object,
+		default: {},
+	},
+})
+
+const populateFields = () => {
+	let fields = ['option', 'correct_answer', 'explanation', 'possibility']
+	let counter = 1
+	fields.forEach((field) => {
+		while (counter <= 4) {
+			question[`${field}_${counter}`] = field === 'correct_answer' ? false : ''
+			counter++
+		}
+	})
+}
+
+const populateQuestionDetail = () => {
+	if (Object.keys(props.questionDetail).length) {
+		Object.keys(props.questionDetail).forEach((key) => {
+			if (Object.hasOwn(question, key)) {
+				question[key] = props.questionDetail[key]
+			}
+		})
+	}
+}
 
 const dialogOptions = computed(() => {
-    return {
+	return {
-        title: __(props.title),
+		title: __(props.title),
-        size: 'lg',
+		size: 'xl',
-        actions: [
+		actions: [
-            {
+			{
-                label: __('Submit'),
+				label: __('Submit'),
-                onClick: (close) => {
+				variant: 'solid',
-                    submitQuestion(close)
+				onClick: (close) => {
-                },
+					submitQuestion(close)
-            },
+				},
-        ]
+			},
-    }
+		],
+	}
 })
 </script>

frontend/src/pages/QuizCreation.vue

@@ -8,12 +8,15 @@
 		<!-- Details -->
 		<div class="mb-8">
 			<div class="text-sm font-semibold mb-4">
-				{{ __("Details") }}
+				{{ __('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.max_attempts"
+						:label="__('Maximun Attempts')"
+					/>
 					<FormControl
 						v-model="quiz.limit_questions_to"
 						:label="__('Limit Questions To')"
@@ -32,12 +35,24 @@
 		<!-- Settings -->
 		<div class="mb-8">
 			<div class="text-sm font-semibold mb-4">
-				{{ __("Settings") }}
+				{{ __('Settings') }}
 			</div>
 			<div class="grid grid-cols-3 gap-5 my-4">
-				<FormControl v-model="quiz.show_answers" type="checkbox" :label="__('Show Answers')"/>
+				<FormControl
-				<FormControl v-model="quiz.show_submission_history" type="checkbox" :label="__('Show Submission History')"/>
+					v-model="quiz.show_answers"
-				<FormControl v-model="quiz.shuffle_questions" type="checkbox" :label="__('Shuffle Questions')"/>
+					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>
 
@@ -45,28 +60,35 @@
 		<div>
 			<div class="flex items-center justify-between mb-4">
 				<div class="text-sm font-semibold">
-					{{ __("Questions") }}
+					{{ __('Questions') }}
 				</div>
-				<Button @click="openQuestionModal.value = true">
+				<Button @click="openQuestionModal()">
 					<template #prefix>
-						<Plus class="w-4 h-4"/>
+						<Plus class="w-4 h-4" />
 					</template>
-					{{ __("New Question") }}
+					{{ __('New Question') }}
 				</Button>
 			</div>
 			<ListView
 				:columns="questionColumns"
 				:rows="quiz.questions"
 				row-key="name"
-				:options="{ showTooltip: false }"
+				:options="{
+					showTooltip: false,
+					onRowClick: (row) => emit('openQuestionModal', row.name),
+				}"
 			>
 				<ListHeader
 					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
 				>
-					<ListHeaderItem :item="item" v-for="item in questionColumns"/>
+					<ListHeaderItem :item="item" v-for="item in questionColumns" />
 				</ListHeader>
 				<ListRows>
-					<ListRow :row="row" v-slot="{ idx, column, item }" v-for="row in quiz.questions">
+					<ListRow
+						:row="row"
+						v-slot="{ idx, column, item }"
+						v-for="row in quiz.questions"
+					>
 						<ListRowItem :item="item">
 							<div class="text-xs">
 								{{ item }}
@@ -77,15 +99,27 @@
 			</ListView>
 		</div>
 	</div>
-	<Question/>
+	<Question v-model="showQuestionModal" :question="currentQuestion" />
 </template>
 <script setup>
-import { Breadcrumbs, createDocumentResource, FormControl, ListView, ListHeader, ListHeaderItem, ListRows, ListRow, ListRowItem, Button } from 'frappe-ui'
+import {
+	Breadcrumbs,
+	createDocumentResource,
+	FormControl,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	Button,
+} from 'frappe-ui'
 import { computed, reactive, ref } from 'vue'
-import { Plus } from "lucide-vue-next"
+import { Plus } from 'lucide-vue-next'
-import Question from '@/components/Modals/Question.vue';
+import Question from '@/components/Modals/Question.vue'
 
-const openQuestionModal = ref(false)
+const showQuestionModal = ref(false)
+const currentQuestion = ref(null)
 
 const props = defineProps({
 	quizID: {
@@ -94,7 +128,6 @@ const props = defineProps({
 	},
 })
 
-
 const quiz = reactive({
 	title: '',
 	total_marks: '',
@@ -114,16 +147,19 @@ const quizDetails = createDocumentResource({
 	cache: ['quiz', props.quiz],
 	onSuccess(data) {
 		Object.keys(data).forEach((key) => {
-			if (Object.hasOwn(quiz, key))
+			if (Object.hasOwn(quiz, key)) quiz[key] = data[key]
-				quiz[key] = data[key]
 		})
 
-		let checkboxes = ["show_answers", "show_submission_history", "shuffle_questions"]
+		let checkboxes = [
+			'show_answers',
+			'show_submission_history',
+			'shuffle_questions',
+		]
 		for (let idx in checkboxes) {
 			let key = checkboxes[idx]
 			quiz[key] = quiz[key] ? true : false
 		}
-	}
+	},
 })
 
 console.log(quizDetails)
@@ -131,23 +167,28 @@ console.log(quizDetails)
 const questionColumns = computed(() => {
 	return [
 		{
-			label: __("ID"),
+			label: __('ID'),
-			key: "question",
+			key: 'question',
-			width: 1
-		},
-		{
-			label: __("Question"),
-			key: __("question_detail"),
-			width: 3
-		},
-		{
-			label: __("Marks"),
-			key: "marks",
 			width: 1,
 		},
+		{
+			label: __('Question'),
+			key: __('question_detail'),
+			width: 3,
+		},
+		{
+			label: __('Marks'),
+			key: 'marks',
+			width: 0.5,
+		},
 	]
 })
 
+const openQuestionModal = (question = {}) => {
+	currentQuestion.value = question
+	showQuestionModal.value = true
+}
+
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{