Resolve "Implement and Split edit Category from add Category"

This commit is contained in:
Thomas Schleicher 2024-01-05 16:45:25 +00:00 committed by jastornig
parent bf939fb807
commit d3b7c61c67
8 changed files with 146 additions and 21 deletions

View file

@ -1,21 +1,23 @@
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
import { CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
import { addCategory } from "../../../services/database";
import { useTheme } from "../../contexts/ThemeContext";
const addCategory = () => {
export default function Page() {
const {colors} = useTheme();
const parameters = useLocalSearchParams();
const [categoryName, setCategoryName] = useState<string>("Enter Category Name...");
const [categoryColor, setCategoryColor] = useState<null|string>(null);
const [categoryColor, setCategoryColor] = useState<string>('#' + Math.floor(Math.random()*16777215).toString(16));
const [selectedType, setSelectedType] = useState<string>("expense");
const [amount, setAmount] = useState(0);
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Category Editor</Text>
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Add Category</Text>
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
@ -24,6 +26,12 @@ const addCategory = () => {
}}/>
</View>
<View style={styles.budgetInput}>
<AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
}}/>
</View>
<TypeSelectorSwitch
currentSelected={selectedType}
handleButtonPress={(type) => {
@ -32,7 +40,7 @@ const addCategory = () => {
/>
<View>
<CustomColorPicker currentColor={categoryColor} handleColorChange={(color) => {
<CustomColorPicker color={categoryColor} handleColorChange={(color) => {
setCategoryColor(color);
}}/>
</View>
@ -42,7 +50,7 @@ const addCategory = () => {
router.back();
}}/>
<NavigationButton text="Save" onPress={() => {
console.log("Implement Saving here!");
addCategory(categoryName, categoryColor, selectedType, amount);
router.back();
}}/>
</View>
@ -51,8 +59,6 @@ const addCategory = () => {
);
}
export default addCategory;
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
@ -82,5 +88,9 @@ const styles = StyleSheet.create({
textInputStyle: {
paddingHorizontal: 10,
fontSize: 25,
},
budgetInput: {
marginBottom: 10,
marginHorizontal: 10,
}
});