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

Merge branch '67-date-filtering-on-home-screen' into 'main'

Browse source 
Resolve "date filtering on home screen"

Closes #67

See merge request thschleicher/interaktive-systeme!58
This commit is contained in:
jastornig 2024-01-25 18:28:17 +00:00
commit 305e110da5
10 changed files with 116 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/(tabs)/(budget)/category.tsx
View file

@ -1,8 +1,7 @@
import { FontAwesome } from "@expo/vector-icons";
import { useRouter, useLocalSearchParams } from "expo-router";
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
import { ExpenseItem, LoadingSymbol, TextInputBar, EmptyListCompenent, Plus } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from "react-native-safe-area-context";
@ -37,6 +36,7 @@ export default function Page() {
return (
<SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
<Plus onPress={()=> router.push(`/expense/new?category=${category_guid}`)}/>
<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>
@ -65,6 +65,7 @@ export default function Page() {
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperator}/>);
}}
ListEmptyComponent={EmptyListCompenent}
/>
)}
</SafeAreaView>

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

@ -1,10 +1,11 @@
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
import { StyleSheet, Text, TextInput, View } from "react-native";
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch, Plus } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { deleteCategory, deleteExpense, updateCategory } from "../../../services/database";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from 'react-native-safe-area-context';
const addCategory = () => {
const {colors} = useTheme();
@ -20,7 +21,6 @@ const addCategory = () => {
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Edit Category</Text>
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
<TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
@ -29,7 +29,7 @@ const addCategory = () => {
</View>
<View style={styles.budgetInput}>
<AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
<AutoDecimalInput label={"Allocated:"} initialValue={amount} onValueChange={(value) => {
setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
}}/>
</View>

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

@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BudgetHeader, CategoryItem, LoadingSymbol, Plus, TextInputBar } from '../../../components';
import { BudgetHeader, CategoryItem, EmptyListCompenent, LoadingSymbol, Plus, TextInputBar } from '../../../components';
import useFetch from '../../../hooks/useFetch';
import { useTheme } from '../../contexts/ThemeContext';
import { useFocusEffect } from 'expo-router/src/useFocusEffect';
@ -13,41 +13,45 @@ export default function Page() {
const {colors} = useTheme()
const containerColor = colors.containerColor;
const navigation = useNavigation();
const [selectedPage, setSelectedPage] = useState("noPageLoaded");
const [selectedPage, setSelectedPage] = useState<"expense"|"saving">("expense");
const [searchString, setSearchString] = useState("");
useEffect(() => {
console.log("initial effect called")
AsyncStorage.getItem("currentBudgetPage").then((page) => {
if(page === "expenses" || page === "savings") {
setSelectedPage(page);
}
}).catch((error) => {
console.log("Error fetching previous page from Async Storage:", error);
})
}, []);
// useEffect(() => {
// console.log("initial effect called")
// AsyncStorage.getItem("currentBudgetPage").then((page) => {
// if(page === "expenses" || page === "savings") {
// setSelectedPage(page);
// }
// }).catch((error) => {
// console.log("Error fetching previous page from Async Storage:", error);
// })
// }, []);
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 category c LEFT JOIN expense e ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", 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 category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});
useEffect(() => {
reFetch()
}, [selectedPage]);
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
reFetch();
})
return unsubscribe;
const t = () => {
console.log("unsubscribed")
unsubscribe();
}
return t;
}, [navigation])
const handlePageSelection = (page: string) => {
if(page !== selectedPage) {
const handlePageSelection = (page: "expense" | "saving") => {
setSelectedPage(page);
AsyncStorage.setItem("currentBudgetPage", page);
}
};
const handleCategoryPress = (item: {[column: string]: any;}) => {
@ -56,10 +60,14 @@ export default function Page() {
const filteredData = useMemo(() => {
return data.filter((item) => {
if(item.category_type !== selectedPage) {
return false
}
return item.category_name.toLowerCase().includes(searchString.toLowerCase());
})
}, [data, searchString]);
}, [data, searchString, selectedPage]);
console.log(selectedPage)
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<View style={{flex: 1, marginHorizontal: 10}}>
@ -86,6 +94,7 @@ export default function Page() {
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}
ListEmptyComponent={EmptyListCompenent}
/>
)}
</View>

9
app/(tabs)/(home)/index.tsx
View file

