Add rating system for community questions

components/AddOpenEndedQuestion.vue

@@ -96,14 +96,16 @@ export default {
         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
-        this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
+        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
@@ -153,7 +155,7 @@ export default {
           this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
           Date.now() / 1000, // Current UNIX timestamp in seconds
           [],
-          []
+          {}
         )
 
         const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter))

components/Coop.vue

@@ -3,7 +3,7 @@
     <v-card-title>Community Fragen</v-card-title>
     <OpenEndedQuestionsList :questions="questions" />
     <v-divider></v-divider>
-    <AddOpenEndedQuestion />
+    <AddOpenEndedQuestion @added="addQuestionToList" />
   </v-card>
 </template>
 
@@ -43,6 +43,9 @@ export default {
         // 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

@@ -4,8 +4,12 @@
     :items-per-page.sync="itemsPerPage"
     :page.sync="page"
     :search="search"
-    :sort-by="sortBy.toLowerCase()"
+    :sort-by="sortBy"
     :sort-desc="sortDesc"
+    no-data-text="Keine Daten vorhanden"
+    no-results-text="Keine passenden Ergebnisse gefunden"
+    locale="de-DE"
+    class="text-center"
   >
     <template #header>
       <v-toolbar
@@ -19,7 +23,7 @@
           solo-inverted
           hide-details
           prepend-inner-icon="mdi-magnify"
-          label="Search"
+          label="Suchen"
         ></v-text-field>
         <template v-if="$vuetify.breakpoint.mdAndUp">
           <v-spacer></v-spacer>
@@ -29,8 +33,10 @@
             solo-inverted
             hide-details
             :items="keys"
-            prepend-inner-icon="mdi-magnify"
+            item-text="key"
-            label="Sort by"
+            item-value="value"
+            prepend-inner-icon="mdi-sort"
+            label="Sortieren"
           ></v-select>
           <v-spacer></v-spacer>
           <v-btn-toggle
@@ -40,7 +46,6 @@
             <v-btn
               large
               depressed
-              color="blue"
               :value="false"
             >
               <v-icon>mdi-arrow-up</v-icon>
@@ -48,7 +53,6 @@
             <v-btn
               large
               depressed
-              color="blue"
               :value="true"
             >
               <v-icon>mdi-arrow-down</v-icon>
@@ -61,16 +65,61 @@
     <template #default="props">
       <v-container fluid>
         <v-card outlined>
-          <v-expansion-panels hover accordion>
+          <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-expansion-panel-header v-slot="{ open }">
+                <v-row dense>
+                  <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 class="text-pre-wrap">
+              <v-expansion-panel-content>
-                <div class="text-pre-wrap">{{ item.solution }}</div>
+                <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 cols="auto" class="mr-4">
+                    <v-btn icon :color="helpful ? 'primary' : ''" @click="toggleHelpful">
+                      <v-icon>{{ helpful ? 'mdi-thumb-up' : 'mdi-thumb-up-outline' }}</v-icon>
+                    </v-btn>
+                    <div class="text-caption text--secondary">{{ item.helpful.length }}</div>
+                  </v-col>
+                  <v-col cols="auto">
+                    <v-btn icon :color="difficulty === 'easy' ? 'amber' : ''" @click="toggleDifficulty('easy')">
+                      <v-icon>{{ difficulty === 'easy' ? 'mdi-emoticon' : 'mdi-emoticon-outline' }}</v-icon>
+                    </v-btn>
+                    <div class="text-caption text--secondary">{{ item.difficulty.easy.length }}</div>
+                  </v-col>
+                  <v-col cols="auto">
+                    <v-btn icon :color="difficulty === 'medium' ? 'amber' : ''" @click="toggleDifficulty('medium')">
+                      <v-icon>{{ difficulty === 'medium' ? 'mdi-emoticon-happy' : 'mdi-emoticon-happy-outline' }}</v-icon>
+                    </v-btn>
+                    <div class="text-caption text--secondary">{{ item.difficulty.medium.length }}</div>
+                  </v-col>
+                  <v-col cols="auto">
+                    <v-btn icon :color="difficulty === 'hard' ? 'amber' : ''" @click="toggleDifficulty('hard')">
+                      <v-icon>{{ difficulty === 'hard' ? 'mdi-emoticon-confused' : 'mdi-emoticon-confused-outline' }}</v-icon>
+                    </v-btn>
+                    <div class="text-caption text--secondary">{{ item.difficulty.hard.length }}</div>
+                  </v-col>
+                </v-row>
               </v-expansion-panel-content>
             </v-expansion-panel>
           </v-expansion-panels>
@@ -81,6 +130,8 @@
 </template>
 
 <script>
+import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore'
+
 export default {
   name: 'OpenEndedQuestionsList',
   props: {
@@ -94,22 +145,38 @@ export default {
       itemsPerPageArray: [10, 20, 30],
       search: '',
       filter: {},
-      sortDesc: false,
+      sortDesc: true,
       page: 1,
       itemsPerPage: 10,
       sortBy: 'created',
       keys: [
-        'Created'
+        { key: 'Neueste', value: 'created' },
-      ]
+        { key: 'Hilfreich', value: 'helpful' },
+        { key: 'Schwierigkeit', value: 'difficultyLevel' }
+      ],
+      openPanels: [],
+      selectedQuestion: null
     }
   },
   computed: {
+    courseId () {
+      return this.$store.state.selectedCourse
+    },
     numberOfPages () {
       return Math.ceil(this.questions.length / this.itemsPerPage)
     },
     filteredKeys () {
       return this.keys.filter(key => key !== 'Name')
     },
+    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
+    }
   },
   methods: {
     nextPage () {
@@ -121,6 +188,61 @@ export default {
     updateItemsPerPage (number) {
       this.itemsPerPage = number
     },
+    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
+        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)
+        }
+      }).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
+        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)
+        }
+      }).catch((error) => {
+        // Failed to update the question; display error message
+        this.$toast({ content: error, color: 'error' })
+      })
+    }
   },
 }
 </script>

