From 0e8f60c6eac1fc390e8bb3ac76c296c818e2d434 Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Mon, 29 Apr 2024 13:41:23 +0200
Subject: [PATCH] refactor/Changed ExpenseBox component to emit expense id when
editing
---
src/components/Budget/ExpenseBox.vue | 27 +++++++++++++++++----------
1 file changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/components/Budget/ExpenseBox.vue b/src/components/Budget/ExpenseBox.vue
index 82967ad..1100cd4 100644
--- a/src/components/Budget/ExpenseBox.vue
+++ b/src/components/Budget/ExpenseBox.vue
@@ -1,9 +1,12 @@
<script setup lang="ts">
-import Button1 from '@/components/Buttons/Button1.vue'
-import { type CreateAppFunction, ref } from 'vue'
+import { ref } from 'vue'
const emit = defineEmits(['deleteEvent', 'editEvent']);
const props = defineProps({
+ id: {
+ type: Number,
+ required: true
+ },
index: {
type: Number,
default: 0
@@ -19,24 +22,24 @@ const props = defineProps({
})
// Reactive variables for expense description and amount
-let editDescription = ref('')
-let editAmount = ref('')
+let editDescription = ref(props.description)
+let editAmount = ref(props.amount)
/**
* Emits an event to parent component with the type 'deleteEvent' to signalize
- * that an expense with index 'index' must be removed.
+ * that an expense with given id must be removed.
*/
const emitDeleteEvent = () => {
- emit('deleteEvent', props.index)
+ emit('deleteEvent', props.id)
}
/**
* Emits an event to parent component with the type 'editEvent' to signalize
- * that an expense with index 'index' is to be edited with the values 'editDescription'
+ * that an expense with given id is to be edited with the values 'editDescription'
* and 'editAmount'
*/
const emitEditEvent = () => {
- emit('editEvent', props.index, editDescription.value, editAmount.value)
+ emit('editEvent', props.id, editDescription.value, editAmount.value)
}
</script>
@@ -55,11 +58,11 @@ const emitEditEvent = () => {
</button>
</div>
- <div class="collapse" id=index>
+ <div class="collapse" :id=String(index)>
<div class="container collapse-container">
<form @submit.prevent="emitEditEvent">
<div class="input-group">
- <span class="input-group-text">Edit expense #{{ index+1 }}: </span>
+ <span class="input-group-text">Edit expense {{ index+1 }} </span>
<input type="text" class="form-control" placeholder="Expense description" required v-model="editDescription">
<input type="number" min="0" class="form-control" placeholder="Amount (kr)" required v-model="editAmount">
<button type="submit" class="btn btn-primary" data-bs-toggle="collapse" :data-bs-target="'#' + index">Confirm</button>
@@ -70,6 +73,10 @@ const emitEditEvent = () => {
</template>
<style scoped>
+div.collapse {
+ margin-bottom: 10px;
+}
+
.expense-container {
padding: 0 10px;
display: grid;
--
GitLab