From 5accad5ae0b3d3a4c8ea8beedbb621e1a56ac700 Mon Sep 17 00:00:00 2001
From: vildemv <vildemv@ntnu.no>
Date: Thu, 25 Apr 2024 11:58:22 +0200
Subject: [PATCH 1/2] Fixed logic for API calls to backend for expenses and
transactions.
---
src/utils/TransactionUtils.ts | 160 +++++++++++++++--------------
src/views/HomePage/EconomyView.vue | 29 +++---
2 files changed, 99 insertions(+), 90 deletions(-)
diff --git a/src/utils/TransactionUtils.ts b/src/utils/TransactionUtils.ts
index c0f1f05..e565330 100644
--- a/src/utils/TransactionUtils.ts
+++ b/src/utils/TransactionUtils.ts
@@ -1,91 +1,95 @@
import axios from 'axios'
-export const getTransactions = async (pageNumber: Number, pageSize: Number): Promise<any> => {
+const transactionsList = [
+ {
+ transactionId: 1,
+ transactionTitle: "Kiwi",
+ date: "15-05-2003",
+ debtorAccount: 12312312312,
+ debtorName: "Kiwi AS",
+ creditorAccount: 32131232132,
+ amount: 250,
+ currency: "NOK",
+ TransactionCategory: {
+ category: "Groceries"
+ }
+ },
+ {
+ transactionId: 2,
+ transactionTitle: "Apple",
+ date: "16-05-2003",
+ debtorAccount: 12312312312,
+ debtorName: "Apple Inc.",
+ creditorAccount: 32131232132,
+ amount: 300,
+ currency: "NOK",
+ TransactionCategory: {
+ category: "Electronics"
+ }
+ },
+ {
+ transactionId: 3,
+ transactionTitle: "Banana",
+ date: "17-05-2003",
+ debtorAccount: 12312312312,
+ debtorName: "Banana Corp.",
+ creditorAccount: 32131232132,
+ amount: 350,
+ currency: "NOK",
+ TransactionCategory: {
+ category: "Banana criminality"
+ }
+ },
+ {
+ transactionId: 4,
+ transactionTitle: "Orange",
+ date: "18-05-2003",
+ debtorAccount: 12312312312,
+ debtorName: "Orange Ltd.",
+ creditorAccount: 32131232132,
+ amount: 400,
+ currency: "NOK",
+ TransactionCategory: {
+ category: "Annoying"
+ }
+ },
+ {
+ transactionId: 4,
+ transactionTitle: "Crab",
+ date: "18-05-2003",
+ debtorAccount: 12312312312,
+ debtorName: "Crab Narcotics.",
+ creditorAccount: 32131232132,
+ amount: 400,
+ currency: "NOK",
+ TransactionCategory: {
+ category: "Drugs hehe"
+ }
+ }
+];
+
+export const getTransactions = async (token:string, pageNumber: Number, pageSize: Number): Promise<any> => {
const config = {
headers: {
"Content-type": "application/json",
- "Authorization": "Bearer " + "Ddaddaaddasasda"
- }
- }
- const transactionsList = [
- {
- transactionId: 1,
- transactionTitle: "Kiwi",
- date: "15-05-2003",
- debtorAccount: 12312312312,
- debtorName: "Kiwi AS",
- creditorAccount: 32131232132,
- amount: 250,
- currency: "NOK",
- TransactionCategory: {
- category: "Groceries"
- }
- },
- {
- transactionId: 2,
- transactionTitle: "Apple",
- date: "16-05-2003",
- debtorAccount: 12312312312,
- debtorName: "Apple Inc.",
- creditorAccount: 32131232132,
- amount: 300,
- currency: "NOK",
- TransactionCategory: {
- category: "Electronics"
- }
- },
- {
- transactionId: 3,
- transactionTitle: "Banana",
- date: "17-05-2003",
- debtorAccount: 12312312312,
- debtorName: "Banana Corp.",
- creditorAccount: 32131232132,
- amount: 350,
- currency: "NOK",
- TransactionCategory: {
- category: "Banana criminality"
- }
- },
- {
- transactionId: 4,
- transactionTitle: "Orange",
- date: "18-05-2003",
- debtorAccount: 12312312312,
- debtorName: "Orange Ltd.",
- creditorAccount: 32131232132,
- amount: 400,
- currency: "NOK",
- TransactionCategory: {
- category: "Annoying"
- }
+ 'Authorization': `Bearer ${token}`
},
- {
- transactionId: 4,
- transactionTitle: "Crab",
- date: "18-05-2003",
- debtorAccount: 12312312312,
- debtorName: "Crab Narcotics.",
- creditorAccount: 32131232132,
- amount: 400,
- currency: "NOK",
- TransactionCategory: {
- category: "Drugs hehe"
- }
+ params:{
+ "page": pageNumber,
+ "size": pageSize
}
- ];
-
-
- const pageable = {
- pageNum: pageNumber,
- pageSize: pageSize
}
try {
- await axios.post("localhost:8080/user/transaction/latest/expense", pageable, config)
+ console.log(token)
+ console.log('trying to get transactions')
+ console.log(config)
+ const result = await axios.get("http://localhost:8080/user/transaction/latest/expense", config)
+
+ console.log(result.data);
+ return result.data;
} catch (e: any) {
- console.log("sending test data")
- return transactionsList
- // throw "Failed to fetch transacions: "+e.response.data
+ console.log(e)
+ throw e;
}
}
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index 029ba27..2372723 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -5,23 +5,24 @@ import { ArcElement, Chart as ChartJS, Colors, Legend, Tooltip } from 'chart.js'
import TransactionComponent from '@/components/economy/TransactionComponent.vue'
import ToggleButton from '@/components/economy/ToggleButton.vue'
import { getTransactions } from '@/utils/TransactionUtils'
+import { useTokenStore } from '@/stores/token'
ChartJS.register(ArcElement,Tooltip,Legend, Colors)
-const selectedOption = ref<string | null>("")
+const token:string = useTokenStore().jwtToken;
+const selectedOption = ref<string | null>("")
//let page = 0;
let pages = 0;
let currentPage = 0;
-const transactions = ref<any[]>([])
+const transactions = ref<[]>([])
const fetchTransactions = async() => {
try{
- transactions.value = await getTransactions(1, 2)
- //const response = await getTransactions(1,2)
- //transactions.value = response.data
- //fordi akk nå benytter vi av test data
+ const response = await getTransactions(token,0,6)
+ transactions.value = response
+ console.log(transactions.value)
} catch (e) {
console.log(e)
}
@@ -46,7 +47,9 @@ const handleSelectionChange = (value: string | null) => {
const distinctCategories = computed(() => {
const categories = new Set<string>()
transactions.value.forEach(transaction => {
- categories.add(transaction.TransactionCategory.category)
+ console.log(transaction.transactionCategory)
+ categories.add(transaction.transactionCategory)
+ console.log(categories)
})
return Array.from(categories)
})
@@ -57,11 +60,13 @@ const dropdownOptions = computed(() => {
const filteredTransactions = computed(() => {
if (selectedOption.value === 'Alle' || !selectedOption.value) {
+ console.log(transactions.value)
return transactions.value
} else {
- return transactions.value.filter(transaction => transaction.TransactionCategory.category === selectedOption.value)
+ return transactions.value.filter(transaction => transaction.transactionCategory === selectedOption.value)
}
})
+
const chartData = computed(() => {
const data: { labels: string[], datasets: { data: number[], label:string ,backgroundColor: string[] }[] } = {
labels: [],
@@ -75,9 +80,9 @@ const chartData = computed(() => {
const categoryAmounts: { [key: string]: number } = {};
transactions.value.forEach(transaction => {
- const { TransactionCategory, amount } = transaction;
- console.log(TransactionCategory)
- const category = TransactionCategory.category
+ const { transactionCategory, amount } = transaction;
+ console.log(transactionCategory)
+ const category = transactionCategory
if (category in categoryAmounts) {
categoryAmounts[category] += amount;
} else {
@@ -161,7 +166,7 @@ const getRandomColor = () => {
v-for="transaction in filteredTransactions"
:key="transaction.transactionId"
:title="transaction.transactionTitle"
- :category="transaction.TransactionCategory.category"
+ :category="transaction.transactionCategory"
:amount="transaction.amount"
:date="transaction.date"
></transaction-component>
--
GitLab
From 5d5dad14ad13cd3761f8eae4bc294d6d8bc5a8f6 Mon Sep 17 00:00:00 2001
From: vildemv <vildemv@ntnu.no>
Date: Thu, 25 Apr 2024 12:27:07 +0200
Subject: [PATCH 2/2] Fixed build error.
---
src/views/HomePage/EconomyView.vue | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index 2372723..9d17cda 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -9,6 +9,15 @@ import { useTokenStore } from '@/stores/token'
ChartJS.register(ArcElement,Tooltip,Legend, Colors)
+interface Transaction {
+ "transactionCategory": string,
+ "transactionTitle": string,
+ "amount": number,
+ "transactionId": number,
+ "date": string,
+
+}
+
const token:string = useTokenStore().jwtToken;
const selectedOption = ref<string | null>("")
@@ -17,7 +26,7 @@ const selectedOption = ref<string | null>("")
let pages = 0;
let currentPage = 0;
-const transactions = ref<[]>([])
+const transactions = ref<Transaction[]>([])
const fetchTransactions = async() => {
try{
const response = await getTransactions(token,0,6)
--
GitLab