Ability to delete applications

backend/app/controllers/applicationController.js

@@ -67,8 +67,17 @@ class ApplicationController extends Controller {
    * Delete an application from the database
    * @param {import('express').Request} req
    * @param {import('express').Response} res
+   * @param {import('express').NextFunction} next
    */
-  delete(req, res) {}
+  async delete(req, res, next) {
+    const { id } = req.params
+    try {
+      const response = await this._DB('applications').where({ id }).delete()
+      return res.json(response)
+    } catch (error) {
+      next(error)
+    }
+  }
 }
 
 module.exports = new ApplicationController()

backend/app/controllers/controller.js

@@ -1,3 +1,8 @@
-class Controller {}
+const { DB } = require('mevn-orm')
+class Controller {
+  constructor() {
+    this._DB = DB
+  }
+}
 
 module.exports = Controller

backend/routes/applications.js

@@ -1,39 +1,36 @@
 const router = require('express').Router()
 const applicationController = require('../app/controllers/applicationController')
 
-/**
- * Load all the applications from the database.
- * The default result count is 15 per page
- */
-router.get('/', (req, res, next) => {
-  applicationController.index(req, res, next)
-})
+router
+  /**
+   * List all applications
+   */
+  .get('/', (req, res, next) => {
+    applicationController.index(req, res, next)
+  })
 
-/**
- * Create a new application and return it with
- * a 201 response
- */
-router.post('/', (req, res, next) => {
-  applicationController.create(req, res, next)
-})
+  /**
+   * Create a new application
+   */
+  .post('/', (req, res, next) => {
+    applicationController.create(req, res, next)
+  })
 
-/**
- * Get a application using it's database ID
- * A 404 response is returned if the application was
- * Not found in the database
- */
-router.get('/:id', (req, res) => {})
+  /**
+   * Get an application with :id
+   */
+  .get('/:id', (req, res) => {})
 
-/**
- * Update an application's information.
- * Returns 201 on success
- */
-router.put('/:id', (req, res) => {})
+  /**
+   * Update an application
+   */
+  .put('/:id', (req, res) => {})
 
-/**
- * Deletes an application from the database
- * A 200 response is returned on success
- */
-router.delete('/', (req, res) => {})
+  /**
+   * Delete an application
+   */
+  .delete('/:id', (req, res, next) => {
+    applicationController.delete(req, res, next)
+  })
 
 module.exports = router

pages/home/applications.vue

@@ -4,8 +4,17 @@
       <v-col cols="12">
         <v-dialog v-model="createEventdialog" width="300">
           <template #activator="{ on, attrs }">
-            <v-btn color="primary" large v-bind="attrs" depressed v-on="on"
-              >Create app</v-btn
+            <v-btn
+              fixed
+              right
+              bottom
+              fab
+              color="primary"
+              large
+              v-bind="attrs"
+              depressed
+              v-on="on"
+              ><v-icon>mdi-plus</v-icon></v-btn
             >
           </template>
 
@@ -98,21 +107,66 @@
               <v-btn icon>
                 <v-icon>mdi-pencil-outline</v-icon>
               </v-btn>
-              <v-btn icon color="error">
+              <v-btn
+                icon
+                color="error"
+                @click="
+                  deleteDialog = true
+                  currentApp = app
+                "
+              >
                 <v-icon>mdi-delete-outline</v-icon>
               </v-btn>
             </v-list-item-action>
           </v-list-item>
         </v-card>
       </v-col>
     </v-row>
+
+    <!-- Dialog to delete an application -->
+    <v-dialog v-model="deleteDialog" width="500">
+      <v-card>
+        <v-card-title>Delete confirmation</v-card-title>
+        <v-card-text>
+          Clicking <b>'Yes delete'</b> below will delete
+          <b
+            ><i>{{ currentApp.name }}</i></b
+          >. This action is irreversible
+        </v-card-text>
+        <v-card-actions>
+          <!-- Confirm delete -->
+          <v-btn
+            depressed
+            rounded
+            outlined
+            color="primary"
+            @click="deleteApp(currentApp.id)"
+            >Yes delete</v-btn
+          >
+          <!-- Cancel action -->
+          <v-btn
+            large
+            depressed
+            rounded
+            color="primary"
+            @click="
+              deleteDialog = false
+              currentApp = {}
+            "
+            >Cancel</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 <script>
 export default {
   data() {
     return {
       createEventdialog: false,
+      deleteDialog: false,
+      currentApp: {},
       applications: [],
       newApp: {
         name: null,
@@ -148,6 +202,17 @@ export default {
         throw new Error(error)
       }
     },
+    async deleteApp(id) {
+      try {
+        await this.$axios.delete(`/api/applications/${id}`)
+        // All good
+        this.$fetch()
+        this.currentApp = {}
+        this.deleteDialog = false
+      } catch (error) {
+        throw new Error(error)
+      }
+    },
   },
 }
 </script>