362 lines
15 KiB
TypeScript
362 lines
15 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import {ScrollView, View, Text, Image, TouchableOpacity, BackHandler, Dimensions, Keyboard } 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 AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { addStorage, cfg, getStorage } from '@/components/lib/cfg';
|
|
import { DB } from '@/components/lib/db';
|
|
|
|
|
|
const ProfileCard = () => {
|
|
const [bgHead, setBgHead] = useState<any>(null)
|
|
const [nama,setNama] = useState('John Doe');
|
|
const [Id,setId] = useState('John Doe');
|
|
const [formTitle,setFormTitle] = useState('Perusahaan');
|
|
const [formArea,setFormArea] = useState('none');
|
|
const [email,setEmail] = useState('example@mail.com');
|
|
const [inputVal,setInputVal] = useState('');
|
|
const [formName,setFormName] = useState('');
|
|
const [datatext,setDataText] = useState('example@mail.com');
|
|
const inputRef = useRef<TextInput>(null); // Create a ref for the TextInput
|
|
let heightWIndow = Dimensions.get('window').height + 80;
|
|
const [contact, setContact] = useState<{
|
|
name : string
|
|
, row : string
|
|
, icon : string
|
|
, value : string
|
|
, type : string|null
|
|
}[]>([]);
|
|
const [produk, setProduk] = useState<{
|
|
name : string
|
|
, value : string
|
|
}[]>([]);
|
|
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
|
|
|
const Contact = (props: any) => {
|
|
return (
|
|
<>
|
|
{(props?.data || []).map((data: any, key: number) =>
|
|
<TouchableOpacity key={key} onPress={(attribs) => {
|
|
setFormArea('flex')
|
|
setFormTitle(data?.name);
|
|
setInputVal(data?.value)
|
|
setFormName(data?.row)
|
|
inputRef.current?.focus()
|
|
}}>
|
|
<View style={[
|
|
{ padding: 10, borderTopColor: "#ddd", borderTopWidth: key == 0 ? 0 : 1 }
|
|
, { flexDirection: "row", alignItems: "center" }
|
|
]}>
|
|
<View style={[{ flexDirection: "row" }, { flex: 1 }]}>
|
|
{data.type == 'ionic' ?
|
|
<Ionicons name={data?.icon} style={[{ paddingHorizontal: 0, width: 20 }, styles.icon]} />
|
|
:
|
|
<FontAwesome name={data?.icon} style={[{ paddingHorizontal: 5, width: 20 }, styles.icon]} />
|
|
}
|
|
<Text ellipsizeMode='tail' style={[{ flex: 1 }, styles.contactText, data.value ? { color: "#333" } : { color: "#aaa" }]}>{data.value ? data.value : data.name}</Text>
|
|
</View>
|
|
<FontAwesome name={"pencil"} style={[styles.icon, { marginHorizontal: 10 }]} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
const Produk = function (props: any) {
|
|
return (
|
|
<>
|
|
<View style={[{ backgroundColor: 'white', padding: 20, height: 'auto', marginTop: 10 }]}>
|
|
<View style={{ marginBottom: 10, flexDirection: 'row', justifyContent: 'center' }}>
|
|
<Text style={{ flex: 1, marginBottom: 10, fontSize: 16, fontWeight: 400 }}>Riwayat Pembelian</Text>
|
|
</View>
|
|
<ScrollView showsHorizontalScrollIndicator={false} horizontal={true} style={{ width: "100%", flexDirection: 'row' }}>
|
|
{(props?.data || []).map((data: any, key: number) =>
|
|
<TouchableOpacity key={key}>
|
|
<View style={[{ width: 100, marginHorizontal: 5, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', borderRadius: 10, height: 50, backgroundColor: config.color.primary, padding: 10 }]}>
|
|
<Text style={{ color: 'white' }}>{data?.name}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
|
|
const onBackPress = () => {
|
|
navigation.navigate("customer");
|
|
return true; // Prevent default behavior (exit app)
|
|
};
|
|
|
|
BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
|
navigation.setOptions({ headerLeft: () => null }); // Remove back button
|
|
|
|
return () => {
|
|
BackHandler.removeEventListener('hardwareBackPress', onBackPress);
|
|
};
|
|
}, [navigation])
|
|
);
|
|
|
|
const callData = async () => {
|
|
|
|
|
|
let data: any = await AsyncStorage.getItem('contactActiveData');
|
|
data = JSON.parse(atob(data));
|
|
let [nameCompany]:any = await DB(`SELECT name FROM res_company WHERE id = ${data?.company_id}`);
|
|
|
|
setId(data?.id)
|
|
|
|
setNama(data?.name)
|
|
setEmail(data?.email)
|
|
|
|
let country = 'Indonesia';
|
|
if(data?.country_id){
|
|
const negara:any = await getStorage('negara')
|
|
const [{name}] = negara.filter((s:any)=>s?.id == data?.country_id);
|
|
country = name;
|
|
}
|
|
|
|
setContact([
|
|
{
|
|
name: "Nama",
|
|
row: "name",
|
|
icon: "person",
|
|
value: data?.name,
|
|
type: "ionic"
|
|
}
|
|
,{
|
|
name: "Email",
|
|
row: "email",
|
|
icon: "mail-outline",
|
|
value: data?.email,
|
|
type: "ionic"
|
|
}
|
|
,{
|
|
name: "Nama Perusahaan",
|
|
row: "company_id",
|
|
icon: "building",
|
|
value: nameCompany?.name,
|
|
type: ""
|
|
}
|
|
, {
|
|
name: "Jabatan Kerja",
|
|
row: "function",
|
|
icon: "star-outline",
|
|
value: data?.function,
|
|
type: "ionic"
|
|
}
|
|
, {
|
|
name: "Telepon",
|
|
row: "phone",
|
|
icon: "phone",
|
|
value: data?.phone,
|
|
type: ""
|
|
}
|
|
, {
|
|
name: "Telepon Mobile",
|
|
row: "mobile",
|
|
icon: "mobile",
|
|
value: data?.mobile,
|
|
type: ""
|
|
}
|
|
, {
|
|
name: "Alamat",
|
|
row: "street",
|
|
icon: "location",
|
|
value: data?.street,
|
|
type: "ionic"
|
|
}
|
|
, {
|
|
name: "Alamat 2",
|
|
row: "street2",
|
|
icon: "location",
|
|
value: data?.street2,
|
|
type: "ionic"
|
|
}
|
|
, {
|
|
name: "Kota",
|
|
row: "city",
|
|
icon: "location",
|
|
value: data?.city,
|
|
type: "ionic"
|
|
}
|
|
, {
|
|
name: "Negara",
|
|
row: "country_id",
|
|
icon: "globe",
|
|
value: country,
|
|
type: "ionic"
|
|
}
|
|
]);
|
|
|
|
setProduk([
|
|
{
|
|
name: 'A1-F12',
|
|
value: '20'
|
|
}
|
|
, {
|
|
name: 'A1-K12',
|
|
value: '20'
|
|
}
|
|
, {
|
|
name: 'A1-F16',
|
|
value: '20'
|
|
}
|
|
, {
|
|
name: 'A1-F16',
|
|
value: '20'
|
|
}
|
|
]);
|
|
};
|
|
|
|
cfg.action['detailcontact'] = () => {
|
|
callData()
|
|
}
|
|
|
|
useEffect(()=>{
|
|
(function(){
|
|
callData()
|
|
})();
|
|
|
|
},[])
|
|
|
|
const customerBack = function(){
|
|
navigation.navigate('customer')
|
|
}
|
|
|
|
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)
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<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}, styles.header, {backgroundColor:config.color.primary}]}>
|
|
<Image
|
|
source={{ uri: 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' }}
|
|
style={[styles.profilePic, {marginTop:40}]}
|
|
/>
|
|
<Text style={[styles.name, { color: "white" }]}>{nama}</Text>
|
|
<Text style={[styles.jobTitle, { color: "white" }]}>{email}</Text>
|
|
</View>
|
|
<View style={[{paddingHorizontal: 20, paddingVertical:5, backgroundColor:'white'}]}>
|
|
<Contact data={contact}></Contact>
|
|
</View>
|
|
<Produk data={produk} />
|
|
<View style={{minHeight:100,marginTop: 10,padding:20,backgroundColor:'white'}}>
|
|
<ScrollView horizontal={true}>
|
|
<View style={{marginHorizontal:10, width:50}}>
|
|
<View style={{flexDirection:'row', justifyContent:'center', alignItems:'center',width:50, borderRadius:25, height:50, backgroundColor:config.color.primary}}>
|
|
<Text style={{fontSize:20, color:'white'}}>20</Text>
|
|
</View>
|
|
<Text style={{textAlign:'center'}}>Dos</Text>
|
|
</View>
|
|
<View style={{marginHorizontal:10, width:50}}>
|
|
<View style={{flexDirection:'row', justifyContent:'center', alignItems:'center',width:50, borderRadius:25, height:50, backgroundColor:config.color.primary}}>
|
|
<Text style={{fontSize:20, color:'white'}}>20</Text>
|
|
</View>
|
|
<Text style={{textAlign:'center'}}>Bal</Text>
|
|
</View>
|
|
<View style={{marginHorizontal:10, width:50}}>
|
|
<View style={{flexDirection:'row', justifyContent:'center', alignItems:'center',width:50, borderRadius:25, height:50, backgroundColor:config.color.primary}}>
|
|
<Text style={{fontSize:20, color:'white'}}>20</Text>
|
|
</View>
|
|
<Text style={{textAlign:'center'}}>Slop</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<View style={{
|
|
position:'absolute',
|
|
height: heightWIndow,
|
|
zIndex: 1,
|
|
bottom: 0,
|
|
left: 0,
|
|
display: formArea === 'none' ? 'none' : 'flex', // Updated display logic
|
|
width: '100%',
|
|
shadowColor: '#000',
|
|
shadowRadius:10,
|
|
shadowOffset: { width: 0, height: 20 },
|
|
shadowOpacity: 1,
|
|
borderTopWidth:2,
|
|
borderColor: "#ddd"
|
|
}}>
|
|
<View style={{backgroundColor:'rgba(0,0,0,0.3)',flex:1}}>
|
|
|
|
</View>
|
|
<View style={{backgroundColor:'white', height:160, paddingVertical:16}}>
|
|
<Text style={{paddingHorizontal:20,fontSize:16, margin:0,paddingVertical:5,marginBottom:10}}>{formTitle}</Text>
|
|
<TextInput ref={inputRef} onChangeText={setInputVal} value={inputVal} placeholder='...' style={{height:40, backgroundColor:'#ddd', marginHorizontal:20, paddingHorizontal: 10, borderRadius:4}} keyboardType="default" />
|
|
<View style={{flexDirection:'row', paddingHorizontal: 20}}>
|
|
{formName != 'country_id' && formName != 'company_id' ?
|
|
<TouchableOpacity onPress={ async ()=>{
|
|
let data: any = await getStorage('contactActiveData');
|
|
data[formName] = inputVal;
|
|
console.log(inputVal);
|
|
let response = await DB(`UPDATE res_partner SET ${formName} = '${inputVal}' WHERE id = ${Id}`)
|
|
await addStorage('contactActiveData', data);
|
|
callData()
|
|
Keyboard.dismiss()
|
|
setFormArea('none')
|
|
}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{color:config.color.primary}}>Simpan</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
: <></>
|
|
}
|
|
<TouchableOpacity onPress={()=>{
|
|
Keyboard.dismiss()
|
|
setFormArea('none')
|
|
}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{color:config.color.primary}}>Tutup</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</GestureHandlerRootView>
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
export default ProfileCard; |