290 lines
10 KiB
Vue
290 lines
10 KiB
Vue
<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"
|
|
: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"
|
|
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)"
|
|
>
|
|
<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>
|
|
import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore'
|
|
|
|
export default {
|
|
name: 'OpenEndedQuestionsList',
|
|
data () {
|
|
return {
|
|
items: [],
|
|
itemsPerPageArray: [10, 25, 50],
|
|
search: '',
|
|
sortDesc: true,
|
|
page: 1,
|
|
itemsPerPage: 10,
|
|
sortBy: 'created',
|
|
keys: [
|
|
{ key: 'Neueste', value: 'created' },
|
|
{ key: 'Kapitel', value: 'chapter' },
|
|
{ key: 'Hilfreich', value: 'helpful' },
|
|
{ key: 'Schwierigkeit', value: 'difficultyLevel' }
|
|
],
|
|
openPanels: [],
|
|
selectedQuestion: null,
|
|
show: false
|
|
}
|
|
},
|
|
computed: {
|
|
questions () {
|
|
return this.$store.state.openEndedQuestions
|
|
},
|
|
courseId () {
|
|
return this.$store.state.selectedCourse
|
|
},
|
|
numberOfPages () {
|
|
return Math.ceil(this.questions.length / this.itemsPerPage)
|
|
},
|
|
actionButtons () {
|
|
const self = this
|
|
return [
|
|
// Button "Helpful"
|
|
{
|
|
active: this.helpful,
|
|
iconActive: 'mdi-thumb-up',
|
|
iconInactive: 'mdi-thumb-up-outline',
|
|
iconColor: 'primary',
|
|
caption: this.selectedQuestion && this.selectedQuestion.helpful.length,
|
|
tooltip: 'Hilfreich',
|
|
class: 'mr-4',
|
|
onClick() { self.toggleHelpful() }
|
|
},
|
|
// Button "Easy Question"
|
|
{
|
|
active: this.difficulty === 'easy',
|
|
iconActive: 'mdi-emoticon',
|
|
iconInactive: 'mdi-emoticon-outline',
|
|
iconColor: 'amber',
|
|
caption: this.selectedQuestion && this.selectedQuestion.difficulty.easy.length,
|
|
tooltip: 'Leichte Frage',
|
|
onClick() { self.toggleDifficulty('easy') }
|
|
},
|
|
// Button "Moderate Question"
|
|
{
|
|
active: this.difficulty === 'medium',
|
|
iconActive: 'mdi-emoticon-happy',
|
|
iconInactive: 'mdi-emoticon-happy-outline',
|
|
iconColor: 'amber',
|
|
caption: this.selectedQuestion && this.selectedQuestion.difficulty.medium.length,
|
|
tooltip: 'Mittelschwere Frage',
|
|
onClick() { self.toggleDifficulty('medium') }
|
|
},
|
|
// Button "Hard Question"
|
|
{
|
|
active: this.difficulty === 'hard',
|
|
iconActive: 'mdi-emoticon-confused',
|
|
iconInactive: 'mdi-emoticon-confused-outline',
|
|
iconColor: 'amber',
|
|
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 }
|
|
}
|
|
]
|
|
},
|
|
helpful () {
|
|
return this.selectedQuestion && this.selectedQuestion.helpful.includes(this.$auth.currentUser.uid)
|
|
},
|
|
difficulty () {
|
|
if (this.selectedQuestion && this.selectedQuestion.difficulty.easy.includes(this.$auth.currentUser.uid)) return 'easy'
|
|
else if (this.selectedQuestion && this.selectedQuestion.difficulty.medium.includes(this.$auth.currentUser.uid)) return 'medium'
|
|
else if (this.selectedQuestion && this.selectedQuestion.difficulty.hard.includes(this.$auth.currentUser.uid)) return 'hard'
|
|
else return null
|
|
}
|
|
},
|
|
watch: {
|
|
questions () {
|
|
this.items = [...this.questions]
|
|
this.sort()
|
|
},
|
|
sortBy () {
|
|
this.sort()
|
|
},
|
|
sortDesc () {
|
|
this.sort()
|
|
}
|
|
},
|
|
methods: {
|
|
sort () {
|
|
if (this.items && this.items.length > 0) {
|
|
this.items.sort((a, b) => {
|
|
if (this.sortBy === 'helpful') {
|
|
return this.sortDesc
|
|
? b[this.sortBy].length - a[this.sortBy].length
|
|
: a[this.sortBy].length - b[this.sortBy].length
|
|
} else {
|
|
return this.sortDesc
|
|
? b[this.sortBy] - a[this.sortBy]
|
|
: a[this.sortBy] - b[this.sortBy]
|
|
}
|
|
})
|
|
}
|
|
},
|
|
setSelectedQuestion(q) {
|
|
this.selectedQuestion = q
|
|
},
|
|
toggleHelpful () {
|
|
const qRef = doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`)
|
|
|
|
updateDoc(qRef, {
|
|
hilfreich: this.helpful ? arrayRemove(this.$auth.currentUser.uid) : arrayUnion(this.$auth.currentUser.uid)
|
|
}).then((empty) => {
|
|
// Update question in list
|
|
this.$store.commit('toggleHelpfulQuestion', this.selectedQuestion.id)
|
|
}).catch((error) => {
|
|
// Failed to update the question; display error message
|
|
this.$toast({ content: error, color: 'error' })
|
|
})
|
|
},
|
|
toggleDifficulty (type) {
|
|
const typesDE = { easy: 'leicht', medium: 'mittel', hard: 'schwer' }
|
|
const typeDE = typesDE[type]
|
|
const updateProps = {}
|
|
|
|
if (this.difficulty === type) {
|
|
updateProps[`schwierigkeit.${typeDE}`] = arrayRemove(this.$auth.currentUser.uid)
|
|
} else {
|
|
if (typeDE !== typesDE.easy) updateProps['schwierigkeit.leicht'] = arrayRemove(this.$auth.currentUser.uid)
|
|
if (typeDE !== typesDE.medium) updateProps['schwierigkeit.mittel'] = arrayRemove(this.$auth.currentUser.uid)
|
|
if (typeDE !== typesDE.hard) updateProps['schwierigkeit.schwer'] = arrayRemove(this.$auth.currentUser.uid)
|
|
updateProps[`schwierigkeit.${typeDE}`] = arrayUnion(this.$auth.currentUser.uid)
|
|
}
|
|
|
|
updateDoc(doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`), updateProps)
|
|
.then((empty) => {
|
|
// Update question in list
|
|
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> |