delete exercise

Author: rockstarr-programmerr

src/api/endpoints.ts

@@ -27,6 +27,7 @@ export const endpoints = {
     detail: '/classroom/reading-exercises/<pk>/',
     create: '/classroom/reading-exercises/',
     update: '/classroom/reading-exercises/<pk>/',
+    delete: '/classroom/reading-exercises/<pk>/',
     uploadImage: '/classroom/reading-exercises/upload-image/',
     submitAnswers: '/classroom/reading-exercises/<pk>/submit-answers/'
   },

src/api/reading-exercise.ts

@@ -26,6 +26,11 @@ export const readingExercise = {
     return res.data
   },
 
+  async delete (pk: ReadingExercise['pk']): Promise<void> {
+    const endpoint = replacePk(endpoints.readingExercise.delete, pk)
+    await Vue.axios.delete(endpoint)
+  },
+
   async submitAnswers (pk: ReadingExercise['pk'], payload: ReadingExerciseSubmitAnswersReq[]): Promise<void> {
     const endpoint = replacePk(endpoints.readingExercise.submitAnswers, pk)
     await Vue.axios.post(endpoint, payload)

src/store/reading-exercises.ts

@@ -43,6 +43,10 @@ export const readingExercise: Module<ReadingExerciseState, RootState> = {
       state.readingExercises.splice(0, 0, readingExercise)
     },
 
+    REMOVE_READING_EXERCISE (state, deletedPk) {
+      state.readingExercises = state.readingExercises.filter(ex => ex.pk !== deletedPk)
+    },
+
     SET_CURRENT_QUESTIONS (state, questions) {
       state.currentQuestions = questions
     },
@@ -99,6 +103,11 @@ export const readingExercise: Module<ReadingExerciseState, RootState> = {
       return data.pk
     },
 
+    async delete ({ commit }, pk: ReadingExercise['pk']): Promise<void> {
+      await Api.readingExercise.delete(pk)
+      commit('REMOVE_READING_EXERCISE', pk)
+    },
+
     async getQuestions ({ state, commit }): Promise<void> {
       if (state.currentReadingExercise === undefined) return
       const exercisePk = state.currentReadingExercise.pk

src/views/reading-exercise/ReadingExerciseCreate.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="container-sm">
     <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
 
     <v-card class="mx-auto">

src/views/reading-exercise/ReadingExerciseDetail.vue

@@ -9,7 +9,22 @@
     ></v-progress-circular>
 
     <div v-if="exercise !== undefined">
-      <h1>{{ exercise.identifier }}</h1>
+      <v-row
+        justify="space-between"
+        align="center"
+      >
+        <v-col cols="auto">
+          <h1>{{ exercise.identifier }}</h1>
+        </v-col>
+        <v-col cols="auto">
+          <v-btn
+            icon
+            @click="confirmDelete = true"
+          >
+            <v-icon>mdi-delete-outline</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
       <v-divider></v-divider>
 
       <v-row class="mt-0">
@@ -96,13 +111,53 @@
         </v-col>
       </v-row>
     </div>
+
+    <v-dialog
+      v-model="confirmDelete"
+      width="500"
+    >
+      <v-card>
+        <v-card-title>
+          Please confirm
+        </v-card-title>
+        <v-card-text>
+          <p>
+            You are deleting exercise <strong>{{ exercise.identifier }}</strong>.
+          </p>
+          <div class="error--text">
+            <v-icon color="error">
+              mdi-alert-outline
+            </v-icon>
+            This cannot be undone!
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            text
+            @click="confirmDelete = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="primary"
+            depressed
+            :loading="deleting"
+            @click="deleteExercise"
+          >
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
 <script lang="ts">
 import { ReadingQuestion } from '@/interfaces/reading-question'
 import { Mixins, Component } from 'vue-property-decorator'
 import { ReadingExerciseMixin } from '@/mixins/reading-exercise-mixin'
+import { unexpectedExc } from '@/utils'
 
 @Component
 export default class ReadingExerciseDetail extends Mixins(ReadingExerciseMixin) {
@@ -115,16 +170,6 @@ export default class ReadingExerciseDetail extends Mixins(ReadingExerciseMixin)
     ]
   }
 
-  expand = false
-
-  get exerciseContentHeight (): string {
-    if (!this.expand) {
-      return '50vh'
-    } else {
-      return 'unset'
-    }
-  }
-
   get passage1Questions (): ReadingQuestion[] {
     return this.questions.filter(question => question.passage === 1)
   }
@@ -140,6 +185,26 @@ export default class ReadingExerciseDetail extends Mixins(ReadingExerciseMixin)
   formatAnswers (answers: ReadingQuestion['answers']): string {
     return answers.join(' / ')
   }
+
+  /**
+   * Delete exercise
+   */
+  confirmDelete = false
+  deleting = false
+
+  deleteExercise (): void {
+    if (this.deleting) return
+    this.deleting = true
+
+    this.$store.dispatch('readingExercise/delete', this.exercise.pk)
+      .then(() => {
+        this.$router.push({ name: 'ReadingExerciseList' })
+      })
+      .catch(unexpectedExc)
+      .finally(() => {
+        this.deleting = false
+      })
+  }
 }
 </script>
 

src/views/reading-exercise/ReadingExerciseEditAnswers.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="container-sm">
     <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
 
     <v-progress-linear

src/views/reading-exercise/ReadingExerciseUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="container-sm">
     <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
 
     <v-progress-circular
@@ -42,21 +42,6 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-
-    <!--
-    <v-btn
-      fab
-      color="primary"
-      bottom
-      right
-      fixed
-      large
-    >
-      <v-icon>
-        mdi-content-save-outline
-      </v-icon>
-    </v-btn>
-    -->
   </v-container>
 </template>