feat: quiz creation

frontend/src/pages/QuizCreation.vue

@@ -0,0 +1,62 @@
+<template>
+	<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" />
+	</header>
+	<div v-if="quizDetails" class="w-3/4 mx-auto py-5">
+		<FormControl v-model="quiz.title" :label="__('Title')" />
+		<FormControl v-model="quiz.total_marks" :label="__('Total Marks')" />
+		<FormControl
+			v-model="quiz.passing_percentage"
+			:label="__('Passing Percentage')"
+		/>
+		<FormControl v-model="quiz.max_attempts" :label="__('Maximun Attempts')" />
+		<FormControl
+			v-model="quiz.limit_questions_to"
+			:label="__('Limit Questions To')"
+		/>
+	</div>
+</template>
+<script setup>
+import { Breadcrumbs, createDocumentResource, FormControl } from 'frappe-ui'
+import { computed, reactive } from 'vue'
+
+const props = defineProps({
+	quizId: {
+		type: String,
+		required: true,
+	},
+})
+
+const quiz = reactive({
+	title: '',
+	total_marks: '',
+	passing_percentage: '',
+	max_attempts: 0,
+	limit_questions_to: 0,
+	show_answers: true,
+	show_submission_history: false,
+	shuffle_questions: false,
+	questions: [],
+})
+
+const quizDetails = createDocumentResource({
+	doctype: 'LMS Quiz',
+	name: props.quiz,
+	auto: true,
+	cache: ['quiz', props.quiz],
+})
+
+const breadcrumbs = computed(() => {
+	let crumbs = [
+		{
+			label: __('Quizzes'),
+			route: {
+				name: 'Quizzes',
+			},
+		},
+	]
+	return crumbs
+})
+</script>

frontend/src/pages/Quizzes.vue

@@ -0,0 +1,117 @@
+<template>
+	<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" />
+	</header>
+	<div v-if="quizzes.data?.length" class="w-3/4 mx-auto py-5">
+		<ListView
+			:columns="quizColumns"
+			:rows="quizzes.data"
+			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 quizColumns">
+				</ListHeaderItem>
+			</ListHeader>
+			<ListRows>
+				<router-link
+					v-for="row in quizzes.data"
+					:to="{
+						name: 'QuizCreation',
+						params: {
+							quizID: row.name,
+						},
+					}"
+				>
+					<ListRow :row="row" />
+				</router-link>
+			</ListRows>
+			<ListSelectBanner>
+				<template #actions="{ unselectAll, selections }">
+					<div class="flex gap-2">
+						<Button
+							variant="ghost"
+							@click="removeQuiz(selections, unselectAll)"
+						>
+							<Trash2 class="h-4 w-4 stroke-1.5" />
+						</Button>
+					</div>
+				</template>
+			</ListSelectBanner>
+		</ListView>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	createListResource,
+	FormControl,
+	ListView,
+	ListRows,
+	ListRow,
+	ListRowItem,
+	ListHeader,
+	ListHeaderItem,
+	ListSelectBanner,
+	Button,
+} from 'frappe-ui'
+import { computed, inject } from 'vue'
+import { Trash2 } from 'lucide-vue-next'
+
+const user = inject('$user')
+
+const quizFilter = computed(() => {
+	if (user.data?.is_moderator) return {}
+	return {
+		owner: user.data?.name,
+	}
+})
+
+const quizzes = createListResource({
+	doctype: 'LMS Quiz',
+	filters: quizFilter,
+	fields: ['name', 'title', 'passing_percentage', 'total_marks'],
+	auto: true,
+	cache: ['quizzes', user.data?.name],
+	onSuccess(data) {
+		data.forEach((row) => {})
+	},
+})
+
+const quizColumns = computed(() => {
+	return [
+		{
+			label: __('Title'),
+			key: 'title',
+			width: 2,
+		},
+		{
+			label: __('Total Marks'),
+			key: 'total_marks',
+			width: 1,
+			align: 'center',
+		},
+		{
+			label: __('Passing Percentage'),
+			key: 'passing_percentage',
+			width: 1,
+			align: 'center',
+		},
+	]
+})
+
+const breadcrumbs = computed(() => {
+	return [
+		{
+			label: __('Quizzes'),
+			route: {
+				name: 'Quizzes',
+			},
+		},
+	]
+})
+</script>

frontend/src/router.js

@@ -141,6 +141,17 @@ const routes = [
 		component: () => import('@/pages/Badge.vue'),
 		props: true,
 	},
+	{
+		path: '/quizzes',
+		name: 'Quizzes',
+		component: () => import('@/pages/Quizzes.vue'),
+	},
+	{
+		path: '/quizzes/:quizID',
+		name: 'QuizCreation',
+		component: () => import('@/pages/QuizCreation.vue'),
+		props: true,
+	},
 ]
 
 let router = createRouter({

frontend/src/translation.js

@@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
 
 export default function translationPlugin(app) {
 	app.config.globalProperties.__ = translate
+	window.__ = translate
 	if (!window.translatedMessages) fetchTranslations()
 }
 

lms/lms/doctype/lms_quiz/lms_quiz.json

@@ -74,6 +74,7 @@
    "default": "1",
    "fieldname": "show_answers",
    "fieldtype": "Check",
+   "in_standard_filter": 1,
    "label": "Show Answers"
   },
   {
@@ -98,6 +99,8 @@
   {
    "fieldname": "passing_percentage",
    "fieldtype": "Int",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Passing Percentage",
    "non_negative": 1,
    "reqd": 1
@@ -110,6 +113,7 @@
    "default": "0",
    "fieldname": "total_marks",
    "fieldtype": "Int",
+   "in_list_view": 1,
    "label": "Total Marks",
    "non_negative": 1,
    "read_only": 1,
@@ -133,7 +137,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-06-27 22:03:48.576489",
+ "modified": "2024-07-19 18:21:26.681501",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Quiz",