Add component

components/AddQuestionComponent.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-card>
+    <ValidationObserver ref="observer" v-slot="{ invalid }">
+      <form @submit.prevent="submit">
+        <v-card-title>Frage einreichen</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="frage" rules="required">
+                <v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
+              </ValidationProvider>
+            </v-col>
+            <v-col v-for="(n, index) in 4" :key="index">
+              <ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
+                <v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
+                <v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                v-model="comment"
+                label="(Optional) Anmerkung"
+                persistent-hint
+                hint="Nur der Tutor kann deine Anmerkung sehen."
+              >
+                <template #message="{ message }">
+                  <v-icon small>mdi-information</v-icon>
+                  <span>{{ message }}</span>
+                </template>
+              </v-text-field>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn depressed outlined color="primary" @click="clear">Reset</v-btn>
+          <v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
+        </v-card-actions>
+      </form>
+    </ValidationObserver>
+  </v-card>
+</template>
+
+<script>
+import { doc, updateDoc, arrayUnion } 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 } from 'vee-validate/dist/rules'
+
+// Override the default error message of required fields
+extend('required', {
+  ...required,
+  message: 'Pflichtfeld'
+})
+
+export default {
+  components: {
+    ValidationProvider,
+    ValidationObserver
+  },
+  data () {
+    return {
+      loading: false,
+      question: '',
+      answers: [],
+      correctAnswer: null,
+      comment: ''
+    }
+  },
+  methods: {
+    submit () {
+      this.loading = true
+
+      const q = {
+        ersteller: this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+        erstellt: Date.now() / 1000, // Current UNIX timestamp in seconds
+        frage: this.question,
+        antworten: this.answers,
+        richtig: this.answers.indexOf(this.correctAnswer),
+        kommentare: this.comment ? [this.comment] : [],
+        status: 'neu'
+      }
+
+      // Atomically add the new question to the "fragen" array field.
+      const questionsRef = doc(this.$db, 'fragen', this.$store.state.selectedCourse)
+      updateDoc(questionsRef, {
+        fragen: arrayUnion(q) // Ref: https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array
+      }).then((empty) => {
+        // Successfully added new question to database
+        this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
+      })
+      .catch((error) => {
+        // Failed to add question to database; display error message
+        this.$toast({content: error, color: 'error'})
+      })
+      .then(() => {
+        this.loading = false
+      })
+    },
+    clear () {
+      this.question = ''
+      this.answers = []
+      this.correctAnswer = null
+      this.comment = ''
+      this.$refs.observer.reset()
+    }
+  }
+}
+</script>