Skip to content

Commit

Permalink
feat: open modal to edit question
Browse files Browse the repository at this point in the history
  • Loading branch information
Jannat Patel authored and Jannat Patel committed Jul 31, 2024
1 parent a450c84 commit b8c3bdc
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 56 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ __pycache__/
node_modules
package-lock.json
lms/public/frontend
lms/www/lms.html
lms/www/lms.html
frappe-ui
127 changes: 105 additions & 22 deletions frontend/src/components/Modals/Question.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,113 @@
<template>
<!-- <Dialog
v-model="show"
>
<template>
This is life
</template>
</Dialog> -->
<Dialog v-model="show" :options="dialogOptions">
<template #body-content>
<div class="space-y-4">
<div>
<label class="block text-xs text-gray-600 mb-1">
{{ __('Question') }}
</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 { computed } from "vue"
import { Dialog, FormControl, TextEditor } from 'frappe-ui'
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 {
title: __(props.title),
size: 'lg',
actions: [
{
label: __('Submit'),
onClick: (close) => {
submitQuestion(close)
},
},
]
}
return {
title: __(props.title),
size: 'xl',
actions: [
{
label: __('Submit'),
variant: 'solid',
onClick: (close) => {
submitQuestion(close)
},
},
],
}
})
</script>
</script>
107 changes: 74 additions & 33 deletions frontend/src/pages/QuizCreation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
Expand All @@ -28,45 +31,64 @@
</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>

<!-- Questions -->
<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 }}
Expand All @@ -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: {
Expand All @@ -94,7 +128,6 @@ const props = defineProps({
},
})
const quiz = reactive({
title: '',
total_marks: '',
Expand All @@ -114,40 +147,48 @@ 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)
const questionColumns = computed(() => {
return [
{
label: __("ID"),
key: "question",
width: 1
label: __('ID'),
key: 'question',
width: 1,
},
{
label: __("Question"),
key: __("question_detail"),
width: 3
label: __('Question'),
key: __('question_detail'),
width: 3,
},
{
label: __("Marks"),
key: "marks",
width: 1,
label: __('Marks'),
key: 'marks',
width: 0.5,
},
]
})
const openQuestionModal = (question = {}) => {
currentQuestion.value = question
showQuestionModal.value = true
}
const breadcrumbs = computed(() => {
let crumbs = [
{
Expand Down

0 comments on commit b8c3bdc

Please sign in to comment.