delete classroom

Author: rockstarr-programmerr

src/api/classroom.ts

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

src/api/endpoints.ts

@@ -15,6 +15,7 @@ export const endpoints = {
     classroomDetail: '/classroom/classrooms/<pk>/',
     classroomCreate: '/classroom/classrooms/',
     classroomUpdate: '/classroom/classrooms/<pk>/',
+    classroomDelete: '/classroom/classrooms/<pk>/',
     addStudents: '/classroom/classrooms/<pk>/add-students/',
     removeStudents: '/classroom/classrooms/<pk>/remove-students/',
     addReadingExercises: '/classroom/classrooms/<pk>/add-reading-exercises/',

src/layouts/LayoutClassroomTeacher.vue

@@ -46,7 +46,7 @@
                     <v-list-item-title>Edit</v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
-                <v-list-item>
+                <v-list-item @click="confirmDelete = true">
                   <v-list-item-icon>
                     <v-icon>mdi-delete-outline</v-icon>
                   </v-list-item-icon>
@@ -77,6 +77,45 @@
         <router-view v-if="classroomFound" class="mt-5"></router-view>
       </div>
     </v-container>
+
+    <v-dialog
+      v-model="confirmDelete"
+      width="500"
+    >
+      <v-card>
+        <v-card-title>
+          Please confirm
+        </v-card-title>
+        <v-card-text>
+          <p>
+            You are deleting classroom <strong>{{ classroom.name }}</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="deleteClassroom"
+          >
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </LayoutDefault>
 </template>
 
@@ -147,6 +186,26 @@ export default class LayoutClassroomTeacher extends Vue {
     { text: 'Listening exercises', to: { name: 'ClassroomExercisesListening' } }
   ]
 
+  /**
+   * Delete classroom
+   */
+  confirmDelete = false
+  deleting = false
+
+  deleteClassroom (): void {
+    if (this.deleting) return
+    this.deleting = true
+
+    this.$store.dispatch('classroom/delete', this.classroom.pk)
+      .then(() => {
+        this.$router.push({ name: 'ClassroomList' })
+      })
+      .catch(unexpectedExc)
+      .finally(() => {
+        this.deleting = false
+      })
+  }
+
   // @ts-expect-error: don't care
   // eslint-disable-next-line
   beforeRouteLeave (to, from, next): void {

src/store/classroom.ts

@@ -46,6 +46,10 @@ export const classroom: Module<ClassroomState, RootState> = {
       state.classrooms.splice(index, 1, classroom)
     },
 
+    REMOVE_CLASSROOM (state, pkDeleted) {
+      state.classrooms = state.classrooms.filter(classroom => classroom.pk !== pkDeleted)
+    },
+
     ADD_STUDENT_TO_CURRENT_CLASSROOM (state, student) {
       if (state.currentClassroom !== undefined) {
         state.currentClassroom.students.push(student)
@@ -114,6 +118,11 @@ export const classroom: Module<ClassroomState, RootState> = {
       commit('EDIT_CLASSROOM', data)
     },
 
+    async delete ({ commit }, pk: Classroom['pk']): Promise<void> {
+      await Api.classroom.delete(pk)
+      commit('REMOVE_CLASSROOM', pk)
+    },
+
     async addStudents ({ state, commit }, payload: AddStudentReq[]): Promise<void> {
       if (state.currentClassroom === undefined) return
       await Api.classroom.addStudents(state.currentClassroom.pk, payload)