From 890dcc7ab4c29b4f72efeef81da8d83458c8bcab Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Mon, 29 Apr 2024 13:38:25 +0200
Subject: [PATCH] feat/Created new import budget modal upon importing a budget
---
.../Budget/Modal/ImportBudgetModal.vue | 58 +++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 src/components/Budget/Modal/ImportBudgetModal.vue
diff --git a/src/components/Budget/Modal/ImportBudgetModal.vue b/src/components/Budget/Modal/ImportBudgetModal.vue
new file mode 100644
index 0000000..47ab56b
--- /dev/null
+++ b/src/components/Budget/Modal/ImportBudgetModal.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { BudgetResponseDTO } from '@/api'
+import MiniBudgetBox from '@/components/Budget/Modal/MiniBudgetBox.vue'
+
+const emit = defineEmits(['importBudgetEvent'])
+const props = defineProps({
+ modalId: {
+ type: String,
+ required: true
+ },
+ listOfBudgetResponseDTO: {
+ type: Array as () => BudgetResponseDTO[],
+ default: () => []
+ }
+})
+
+/**
+ * Emits an importBudgetEvent to the parent in order to signalize that
+ * a budget with id has been imported.
+ *
+ * @param budgetId The id of the imported budget.
+ */
+const emitImportBudgetEvent = (budgetId: number) => {
+ emit('importBudgetEvent', budgetId)
+}
+</script>
+
+<template>
+ <div class="modal fade" :id="modalId">
+ <div class="modal-dialog modal-dialog-centered modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h3>Choose a budget you would like to import</h3>
+ <button class="btn btn-close" data-bs-dismiss="modal"></button>
+ </div>
+ <div class="modal-body">
+ <MiniBudgetBox v-for="(item, index) in listOfBudgetResponseDTO"
+ :key="index"
+ :budget-id="Number(item.id) || 0"
+ :budget-title="item.budgetName"
+ :budget-amount="Number(item.budgetAmount)"
+ :expense-amount="Number(item.expenseAmount)"
+ @importBudgetEvent="emitImportBudgetEvent"
+ >
+ </MiniBudgetBox>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+div.modal-body {
+ padding-left: 0;
+}
+
+</style>
\ No newline at end of file
--
GitLab