correct display of budget used
This commit is contained in:
parent
6ee1c01d6a
commit
87640420ec
6 changed files with 14 additions and 24 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}/>);
|
||||
|
|
|
|||
|
|
@ -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]) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Reference in a new issue