Merge branch 'repair' into 'main'

fixed the budget element and implemented onPress

See merge request thschleicher/interaktive-systeme!44

app/(tabs)/budget/index.tsx

@@ -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}/>);

components/budget/budgetHeader.tsx

@@ -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,
+    }
 });

components/budget/categoryItem.tsx

@@ -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> 
+        <TouchableOpacity onPress={properties.onPress}>
-            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
+            <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,
     }
-  })
+});