Rakantor/iu-quiz-app
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make community questions editable by everyone

Browse Source
This commit is contained in:
Rakantor
2022-11-12 16:01:09 +01:00
parent d8b6173d4b
commit 05032ba29a
4 changed files with 340 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
components/AddOpenEndedQuestion.vue
View File

@@ -2,14 +2,6 @@
<v-card>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<form @submit.prevent="submit">
<v-card-title style="cursor: pointer;" @click="showBody = !showBody">
<span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Frage einsenden</span>
<v-btn icon @click.stop="showBody = !showBody">
<v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-btn>
</v-card-title>
<v-expand-transition>
<div v-show="showBody">
<v-card-text>
<v-row>
<v-col cols="12">
@@ -58,23 +50,32 @@
<v-card-actions>
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
<v-spacer />
<v-btn text color="primary" @click="clear">Reset</v-btn>
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
<v-btn text color="primary" @click="reset">Reset</v-btn>
<v-btn v-if="editing" outlined color="primary" @click="$emit('close')">Abbrechen</v-btn>
<v-btn
type="submit"
depressed
color="primary"
:loading="loading"
:disabled="invalid"
>
{{ editing ? 'Absenden' : 'Einreichen' }}
</v-btn>
</v-card-actions>
</div>
</v-expand-transition>
</form>
</ValidationObserver>
</v-card>
</template>
<script>
import { collection, doc, addDoc, writeBatch } from 'firebase/firestore'
import { collection, doc, addDoc, setDoc, writeBatch } from 'firebase/firestore'
// We use vee-validate@3 for form validation.
// https://vee-validate.logaretm.com/v3/guide/basics.html
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
import { required, min, max, regex } from 'vee-validate/dist/rules'
import dedent from 'dedent'
import _isEmpty from 'lodash-es/isEmpty'
import _isEqual from 'lodash-es/isEqual'
import { OpenEndedQuestion, OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
extend('required', {
@@ -102,17 +103,32 @@ export default {
ValidationProvider,
ValidationObserver
},
props: {
openEndedQuestion: OpenEndedQuestion
},
data () {
return {
questionMaxLength: 250,
solutionMaxLength: 1000,
solutionMaxLength: 1500,
chapter: null,
question: '',
solution: '',
showBody: false,
loading: false
}
},
computed: {
editing () {
return !_isEmpty(this.openEndedQuestion)
}
},
watch: {
openEndedQuestion () {
this.reset()
}
},
mounted () {
this.reset()
},
methods: {
submit () {
// Remove extra spaces at the start and end of the string (trim),
@@ -125,25 +141,29 @@ export default {
this.$nextTick(() => {
this.$refs.observer.validate().then((success) => {
if (!success) return
this.loading = true
this.editing ? this.updateQuestion() : this.createQuestion()
})
})
},
createQuestion () {
const q = new OpenEndedQuestion(
null,
this.chapter,
this.question,
this.solution,
this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
this.$auth.currentUser.uid,
Date.now() / 1000, // Current UNIX timestamp in seconds
[],
{}
)
// Add a new document with a generated id.
// Add a new document with a generated id
this.loading = true
addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter), q)
.then((docRef) => {
// Successfully added new question to database
q.id = docRef.id
this.$emit('added', q)
this.$store.commit('addOpenEndedQuestion', q)
this.$toast({ content: 'Deine Frage wurde hinzugefügt!', color: 'success' })
})
.catch((error) => {
@@ -153,13 +173,48 @@ export default {
.then(() => {
this.loading = false
})
},
updateQuestion () {
const q = new OpenEndedQuestion(
this.openEndedQuestion.id,
this.chapter,
this.question,
this.solution,
this.openEndedQuestion.creator,
this.openEndedQuestion.created,
this.openEndedQuestion.helpful,
this.openEndedQuestion.difficulty
)
// Abort if no changes were made to the question
if (_isEqual(this.openEndedQuestion, q)) return
// Update an existing document
this.loading = true
setDoc(doc(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen/${q.id}`).withConverter(OpenEndedQuestionConverter), q)
.then((docRef) => {
// Successfully updated the question
this.$store.commit('addOpenEndedQuestion', q)
this.$toast({ content: 'Die Frage wurde überarbeitet!', color: 'success' })
})
.catch((error) => {
// Failed to add question to database; display error message
this.$toast({content: error, color: 'error'})
})
.then(() => {
this.loading = false
})
},
clear () {
reset () {
if (this.editing) {
this.chapter = this.openEndedQuestion.chapter
this.question = this.openEndedQuestion.question
this.solution = this.openEndedQuestion.solution
} else {
this.chapter = ''
this.question = ''
this.solution = ''
}
this.$refs.observer.reset()
},
// TODO: This method is used for writing test data to the database and should be removed in production

35
components/Coop.vue → components/CommunityComponent.vue
View File

@@ -1,9 +1,18 @@
<template>
<v-card>
<v-card-title>Community Fragen</v-card-title>
<OpenEndedQuestionsList :questions="questions" />
<OpenEndedQuestionsList />
<v-divider></v-divider>
<AddOpenEndedQuestion @added="addQuestionToList" />
<v-expansion-panels accordion class="text-subtitle-1 font-weight-medium">
<v-expansion-panel>
<v-expansion-panel-header>
Eigene Frage einsenden
</v-expansion-panel-header>
<v-expansion-panel-content>
<AddOpenEndedQuestion />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</template>
@@ -12,16 +21,10 @@ import { collection, getDocs } from 'firebase/firestore'
import { OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
export default {
name: 'CoopComponent',
props: {
courseId: {
type: String,
required: true
}
},
data () {
return {
questions: []
name: 'CommunityComponent',
computed: {
courseId () {
return this.$store.state.selectedCourse
}
},
created () {
@@ -34,18 +37,16 @@ export default {
// Execute the query
getDocs(questionsRef).then((querySnapshot) => {
this.questions = []
const questions = []
querySnapshot.forEach((doc) => {
// Convert to OpenEndedQuestion object
this.questions.push(doc.data())
questions.push(doc.data())
})
this.$store.commit('setOpenEndedQuestions', questions)
}).catch((error) => {
// Failed to fetch questions from the database; display error message
this.$toast({ content: error, color: 'error' })
})
},
addQuestionToList (q) {
this.questions.push(q)
}
}
}

49
components/OpenEndedQuestionsList.vue
View File

@@ -1,4 +1,8 @@
<template>
<v-container fluid>
<v-dialog v-model="show" persistent max-width="600">
<AddOpenEndedQuestion :open-ended-question="selectedQuestion" @close="show = false" />
</v-dialog>
<v-data-iterator
:items="items"
:items-per-page.sync="itemsPerPage"
@@ -111,6 +115,7 @@
<span>{{ pageStart }} - {{ pageStop }} von {{ itemsLength }}</span>
</template>
</v-data-iterator>
</v-container>
</template>
<script>
@@ -118,12 +123,6 @@ import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore'
export default {
name: 'OpenEndedQuestionsList',
props: {
questions: {
type: Array,
required: true
}
},
data () {
return {
items: [],
@@ -140,10 +139,14 @@ export default {
{ key: 'Schwierigkeit', value: 'difficultyLevel' }
],
openPanels: [],
selectedQuestion: null
selectedQuestion: null,
show: false
}
},
computed: {
questions () {
return this.$store.state.openEndedQuestions
},
courseId () {
return this.$store.state.selectedCourse
},
@@ -193,6 +196,14 @@ export default {
caption: this.selectedQuestion && this.selectedQuestion.difficulty.hard.length,
tooltip: 'Schwere Frage',
onClick() { self.toggleDifficulty('hard') }
},
// Button "Edit"
{
active: true,
iconActive: 'mdi-pencil-outline',
tooltip: 'Bearbeiten',
class: 'ml-4',
onClick() { self.show = true }
}
]
},
@@ -244,12 +255,7 @@ export default {
hilfreich: this.helpful ? arrayRemove(this.$auth.currentUser.uid) : arrayUnion(this.$auth.currentUser.uid)
}).then((empty) => {
// Update question in list
if (this.helpful) {
const index = this.selectedQuestion.helpful.indexOf(this.$auth.currentUser.uid)
this.selectedQuestion.helpful.splice(index, 1)
} else {
this.selectedQuestion.helpful.push(this.$auth.currentUser.uid)
}
this.$store.commit('toggleHelpfulQuestion', this.selectedQuestion.id)
}).catch((error) => {
// Failed to update the question; display error message
this.$toast({ content: error, color: 'error' })
@@ -272,24 +278,13 @@ export default {
updateDoc(doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`), updateProps)
.then((empty) => {
// Update question in list
if (this.difficulty === type) {
const index = this.selectedQuestion.difficulty[type].indexOf(this.$auth.currentUser.uid)
this.selectedQuestion.difficulty[type].splice(index, 1)
} else {
const indexEasy = this.selectedQuestion.difficulty.easy.indexOf(this.$auth.currentUser.uid)
if (indexEasy !== -1) this.selectedQuestion.difficulty.easy.splice(indexEasy, 1)
const indexMedium = this.selectedQuestion.difficulty.medium.indexOf(this.$auth.currentUser.uid)
if (indexMedium !== -1) this.selectedQuestion.difficulty.medium.splice(indexMedium, 1)
const indexHard = this.selectedQuestion.difficulty.hard.indexOf(this.$auth.currentUser.uid)
if (indexHard !== -1) this.selectedQuestion.difficulty.hard.splice(indexHard, 1)
this.selectedQuestion.difficulty[type].push(this.$auth.currentUser.uid)
}
this.selectedQuestion.updateDifficultyLevel()
this.$store.commit('setDifficulty', { questionId: this.selectedQuestion.id, difficulty: type })
}).catch((error) => {
// Failed to update the question; display error message
this.$toast({ content: error, color: 'error' })
})
}
},
editQuestion () {}
},
}
</script>

44
store/index.js
View File

@@ -5,7 +5,8 @@ export const state = () => ({
idTokenResult: null,
user: null,
courses: {},
selectedCourse: undefined
selectedCourse: undefined,
openEndedQuestions: []
})
export const getters = {
@@ -54,6 +55,47 @@ export const mutations = {
setSelectedCourse (state, courseID) {
state.selectedCourse = courseID
},
setOpenEndedQuestions (state, questions) {
state.openEndedQuestions = questions
},
addOpenEndedQuestion (state, question) {
const index = state.openEndedQuestions.findIndex(q => q.id === question.id)
if (index === -1) {
// The question does not exist in the array --> add
state.openEndedQuestions.push(question)
} else {
// The question already exists in the array --> update
this._vm.$set(state.openEndedQuestions, index, question)
}
},
toggleHelpfulQuestion (state, questionId) {
const index = state.openEndedQuestions.findIndex(q => q.id === questionId)
if (index !== -1) {
const i = state.openEndedQuestions[index].helpful.indexOf(this.$auth.currentUser.uid)
if (i === -1) state.openEndedQuestions[index].helpful.push(this.$auth.currentUser.uid)
else state.openEndedQuestions[index].helpful.splice(i, 1)
}
},
setDifficulty (state, { questionId, difficulty }) {
const index = state.openEndedQuestions.findIndex(q => q.id === questionId)
if (index !== -1) {
const i = state.openEndedQuestions[index].difficulty[difficulty].indexOf(this.$auth.currentUser.uid)
if (i !== -1) {
state.openEndedQuestions[index].difficulty[difficulty].splice(i, 1)
} else {
const indexEasy = state.openEndedQuestions[index].difficulty.easy.indexOf(this.$auth.currentUser.uid)
if (indexEasy !== -1) state.openEndedQuestions[index].difficulty.easy.splice(indexEasy, 1)
const indexMedium = state.openEndedQuestions[index].difficulty.medium.indexOf(this.$auth.currentUser.uid)
if (indexMedium !== -1) state.openEndedQuestions[index].difficulty.medium.splice(indexMedium, 1)
const indexHard = state.openEndedQuestions[index].difficulty.hard.indexOf(this.$auth.currentUser.uid)
if (indexHard !== -1) state.openEndedQuestions[index].difficulty.hard.splice(indexHard, 1)
state.openEndedQuestions[index].difficulty[difficulty].push(this.$auth.currentUser.uid)
}
state.openEndedQuestions[index].updateDifficultyLevel()
}
},
addGameInProgress (state, { courseID, gameID }) {
const index = state.user.gamesStarted.findIndex(e => e.course === courseID)
if (index !== -1) {