From 860e50831db3e54941fd6acb015efc90373920e7 Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 6 Nov 2022 18:55:21 +0100
Subject: [PATCH] Add option for admins to remove courses

---
 components/RemoveCourse.vue     | 64 +++++++++++++++++++++++++++++++++
 pages/courses/_course/index.vue |  5 +++
 pages/user.vue                  |  1 -
 store/index.js                  |  3 +-
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 components/RemoveCourse.vue

diff --git a/components/RemoveCourse.vue b/components/RemoveCourse.vue
new file mode 100644
index 0000000..b1dfe31
--- /dev/null
+++ b/components/RemoveCourse.vue
@@ -0,0 +1,64 @@
+<template>
+  <v-dialog v-model="show" max-width="500" persistent>
+    <template #activator="{ on, attrs }">
+      <v-card v-bind="attrs" v-on="on">
+        <v-card-text class="text-h6 error--text">
+          <v-icon left color="error">mdi-delete</v-icon>
+          Kurs löschen
+        </v-card-text>
+      </v-card>
+    </template>
+    <v-card>
+      <v-card-title>Kurs löschen</v-card-title>
+      <v-card-text class="text-subtitle-1">
+        Möchtest du den Kurs <strong>{{ courseId.toUpperCase() }}</strong> dauerhaft und unwiderruflich löschen?
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text color="primary" @click="show = false">Abbrechen</v-btn>
+        <v-btn depressed color="primary" :loading="loading" @click="deleteCourse">Löschen</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { doc, deleteDoc } from 'firebase/firestore'
+
+export default {
+  name: 'RemoveCourseDialog',
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false,
+      loading: false
+    }
+  },
+  methods: {
+    deleteCourse () {
+      this.loading = true
+
+      // Delete document
+      deleteDoc(doc(this.$db, `kurse/${this.courseId}`))
+      .then((docRef) => {
+        // Successfully deleted the course from the database.
+        this.$store.commit('setCourse', { courseId: this.courseId, courseData: null })
+        this.$toast({content: `Der Kurs "${this.courseId.toUpperCase()}" wurde gelöscht.`, color: 'success'})
+        this.show = false
+
+        this.$router.push({ name: 'dashboard' })
+      })
+      .catch((error) => {
+        // Failed to add a new course to the database; display error message
+        this.$toast({content: error, color: 'error'})
+      })
+      .then(() => { this.loading = false })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/pages/courses/_course/index.vue b/pages/courses/_course/index.vue
index 52a160a..cbd9961 100644
--- a/pages/courses/_course/index.vue
+++ b/pages/courses/_course/index.vue
@@ -1,5 +1,10 @@
 <template>
   <v-container fluid>
+    <v-row v-if="$store.getters.isAdmin">
+      <v-col cols="12">
+        <RemoveCourse :course-id="courseID" />
+      </v-col>
+    </v-row>
     <v-row>
       <v-col cols="12" sm="6">
         <v-card height="100%" class="d-flex align-center pa-2">
diff --git a/pages/user.vue b/pages/user.vue
index 4f68b45..90b4ab0 100644
--- a/pages/user.vue
+++ b/pages/user.vue
@@ -83,7 +83,6 @@ export default {
       return new Date(str).toLocaleString('de-DE')
     },
     changeProfilePic () {
-      // TODO
       this.$toast({ content: 'Diese Funktion ist in der Demo-Version nicht verfügbar.', color: 'info', timeout: 3000 })
     },
     save () {
diff --git a/store/index.js b/store/index.js
index bafadd1..4a03b30 100644
--- a/store/index.js
+++ b/store/index.js
@@ -48,7 +48,8 @@ export const mutations = {
     state.user.courses.splice(index, 1)
   },
   setCourse (state, { courseID, courseData }) {
-    this._vm.$set(state.courses, courseID, courseData)
+    if (courseData) this._vm.$set(state.courses, courseID, courseData)
+    else this._vm.$delete(state.courses, courseID)
   },
   setSelectedCourse (state, courseID) {
     state.selectedCourse = courseID