@ -3,7 +3,7 @@ import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react
import { Calendar } from 'react-native-calendars';
import { FlatList, RefreshControl } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
import { EmptyListCompenent, ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
import useFetch from '../../../hooks/useFetch';
import { useRouter } from "expo-router";
@ -126,6 +126,9 @@ export default function Page() {
}, [navigation]);
const hanldeDaySelect = (date: string | undefined) => {
if(filter.day === date)
setFilter({...filter, day: undefined});
else
setFilter({...filter, day: date});
}
const handleMonthSelect = (date: string | undefined) => {
@ -171,9 +174,6 @@ export default function Page() {
onDayPress={(date) => {
hanldeDaySelect(date.dateString)
}}
onDayLongPress={(date) => {
hanldeDaySelect(undefined)
}}
onMonthChange={(date) => {
handleMonthSelect(date.dateString)
}}
@ -201,6 +201,7 @@ export default function Page() {
}
onScroll={handleScroll}
scrollEventThrottle={20}
ListEmptyComponent={EmptyListCompenent}
/>
</SafeAreaView>
);

22
app/expense/new.tsx
View file

@ -1,18 +1,20 @@
import { View, Text, StyleSheet, Alert } from 'react-native'
import React, { useRef, useState } from 'react'
import React, { useEffect, useRef, useState } from 'react'
import { SIZES } from '../../constants/theme'
import { useTheme } from '../contexts/ThemeContext'
import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../components'
import { Category } from '../../types/dbItems'
import DateTimePicker from '@react-native-community/datetimepicker';
import { addExpense } from '../../services/database'
import { addExpense, executeQuery } from '../../services/database'
import { SimpleDate } from '../../util/SimpleDate'
import { useRouter } from 'expo-router'
import { useLocalSearchParams, useRouter } from 'expo-router'
export default function AddItem() {
const {colors} = useTheme();
const router = useRouter();
const searchParams = useLocalSearchParams()
const [formatedValue, setFormatedValue] = useState<string>("");
const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
const [selectedCategory, setSelectedCategory] = useState<Category|undefined>()
@ -50,6 +52,20 @@ export default function AddItem() {
}
useEffect(()=>{
if(searchParams.category !== undefined){
console.log(searchParams.category)
executeQuery({sql: "SELECT * FROM category WHERE guid = ?", args: [searchParams.category]}).then((result) =>{
console.log("then")
if("rows" in result[0]){
const category = result[0]["rows"][0];
setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})
}
//setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})
})
}
}, [])
return (
<View style={styles.container}>
<CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>

10
components/budget/budgetHeader.tsx
View file

@ -4,7 +4,7 @@ import TextInputBar from "../common/TextInputBar";
type BudgetHeaderProperties = {
selectedPage: string,
handlePageSelection: (page: string) => void,
handlePageSelection: (page: "expense" | "saving") => void,
}
type PageSelectorButtonProperties = {
@ -21,16 +21,16 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
<View style={styles.containerStyle}>
<PageSelectorButton
label="Expenses"
isSelected={properties.selectedPage === "expenses"}
isSelected={properties.selectedPage === "expense"}
onPress={() => {
properties.handlePageSelection("expenses")
properties.handlePageSelection("expense")
}}
/>
<PageSelectorButton
label="Savings"
isSelected={properties.selectedPage === "savings"}
isSelected={properties.selectedPage === "saving"}
onPress={() => {
properties.handlePageSelection("savings");
properties.handlePageSelection("saving");
}}
/>
</View>

24
components/common/EmptyListCompenent.tsx Normal file
View file

@ -0,0 +1,24 @@
import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
import { useTheme } from '../../app/contexts/ThemeContext'
const EmptyListCompenent:React.FC = () => {
const {colors} = useTheme();
return (
<View style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
<Text style={[{fontSize: 20}, {color: colors.primaryText}]}>No matching Data</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: 70,
borderRadius: 20,
}
})
export default EmptyListCompenent

2
components/common/TextInputBar.tsx
View file

@ -42,7 +42,7 @@ export default function TextInputBar(props: SearchBarProps) {
// changed styles.container to containerStyle
return (
<View style={[containerStyle, props.style]}>
<TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onEndEditing={()=>setIsactive(false)}/>
<TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onPressIn={()=>(setIsactive(true))} onEndEditing={()=>setIsactive(false)}/>
{isActive &&
<TouchableOpacity style={styles.cancel} onPress={()=>{

4
components/expense/CategorySelectorModal.tsx
View file

@ -6,6 +6,7 @@ import CategoryListItem from '../common/CategoryListItem';
import { SIZES } from '../../constants/theme';
import useFetch from '../../hooks/useFetch';
import TextInputBar from '../common/TextInputBar';
import EmptyListCompenent from '../common/EmptyListCompenent';
interface CategorySelectorModalProps{
@ -43,7 +44,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
}, [visible])
return (
<Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose}>
<Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose} animationType='slide'>
<View style={styles.main}>
<View style={[styles.modal, {backgroundColor: colors.containerColor}]}>
<View>
@ -57,6 +58,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
ItemSeparatorComponent={() => <View style={styles.itemSeperatorStyle}/>}
ListFooterComponent={() => <View style={styles.itemSeperatorStyle}/>}
keyboardShouldPersistTaps="always"
ListEmptyComponent={EmptyListCompenent}
>
</FlatList>

27
components/index.tsx
View file

@ -16,6 +16,7 @@ import TextInputBar from "./common/TextInputBar"
import NavigationButton from "./common/button"
import LoadingSymbol from "./common/loadingSymbol"
import Plus from "./common/plus"
import EmptyListCompenent from "./common/EmptyListCompenent"
//login
import BudgetHeader from "./budget/budgetHeader"
@ -30,10 +31,26 @@ import Input from "./login/input"
import Graph from "./stats/Graph"
export {
AutoDecimalInput, BudgetHeader,
ButtonSetting, CategoryItem, CategorySelector,
CategorySelectorModal, CustomCard, CustomColorPicker, DateSelectorButton, ExpenseItem, Graph, Input,
LoadingSymbol, NavigationButton, Plus, RoundedButton, TextInputBar,
ToggleSetting, TypeSelectorSwitch, Welcome
AutoDecimalInput,
BudgetHeader,
ButtonSetting,
CategoryItem,
CategorySelector,
CategorySelectorModal,
CustomCard,
CustomColorPicker,
DateSelectorButton,
EmptyListCompenent,
ExpenseItem,
Graph,
Input,
LoadingSymbol,
NavigationButton,
Plus,
RoundedButton,
TextInputBar,
ToggleSetting,
TypeSelectorSwitch,
Welcome
}