diff --git a/src/App.vue b/src/App.vue index f68791c..38a0aef 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ - + @@ -17,6 +17,10 @@ import AddTransaction from './components/AddTransaction.vue'; import { ref, computed } from 'vue'; +import { useToast } from 'vue-toastification'; + +const toast = useToast(); + const transactions = ref([ { id: 1, text: 'Flower', amount: -19.99 }, { id: 2, text: 'Salary', amount: 299.97 }, @@ -46,4 +50,20 @@ const expenses = computed(() => { .reduce((acc, transaction) => acc + transaction.amount, 0) .toFixed(2); }); + +// Submit transaction +const handleTransactionSubmitted = (transactionData) => { + transactions.value.push({ + id: generateUniqueId(), + text: transactionData.text, + amount: transactionData.amount, + }); + + toast.success('Transaction added.'); +}; + +// Generate unique ID +const generateUniqueId = () => { + return Math.floor(Math.random() * 1000000); +}; diff --git a/src/components/AddTransaction.vue b/src/components/AddTransaction.vue index 0a2d54b..a2e928d 100644 --- a/src/components/AddTransaction.vue +++ b/src/components/AddTransaction.vue @@ -31,6 +31,8 @@ const amount = ref(''); // Get toast interface const toast = useToast(); +const emit = defineEmits(['transactionSubmitted']); + const onSubmit = () => { if (!text.value || !amount.value) { // Display a toast error message if either field is empty @@ -38,8 +40,12 @@ const onSubmit = () => { return; } - // Proceed with form submission logic here... - console.log('Form submitted:', text.value, amount.value); + const transactionData = { + text: text.value, + amount: parseFloat(amount.value), + }; + + emit('transactionSubmitted', transactionData); // Clear form fields text.value = '';