correct display of budget used

This commit is contained in:
thschleicher 2024-01-02 11:55:49 +01:00 committed by Jakob Stornig
parent 6ee1c01d6a
commit 87640420ec
6 changed files with 14 additions and 24 deletions

View file

@ -8,7 +8,9 @@ export default function _Layout() {
headerShown: false
}}>
<Stack.Screen name="index"/>
<Stack.Screen name="addCategory"/>
<Stack.Screen
name="addCategory"
options={{presentation: "modal"}}/>
</Stack>
);
}

View file

@ -24,10 +24,9 @@ export default function Page() {
})
}, []);
const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category WHERE type = ?", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM expense e RIGHT JOIN category c ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
useEffect(() => {
console.log("reFetch()"); //REFETCH LOG
reFetch();
}, [selectedPage]);
@ -49,7 +48,7 @@ export default function Page() {
{isLoading ? (<LoadingSymbol/>) : (
<FlatList
data={data}
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_ammount={100} color={item.category_color} category_guid={item.category_guid} total_expenses={calculateSumOfCategory(item.guid, data)}/>}
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_amount={item.allocated_amount ?? 0} color={item.category_color} category_guid={item.category_guid} total_expenses={item.total_expenses ?? 0}/>}
keyExtractor={item => item.category_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
@ -60,15 +59,6 @@ export default function Page() {
);
}
const calculateSumOfCategory = (guid: string, data: {[column: string]: any;}[]): number => {
return 10;
}
const styles = StyleSheet.create({
safeAreaViewStyle: {
flex: 1,

View file

@ -109,7 +109,7 @@ export default function Page() {
<SearchBar placeholder='Type to Search...'></SearchBar>
</>
}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount}/>}
keyExtractor={item => item.expense_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);

View file

@ -15,8 +15,6 @@ export default function Page() {
}
});
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => {
@ -37,7 +35,7 @@ export default function Page() {
}}>Init Database</Text>
<Text style={styles.text} onPress={() => {
addCategory("Category", "green", "expense").then(() => {
addCategory("Category", "green", "expense", 500).then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) {
@ -49,7 +47,7 @@ export default function Page() {
}}>Add new Category Expense</Text>
<Text style={styles.text} onPress={() => {
addCategory("Category", "yellow", "saving").then(() => {
addCategory("Category", "yellow", "saving", 420).then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) {

View file

@ -5,7 +5,7 @@ import CustomCard from "../common/CustomCard";
export type CategoryItemProps = {
category: string,
color: ColorValue,
allocated_ammount: number,
allocated_amount: number,
total_expenses: number,
category_guid: string,
}
@ -14,7 +14,7 @@ const CategoryItem = (properties: CategoryItemProps) => {
const { colors } = useTheme();
const subText = `${properties.total_expenses} / ${properties.allocated_ammount}`;
const subText = `${properties.total_expenses} / ${properties.allocated_amount}`;
return (
<CustomCard>

View file

@ -24,7 +24,7 @@ export const initDatabase = async () => {
}
};
export const addCategory = async (name: string, color: string, type: string) => {
export const addCategory = async (name: string, color: string, type: string, allocated_amount: number) => {
//needs user input validation for type and color (should be validated by this function)
@ -32,8 +32,8 @@ export const addCategory = async (name: string, color: string, type: string) =>
try {
await db.transactionAsync(async (tx) => {
await tx.executeSqlAsync("INSERT INTO category (guid, name, color, type) VALUES (?, ?, ?, ?);",
[UUID.toString(), name, color, type]
await tx.executeSqlAsync("INSERT INTO category (guid, name, color, type, allocated_amount) VALUES (?, ?, ?, ?, ?);",
[UUID.toString(), name, color, type, allocated_amount]
);
});
} catch (error) {