feat: open ended questions

frontend/src/pages/QuizSubmission.vue

@@ -2,47 +2,112 @@
 	<header
 		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" />
+		<Breadcrumbs v-if="submisisonDetails.doc" :items="breadcrumbs" />
+		<div class="space-x-2">
+			<Badge
+				v-if="submisisonDetails.isDirty"
+				:label="__('Not Saved')"
+				variant="subtle"
+				theme="orange"
+			/>
+			<Button variant="solid" @click="saveSubmission()">
+				{{ __('Save') }}
+			</Button>
+		</div>
 	</header>
-	<div class="w-1/2 mx-auto py-10">
-		<Quiz :quizName="quizID" />
+	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-4">
+		<div class="grid grid-cols-2 gap-5">
+			<FormControl
+				v-model="submisisonDetails.doc.quiz_title"
+				:label="__('Quiz')"
+				:disabled="true"
+			/>
+			<FormControl
+				v-model="submisisonDetails.doc.member_name"
+				:label="__('Member')"
+				:disabled="true"
+			/>
+		</div>
+
+		<div class="grid grid-cols-2 gap-5">
+			<FormControl
+				v-model="submisisonDetails.doc.score"
+				:label="__('Score')"
+				:disabled="true"
+			/>
+			<FormControl
+				v-model="submisisonDetails.doc.percentage"
+				:label="__('Percentage')"
+				:disabled="true"
+			/>
+		</div>
+
+		<div
+			v-for="row in submisisonDetails.doc.result"
+			class="border p-5 rounded-md space-y-4"
+		>
+			<div class="font-semibold">{{ row.idx }}. {{ row.question }}</div>
+			<div v-html="row.answer" class="leading-5"></div>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl v-model="row.marks" :label="__('Marks')" />
+				<FormControl
+					v-model="row.marks_out_of"
+					:label="__('Marks out of')"
+					:disabled="true"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 <script setup>
-import Quiz from '@/components/Quiz.vue'
-import { createResource, Breadcrumbs } from 'frappe-ui'
-import { computed, inject, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-
-const user = inject('$user')
-const router = useRouter()
-
-onMounted(() => {
-	if (!user.data) {
-		router.push({ name: 'Courses' })
-	}
-})
+import {
+	createDocumentResource,
+	Breadcrumbs,
+	FormControl,
+	Button,
+	Badge,
+} from 'frappe-ui'
+import { computed } from 'vue'
+import { showToast } from '@/utils'
 
 const props = defineProps({
-	quizID: {
+	submission: {
 		type: String,
 		required: true,
 	},
 })
 
-const title = createResource({
-	url: 'frappe.client.get_value',
-	params: {
-		doctype: 'LMS Quiz',
-		fieldname: 'title',
-		filters: {
-			name: props.quizID,
-		},
-	},
+const submisisonDetails = createDocumentResource({
+	doctype: 'LMS Quiz Submission',
+	name: props.submission,
 	auto: true,
 })
 
 const breadcrumbs = computed(() => {
-	return [{ label: __('Quiz Submission') }, { label: title.data?.title }]
+	return [
+		{
+			label: __('Quiz Submissions'),
+			route: {
+				name: 'QuizSubmissionList',
+				params: {
+					quizID: submisisonDetails.doc.quiz,
+				},
+			},
+		},
+		{
+			label: submisisonDetails.doc.quiz_title,
+		},
+	]
 })
+
+const saveSubmission = () => {
+	submisisonDetails.save.submit(
+		{},
+		{
+			onError(err) {
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+			},
+		}
+	)
+}
 </script>