Add button and endpoints to delete objects (#166)

src/components/EditObject.vue

@@ -9,6 +9,7 @@
     <v-card-actions>
       <v-btn text="Toggle full screen" color="primary" @click="toggleFullScreen"></v-btn>
       <v-spacer></v-spacer>
+      <v-btn text="Delete object" color="cancel" variant="tonal" @click="dialogDelete = true"></v-btn>
       <v-btn text="Cancel" color="cancel" @click="isActive.value = false"></v-btn>
       <v-btn text="Save" color="primary" @click="saveObject" variant="tonal"></v-btn>
     </v-card-actions>
@@ -21,6 +22,17 @@
         </li>
       </ul>
     </v-alert>
+    <v-dialog v-model="dialogDelete" max-width="420px">
+      <v-card>
+        <v-card-title class="text-h6">Are you sure you want to delete this item?</v-card-title>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="light" variant="text" @click="dialogDelete = false">Cancel</v-btn>
+          <v-btn color="error" variant="flat" @click="deleteObject">Delete</v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
@@ -57,7 +69,8 @@ export default {
         observable: "observables",
         indicator: "indicators",
         dfiq: "dfiq"
-      }
+      },
+      dialogDelete: false
     };
   },
   mounted() {},
@@ -94,6 +107,24 @@ export default {
         })
         .finally();
     },
+    deleteObject() {
+      axios
+        .delete(`/api/v2/${this.typeToEndpointMapping[this.object.root_type]}/${this.object.id}`)
+        .then(response => {
+          this.$eventBus.emit("displayMessage", {
+            message: `${this.object.name || "Observable"} succesfully deleted`,
+            status: "success"
+          });
+          this.$emit("success", response.data);
+          this.isActive.value = false;
+          this.$router.replace({ path: `/${this.typeToEndpointMapping[this.object.root_type]}` });
+        })
+        .catch(error => {
+          this.errors = [{ field: "details", message: error.response.data.detail }];
+          return;
+        })
+        .finally();
+    },
     toggleFullScreen() {
       this.fullScreen = !this.fullScreen;
       this.$emit("toggle-fullscreen", this.fullScreen);

src/views/ExportTemplates.vue

@@ -38,11 +38,6 @@
         <template v-slot:item.name="{ item }">
           <v-btn variant="plain" density="compact" @click="editTemplate(item)">{{ item.name }}</v-btn>
         </template>
-
-        <template v-slot:item.actions="{ item }">
-          <v-icon size="small" class="me-2" @click="editTemplate(item)"> mdi-pencil </v-icon>
-          <v-icon size="small" @click="deleteTemplate(item)"> mdi-delete </v-icon>
-        </template>
       </v-data-table>
       <v-btn-group rounded="1" density="compact">
         <v-btn color="primary" @click="newTemplate">New template</v-btn>