Commit 90f72388 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

데이터 수정기능 추가

parent b8bc934a
......@@ -13,6 +13,7 @@ import DeptDetails from './screens/DeptDetails';
import MemoPage from './MemoPage';
import MemoDetails from './screens/MemoDetails';
import EditOption from './EditOption';
import UpdatePage from './UpdatePage';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
......@@ -92,6 +93,11 @@ function App() {
component={PostMoney}
options={{ title: "추가" }}
/>
<Stack.Screen
name="UpdatePage"
component={UpdatePage}
options={{ title: "내역편집" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
......
import React, { useEffect, useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, FlatList } from 'react-native';
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import calApi from './db/calendarInfo.api';
const DetailItem = ({ item }) => {
const DetailItem = ({ item, onPress }) => {
let item_color
switch (item.type) {
case 1:
item_color = style.inputColor;
break;
case 2:
item_color = style.outputColor;
break;
case 3:
item_color = style.moveColor;
break;
}
return (
<>
<TouchableOpacity onPress={onPress}>
<View style={{
flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
padding: "5%", borderColor: '#d3d3d3', //light grey
borderWidth: 1, borderTopWidth: 0,
}}>
<Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
<Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text>
<View style={{ flexDirection: "row" }}>
<Text style={[style.itemText, item_color]}>{item.category}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
<Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text>
</View>
{item.asset ?
<Text style={[style.itemTextNum, style.Font]}>
{'(' + item.asset + '>' + item.deposit_asset + ')'}
</Text>
: null}
</View>
</>
</TouchableOpacity>
);
};
const DetailInfo = ({ route }) => {
const DetailInfo = ({ route, navigation }) => {
const [resData, setResData] = useState([])
const getDetailData = async () => {
try {
......@@ -29,12 +50,16 @@ const DetailInfo = ({ route }) => {
}
const renderDetail = ({ item }) => {
return (
<DetailItem item={item} />
<DetailItem item={item} onPress={() => navigation.navigate('UpdatePage', [route.params, item])} />
)
}
useEffect(() => {
getDetailData()
}, [])
useFocusEffect(
React.useCallback(() => {
getDetailData()
}, [])
);
return (
<>
<SafeAreaView>
......@@ -43,10 +68,10 @@ const DetailInfo = ({ route }) => {
data={resData}
renderItem={renderDetail}
keyExtractor={item => item.id}
/> : <View style={{ margin: "20%" }}>
/> : <View style={{ margin: "20%" }}>
<Text style={{ textAlign: "center", fontSize: 20, fontFamily: 'GowunDodum-Regular' }}>내역이 없습니다.</Text>
</View>
}
}
</SafeAreaView>
</>
)
......@@ -70,6 +95,9 @@ const style = StyleSheet.create({
itemText: {
flex: 1,
fontFamily: 'GowunDodum-Regular'
},
moveColor: {
color: '#646d75'
}
});
......
......@@ -65,11 +65,11 @@ const ChartM = ({
}
return (
<>
<View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center"}}>
<View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center" }}>
<Button icon={
<Ionicons name='chevron-back-sharp' onPress={prevBtn} size={20} color='black' />
} type='clear' />
<Text style={{ fontFamily: 'GowunDodum-Regular', fontSize:20 }}>{year}.{month + 1}</Text>
<Text style={{ fontFamily: 'GowunDodum-Regular', fontSize: 20 }}>{year}.{month + 1}</Text>
<Button icon={
<Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={20} color='black' />
} type='clear' />
......@@ -88,7 +88,7 @@ const ChartM = ({
/> : <Text style={style.infoText}> 지출 내역이 없습니다.</Text>
}
<FlatList
style={{ backgroundColor: "#FFFFFF" }}
style={{ backgroundColor: "#FFFFFF", height: screenHeight*0.42 }}
data={resDataM}
renderItem={renderChart}
keyExtractor={item => item.color}
......
......@@ -44,7 +44,6 @@ const EditOption = ({ route }) => {
try {
if (type === 'asset') {
const res = await editApi.updateOption('assets_type', { id: option.id, name: 'assets', value: option.value })
console.log(res)
} else if (type === 'category') {
if (option.foreign_id && option.foreign_id > 0) {
const res = await editApi.updateOption('subcategories', { id: option.id, name: 'subcategory', value: option.value })
......
......@@ -19,8 +19,6 @@ function InsertCat() {
const [cat, setCat] = useState('')
const [asset, setAsset] = useState('')
console.log('money db')
const populateDatabase = async DB => {
await DB.transaction(queryMoney);
};
......
......@@ -166,7 +166,7 @@ const style = StyleSheet.create({
weekData: {
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#6b768a",
backgroundColor: "#adbfdb",
paddingBottom: 10,
},
TextInput: {
......@@ -196,7 +196,7 @@ const style = StyleSheet.create({
flex: 1,
},
submitButton: {
backgroundColor: "#6b768a",
backgroundColor: '#bfd3f2',
margin: 10,
height: 50,
alignItems: 'center',
......
import React, { useState, useEffect } from 'react';
import Calendar from './components/Calendar';
import calApi from './db/calendarInfo.api';
import { useFocusEffect } from '@react-navigation/native';
const Montly = ({ navigation }) => {
const date = new Date();
......@@ -21,6 +22,12 @@ const Montly = ({ navigation }) => {
useEffect(() => {
getData()
}, [month])
useFocusEffect(
React.useCallback(() => {
getData()
}, [])
);
return (
<Calendar navigation={navigation} MData={totalM} year={year} setYear={setYear} month={month} setMonth={setMonth} todayM={todayM} todayY={todayY} />
)
......
import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import InputBox from './components/InputBox';
import ButtonsForm from './components/ButtonsForm';
import SelectForm from './components/SelectForm';
import StyledButton from './components/StyledButton';
import DatePicker from './components/DatePicker';
import moneyApi from './db/postMoney.api';
import updateApi from './db/updatePage.api';
const INIT_ASSETSTYPE = {
id: 1,
value: '',
}
const INIT_CATEGORY = {
id: 1,
value: '',
}
const INIT_SUBCATEGORY = {
id: 1,
value: '',
foreign_id: 0,
}
function updatePage({ navigation, route }) {
const [selectedIndex, setSelectedIndex] = useState(route.params[1].type - 1)
const [date, setDate] = useState(route.params[0])
const [contents, setContents] = useState(route.params[1].contents)
const [price, setPrice] = useState(`${route.params[1].price}`)
const [asset_type, setAsset_type] = useState([])
const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSETSTYPE)
const [selected_deposit_asset_type, setSelected_deposit_asset_type] = useState(INIT_ASSETSTYPE)
const [categories, setCategories] = useState([])
const [selected_cat, setSelected_cat] = useState(INIT_CATEGORY)
const [subcategories, setSubcategories] = useState([])
const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
const [success, setSuccess] = useState(false)
useEffect(() => {
loadCat()
loadSubCat()
loadAssetType()
initData()
}, [selectedIndex])
const initData = () => {
setSelected_asset_type(INIT_ASSETSTYPE)
setSelected_cat(INIT_CATEGORY)
setSelected_subcat(INIT_SUBCATEGORY)
}
const loadCat = async () => {
try {
const catArray = await moneyApi.selectCategories(selectedIndex + 1)
setCategories(catArray);
} catch (error) {
console.log('error in load categories ( postMoney.js )', error)
}
}
const loadSubCat = async () => {
try {
const subCatArray = await moneyApi.selectSubCategories()
setSubcategories(subCatArray);
} catch (error) {
console.log('error in load categories ( postMoney.js )', error)
}
}
const loadAssetType = async () => {
try {
const assetsTypeArray = await moneyApi.selectAssetsType()
setAsset_type(assetsTypeArray);
} catch (error) {
console.log('error in load assets type ( postMoney.js )', error)
}
}
const deleteData = async () => {
try {
if (selectedIndex === 2){
await updateApi.delData({ findId: [route.params[1].id, route.params[1].id+1] })
} else {
await updateApi.delData({ findId: [route.params[1].id] })
}
initData()
setSuccess(true)
} catch (error) {
console.log('error in deleteData', error)
}
}
const changeData = async () => {
try {
if(selectedIndex===2){
await updateApi.updateData({ findId: route.params[1].id }, [date, contents, -price, selected_cat.id, selected_subcat.id, selected_asset_type.id, selectedIndex + 1])
await updateApi.updateData({ findId: route.params[1].id+1 }, [date, contents, price, selected_cat.id, selected_subcat.id, selected_deposit_asset_type.id, selectedIndex + 1])
} else {
await updateApi.updateData({ findId: route.params[1].id }, [date, contents, price, selected_cat.id, selected_subcat.id, selected_asset_type.id, selectedIndex + 1])
}
setSuccess(true)
} catch (error) {
console.log('error in change Data', error)
}
}
const onUpdateCatPress = () => {
navigation.navigate('EditOption', selectedIndex + 1)
}
const onUpdateAssetPress = () => {
navigation.navigate('EditOption', 0)
}
if (success) {
navigation.goBack()
}
return (
<View>
<View>
{selectedIndex === 2 ? null : <ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["수입", "지출"]} />}
<DatePicker
inputTitle="날짜"
date={date}
setDate={setDate}
/>
<InputBox
inputTitle="내용"
value={contents}
onChangeText={
(contents) => setContents(contents)
}
maxLength={30}
/>
<InputBox
inputTitle="금액"
value={price}
onChangeText={
(price) => setPrice(price)
}
keyboardType="numeric"
maxLength={30}
/>
<SelectForm
inputTitle={selectedIndex === 2 ? "출금" : "자산"}
placeholder="자산 선택"
data={asset_type}
selectedData={selected_asset_type}
onValueChange={(asset) => setSelected_asset_type(asset)}
onUpdateDataPress={onUpdateAssetPress}
/>
{selectedIndex === 2 &&
<SelectForm
inputTitle="입금"
placeholder="자산 선택"
data={asset_type}
selectedData={selected_deposit_asset_type}
onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)}
onUpdateDataPress={onUpdateAssetPress}
/>}
<SelectForm
inputTitle="구분"
placeholder="카테고리 선택"
data={categories}
selectedData={selected_cat}
onValueChange={(cat) => setSelected_cat(cat)}
subData={subcategories}
selectedSubData={selected_subcat}
onSubValueChange={(subcat) => setSelected_subcat(subcat)}
onUpdateDataPress={onUpdateCatPress}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="저장"
onPress={changeData}
style={style.submitButton}
/>
<StyledButton
name="삭제"
onPress={deleteData}
style={style.delButton}
/>
<StyledButton
name="취소"
onPress={() => navigation.goBack()}
style={style.cancelButton}
/>
</View>
</View>
)
};
const style = StyleSheet.create({
Font: {
fontSize: 24
},
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 2,
height: 50,
},
delButton: {
flex: 1,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default updatePage;
\ No newline at end of file
......@@ -6,7 +6,7 @@ const StyledButton = (props) => {
<Pressable
style={({ pressed }) => [
{
backgroundColor: pressed ? '#437dd9' : '#4e8ff5',
backgroundColor: pressed ? '#adbfdb' : '#bfd3f2',
},
style.pressableStyle,
props.style
......
......@@ -52,7 +52,7 @@ const WeeklyCalendar = ({
daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#6b768a'}
calendarColor={'#adbfdb'}
dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }}
......@@ -60,7 +60,7 @@ const WeeklyCalendar = ({
updateWeek
highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'white' }}
highlightDateContainerStyle={{ backgroundColor: 'black' }}
highlightDateContainerStyle={{ backgroundColor: '#6b768a' }}
// markedDates={markedDates}
// datesBlacklist={datesBlacklistFunc}
// startingDate={startingDate}
......
......@@ -24,6 +24,9 @@ const getFullData = async ({ year, month }) => {
}
for (let i = 1; i < results.rows.length; i++) {
if (results.rows.item(i).type_id===3){
continue
}
if (results.rows.item(i).date === results.rows.item(i - 1).date) {
temp.pop()
let { 1: input, 2: output } = {
......@@ -49,10 +52,39 @@ const detailData = async ({ findDate }) => {
const db = await getDb();
return new Promise((res, rej) => {
db.transaction(async (tx) => {
const [txn, results] = await tx.executeSql(`SELECT money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id WHERE date="${findDate}"`);
const [txn, results] = await tx.executeSql(`SELECT money.money_id, assets_name, money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id inner JOIN assets_type on money.assets_id = assets_type.assets_id WHERE date="${findDate}"`);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
temp.push({ id: i, category: results.rows.item(i).category_name, contents: results.rows.item(i).contents, price: results.rows.item(i).price, type: results.rows.item(i).type_id })
if (results.rows.item(i).type_id === 3) {
let asset_type = results.rows.item(i).assets_name;
let deposit_asset = results.rows.item(i).assets_name;
let price = 0;
if (results.rows.item(i).price > 0) {
deposit_asset = results.rows.item(i).assets_name;
asset_type = results.rows.item(i + 1).assets_name;
price = results.rows.item(i).price;
} else {
asset_type = results.rows.item(i).assets_name;
deposit_asset = results.rows.item(i + 1).assets_name;
price = -results.rows.item(i).price;
}
temp.push({
id: results.rows.item(i).money_id,
category: results.rows.item(i).category_name,
asset: asset_type,
deposit_asset: deposit_asset,
contents: results.rows.item(i).contents,
price: price,
type: results.rows.item(i).type_id
})
i++;
} else {
temp.push({ id: results.rows.item(i).money_id,
category: results.rows.item(i).category_name,
contents: results.rows.item(i).contents,
price: results.rows.item(i).price,
type: results.rows.item(i).type_id })
}
}
res(temp);
})
......
......@@ -14,7 +14,7 @@ const colorArr = [
const outMoney = async ({ year, month }) => {
const thisFirst = new Date(year, month, 1);
const thisLast = new Date(year, month + 1, 0);
const thisLast = new Date(year, month + 1, 0);
const db = await getDb();
return new Promise((res, rej) => {
......@@ -28,15 +28,15 @@ const outMoney = async ({ year, month }) => {
color: colorArr[i], legendFontColor: "#7F7F7F",
legendFontSize: 15
})
res(temp)
}
res(temp)
})
})
}
const yearMoney = async ({ year }) => {
const yearFirst = new Date(year, 0, 1);
const yearLast = new Date(year, 12, 0);
const yearFirst = new Date(year, 0, 1);
const yearLast = new Date(year, 12, 0);
const db = await getDb();
return new Promise((res, rej) => {
......
import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
import getDb from './moneyDB'
DEBUG(true);
enablePromise(true);
const delData = async ({ findId }) => {
const db = await getDb();
let insertQeury = '';
let queryData = findId;
if (findId.length === 2) {
insertQeury = `DELETE FROM money WHERE money_id in (?,?)`
} else {
insertQeury = `DELETE FROM money WHERE money_id in (?)`
}
return new Promise((res, rej) => {
db.transaction((tx) => {
tx.executeSql(insertQeury, queryData)
res('삭제완료');
})
})
}
const updateData = async ({ findId }, changeData) => {
const db = await getDb();
let insertQeury = `UPDATE money SET date=?, contents=?, price=?, category_id=?, subcategory_id=?, assets_id=?, type_id=? WHERE money_id=${findId};`
return new Promise((res, rej) => {
db.transaction(async (tx) => {
await tx.executeSql(insertQeury, changeData)
res('수정완료');
})
})
}
const updateApi = {
delData,
updateData
}
export default updateApi;
\ No newline at end of file
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