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

Resolve "Categories, detailed view on Press"

Browse source
This commit is contained in:
Thomas Schleicher 2024-01-05 12:27:56 +00:00
parent b927b0e8a0
commit 412e88d007
8 changed files with 105 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/(tabs)/budget/_layout.tsx
View file

@ -5,6 +5,7 @@ export default function _Layout() {
<Stack initialRouteName="index" screenOptions={{headerShown: false}}>
<Stack.Screen name="index"/>
<Stack.Screen name="addCategory" options={{presentation: "modal"}}/>
<Stack.Screen name="category" options={{headerShown: false, animation: "slide_from_right"}}/>
</Stack>
);
}

8
app/(tabs)/budget/addCategory.tsx
View file

@ -9,8 +9,8 @@ const addCategory = () => {
const parameters = useLocalSearchParams();
const [categoryName, setCartegoryName] = useState<string>("Enter Category Name...");
const [categoryColor, setCartegoryColor] = useState<null|string>(null);
const [categoryName, setCategoryName] = useState<string>("Enter Category Name...");
const [categoryColor, setCategoryColor] = useState<null|string>(null);
const [selectedType, setSelectedType] = useState<string>("expense");
return (
@ -20,7 +20,7 @@ const addCategory = () => {
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
<TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
setCartegoryName(newName);
setCategoryName(newName);
}}/>
</View>
@ -33,7 +33,7 @@ const addCategory = () => {
<View>
<CustomColorPicker currentColor={categoryColor} handleColorChange={(color) => {
setCartegoryColor(color);
setCategoryColor(color);
}}/>
</View>

95
app/(tabs)/budget/category.tsx Normal file
View file

@ -0,0 +1,95 @@
import { FontAwesome } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { useTheme } from "../../contexts/ThemeContext";
export default function Page() {
const {colors} = useTheme();
const {category_guid, category_name} = useLocalSearchParams();
const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color FROM expense e JOIN category c ON e.category_guid = c.guid WHERE c.guid = ? ORDER BY expense_datetime desc;", args: [category_guid]});
const handleEditCategory = () => {
console.log("edit category");
}
const handleBackButton = () => {
router.back();
}
return (
<SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
<TouchableOpacity style={styles.backContainer} onPress={handleBackButton}>
<FontAwesome style={styles.iconBack} name="arrow-left" size={35} color={colors.primaryText}/>
<Text style={[styles.backText, {color: colors.secondaryText}]}>Back</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.categoryEditTouchableOpacity, {backgroundColor: colors.elementDefaultColor}]}
onPress={handleEditCategory}>
<Text style={[styles.editButtonText, {color: colors.primaryText}]}>{category_name}</Text>
<FontAwesome style={styles.iconEdit} name="edit" size={35} color={colors.primaryText}/>
</TouchableOpacity>
<TextInputBar style={styles.searchBar} placeholder="Search..."/>
{isLoading ? (<LoadingSymbol/>) : (
<FlatList
data={data}
renderItem = {({item}) => <ExpenseItem
color={item.category_color}
category={item.category_name}
title={item.expense_name}
date={item.expense_datetime}
value={item.expense_amount}
/>}
keyExtractor={item => item.guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperator}/>);
}}
/>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
},
itemSeperator: {
margin: 5,
},
categoryEditTouchableOpacity: {
borderRadius: 10,
flexDirection: "row",
justifyContent: "space-around",
margin: 10,
},
editButtonText: {
fontSize: 30,
padding: 10,
fontWeight: "bold",
},
iconEdit: {
paddingVertical: 10,
paddingRight: 10,
},
searchBar: {
marginHorizontal: 10,
marginBottom:20,
},
iconBack: {
paddingLeft: 10,
paddingRight: 5,
},
backText: {
fontSize: 20,
padding: 5,
},
backContainer: {
flexDirection: "row",
justifyContent: "flex-start",
}
});

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

@ -38,7 +38,7 @@ export default function Page() {
};
const handleCategoryPress = (item: {[column: string]: any;}) => {
console.log(item.category_name);
router.push({pathname: "/(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
}
return (
@ -46,7 +46,7 @@ export default function Page() {
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
<Plus onPress={() => {
router.push({pathname: '/(tabs)/budget/addCategory', params: { guid: '123'}}); //This needs to be changed to a regular push, without parameters
router.push({pathname: '/(tabs)/budget/addCategory'});
}}/>
{isLoading ? (<LoadingSymbol/>) : (

8
app/(tabs)/stats/index.tsx
View file

@ -53,16 +53,10 @@ export default function Page() {
<Widget>
<BudgetRemaining budget={budget} spent={spent} />
</Widget>
<Widget text='#TODO Insert Pie-Chart' image={require('../../../assets/images/8b14el.jpg')}/>
<Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
<Widget>
<BudgetOverview budget={budget} spent={spent} />
</Widget>
<Widget title="Budget Progress">
<CategoryProgressBarList categories={BudgetData} />
</Widget>
<Widget title="Savings Progress">
<CategoryProgressBarList categories={SavingsData} />
</Widget>
</ScrollView>
</View>
);