Make community questions editable by everyone
This commit is contained in:
@@ -2,79 +2,80 @@
|
||||
<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-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Kapitelnummer" :rules="{ regex: /^[1-9]+$/ }">
|
||||
<v-text-field
|
||||
v-model="chapter"
|
||||
filled
|
||||
hint="Freilassen, wenn deine Frage das Wissen aus mehreren Kapiteln vereint."
|
||||
persistent-hint
|
||||
maxlength="1"
|
||||
label="Kapitelnummer"
|
||||
:error-messages="errors"
|
||||
></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" :rules="{ required: true, min: 20, max: questionMaxLength }">
|
||||
<v-textarea
|
||||
v-model="question"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
:maxlength="questionMaxLength"
|
||||
label="Frage/Aufgabenstellung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Musterlösung" :rules="{ required: true, min: 50, max: solutionMaxLength }">
|
||||
<v-textarea
|
||||
v-model="solution"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
:maxlength="solutionMaxLength"
|
||||
label="Musterlösung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<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="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-title>
|
||||
<v-expand-transition>
|
||||
<div v-show="showBody">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Kapitelnummer" :rules="{ regex: /^[1-9]+$/ }">
|
||||
<v-text-field
|
||||
v-model="chapter"
|
||||
filled
|
||||
hint="Freilassen, wenn deine Frage das Wissen aus mehreren Kapiteln vereint."
|
||||
persistent-hint
|
||||
maxlength="1"
|
||||
label="Kapitelnummer"
|
||||
:error-messages="errors"
|
||||
></v-text-field>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" :rules="{ required: true, min: 20, max: questionMaxLength }">
|
||||
<v-textarea
|
||||
v-model="question"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
:maxlength="questionMaxLength"
|
||||
label="Frage/Aufgabenstellung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<ValidationProvider v-slot="{ errors }" name="Musterlösung" :rules="{ required: true, min: 50, max: solutionMaxLength }">
|
||||
<v-textarea
|
||||
v-model="solution"
|
||||
required
|
||||
auto-grow
|
||||
filled
|
||||
counter
|
||||
:maxlength="solutionMaxLength"
|
||||
label="Musterlösung"
|
||||
:error-messages="errors"
|
||||
></v-textarea>
|
||||
</ValidationProvider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<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-card-actions>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card-actions>
|
||||
</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,41 +141,80 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.observer.validate().then((success) => {
|
||||
if (!success) return
|
||||
|
||||
this.loading = true
|
||||
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
|
||||
Date.now() / 1000, // Current UNIX timestamp in seconds
|
||||
[],
|
||||
{}
|
||||
)
|
||||
|
||||
// Add a new document with a generated id.
|
||||
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.$toast({ content: 'Deine Frage wurde hinzugefügt!', color: 'success' })
|
||||
})
|
||||
.catch((error) => {
|
||||
// Failed to add question to database; display error message
|
||||
this.$toast({content: error, color: 'error'})
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false
|
||||
})
|
||||
this.editing ? this.updateQuestion() : this.createQuestion()
|
||||
})
|
||||
})
|
||||
},
|
||||
clear () {
|
||||
this.chapter = ''
|
||||
this.question = ''
|
||||
this.solution = ''
|
||||
createQuestion () {
|
||||
const q = new OpenEndedQuestion(
|
||||
null,
|
||||
this.chapter,
|
||||
this.question,
|
||||
this.solution,
|
||||
this.$auth.currentUser.uid,
|
||||
Date.now() / 1000, // Current UNIX timestamp in seconds
|
||||
[],
|
||||
{}
|
||||
)
|
||||
|
||||
// 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.$store.commit('addOpenEndedQuestion', q)
|
||||
this.$toast({ content: 'Deine Frage wurde hinzugefügt!', color: 'success' })
|
||||
})
|
||||
.catch((error) => {
|
||||
// Failed to add question to database; display error message
|
||||
this.$toast({content: error, color: 'error'})
|
||||
})
|
||||
.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
|
||||
})
|
||||
},
|
||||
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
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,116 +1,121 @@
|
||||
<template>
|
||||
<v-data-iterator
|
||||
:items="items"
|
||||
:items-per-page.sync="itemsPerPage"
|
||||
:page.sync="page"
|
||||
:search="search"
|
||||
disable-sort
|
||||
no-data-text="Keine Daten vorhanden"
|
||||
no-results-text="Keine passenden Ergebnisse gefunden"
|
||||
locale="de-DE"
|
||||
class="text-center"
|
||||
:footer-props="{ itemsPerPageOptions: itemsPerPageArray, itemsPerPageText: 'Fragen pro Seite'}"
|
||||
>
|
||||
<template #header>
|
||||
<v-toolbar flat class="mb-1">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
clearable
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
label="Suchen"
|
||||
></v-text-field>
|
||||
<template v-if="$vuetify.breakpoint.mdAndUp">
|
||||
<v-spacer></v-spacer>
|
||||
<v-select
|
||||
v-model="sortBy"
|
||||
<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"
|
||||
:page.sync="page"
|
||||
:search="search"
|
||||
disable-sort
|
||||
no-data-text="Keine Daten vorhanden"
|
||||
no-results-text="Keine passenden Ergebnisse gefunden"
|
||||
locale="de-DE"
|
||||
class="text-center"
|
||||
:footer-props="{ itemsPerPageOptions: itemsPerPageArray, itemsPerPageText: 'Fragen pro Seite'}"
|
||||
>
|
||||
<template #header>
|
||||
<v-toolbar flat class="mb-1">
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
clearable
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
:items="keys"
|
||||
item-text="key"
|
||||
item-value="value"
|
||||
prepend-inner-icon="mdi-sort"
|
||||
label="Sortieren"
|
||||
></v-select>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle
|
||||
v-model="sortDesc"
|
||||
mandatory
|
||||
>
|
||||
<v-btn large depressed :value="false">
|
||||
<v-icon>mdi-sort-ascending</v-icon>
|
||||
</v-btn>
|
||||
<v-btn large depressed :value="true">
|
||||
<v-icon>mdi-sort-descending</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<template #default="props">
|
||||
<v-container fluid>
|
||||
<v-card outlined>
|
||||
<v-expansion-panels v-model="openPanels" hover accordion>
|
||||
<v-expansion-panel
|
||||
v-for="(item, i) in props.items"
|
||||
:key="i"
|
||||
@click="setSelectedQuestion(item)"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
label="Suchen"
|
||||
></v-text-field>
|
||||
<template v-if="$vuetify.breakpoint.mdAndUp">
|
||||
<v-spacer></v-spacer>
|
||||
<v-select
|
||||
v-model="sortBy"
|
||||
flat
|
||||
solo-inverted
|
||||
hide-details
|
||||
:items="keys"
|
||||
item-text="key"
|
||||
item-value="value"
|
||||
prepend-inner-icon="mdi-sort"
|
||||
label="Sortieren"
|
||||
></v-select>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle
|
||||
v-model="sortDesc"
|
||||
mandatory
|
||||
>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row dense>
|
||||
<v-col cols="12" class="text-overline text--secondary">
|
||||
<strong>Kapitel {{ item.chapter || '-' }}</strong>
|
||||
</v-col>
|
||||
<v-col cols="12" class="text-pre-wrap">
|
||||
<strong>{{ item.question }}</strong>
|
||||
</v-col>
|
||||
<v-fade-transition leave-absolute>
|
||||
<v-col v-if="!open" cols="12" class="text-caption text--secondary">
|
||||
<v-row style="width: 100%">
|
||||
<v-col cols="auto">
|
||||
Hilfreich: {{ item.helpful.length }}
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
Schwierigkeit: {{ item.getDifficultyString() }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-fade-transition>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" class="mb-4">
|
||||
<div class="text-left text-pre-wrap">{{ item.solution }}</div>
|
||||
</v-col>
|
||||
<v-col v-for="(btn, btni) in actionButtons" :key="btni" cols="auto" :class="btn.class">
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn icon :color="btn.active ? btn.iconColor : ''" v-bind="attrs" v-on="on" @click="btn.onClick">
|
||||
<v-icon>{{ btn.active ? btn.iconActive : btn.iconInactive }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ btn.tooltip }}</span>
|
||||
</v-tooltip>
|
||||
<div class="text-caption text--secondary">{{ btn.caption }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
<v-btn large depressed :value="false">
|
||||
<v-icon>mdi-sort-ascending</v-icon>
|
||||
</v-btn>
|
||||
<v-btn large depressed :value="true">
|
||||
<v-icon>mdi-sort-descending</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- eslint-disable-next-line -->
|
||||
<template #footer.page-text="{ pageStart, pageStop, itemsLength }">
|
||||
<span>{{ pageStart }} - {{ pageStop }} von {{ itemsLength }}</span>
|
||||
</template>
|
||||
</v-data-iterator>
|
||||
<template #default="props">
|
||||
<v-container fluid>
|
||||
<v-card outlined>
|
||||
<v-expansion-panels v-model="openPanels" hover accordion>
|
||||
<v-expansion-panel
|
||||
v-for="(item, i) in props.items"
|
||||
:key="i"
|
||||
@click="setSelectedQuestion(item)"
|
||||
>
|
||||
<v-expansion-panel-header v-slot="{ open }">
|
||||
<v-row dense>
|
||||
<v-col cols="12" class="text-overline text--secondary">
|
||||
<strong>Kapitel {{ item.chapter || '-' }}</strong>
|
||||
</v-col>
|
||||
<v-col cols="12" class="text-pre-wrap">
|
||||
<strong>{{ item.question }}</strong>
|
||||
</v-col>
|
||||
<v-fade-transition leave-absolute>
|
||||
<v-col v-if="!open" cols="12" class="text-caption text--secondary">
|
||||
<v-row style="width: 100%">
|
||||
<v-col cols="auto">
|
||||
Hilfreich: {{ item.helpful.length }}
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
Schwierigkeit: {{ item.getDifficultyString() }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-fade-transition>
|
||||
</v-row>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" class="mb-4">
|
||||
<div class="text-left text-pre-wrap">{{ item.solution }}</div>
|
||||
</v-col>
|
||||
<v-col v-for="(btn, btni) in actionButtons" :key="btni" cols="auto" :class="btn.class">
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn icon :color="btn.active ? btn.iconColor : ''" v-bind="attrs" v-on="on" @click="btn.onClick">
|
||||
<v-icon>{{ btn.active ? btn.iconActive : btn.iconInactive }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ btn.tooltip }}</span>
|
||||
</v-tooltip>
|
||||
<div class="text-caption text--secondary">{{ btn.caption }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<!-- eslint-disable-next-line -->
|
||||
<template #footer.page-text="{ pageStart, pageStop, itemsLength }">
|
||||
<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>
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user