Skip to content

GitLab

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

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

parent fad46579
Hide whitespace changes
Inline Side-by-side
App.js
View file @ e69de6a5
......@@ -13,6 +13,7 @@ import DeptPage from './DeptPage';
import InfoDetails from './screens/InfoDetails';
import MemoPage from './MemoPage';
import MemoDetails from './screens/MemoDetails';
import CatEdit from './CatEdit';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
......@@ -80,6 +81,7 @@ function App() {
component={MemoDetails}
options={{ title: "상세내용" }} />
<Stack.Screen name="DetailInfo" component={DetailInfo} />
<Stack.Screen name="CatEdit" component={CatEdit} />
</Stack.Navigator>
</NavigationContainer>
);
......
CatEdit.js 0 → 100644
View file @ e69de6a5
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
PostMoney.js
View file @ e69de6a5
......@@ -12,38 +12,21 @@ const getDate = () => {
return (String(date.toJSON()).split(/T/)[0])
}
const INIT_SUBCATEGORIES = [
{
id: 1,
value: '간식',
foreign_id: 1
},
{
id: 2,
value: '외식',
foreign_id: 1
},
{
id: 3,
value: '배달',
foreign_id: 1
},
{
id: 4,
value: '택시',
foreign_id: 2
},
{
id: 5,
value: '영화',
foreign_id: 3
},
{
id: 6,
value: '뮤지컬',
foreign_id: 3
},
]
const INIT_ASSETSTYPE = {
id: 0,
value: '',
}
const INIT_CATEGORY = {
id: 0,
value: '',
}
const INIT_SUBCATEGORY = {
id: 0,
value: '',
foreign_id: 0,
}
const PostMoney = () => {
const [selectedIndex, setSelectedIndex] = useState(0)
......@@ -51,23 +34,34 @@ const PostMoney = () => {
const [contents, setContents] = useState('')
const [price, setPrice] = useState(0)
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 [selected_cat, setSelected_cat] = useState(0)
const [subcategories, setSubcategories] = useState(INIT_SUBCATEGORIES)
const [selected_subcat, setSelected_subcat] = useState(0)
const [selected_cat, setSelected_cat] = useState(INIT_CATEGORY)
const [subcategories, setSubcategories] = useState([])
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 () => {
try {
let type = ''
const initData = () => {
setDate(getDate())
setContents('')
setPrice(0)
setSelected_asset_type(INIT_ASSETSTYPE)
setSelected_cat(INIT_CATEGORY)
setSelected_subcat(INIT_SUBCATEGORY)
}
if (selectedIndex === 0) { type = '수입' }
else if (selectedIndex === 1) { type = '지출' }
else { 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)
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)
} catch (error) {
console.log('error in insert data', error)
......@@ -76,14 +70,24 @@ const PostMoney = () => {
const loadCat = async () => {
try {
const catArray = await moneyApi.selectCategories()
const catArray = await moneyApi.selectCategories(selectedIndex+1)
console.log('catload', catArray)
setCategories(catArray);
} catch (error) {
console.log('error in load categories ( postMoney.js )', error)
}
}
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 () => {
try {
const assetsTypeArray = await moneyApi.selectAssetsType()
......@@ -93,12 +97,6 @@ const PostMoney = () => {
}
}
useEffect(() => {
loadCat()
loadAssetType()
}, [])
return (
<View>
<View>
......@@ -133,17 +131,17 @@ const PostMoney = () => {
placeholder="자산 선택"
data={asset_type}
selectedData={selected_asset_type}
onValueChange={(assetId) => setSelected_asset_type(assetId)}
onValueChange={(asset) => setSelected_asset_type(asset)}
/>
<SelectForm
inputTitle="구분"
placeholder="카테고리 선택"
data={categories}
selectedData={selected_cat}
onValueChange={(catId) => setSelected_cat(catId)}
onValueChange={(cat) => setSelected_cat(cat)}
subData={subcategories}
selectedSubData={selected_subcat}
onSubValueChange={(subcatId) => setSelected_subcat(subcatId)}
onSubValueChange={(subcat) => setSelected_subcat(subcat)}
/>
</View>
<View style={style.buttonRow}>
......
components/ButtonsForm.js
View file @ e69de6a5
......@@ -3,16 +3,17 @@ import { ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text } from 'react-native';
const ButtonsForm = (props) => {
const components = [];
const component1 = () => <Text>{props.group[0]}</Text>
const component2 = () => <Text>{props.group[1]}</Text>
const component3 = () => <Text>{props.group[2]}</Text>
for (let i = 0; i < props.group.length ; i++) {
components[i] = { element: () => <Text>{props.group[i]}</Text> }
}
return (
<ButtonGroup
onPress={props.onPress}
selectedIndex={props.selectedIndex}
buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]}
buttons={components}
containerStyle={style.container}
selectedButtonStyle={style.selectedButton}
selectedTextStyle={style.selectedText}
......
components/SelectForm.js
View file @ e69de6a5
import React, { useState, useEffect } from 'react';
import { TouchableOpacity } from 'react-native';
import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList, Animated } from 'react-native';
import Notification from './Notification';
import { StyleSheet, TouchableWithoutFeedback, View, Text, Modal, FlatList } from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const SelectForm = (props) => {
const [option, setOption] = useState([])
const [optionId, setOptionId] = useState(0)
const [optionValue, setOptionValue] = useState('')
const INIT_SUBCATEGORY = {
id: 0,
value: '',
foreign_id: 0,
}
const SelectForm = ({
inputTitle,
placeholder,
data,
selectedData,
onValueChange,
subData,
selectedSubData,
onSubValueChange,
}) => {
const [option, setOption] = useState([])
const [subOption, setSubOption] = useState([])
const [subOptionId, setSubOptionId] = useState(0)
const [text, setText] = useState('')
const [selectedOption, setSelectedOption] = useState({})
const [subOptionShow, setSubOptionShow] = useState(false)
const [modalOpen, setModalOpen] = useState(false)
const [notification, setNotification] = useState([])
const onPressSelectBox = () => { setModalOpen(true) }
const modalClose = () => { setModalOpen(false); setNotification([]) }
const modalClose = () => { setModalOpen(false); }
const onPressOption = (item) => {
if (subOption !== undefined) {
if (subOptionShow) {
setSubOptionId(item.id)
props.onValueChange(optionId)
props.onSubValueChange(subOptionId)
setText(optionValue + ` > ${item.value}`)
onValueChange(selectedOption)
onSubValueChange(item)
modalClose()
} else {
setOptionId(item.id)
setOptionValue(item.value)
setSelectedOption(item)
setSubOptionByOptionId(item)
}
} else {
props.onValueChange(item.id)
setOptionId(item.id)
setOptionValue(item.value)
setText(item.value)
onValueChange(item)
modalClose()
}
}
const setSubOptionByOptionId = (item) => {
const newOption = props.subData.filter((subItem) => {
const newOption = subData.filter((subItem) => {
if (subItem.foreign_id === item.id)
return true;
})
if (newOption.length === 0) {
setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`])
onValueChange(item)
onSubValueChange(INIT_SUBCATEGORY)
modalClose()
} else {
setSubOption(newOption)
setSubOptionShow(true)
......@@ -66,8 +70,8 @@ const SelectForm = (props) => {
);
useEffect(() => {
setOption(props.data)
setSubOption(props.subData)
setOption(data)
setSubOption(subData)
setSubOptionShow(false)
}, [modalOpen])
......@@ -75,12 +79,16 @@ const SelectForm = (props) => {
<View>
<View style={style.container}>
<View style={style.inputTitleArea}>
<Text style={style.inputTitle}>{props.inputTitle}</Text>
<Text style={style.inputTitle}>{inputTitle}</Text>
</View>
<View style={style.selectBox}>
<TouchableWithoutFeedback onPress={onPressSelectBox}>
<Text style={style.textStyle}>
{text ? text : props.placeholder}
{selectedData.value ?
selectedSubData?.value ?
selectedData.value + ' < ' + selectedSubData.value
: selectedData.value
: placeholder}
</Text>
</TouchableWithoutFeedback>
</View>
......@@ -95,25 +103,23 @@ const SelectForm = (props) => {
>
<View style={style.selectModalContainer}>
<TouchableWithoutFeedback onPress={modalClose}>
<View style={{ flex: 1 }}>
<Notification notification={notification} setNotification={setNotification} />
</View>
<View style={{ flex: 1 }} />
</TouchableWithoutFeedback>
<View style={style.selectModal}>
<View style={style.modalHeader}>
{subOptionShow ?
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} >
<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>
:
<Text style={style.modalHeaderText}>{props.inputTitle}</Text>}
<Text style={style.modalHeaderText}>{inputTitle}</Text>}
<View style={{ flexDirection: "row" }}>
<MaterialCommunityIcons name='playlist-edit' size={35} color='white' onPress={() => console.log('카테고리 편집')} />
<MaterialCommunityIcons name='close' size={35} color='white' onPress={modalClose} />
</View>
</View>
<View style={[style.modalBody, props.backdropStyle]}>
<View style={[style.modalBody]}>
<FlatList
data={subOptionShow ? subOption : option}
renderItem={renderOptionItem}
......
db/postMoney.api.js
View file @ e69de6a5
......@@ -17,12 +17,12 @@ const insertMoney = async (moneyData) => {
})
};
const selectCategories = async () => {
const selectCategories = async (type_id) => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction(async (tx) => {
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);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
......@@ -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 db = await getDb();
return new Promise((resolve, reject) => {
......@@ -59,6 +79,7 @@ const selectAssetsType = async () => {
const moneyApi = {
insertMoney,
selectCategories,
selectSubCategories,
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