rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

fixed the budget element and implemented onPress

Browse source
This commit is contained in:
thschleicher 2024-01-05 10:52:02 +01:00
parent deda54152b
commit 7606c5d1b8
3 changed files with 50 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/(tabs)/budget/index.tsx
View file

@ -37,6 +37,10 @@ export default function Page() {
}
};
const handleCategoryPress = (item: {[column: string]: any;}) => {
console.log(item.category_name);
}
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
@ -48,7 +52,15 @@ export default function Page() {
{isLoading ? (<LoadingSymbol/>) : (
<FlatList
data={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}/>}
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}
onPress={() => {
handleCategoryPress(item);
}}/>}
keyExtractor={item => item.category_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);

8
components/budget/budgetHeader.tsx
View file

@ -1,6 +1,6 @@
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import TextInputBar from "../common/TextInputBar";
import { useTheme } from "../../app/contexts/ThemeContext";
import TextInputBar from "../common/TextInputBar";
type BudgetHeaderProperties = {
selectedPage: string,
@ -34,7 +34,7 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
}}
/>
</View>
<TextInputBar placeholder='Search...'></TextInputBar>
<TextInputBar style={styles.searchBarStyle} placeholder='Search...'></TextInputBar>
</>);
}
@ -81,4 +81,8 @@ const styles = StyleSheet.create({
marginBottom: 20,
marginTop: 10,
},
searchBarStyle: {
marginBottom: 20,
marginHorizontal: 10,
}
});

14
components/budget/categoryItem.tsx
View file

@ -1,4 +1,5 @@
import { ColorValue, StyleSheet, Text, View } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useTheme } from "../../app/contexts/ThemeContext";
import CustomCard from "../common/CustomCard";
@ -8,6 +9,7 @@ export type CategoryItemProps = {
allocated_amount: number,
total_expenses: number,
category_guid: string,
onPress?: () => void,
}
const CategoryItem = (properties: CategoryItemProps) => {
@ -17,8 +19,9 @@ const CategoryItem = (properties: CategoryItemProps) => {
const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
return (
<CustomCard>
<View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
<TouchableOpacity onPress={properties.onPress}>
<CustomCard style={styles.customCardStyle}>
<View style={[styles.colorTipStyle, {backgroundColor: "blue"}]}/>
<View style={[styles.textViewStyle]}>
<Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
{properties.category}
@ -28,12 +31,17 @@ const CategoryItem = (properties: CategoryItemProps) => {
</Text>
</View>
</CustomCard>
</TouchableOpacity>
);
};
export default CategoryItem;
const styles = StyleSheet.create({
customCardStyle: {
flexDirection: "row",
justifyContent: "space-between",
},
colorTipStyle: {
width: 25,
borderTopLeftRadius: 10,
@ -53,4 +61,4 @@ const styles = StyleSheet.create({
subTextStyle: {
fontSize: 17.5,
}
})
});