implemented delete configitem

backend/models/configItemsModel.js

@@ -118,6 +118,7 @@ export const deleteConfigItemById = async (id, result) => {
   try {
     let sql = `DELETE FROM changedb WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

clientsideConfig.js

@@ -1,7 +1,7 @@
 const clientsideConfig = {
     // later for the server
-    url: 'tueitapp.tueit.de',
-   // url: 'localhost',
+    //url: 'tueitapp.tueit.de',
+    url: 'localhost',
     port: 3000,
 };
 

components/server/Asset.vue

@@ -76,7 +76,7 @@
 </template>
     
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
@@ -85,9 +85,9 @@ import { computed } from 'vue';
 const store = useStore();
 const editable = computed(() => store.state.assetEditable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
+const deleteAssetBool = computed(() => store.state.deleteAsset)
 
 const darkMode = ref(true)
-// const editable = ref(false)
 const item = ref({});
 
 // get config item from id
@@ -155,11 +155,29 @@ const updateConfigItem = async () => {
             )
             await getItemById();
         } catch (err) {
-            console.log(err);
+            console.log(err.response.statusText);
         }
     }
 }
 
+const confirmDeleteAsset = async () => {
+    if (deleteAssetBool.value === true) {
+        if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
+                store.commit('undoDeleteAsset');
+                store.commit('changeToAssetlist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDeleteAsset');
+        }
+    }
+}
+
+watch(deleteAssetBool, confirmDeleteAsset);
+
 onMounted(() => {
     getItemById();
 });

components/server/HardwareSpecifications.vue

@@ -128,7 +128,7 @@ const updateConfigItem = async () => {
         );
         await getItemById();
     } catch (err) {
-        console.log(err);
+        console.log(err.response.statusText);
     }
 }
 

components/server/NetworkSpecifications.vue

@@ -145,7 +145,7 @@ const updateConfigItem = async () => {
                 }
             );
         } catch (err) {
-            console.log(err);
+            console.log(err.response.statusText);
         }
     } else {
         if (item.value.IPv4 == null) {
@@ -192,7 +192,7 @@ const updateConfigItem = async () => {
                 }
             );
         } catch (err) {
-            console.log(err);
+            console.log(err.response.statusText);
         }
     } else {
         if (item.value.IPv6 == null) {

layouts/Actionbar.vue

@@ -79,7 +79,7 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
           <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="../icons/actionbar-icons/Delete-Icon.svg" />
@@ -100,6 +100,9 @@ const store = useStore()
 const toggleEditable = () => {
   store.commit('toggleEditableAsset');
 };
+const deleteAsset = () => {
+  store.commit('doDeleteAsset');
+};
 </script>
 
 
@@ -115,7 +118,6 @@ export default {
   },
   methods: {
     toggleActionbar() {
-      console.log('Actionbar toggled');
       this.isExpanded = !this.isExpanded;
     },
   },

plugins/vuex.js

@@ -4,6 +4,7 @@ const store = createStore({
     state() {
         return {
             assetEditable: false,
+            deleteAsset: false,
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
@@ -46,6 +47,12 @@ const store = createStore({
             state.chosenAssetId = -1
             state.assetEditable = false
         },
+        doDeleteAsset(state) {
+            state.deleteAsset = true
+        },
+        undoDeleteAsset(state) {
+            state.deleteAsset = false
+        }
     },
 });
 

server/api/deleteConfigItem/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/configItems";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/login.ts

@@ -11,8 +11,6 @@ export default defineEventHandler(async (event) => {
     };
     setResponseHeaders(event, headers)
 
-    console.log(event)
-
     if (!loginSuccessful) {
         throw createError({
             statusCode: 400,

server/api/updateConfigItem.ts

@@ -3,15 +3,6 @@ import { OutgoingMessage } from 'http';
 
 export default defineEventHandler(async (event) => {
 
-//    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
-//        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
-//        'Access-Control-Allow-Headers': 'authorization, content-type',
-//        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
-//    };
-//    setResponseHeaders(event, headers)
-
-    console.log(event)
-
     if (!(errorMsg === '')) {
         throw createError({
             statusCode: 400,

server/middleware/configItems.ts

@@ -107,6 +107,38 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/deleteConfigItem")) {
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        // delete the config item in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/configItems/${itemId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
 export { configItems, configItem, errorMsg };