Commit e69de6a5 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0726 데이터베이스 수정 및 타입 별 카테고리 분리

parent fad46579
...@@ -13,6 +13,7 @@ import DeptPage from './DeptPage'; ...@@ -13,6 +13,7 @@ import DeptPage from './DeptPage';
import InfoDetails from './screens/InfoDetails'; import InfoDetails from './screens/InfoDetails';
import MemoPage from './MemoPage'; import MemoPage from './MemoPage';
import MemoDetails from './screens/MemoDetails'; import MemoDetails from './screens/MemoDetails';
import CatEdit from './CatEdit';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -80,6 +81,7 @@ function App() { ...@@ -80,6 +81,7 @@ function App() {
component={MemoDetails} component={MemoDetails}
options={{ title: "상세내용" }} /> options={{ title: "상세내용" }} />
<Stack.Screen name="DetailInfo" component={DetailInfo} /> <Stack.Screen name="DetailInfo" component={DetailInfo} />
<Stack.Screen name="CatEdit" component={CatEdit} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
......
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const CatEdit = ({ route }) => {
console.log('route', route.params)
console.log('---------------------------')
return (
<>
<View style={{ padding: '10%' }}>
<Text style={style.Font}>수입</Text>
<Text style={{ color: '#1E90FF' }}>{route.params?.input}</Text>
<Text>수입 내역들을 보여줄 예정입니다.</Text>
</View>
<View style={{ padding: '10%' }}>
<Text style={style.Font}>지출</Text>
<Text style={{ color: '#DC143C' }}>{route.params?.output}</Text>
<Text>지출 내역들을 보여줄 예정입니다.</Text>
</View>
</>
)
}
const style = StyleSheet.create({
Font: {
fontSize: 24
}
});
export default CatEdit;
\ No newline at end of file
...@@ -12,38 +12,21 @@ const getDate = () => { ...@@ -12,38 +12,21 @@ const getDate = () => {
return (String(date.toJSON()).split(/T/)[0]) return (String(date.toJSON()).split(/T/)[0])
} }
const INIT_SUBCATEGORIES = [ const INIT_ASSETSTYPE = {
{ id: 0,
id: 1, value: '',
value: '간식', }
foreign_id: 1
}, const INIT_CATEGORY = {
{ id: 0,
id: 2, value: '',
value: '외식', }
foreign_id: 1
}, const INIT_SUBCATEGORY = {
{ id: 0,
id: 3, value: '',
value: '배달', foreign_id: 0,
foreign_id: 1 }
},
{
id: 4,
value: '택시',
foreign_id: 2
},
{
id: 5,
value: '영화',
foreign_id: 3
},
{
id: 6,
value: '뮤지컬',
foreign_id: 3
},
]
const PostMoney = () => { const PostMoney = () => {
const [selectedIndex, setSelectedIndex] = useState(0) const [selectedIndex, setSelectedIndex] = useState(0)
...@@ -51,23 +34,34 @@ const PostMoney = () => { ...@@ -51,23 +34,34 @@ const PostMoney = () => {
const [contents, setContents] = useState('') const [contents, setContents] = useState('')
const [price, setPrice] = useState(0) const [price, setPrice] = useState(0)
const [asset_type, setAsset_type] = useState([]) const [asset_type, setAsset_type] = useState([])
const [selected_asset_type, setSelected_asset_type] = useState(0) const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSETSTYPE)
const [categories, setCategories] = useState([]) const [categories, setCategories] = useState([])
const [selected_cat, setSelected_cat] = useState(0) const [selected_cat, setSelected_cat] = useState(INIT_CATEGORY)
const [subcategories, setSubcategories] = useState(INIT_SUBCATEGORIES) const [subcategories, setSubcategories] = useState([])
const [selected_subcat, setSelected_subcat] = useState(0) const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
console.log('type: ', selectedIndex, '| date: ', date, '| contents: ', contents, '| price: ', price, '| selected_asset_type: ', selected_asset_type, '| selected_cat: ', selected_cat, '| selected_subcat: ', selected_subcat) useEffect(() => {
loadCat()
loadSubCat()
loadAssetType()
initData()
}, [selectedIndex])
const insertData = async () => { const initData = () => {
try { setDate(getDate())
let type = '' setContents('')
setPrice(0)
setSelected_asset_type(INIT_ASSETSTYPE)
setSelected_cat(INIT_CATEGORY)
setSelected_subcat(INIT_SUBCATEGORY)
}
if (selectedIndex === 0) { type = '수입' } console.log('type: ', selectedIndex, '| date: ', date, '| contents: ', contents, '| price: ', price, '| selected_asset_type: ', selected_asset_type.id, '| selected_cat: ', selected_cat.id, '| selected_subcat: ', selected_subcat.id)
else if (selectedIndex === 1) { type = '지출' }
else { type = '이동' }
const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type, selected_cat, selected_subcat]) const insertData = async () => {
try {
let type = selectedIndex+1;
const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type.id, selected_cat.id, selected_subcat.id])
console.log(result) console.log(result)
} catch (error) { } catch (error) {
console.log('error in insert data', error) console.log('error in insert data', error)
...@@ -76,7 +70,7 @@ const PostMoney = () => { ...@@ -76,7 +70,7 @@ const PostMoney = () => {
const loadCat = async () => { const loadCat = async () => {
try { try {
const catArray = await moneyApi.selectCategories() const catArray = await moneyApi.selectCategories(selectedIndex+1)
console.log('catload', catArray) console.log('catload', catArray)
setCategories(catArray); setCategories(catArray);
} catch (error) { } catch (error) {
...@@ -84,6 +78,16 @@ const PostMoney = () => { ...@@ -84,6 +78,16 @@ const PostMoney = () => {
} }
} }
const loadSubCat = async () => {
try {
const subCatArray = await moneyApi.selectSubCategories()
console.log('catload', subCatArray)
setSubcategories(subCatArray);
} catch (error) {
console.log('error in load categories ( postMoney.js )', error)
}
}
const loadAssetType = async () => { const loadAssetType = async () => {
try { try {
const assetsTypeArray = await moneyApi.selectAssetsType() const assetsTypeArray = await moneyApi.selectAssetsType()
...@@ -93,12 +97,6 @@ const PostMoney = () => { ...@@ -93,12 +97,6 @@ const PostMoney = () => {
} }
} }
useEffect(() => {
loadCat()
loadAssetType()
}, [])
return ( return (
<View> <View>
<View> <View>
...@@ -133,17 +131,17 @@ const PostMoney = () => { ...@@ -133,17 +131,17 @@ const PostMoney = () => {
placeholder="자산 선택" placeholder="자산 선택"
data={asset_type} data={asset_type}
selectedData={selected_asset_type} selectedData={selected_asset_type}
onValueChange={(assetId) => setSelected_asset_type(assetId)} onValueChange={(asset) => setSelected_asset_type(asset)}
/> />
<SelectForm <SelectForm
inputTitle="구분" inputTitle="구분"
placeholder="카테고리 선택" placeholder="카테고리 선택"
data={categories} data={categories}
selectedData={selected_cat} selectedData={selected_cat}
onValueChange={(catId) => setSelected_cat(catId)} onValueChange={(cat) => setSelected_cat(cat)}
subData={subcategories} subData={subcategories}
selectedSubData={selected_subcat} selectedSubData={selected_subcat}
onSubValueChange={(subcatId) => setSelected_subcat(subcatId)} onSubValueChange={(subcat) => setSelected_subcat(subcat)}
/> />
</View> </View>
<View style={style.buttonRow}> <View style={style.buttonRow}>
......
...@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements'; ...@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text } from 'react-native'; import { StyleSheet, Text } from 'react-native';
const ButtonsForm = (props) => { const ButtonsForm = (props) => {
const components = [];
const component1 = () => <Text>{props.group[0]}</Text> for (let i = 0; i < props.group.length ; i++) {
const component2 = () => <Text>{props.group[1]}</Text> components[i] = { element: () => <Text>{props.group[i]}</Text> }
const component3 = () => <Text>{props.group[2]}</Text> }
return ( return (
<ButtonGroup <ButtonGroup
onPress={props.onPress} onPress={props.onPress}
selectedIndex={props.selectedIndex} selectedIndex={props.selectedIndex}
buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]} buttons={components}
containerStyle={style.container} containerStyle={style.container}
selectedButtonStyle={style.selectedButton} selectedButtonStyle={style.selectedButton}
selectedTextStyle={style.selectedText} selectedTextStyle={style.selectedText}
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { TouchableOpacity } from 'react-native'; import { TouchableOpacity } from 'react-native';
import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList, Animated } from 'react-native'; import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList } from 'react-native';
import Notification from './Notification';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const SelectForm = (props) => { const INIT_SUBCATEGORY = {
const [option, setOption] = useState([]) id: 0,
const [optionId, setOptionId] = useState(0) value: '',
const [optionValue, setOptionValue] = useState('') foreign_id: 0,
}
const SelectForm = ({
inputTitle,
placeholder,
data,
selectedData,
onValueChange,
subData,
selectedSubData,
onSubValueChange,
}) => {
const [option, setOption] = useState([])
const [subOption, setSubOption] = useState([]) const [subOption, setSubOption] = useState([])
const [subOptionId, setSubOptionId] = useState(0)
const [text, setText] = useState('') const [selectedOption, setSelectedOption] = useState({})
const [subOptionShow, setSubOptionShow] = useState(false) const [subOptionShow, setSubOptionShow] = useState(false)
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const [notification, setNotification] = useState([])
const onPressSelectBox = () => { setModalOpen(true) } const onPressSelectBox = () => { setModalOpen(true) }
const modalClose = () => { setModalOpen(false); setNotification([]) } const modalClose = () => { setModalOpen(false); }
const onPressOption = (item) => { const onPressOption = (item) => {
if (subOption !== undefined) { if (subOption !== undefined) {
if (subOptionShow) { if (subOptionShow) {
setSubOptionId(item.id) onValueChange(selectedOption)
props.onValueChange(optionId) onSubValueChange(item)
props.onSubValueChange(subOptionId)
setText(optionValue + ` > ${item.value}`)
modalClose() modalClose()
} else { } else {
setOptionId(item.id) setSelectedOption(item)
setOptionValue(item.value)
setSubOptionByOptionId(item) setSubOptionByOptionId(item)
} }
} else { } else {
props.onValueChange(item.id) onValueChange(item)
setOptionId(item.id)
setOptionValue(item.value)
setText(item.value)
modalClose() modalClose()
} }
} }
const setSubOptionByOptionId = (item) => { const setSubOptionByOptionId = (item) => {
const newOption = props.subData.filter((subItem) => { const newOption = subData.filter((subItem) => {
if (subItem.foreign_id === item.id) if (subItem.foreign_id === item.id)
return true; return true;
}) })
if (newOption.length === 0) { if (newOption.length === 0) {
setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`]) onValueChange(item)
onSubValueChange(INIT_SUBCATEGORY)
modalClose()
} else { } else {
setSubOption(newOption) setSubOption(newOption)
setSubOptionShow(true) setSubOptionShow(true)
...@@ -66,8 +70,8 @@ const SelectForm = (props) => { ...@@ -66,8 +70,8 @@ const SelectForm = (props) => {
); );
useEffect(() => { useEffect(() => {
setOption(props.data) setOption(data)
setSubOption(props.subData) setSubOption(subData)
setSubOptionShow(false) setSubOptionShow(false)
}, [modalOpen]) }, [modalOpen])
...@@ -75,12 +79,16 @@ const SelectForm = (props) => { ...@@ -75,12 +79,16 @@ const SelectForm = (props) => {
<View> <View>
<View style={style.container}> <View style={style.container}>
<View style={style.inputTitleArea}> <View style={style.inputTitleArea}>
<Text style={style.inputTitle}>{props.inputTitle}</Text> <Text style={style.inputTitle}>{inputTitle}</Text>
</View> </View>
<View style={style.selectBox}> <View style={style.selectBox}>
<TouchableWithoutFeedback onPress={onPressSelectBox}> <TouchableWithoutFeedback onPress={onPressSelectBox}>
<Text style={style.textStyle}> <Text style={style.textStyle}>
{text ? text : props.placeholder} {selectedData.value ?
selectedSubData?.value ?
selectedData.value + ' < ' + selectedSubData.value
: selectedData.value
: placeholder}
</Text> </Text>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</View> </View>
...@@ -95,25 +103,23 @@ const SelectForm = (props) => { ...@@ -95,25 +103,23 @@ const SelectForm = (props) => {
> >
<View style={style.selectModalContainer}> <View style={style.selectModalContainer}>
<TouchableWithoutFeedback onPress={modalClose}> <TouchableWithoutFeedback onPress={modalClose}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }} />
<Notification notification={notification} setNotification={setNotification} />
</View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<View style={style.selectModal}> <View style={style.selectModal}>
<View style={style.modalHeader}> <View style={style.modalHeader}>
{subOptionShow ? {subOptionShow ?
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} > <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} >
<MaterialCommunityIcons name='arrow-left' size={35} color='white' onPress={() => { setSubOptionShow(false); }} /> <MaterialCommunityIcons name='arrow-left' size={35} color='white' onPress={() => { setSubOptionShow(false); }} />
<Text style={style.modalHeaderText}>{optionValue}</Text> <Text style={style.modalHeaderText}>{selectedOption.value}</Text>
</View> </View>
: :
<Text style={style.modalHeaderText}>{props.inputTitle}</Text>} <Text style={style.modalHeaderText}>{inputTitle}</Text>}
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<MaterialCommunityIcons name='playlist-edit' size={35} color='white' onPress={() => console.log('카테고리 편집')} /> <MaterialCommunityIcons name='playlist-edit' size={35} color='white' onPress={() => console.log('카테고리 편집')} />
<MaterialCommunityIcons name='close' size={35} color='white' onPress={modalClose} /> <MaterialCommunityIcons name='close' size={35} color='white' onPress={modalClose} />
</View> </View>
</View> </View>
<View style={[style.modalBody, props.backdropStyle]}> <View style={[style.modalBody]}>
<FlatList <FlatList
data={subOptionShow ? subOption : option} data={subOptionShow ? subOption : option}
renderItem={renderOptionItem} renderItem={renderOptionItem}
......
...@@ -17,12 +17,12 @@ const insertMoney = async (moneyData) => { ...@@ -17,12 +17,12 @@ const insertMoney = async (moneyData) => {
}) })
}; };
const selectCategories = async () => { const selectCategories = async (type_id) => {
const db = await getDb(); const db = await getDb();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
db.transaction(async (tx) => { db.transaction(async (tx) => {
console.log("카테고리 부르기"); console.log("카테고리 부르기");
const [txn, results] = await tx.executeSql('SELECT * FROM categories'); const [txn, results] = await tx.executeSql(`SELECT * FROM categories WHERE type_id=${type_id}`);
console.log('item length', results.rows.length); console.log('item length', results.rows.length);
const temp = []; const temp = [];
for (let i = 0; i < results.rows.length; i++) { for (let i = 0; i < results.rows.length; i++) {
...@@ -36,6 +36,26 @@ const selectCategories = async () => { ...@@ -36,6 +36,26 @@ const selectCategories = async () => {
}) })
} }
const selectSubCategories = async () => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction(async (tx) => {
console.log("서브 카테고리 부르기");
const [txn, results] = await tx.executeSql('SELECT * FROM subcategories');
console.log('item length', results.rows.length);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
const tempId = results.rows.item(i).subcategory_id;
const tempName = results.rows.item(i).subcategory_name;
const tempCatId = results.rows.item(i).category_id;
temp.push({ id: tempId, value: tempName, foreign_id: tempCatId });
}
console.log(temp)
resolve(temp);
})
})
}
const selectAssetsType = async () => { const selectAssetsType = async () => {
const db = await getDb(); const db = await getDb();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -59,6 +79,7 @@ const selectAssetsType = async () => { ...@@ -59,6 +79,7 @@ const selectAssetsType = async () => {
const moneyApi = { const moneyApi = {
insertMoney, insertMoney,
selectCategories, selectCategories,
selectSubCategories,
selectAssetsType, selectAssetsType,
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment