Make community questions editable by everyone

components/AddOpenEndedQuestion.vue

@@ -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 text color="primary" @click="reset">Reset</v-btn>
-              <v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</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.editing ? this.updateQuestion() : this.createQuestion()
-          this.loading = true
+        })
+      })
+    },
+    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

components/CommunityComponent.vue

@@ -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',
+  name: 'CommunityComponent',
-  props: {
+  computed: {
-    courseId: {
+    courseId () {
-      type: String,
+      return this.$store.state.selectedCourse
-      required: true
-    }
-  },
-  data () {
-    return {
-      questions: []
     }
   },
   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)
     }
   }
 }

components/OpenEndedQuestionsList.vue

@@ -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) {
+        this.$store.commit('toggleHelpfulQuestion', this.selectedQuestion.id)
-          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)
-        }
       }).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) {
+        this.$store.commit('setDifficulty', { questionId: this.selectedQuestion.id, 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()
       }).catch((error) => {
         // Failed to update the question; display error message
         this.$toast({ content: error, color: 'error' })
       })
-    }
+    },
+    editQuestion () {}
   },
 }
 </script>

store/index.js

@@ -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) {