317 lines
12 KiB
TypeScript
317 lines
12 KiB
TypeScript
|
import React, { useEffect, useRef, useState } from 'react';
|
||
|
|
import { ScrollView, View, Text, TouchableOpacity, BackHandler } from 'react-native';
|
||
|
|
import { FontAwesome, Ionicons } from '@expo/vector-icons';
|
||
|
|
import config from '../../components/data/config.json'
|
||
|
|
import { styles } from '@/components/style/style';
|
||
|
|
import { FAB } from 'react-native-elements';
|
||
|
|
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
|
||
|
|
import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler';
|
||
|
|
import { addStorage, cfg } from '@/components/lib/cfg';
|
||
|
|
import { DB } from '@/components/lib/db';
|
||
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||
|
|
|
||
|
|
|
||
|
|
const SettingScreen = () => {
|
||
|
|
const [bgHead, setBgHead] = useState<any>(null)
|
||
|
|
const [title, setTitle] = useState('');
|
||
|
|
const [popup, setPopup] = useState(true)
|
||
|
|
const [dataList, setDataList] = useState<any>([]);
|
||
|
|
|
||
|
|
const inputRef = useRef<TextInput>(null); // Create a ref for the TextInput
|
||
|
|
const [contact, setContact] = useState<any>([]);
|
||
|
|
const [produk, setProduk] = useState<{
|
||
|
|
name: string
|
||
|
|
, value: string
|
||
|
|
}[]>([]);
|
||
|
|
|
||
|
|
|
||
|
|
const getData:any = {
|
||
|
|
uom: function(){
|
||
|
|
return new Promise(async(resolve,reject)=>{
|
||
|
|
let uom = await DB(`
|
||
|
|
SELECT C
|
||
|
|
.NAME ->> 'en_US' kat,
|
||
|
|
u.create_uid,
|
||
|
|
u.NAME,
|
||
|
|
u.factor
|
||
|
|
FROM
|
||
|
|
"public".uom_uom u
|
||
|
|
LEFT JOIN "public".uom_category C ON C.create_uid = u.create_uid
|
||
|
|
WHERE C.name->>'en_US' = 'Rokok'
|
||
|
|
ORDER BY u.factor DESC
|
||
|
|
`);
|
||
|
|
addStorage("master oum", uom);
|
||
|
|
cfg.dataPilihan.uom = uom;
|
||
|
|
resolve(uom);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
uomkat: function(){
|
||
|
|
return new Promise(async (resolve, reject) => {
|
||
|
|
let uom = await DB(`
|
||
|
|
SELECT create_uid, name FROM uom_category
|
||
|
|
`);
|
||
|
|
cfg.dataPilihan.uomkat = uom;
|
||
|
|
addStorage('master uomkat', uom)
|
||
|
|
resolve(uom);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
,product: function () {
|
||
|
|
return new Promise(async (resolve, reject) => {
|
||
|
|
let uom = await DB(`
|
||
|
|
SELECT P
|
||
|
|
.ID,
|
||
|
|
P.NAME ->> 'en_US' AS NAME,
|
||
|
|
P.list_price * factor AS list_price,
|
||
|
|
P.uom_id,
|
||
|
|
u.factor
|
||
|
|
FROM
|
||
|
|
product_template
|
||
|
|
P LEFT JOIN product_tag_product_template_rel T ON P.ID = T.product_template_id
|
||
|
|
LEFT JOIN product_tag pt ON T.product_tag_id = pt.ID
|
||
|
|
LEFT JOIN uom_uom u ON u.id = p.uom_id
|
||
|
|
WHERE
|
||
|
|
pt.NAME ->> 'en_US' = 'rokok' ORDER BY id ASC;
|
||
|
|
`);
|
||
|
|
cfg.dataPilihan.product = uom;
|
||
|
|
addStorage('master product', uom)
|
||
|
|
resolve(uom);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
||
|
|
|
||
|
|
const Contact = (props: any) => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{(props?.data || []).map((data: any, key: number) =>
|
||
|
|
<TouchableOpacity key={key} onPress={ async (attribs) => {
|
||
|
|
setTitle(data?.name)
|
||
|
|
let datas:any = await getData[data?.row]();
|
||
|
|
setDataList(datas);
|
||
|
|
setPopup(true);
|
||
|
|
}}>
|
||
|
|
<View style={[
|
||
|
|
{
|
||
|
|
padding: 10
|
||
|
|
, paddingVertical: 16
|
||
|
|
, borderTopColor: "#ddd"
|
||
|
|
, borderTopWidth: key == 0 ? 0 : 1
|
||
|
|
, width: 120
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
flexDirection: "column"
|
||
|
|
, alignItems: "center"
|
||
|
|
}
|
||
|
|
]}>
|
||
|
|
<View style={[{ height:120, backgroundColor:config.color.primary, alignItems:"center", padding:10, width:"100%", borderRadius:10 }]}>
|
||
|
|
{data.type == 'ionic' ?
|
||
|
|
<Ionicons name={data?.icon} style={[{ color:"white", paddingHorizontal: 0}, {fontSize:55}]} />
|
||
|
|
:
|
||
|
|
<FontAwesome name={data?.icon} style={[{ color:"white", paddingHorizontal: 5}, {fontSize:55}]} />
|
||
|
|
}
|
||
|
|
<Text ellipsizeMode='tail' style={[{ fontSize:14, flex: 1, color:"white", textAlign:"center", fontWeight:'700', paddingVertical:5 }]}>{data.value ? data.value : data.name.split(" ").join("\n").toUpperCase()}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const loadData = async function(){
|
||
|
|
await getData.uom()
|
||
|
|
await getData.uomkat()
|
||
|
|
await getData.product()
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
loadData();
|
||
|
|
},[])
|
||
|
|
|
||
|
|
|
||
|
|
const ListData = function (props: any) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{props.data && props.data.filter((d: any, i: any) => d.name["en_US"] && d.name["en_US"] != '' ).map((data:any, i:any)=>
|
||
|
|
<View key={i} style={[{
|
||
|
|
backgroundColor: 'gray'
|
||
|
|
, padding: 0
|
||
|
|
, height: 'auto'
|
||
|
|
, marginHorizontal: 20
|
||
|
|
, marginVertical: 5
|
||
|
|
, borderRadius: 15
|
||
|
|
, overflow:'hidden'
|
||
|
|
}]}>
|
||
|
|
<View style={{
|
||
|
|
backgroundColor:"#fff"
|
||
|
|
, marginLeft:8
|
||
|
|
, padding: 10
|
||
|
|
, borderTopLeftRadius: 15
|
||
|
|
, borderBottomLeftRadius: 10
|
||
|
|
}}>
|
||
|
|
{data.kat ? (
|
||
|
|
<Text>{data.kat ? data.kat:""}</Text>
|
||
|
|
):<></>}
|
||
|
|
<Text>Satuan : {data.name ? data.name["en_US"]:""}</Text>
|
||
|
|
<Text>Nilai : {data.factor ? (1/Number(data.factor)) :""}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
useFocusEffect(
|
||
|
|
React.useCallback(() => {
|
||
|
|
|
||
|
|
const onBackPress = () => {
|
||
|
|
if(popup === false){
|
||
|
|
navigation.navigate("home");
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
|
||
|
|
BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||
|
|
navigation.setOptions({ headerLeft: () => null }); // Remove back button
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
BackHandler.removeEventListener('hardwareBackPress', onBackPress);
|
||
|
|
};
|
||
|
|
}, [navigation, popup])
|
||
|
|
);
|
||
|
|
|
||
|
|
const callData = async () => {
|
||
|
|
|
||
|
|
setContact([
|
||
|
|
{
|
||
|
|
name: "Satuan Produk",
|
||
|
|
row: "uom",
|
||
|
|
icon: "file-tray-stacked-outline",
|
||
|
|
type: "ionic"
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
name: "Daftar Produk",
|
||
|
|
row: "uomkat",
|
||
|
|
icon: "cube-outline",
|
||
|
|
type: "ionic"
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
(function () {
|
||
|
|
callData()
|
||
|
|
})();
|
||
|
|
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const customerBack = function () {
|
||
|
|
navigation.navigate('home')
|
||
|
|
}
|
||
|
|
|
||
|
|
const fabAction = function () {
|
||
|
|
// console.log("action")
|
||
|
|
}
|
||
|
|
|
||
|
|
const onScroll = (event: any) => {
|
||
|
|
const yOffset = event.nativeEvent.contentOffset.y;
|
||
|
|
if (yOffset > 190) {
|
||
|
|
setBgHead(config.color.primary)
|
||
|
|
} else {
|
||
|
|
setBgHead(null)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
cfg.action['setting'] = function () {
|
||
|
|
setPopup(false);
|
||
|
|
loadData();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{popup && (
|
||
|
|
<>
|
||
|
|
<View style={{
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
zIndex:1,
|
||
|
|
position:'absolute',
|
||
|
|
backgroundColor:'white',
|
||
|
|
}}>
|
||
|
|
<View style={{
|
||
|
|
paddingHorizontal: 30
|
||
|
|
, paddingTop:40
|
||
|
|
, paddingBottom: 10
|
||
|
|
, shadowColor:"#333"
|
||
|
|
, shadowOffset: { width: 0, height: 10 } // Updated here
|
||
|
|
, shadowOpacity: 0.8
|
||
|
|
, shadowRadius: 10
|
||
|
|
}}>
|
||
|
|
<Text style={{ textAlign: 'center', fontSize: 20 }}>{title}</Text>
|
||
|
|
</View>
|
||
|
|
<ScrollView style={{backgroundColor:"#eee"}}>
|
||
|
|
<View style={{paddingVertical: 5}}>
|
||
|
|
<ListData data={dataList}></ListData>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
<FAB onPress={()=>{
|
||
|
|
setPopup(false);
|
||
|
|
}} style={{zIndex:2, position:'absolute', bottom:20, right:20}} icon={{name:"close", color:"white"}} color={"gray"}></FAB>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<GestureHandlerRootView>
|
||
|
|
<View style={[{
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
backgroundColor: bgHead != '' ? bgHead : 'none',
|
||
|
|
padding: 10,
|
||
|
|
zIndex: 3, // Make sure it stays on top of other content
|
||
|
|
}, styles.flexStartBottom, { width: '100%', height: 80, justifyContent: 'flex-start', position: 'absolute', top: 0 }]}>
|
||
|
|
<TouchableOpacity onPress={customerBack}>
|
||
|
|
<Ionicons style={{ padding: 8, marginHorizontal: 8, borderRadius: 30, backgroundColor: "rgba(0,0,0,.2)" }} name='arrow-back-outline' size={20} color={'white'}></Ionicons>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<ScrollView onScroll={onScroll}>
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View style={[{ paddingVertical: 20, paddingTop: 50 }, styles.header, { backgroundColor: config.color.primary }]}>
|
||
|
|
<Text style={[styles.name, { color: "white", fontSize:25 }]}>Setting</Text>
|
||
|
|
</View>
|
||
|
|
<View style={[{
|
||
|
|
paddingHorizontal: 20
|
||
|
|
, paddingVertical: 5
|
||
|
|
, flexDirection: 'row'
|
||
|
|
}]}>
|
||
|
|
<Contact data={contact}></Contact>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
<View style={{position:'absolute', bottom:0, left:0,zIndex:1, width: '100%', height: 50, backgroundColor: config.color.primary}}>
|
||
|
|
<TouchableOpacity onPress={async ()=>{
|
||
|
|
await AsyncStorage.removeItem('login');
|
||
|
|
navigation.navigate('index')
|
||
|
|
}}>
|
||
|
|
<View style={{
|
||
|
|
backgroundColor:"green"
|
||
|
|
, flexDirection:'row'
|
||
|
|
, alignItems: 'center'
|
||
|
|
, justifyContent:'center'
|
||
|
|
, width:"100%"
|
||
|
|
, height:"100%"
|
||
|
|
}}>
|
||
|
|
<Text style={{fontSize:16, color:'white'}}>Logout</Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</GestureHandlerRootView>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
export default SettingScreen;
|