From 90d33b8378f08bcf59426b56f4e84e683c53b3cb Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Mon, 29 Apr 2024 13:37:40 +0200
Subject: [PATCH] feat/Created new confirm modal when upon deleting a budget
---
.../Budget/Modal/ConfirmDeleteModal.vue | 62 +++++++++++++++++++
1 file changed, 62 insertions(+)
create mode 100644 src/components/Budget/Modal/ConfirmDeleteModal.vue
diff --git a/src/components/Budget/Modal/ConfirmDeleteModal.vue b/src/components/Budget/Modal/ConfirmDeleteModal.vue
new file mode 100644
index 0000000..a0966b9
--- /dev/null
+++ b/src/components/Budget/Modal/ConfirmDeleteModal.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { UserService } from '@/api'
+
+const emit = defineEmits(['errorEvent', 'deletedEvent'])
+const props = defineProps({
+ modalId: {
+ type: String,
+ required: true
+ },
+ budgetId: {
+ type: Number,
+ required: true
+ },
+ budgetTitle: {
+ type: String,
+ default: ''
+ }
+})
+
+/**
+ * Deletes a budget with the specified ID and emits a delete event.
+ */
+const deleteBudget = async () => {
+ try {
+ await UserService.deleteBudget({budgetId: props.budgetId})
+ emit('deletedEvent')
+ } catch (error) {
+ emit('errorEvent', error)
+ }
+}
+
+</script>
+
+<template>
+ <div class="modal fade" :id="modalId">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h3>Are you sure you want to delete this budget <i>{{ budgetTitle }}?</i></h3>
+ <button class="btn btn-close" data-bs-dismiss="modal"></button>
+ </div>
+ <div class="modal-body">
+ <button class="btn btn-primary" data-bs-dismiss="modal" @click="deleteBudget">Yes</button>
+ <button class="btn btn-primary" data-bs-dismiss="modal">No</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+.modal-header {
+ display: flex;
+}
+
+.modal-body {
+ display: grid;
+ gap: 10px
+}
+
+</style>
\ No newline at end of file
--
GitLab