eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: questions table

Browse Source
This commit is contained in:
Jannat Patel
2024-07-29 19:44:04 +05:30
parent fa774b0db2
commit a450c846a6
9 changed files with 199 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/Modals/Question.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<!-- <Dialog
v-model="show"
>
<template>
This is life
</template>
</Dialog> -->
</template>
<script setup>
import { Dialog } from "frappe-ui"
import { computed } from "vue"
const show = defineModel()
const dialogOptions = computed(() => {
return {
title: __(props.title),
size: 'lg',
actions: [
{
label: __('Submit'),
onClick: (close) => {
submitQuestion(close)
},
},
]
}
})
</script>

132
frontend/src/pages/QuizCreation.vue
View File

@@ -4,31 +4,97 @@
>
<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 class="w-3/4 mx-auto py-5">
<!-- Details -->
<div class="mb-8">
<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')"
/>
</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") }}
</div>
<Button @click="openQuestionModal.value = true">
<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">
<ListRowItem :item="item">
<div class="text-xs">
{{ item }}
</div>
</ListRowItem>
</ListRow>
</ListRows>
</ListView>
</div>
</div>
<Question/>
</template>
<script setup>
import { Breadcrumbs, createDocumentResource, FormControl } from 'frappe-ui'
import { computed, reactive } from 'vue'
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 Question from '@/components/Modals/Question.vue';
const openQuestionModal = ref(false)
const props = defineProps({
quizId: {
quizID: {
type: String,
required: true,
},
})
const quiz = reactive({
title: '',
total_marks: '',
@@ -43,9 +109,43 @@ const quiz = reactive({
const quizDetails = createDocumentResource({
doctype: 'LMS Quiz',
name: props.quiz,
name: props.quizID,
auto: true,
cache: ['quiz', props.quiz],
onSuccess(data) {
Object.keys(data).forEach((key) => {
if (Object.hasOwn(quiz, key))
quiz[key] = data[key]
})
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)
const questionColumns = computed(() => {
return [
{
label: __("ID"),
key: "question",
width: 1
},
{
label: __("Question"),
key: __("question_detail"),
width: 3
},
{
label: __("Marks"),
key: "marks",
width: 1,
},
]
})
const breadcrumbs = computed(() => {

25
frontend/src/pages/Quizzes.vue
View File

@@ -3,13 +3,19 @@
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>
</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 }"
:options="{ showTooltip: false, selectable: false }"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
@@ -30,18 +36,6 @@
<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>
@@ -49,18 +43,15 @@
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'
import { Plus } from 'lucide-vue-next'
const user = inject('$user')