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

feat: open modal to edit question

Browse Source
This commit is contained in:
Jannat Patel
2024-07-31 11:07:46 +05:30
parent a450c846a6
commit b8c3bdc0b4
3 changed files with 184 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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')"
@@ -28,16 +31,28 @@
</div>
</div>
</div>
<!-- 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 v-model="quiz.show_submission_history" type="checkbox" :label="__('Show Submission History')"/>
<FormControl v-model="quiz.shuffle_questions" type="checkbox" :label="__('Shuffle Questions')"/>
<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>
@@ -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 Question from '@/components/Modals/Question.vue';
import { Plus } from 'lucide-vue-next'
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))
quiz[key] = data[key]
if (Object.hasOwn(quiz, 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"),
key: "question",
width: 1
},
{
label: __("Question"),
key: __("question_detail"),
width: 3
},
{
label: __("Marks"),
key: "marks",
label: __('ID'),
key: 'question',
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 = [
{