plugins/open-ended-question.js

@@ -1,12 +1,37 @@
 export class OpenEndedQuestion {
-  constructor (id, question, solution, creator, created, ratings, difficulty) {
+  constructor (id, question, solution, creator, created, helpful, difficulty) {
     this.id = id
     this.question = question
     this.solution = solution
     this.creator = creator
     this.created = created
-    this.ratings = ratings
+    this.helpful = helpful || []
-    this.difficulty = difficulty
+    this.difficulty = {
+      easy: difficulty.leicht || [],
+      medium: difficulty.mittel || [],
+      hard: difficulty.schwer || []
+    }
+    this.updateDifficultyLevel()
+  }
+
+  updateDifficultyLevel () {
+    const easyCount = this.difficulty.easy.length
+    const mediumCount = this.difficulty.medium.length
+    const hardCount = this.difficulty.hard.length
+
+    if (hardCount > 0 && hardCount >= mediumCount && hardCount >= easyCount) this.difficultyLevel = 3
+    else if (mediumCount > 0 && mediumCount >= hardCount && mediumCount >= easyCount) this.difficultyLevel = 2
+    else if (easyCount > 0 && easyCount >= hardCount && easyCount >= mediumCount) this.difficultyLevel = 1
+    else this.difficultyLevel = null
+  }
+
+  getDifficultyString () {
+    switch (this.difficultyLevel) {
+      case 1: return 'Leicht'
+      case 2: return 'Mittel'
+      case 3: return 'Schwer'
+      default: return 'Unbewertet'
+    }
   }
 }
 
@@ -18,12 +43,16 @@ export const OpenEndedQuestionConverter = {
       musterloesung: openEndedQuestion.solution,
       ersteller: openEndedQuestion.creator,
       erstellt: openEndedQuestion.created,
-      bewertungen: openEndedQuestion.ratings,
+      hilfreich: openEndedQuestion.helpful,
-      schwierigkeit: openEndedQuestion.difficulty
+      schwierigkeit: {
+        leicht: openEndedQuestion.difficulty.easy,
+        mittel: openEndedQuestion.difficulty.medium,
+        schwer: openEndedQuestion.difficulty.hard
+      }
     }
   },
   fromFirestore: (snapshot, options) => {
     const data = snapshot.data(options)
-    return new OpenEndedQuestion(snapshot.id, data.frage, data.musterloesung, data.ersteller, data.erstellt, data.bewertungen, data.schwierigkeit)
+    return new OpenEndedQuestion(snapshot.id, data.frage, data.musterloesung, data.ersteller, data.erstellt, data.hilfreich, data.schwierigkeit)
   }
 }