Skip to content

A
anawork-mobile-v2
Commit 79905d7a authored by dungtnguyen's avatar dungtnguyen
Browse files
Options

fix profile screen

parent f1e91ecc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 810 additions and 1370 deletions
src/navigation/BottomTabNavigation.js
View file @ 79905d7a
......@@ -4,14 +4,12 @@ import {Image} from 'react-native';
import {useSelector} from 'react-redux';
import {authSelector} from '../app/selectors';
import HeaderComponent from '../components/header/HeaderComponent';
import config from '../config';
import NotificationScreen from '../screens/notification/NotificationContainer';
import ProfileScreen from '../screens/profile/ProfileContainer';
import ProfileScreen from '../screens/profile';
import {APP_NAVIGATE_SCREEN} from '../utils/constant';
import {IconDrawer, IMAGES} from '../values/images';
import DayWageNavigation from './DayWageTopTabNavigation';
import TopTabNavigation from './TopTabNavigation';
import config from '../config';
import HomeScreen from '../screens/home';
const {HOME, SHIFT, PROFILE, DAY_WAGE, Notification} = APP_NAVIGATE_SCREEN;
......
src/screens/onleave/OnLeaveContainer.js
View file @ 79905d7a
......@@ -4,30 +4,25 @@ import Moment from 'moment';
import React, {useCallback, useEffect, useState} from 'react';
import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation';
import {
getUserLeaveDayApproveReq,
getUserLeavesById,
} from '../../store/actions/UserAction';
import {getUserLeavesById} from '../../store/actions/UserAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import OnLeaveModalAddNew from './template/subViews/RequestLeavesDays';
import OnLeaveModalDetail from './modals/OnLeaveModalDetails';
import moment from 'moment';
import {launchImageLibrary} from 'react-native-image-picker';
import Utils from '../../utils';
import {ToastMessage} from '../../utils/MessageUtil';
import onLeavePropsProvider from './onLeavePropsProvider';
import {
getUserLeavesDay,
getApproveRequestLeavesDays,
getUserRestDay,
getLeaveCategory,
getDirectManagers,
getLeaveCategory,
getUserLeavesDay,
getUserRestDay,
handleSelectManagersLeaveRequest,
postLeaveRequest,
postSubmitApproveLeaveRequest,
} from './onLeaveSlice';
import OnLeaveMainView from './template/OnLeaveMainView';
import onLeavePropsProvider from './onLeavePropsProvider';
import {launchImageLibrary} from 'react-native-image-picker';
import {ToastMessage} from '../../utils/MessageUtil';
import moment from 'moment';
import Utils from '../../utils';
const initPayloadApprove = {
type: 'Tất cả',
......
src/screens/profile/ProfileContainer.js
View file @ 79905d7a
/* eslint-disable prettier/prettier */
import React, {useEffect, useState} from 'react';
import ProfileScreen from './ProfileScreen';
import {useDispatch, useSelector} from 'react-redux';
import {launchImageLibrary} from 'react-native-image-picker';
import Toast from 'react-native-toast-message';
import {useDispatch} from 'react-redux';
import RootNavigation from '../../navigation/RootNavigation';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import {logoutApp} from '../../store/actions/CommonAction';
import {
addContactUser,
changeAvatar,
changeContactUser,
changeCoverAvatar,
changeUserInfo,
getContactUser,
changeContactUser,
deleteContactUser,
addContactUser,
getContactUser,
} from '../../store/actions/UserAction';
import {launchImageLibrary} from 'react-native-image-picker';
import Toast from 'react-native-toast-message';
import Moment from 'moment';
import {logoutApp} from '../../store/actions/CommonAction';
import {APP_NAVIGATE_SCREEN} from '../../utils/constant';
import profilePropsProvider from './profilePropsProvider';
import ProfileMainView from './template/ProfileMainView';
const ProfileContainer = props => {
const {userDetails} = props;
const {userInfo} = props;
const dispatch = useDispatch();
const [modalVisible, setModalVisible] = useState(false);
......@@ -34,7 +33,7 @@ const ProfileContainer = props => {
contactBtn: false,
detailBtn: false,
});
const [infoUser, setInfoUser] = useState(userDetails);
const [infoUser, setInfoUser] = useState(userInfo);
const [contactUser, setContactUser] = useState([]);
const [defaultContact, setDefaultContact] = useState([]);
......@@ -96,7 +95,7 @@ const ProfileContainer = props => {
if (!response.didCancel) {
//setCoverAvatar(response.assets);
const resChangeCoverAvatar = dispatch(
changeCoverAvatar(userDetails.id, response.assets),
changeCoverAvatar(userInfo.id, response.assets),
);
if (resChangeCoverAvatar) {
setEditField(prev => ({...prev, avatar: false}));
......@@ -124,7 +123,7 @@ const ProfileContainer = props => {
};
const onSaveInfo = async () => {
if (!!compareInfoUser) {
const res = await dispatch(changeUserInfo(userDetails.id, infoUser));
const res = await dispatch(changeUserInfo(userInfo.id, infoUser));
if (res) {
Toast.show({
type: 'success',
......@@ -145,7 +144,7 @@ const ProfileContainer = props => {
setEditField(prev => ({...prev, avatar: false}));
};
const onConfirmAvatar = () => {
const res = dispatch(changeAvatar(userDetails.id, avatar));
const res = dispatch(changeAvatar(userInfo.id, avatar));
if (res) {
setEditField(prev => ({...prev, avatar: false}));
Toast.show({
......@@ -160,7 +159,7 @@ const ProfileContainer = props => {
};
const compareInfoUser = () => {
// check user have change info
if (JSON.stringify(infoUser) == JSON.stringify(userDetails)) return true;
if (JSON.stringify(infoUser) == JSON.stringify(userInfo)) return true;
return false;
};
......@@ -173,7 +172,7 @@ const ProfileContainer = props => {
};
const getContactSocialUser = async () => {
const res = await dispatch(getContactUser(userDetails.id));
const res = await dispatch(getContactUser(userInfo.id));
//console.log(res)
if (res.length > 0) {
let arrContact = [];
......@@ -312,7 +311,7 @@ const ProfileContainer = props => {
if (duplicateSocial === undefined) {
const res = await dispatch(
addContactUser(
userDetails.id,
userInfo.id,
userInputContact.text,
userInputContact.type,
),
......@@ -354,11 +353,8 @@ const ProfileContainer = props => {
getContactSocialUser();
}, []);
// useEffect(() => {
// infoUser && console.log("infoUser", infoUser)
// }, [])
const profileProps = {
userDetails,
userInfo,
isEditField,
btnAvailable,
infoUser,
......@@ -400,14 +396,7 @@ const ProfileContainer = props => {
onChangeCoverAvatar,
};
// useEffect(() => {
// infoUser && userDetails && compareInfoUser()
// }, [userDetails, infoUser])
// useEffect(() => {
// infoUser && console.log("infoUser", infoUser)
// }, [])
return <ProfileScreen {...profileProps} />;
return <ProfileMainView {...profilePropsProvider(profileProps)} />;
};
export default ProfileContainer;
src/screens/profile/ProfileScreen.js deleted 100644 → 0
View file @ f1e91ecc
This diff is collapsed.
src/screens/profile/index.js
View file @ 79905d7a
/* eslint-disable prettier/prettier */
import React from 'react';
import {useSelector} from 'react-redux';
......@@ -6,10 +5,10 @@ import {authSelector} from '../../app/selectors';
import ProfileContainer from './ProfileContainer';
export default function ProfileScreen() {
const userDetails = useSelector(authSelector);
const authSelect = useSelector(authSelector);
const {userInfo} = authSelect;
const profileScreenProps = {
userDetails,
userInfo,
};
return <ProfileContainer {...profileScreenProps} />;
}
src/screens/profile/profilePropsProvider.js 0 → 100644
View file @ 79905d7a
export default function profilePropsProvider(props) {
const {
userInfo,
isEditField,
btnAvailable,
infoUser,
avatar,
visibleMenu,
isSlideShow,
dateTimePicker,
contactUser,
showAlert,
modalVisible,
userInputContact,
setAvatar,
setInfoUser,
navigateMain,
setEditField,
setBtnAvailable,
onSaveInfo,
onDeniedAvatar,
onConfirmAvatar,
showMenu,
openGallery,
showFullScreen,
hideFullScreen,
hideMenu,
hideDateTimePicker,
setDateTimePicker,
onSubmitChangeContactUser,
setContactUser,
onChangeDropDownContactUser,
onChangeInputContactUser,
onPressDeleteItem,
onPressAddItem,
onConfirmDeleteAlert,
onCancelAlert,
setUserInputContact,
onSubmitCreateNew,
setModalVisible,
navigateToLogout,
onChangeCoverAvatar,
} = props;
return {
userInfo,
isEditField,
btnAvailable,
infoUser,
avatar,
visibleMenu,
isSlideShow,
dateTimePicker,
contactUser,
showAlert,
modalVisible,
userInputContact,
setAvatar,
setInfoUser,
navigateMain,
setEditField,
setBtnAvailable,
onSaveInfo,
onDeniedAvatar,
onConfirmAvatar,
showMenu,
openGallery,
showFullScreen,
hideFullScreen,
hideMenu,
hideDateTimePicker,
setDateTimePicker,
onSubmitChangeContactUser,
setContactUser,
onChangeDropDownContactUser,
onChangeInputContactUser,
onPressDeleteItem,
onPressAddItem,
onConfirmDeleteAlert,
onCancelAlert,
setUserInputContact,
onSubmitCreateNew,
setModalVisible,
navigateToLogout,
onChangeCoverAvatar,
introduceUserProps: {
userInfo,
isEditField,
avatar,
onDeniedAvatar,
onConfirmAvatar,
showMenu,
hideMenu,
visibleMenu,
openGallery,
onChangeCoverAvatar,
},
};
}
src/screens/profile/style.js
View file @ 79905d7a
......@@ -6,6 +6,7 @@ const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
flexRow: {
flexDirection: 'row',
......@@ -22,6 +23,7 @@ const styles = StyleSheet.create({
backgroundColor: colors.white,
borderColor: colors.white,
marginBottom: 10,
borderRadius: 5,
},
viewCardProfile: {
width: windowWidth - 20,
......@@ -29,7 +31,6 @@ const styles = StyleSheet.create({
borderWidth: 1,
backgroundColor: colors.white,
borderColor: colors.white,
marginBottom: 10,
},
coverImage: {
width: windowWidth - 20,
......@@ -83,9 +84,10 @@ const styles = StyleSheet.create({
height: windowHeight,
},
viewInfo: {
width: windowWidth - 10,
width: '100%',
alignSelf: 'center',
borderWidth: 1,
borderRadius: 5,
backgroundColor: colors.white,
borderColor: colors.white,
padding: 10,
......@@ -95,9 +97,10 @@ const styles = StyleSheet.create({
borderBottomColor: 'gray',
borderBottomWidth: 1,
marginBottom: 10,
padding: 10,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
paddingView: {
padding: 20,
......@@ -113,8 +116,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#f6f6f6',
paddingBottom: 10,
paddingTop: 10,
paddingVertical: 10,
},
btnSubmit: {
backgroundColor: '#5d78ff',
......@@ -214,6 +216,21 @@ const styles = StyleSheet.create({
elevation: 5,
flexDirection: 'row',
},
activeDot: {
backgroundColor: colors.purple_blue,
width: 25,
height: 8,
borderRadius: 4,
},
avatarFrame: {
width: 100,
height: 100,
resizeMode: 'contain',
alignSelf: 'center',
borderRadius: 60,
zIndex: -100,
},
infoView: {flexDirection: 'row', paddingVertical: 10},
});
export default styles;
src/screens/profile/template/ProfileMainView.js 0 → 100644
View file @ 79905d7a
import Moment from 'moment';
import React from 'react';
import {
Animated,
Image,
ImageBackground,
Modal,
SafeAreaView,
ScrollView,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
import {Menu, MenuItem} from 'react-native-material-menu';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown';
import Swiper from 'react-native-swiper';
import AppText from '../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent';
import TextInputComponent from '../../../components/TextInputComponent';
import {
IMAGES,
IcNotificationList,
IconProfile,
IconSocial,
} from '../../../values/images';
import {default as string, default as strings} from '../../../values/string';
import styles from '../style';
import colors from '../../../values/colors';
import config from '../../../config';
import IntroduceUser from './components/IntroduceUser';
import GeneralInformation from './components/GeneralInformation';
import PersonalInformation from './components/PersonalInformation';
import DetailInformation from './components/DetailInformation';
const Socials = [
'FACEBOOK',
'EMAIL',
'SKYPE',
'LINKEDIN',
'TWITTER',
'INSTAGRAM',
'WHATSAPP',
'VIPER',
'SNAPCHAT',
'TELEGRAM',
'APPLE',
'YOUTUBE',
'PINTEREST',
];
const gender = ['Nam', 'Nữ'];
const ProfileMainView = ({
userInfo,
contactUser,
btnAvailable,
isEditField,
navigateMain,
setEditField,
setBtnAvailable,
infoUser,
setInfoUser,
onSaveInfo,
avatar = [],
onDeniedAvatar,
onConfirmAvatar,
showMenu,
hideMenu,
visibleMenu,
openGallery,
isSlideShow,
showFullScreen,
hideFullScreen,
dateTimePicker,
hideDateTimePicker,
setDateTimePicker,
showAlert,
onSubmitChangeContactUser,
onChangeDropDownContactUser,
onChangeInputContactUser,
onPressDeleteItem,
onPressAddItem,
onCancelAlert,
modalVisible,
setModalVisible,
setUserInputContact,
userInputContact,
onSubmitCreateNew,
onConfirmDeleteAlert,
navigateToLogout,
onChangeCoverAvatar,
introduceUserProps,
}) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView nestedScrollEnabled={true}>
<IntroduceUser {...introduceUserProps} />
{/* General information */}
<GeneralInformation userInfo={userInfo} />
{/* personal information */}
<PersonalInformation userInfo={userInfo} />
{/* detail information */}
<DetailInformation userInfo={userInfo} />
{/* Logout Btn */}
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
}}>
<ButtonComponent
text={'Đăng xuất'}
style={{marginBottom: 10, flexDirection: 'row'}}
rightIcon={IMAGES.IcLogout}
styleIcon={{width: 20, height: 20, marginLeft: 10}}
onPress={navigateToLogout}
/>
</View>
{/* <View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1}}>
<SelectDropdown
data={Socials}
dropdownIconPosition={'right'}
defaultButtonText={'Loại liên hệ'}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={(selectedItem, item_index) =>
setUserInputContact(prev => ({
...prev,
type: selectedItem,
}))
}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return (
<Image
source={
isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
}
style={{width: 20, height: 20}}
/>
);
}}
/>
{userInputContact.type.length <= 0 && (
<AppText style={{fontSize: 12, color: 'red'}}>
{' '}
Vui lòng chọn liên hệ
</AppText>
)}
</View>
<View style={{flex: 1}}>
<TextInput
style={{borderBottomWidth: 0.2}}
placeholder={'Nhập F'}
keyboardType={'email-address'}
autoCapitalize="none"
value={userInputContact.text}
onChangeText={text =>
setUserInputContact(prev => ({
...prev,
text: text,
}))
}
/>
{userInputContact.text.length <= 0 && (
<AppText style={{fontSize: 12, color: 'red'}}>
{' '}
Vui lòng nhập liên hệ
</AppText>
)}
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<ButtonComponent
text={'Đóng'}
textStyle={styles.textStyle}
style={[
styles.button,
styles.buttonClose,
{marginRight: 15},
]}
onPress={() => setModalVisible(!modalVisible)}
/>
<ButtonComponent
text={'Thêm mới'}
textStyle={styles.textStyle}
style={[styles.button, styles.buttonClose]}
onPress={onSubmitCreateNew}
/>
</View>
</View>
</View>
</Modal>
</View> */}
</ScrollView>
</SafeAreaView>
);
};
export default ProfileMainView;
src/screens/profile/template/components/DetailInformation.js 0 → 100644
View file @ 79905d7a
import React, {memo} from 'react';
import {Image, TouchableOpacity, View} from 'react-native';
import AppText from '../../../../components/AppText';
import {IMAGES} from '../../../../values/images';
import string from '../../../../values/string';
import styles from '../../style';
import commonStyles from '../../../../styles/commonStyles';
import moment from 'moment';
const DetailInformation = React.memo(
({userInfo}) => {
const personalInfo = [
{
name: 'Số CMND',
value: userInfo?.id_card_number || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Ngày cấp CMND',
value: moment(userInfo?.id_card_issue_date).format('dd/MM/YYYY') || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Nơi cấp CMND',
value: userInfo?.id_card_issue_palce || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Ngày sinh',
value: userInfo?.birthday ? 'Nam' : 'Nữ',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Nguyên quán',
value: userInfo?.domicile || '',
icon: IMAGES.IcPhone,
width: '50%',
},
{
name: 'Nơi sinh',
value: userInfo?.birthplace || '',
icon: IMAGES.IcPhone,
width: '50%',
},
{
name: 'Tôn giáo',
value: userInfo?.religion || '',
icon: IMAGES.IcMailGray,
width: '50%',
},
{
name: 'Dân tộc',
value: userInfo?.ethnic || '',
icon: IMAGES.IcMailGray,
width: '50%',
},
{
name: 'MST cá nhân',
value: userInfo?.personal_tax_code || '',
icon: IMAGES.IcCalendarGray,
width: '50%',
},
{
name: 'Quốc tịch',
value: userInfo?.nationality || '',
icon: IMAGES.IcMailGray,
width: '50%',
},
{
name: 'Địa chỉ liên hệ',
value: userInfo?.address || '',
icon: IMAGES.IcLocationGray,
width: '50%',
},
{
name: 'Địa chỉ thường trú',
value: userInfo?.permanent_address || '',
icon: IMAGES.IcLocationGray,
width: '100%',
},
];
return (
<View style={[styles.viewInfo]}>
<View style={styles.viewTitle}>
<AppText style={{fontSize: 17}}>
{string.PERSONAL_INFORMATION}
</AppText>
<View>
<TouchableOpacity>
<Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
</TouchableOpacity>
</View>
</View>
<View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
{personalInfo.map(item => (
<View
key={item.name}
style={[styles.infoView, {width: item.width}]}>
<Image source={item.icon} style={{width: 20, height: 20}} />
<View style={{marginLeft: 5}}>
<AppText>{item.name}</AppText>
<AppText isSubText>{item?.value}</AppText>
</View>
</View>
))}
</View>
</View>
);
},
function (prevProps, nextProps) {
return prevProps.userInfo === nextProps.userInfo;
},
);
export default memo(DetailInformation);
src/screens/profile/template/components/GeneralInformation.js 0 → 100644
View file @ 79905d7a
import React, {memo} from 'react';
import {Image, View} from 'react-native';
import AppText from '../../../../components/AppText';
import {IMAGES} from '../../../../values/images';
import styles from '../../style';
import string from '../../../../values/string';
import commonStyles from '../../../../styles/commonStyles';
const GeneralInformation = React.memo(
({userInfo}) => {
return (
<View style={[styles.viewInfo, commonStyles.baseShadow]}>
<View style={styles.viewTitle}>
<AppText style={{color: 'black', fontSize: 18}}>
{string.GENERAL_INFORMATION}
</AppText>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{flexDirection: 'row'}}>
<Image source={IMAGES.IcUser} style={{height: 45, width: 45}} />
<View style={{marginLeft: 5}}>
<AppText>{string.USER_ID}</AppText>
<AppText style={{color: 'black', fontSize: 15}}>
{userInfo?.employee_code}
</AppText>
</View>
</View>
<View style={{flexDirection: 'row'}}>
<Image source={IMAGES.IcCheck} style={{height: 45, width: 45}} />
<View style={{marginLeft: 5}}>
<AppText>{string.TIME_ATTENDANCE_CODE}</AppText>
<AppText style={{color: 'black', fontSize: 15}}>
{userInfo?.employee_code}
</AppText>
</View>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Image source={IMAGES.IcCalendar} style={{height: 45, width: 45}} />
<View style={{marginLeft: 5}}>
<AppText>{string.SHIFT}</AppText>
<AppText style={{color: 'black', fontSize: 15}}>
Meu Official working time
</AppText>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Image source={IMAGES.IcUserTag} style={{height: 45, width: 45}} />
<View style={{marginLeft: 5}}>
<AppText>{string.STATUS}</AppText>
<AppText style={{color: 'black', fontSize: 15}}>
Nhân viên chính thức
</AppText>
</View>
</View>
</View>
);
},
function (prevProps, nextProps) {
return prevProps.userInfo === nextProps.userInfo;
},
);
export default memo(GeneralInformation);
src/screens/profile/template/components/IntroduceUser.js 0 → 100644
View file @ 79905d7a
import React from 'react';
import {Image, ImageBackground, TouchableOpacity, View} from 'react-native';
import {Menu, MenuItem} from 'react-native-material-menu';
import Swiper from 'react-native-swiper';
import AppText from '../../../../components/AppText';
import ButtonComponent from '../../../../components/ButtonComponent';
import config from '../../../../config';
import colors from '../../../../values/colors';
import {IMAGES} from '../../../../values/images';
import styles from '../../style';
import commonStyles from '../../../../styles/commonStyles';
const CardInfo = React.memo(
({userInfo}) => {
return (
<ImageBackground
source={IMAGES.BgProfileCard}
style={[
styles.viewCardProfile,
{
borderRadius: 10,
paddingTop: 30,
},
]}
resizeMode="cover">
<View style={{position: 'absolute', left: 15, top: 10}}>
<Image source={IMAGES.ImageQrCode} style={{height: 45, width: 45}} />
</View>
<ImageBackground source={IMAGES.BgFrame} style={styles.imgFrame}>
<Image
source={
userInfo?.avatar
? {uri: config.imageEndPoint + userInfo?.avatar}
: IMAGES.IcAvatarDefault
}
style={styles.avatarFrame}
/>
</ImageBackground>
<View style={[commonStyles.centerView, commonStyles.marginVertical10]}>
{userInfo?.position && <AppText>{userInfo?.position}</AppText>}
<AppText style={{fontSize: 18, fontWeight: 'bold'}}>
{`${userInfo?.first_name} ${
userInfo?.middle_name ? userInfo?.middle_name : ''
} ${userInfo?.last_name} `}
</AppText>
{userInfo?.email && (
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
<Image
source={IMAGES.IconMailGrey}
style={{height: 25, width: 25}}
/>
</View>
<AppText style={{flex: 2}}>{userInfo?.email}</AppText>
</View>
)}
{userInfo?.cell_phone && (
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
<Image
source={IMAGES.IcPhoneGrey}
style={{height: 25, width: 25}}
/>
</View>
<AppText style={{flex: 2, color: 'black'}}>
{userInfo?.cell_phone}
</AppText>
</View>
)}
</View>
<View
style={[
commonStyles.row,
{
justifyContent: 'space-evenly',
},
]}>
<AppText style={{fontWeight: 'bold'}}>#willing-to-do</AppText>
<AppText style={{fontWeight: 'bold'}}>#passion</AppText>
<AppText style={{fontWeight: 'bold'}}>#hard-working</AppText>
</View>
</ImageBackground>
);
},
function (prevProps, nextProps) {
return prevProps.userInfo === nextProps.userInfo;
},
);
const IntroduceUser = props => {
const {
userInfo,
isEditField,
avatar = [],
onDeniedAvatar,
onConfirmAvatar,
showMenu,
hideMenu,
visibleMenu,
openGallery,
onChangeCoverAvatar,
} = props;
return (
<Swiper
style={[commonStyles.baseShadow, {height: 380}]}
showsButtons={false}
loop={false}
showsPagination={true}
activeDot={<View style={styles.activeDot} />}>
<View style={styles.viewImageProfile}>
<ImageBackground
source={
userInfo?.cover_image
? {
uri: config.imageEndPoint + userInfo?.cover_image,
}
: IMAGES.ImageCoverBg
}
style={styles.coverImage}>
<ButtonComponent
iconSource={IMAGES.IcChangeCoverImage}
styleIcon={{height: 20, width: 20}}
style={{marginRight: 15, marginBottom: 10}}
onPress={onChangeCoverAvatar}
/>
</ImageBackground>
<TouchableOpacity onPress={showMenu} style={styles.viewAvatar}>
{avatar.length > 0 ? (
<Image source={{uri: avatar[0].uri}} style={styles.imgAvatar} />
) : (
<Image
source={
userInfo?.avatar
? {uri: config.imageEndPoint + userInfo?.avatar}
: IMAGES.IcAvatarDefault
}
style={styles.imgAvatar}
/>
)}
{/* menu option */}
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Menu visible={visibleMenu} onRequestClose={hideMenu}>
<MenuItem onPress={openGallery}>
<AppText>Đổi hình nền</AppText>
</MenuItem>
</Menu>
</View>
</TouchableOpacity>
{isEditField.avatar && (
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<TouchableOpacity onPress={onDeniedAvatar}>
<Image source={IMAGES.IcDenied} style={{width: 25, height: 25}} />
</TouchableOpacity>
<TouchableOpacity onPress={onConfirmAvatar}>
<Image
source={IMAGES.IcCheckMark}
style={{width: 25, height: 25}}
/>
</TouchableOpacity>
</View>
)}
<AppText style={{fontSize: 18}}>
{`${userInfo?.first_name} ${
userInfo?.middle_name ? userInfo?.middle_name : ''
} ${userInfo?.last_name} (${userInfo?.employee_code})`}{' '}
</AppText>
<AppText style={{marginBottom: 20}}>{userInfo?.position}</AppText>
</View>
<CardInfo userInfo={userInfo} />
</Swiper>
);
};
export default IntroduceUser;
src/screens/profile/template/components/PersonalInformation.js 0 → 100644
View file @ 79905d7a
import React, {memo} from 'react';
import {Image, TouchableOpacity, View} from 'react-native';
import AppText from '../../../../components/AppText';
import {IMAGES} from '../../../../values/images';
import string from '../../../../values/string';
import styles from '../../style';
import commonStyles from '../../../../styles/commonStyles';
const PersonalInformation = React.memo(
({userInfo}) => {
const personalInfo = [
{
name: 'Họ',
value: userInfo?.first_name || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Tên lót',
value: userInfo?.middle_name || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Tên',
value: userInfo?.last_name || '',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Giới tính',
value: userInfo?.gender ? 'Nam' : 'Nữ',
icon: IMAGES.IcInfoGuess,
width: '50%',
},
{
name: 'Số điện thoại',
value: userInfo?.cell_phone || '',
icon: IMAGES.IcPhone,
width: '100%',
},
{
name: 'Email',
value: userInfo?.email || '',
icon: IMAGES.IcMailGray,
width: '100%',
},
];
return (
<View style={[styles.viewInfo]}>
<View style={styles.viewTitle}>
<AppText style={{fontSize: 17}}>
{string.PERSONAL_INFORMATION}
</AppText>
<View>
<TouchableOpacity>
<Image source={IMAGES.IcEdit} style={{height: 30, width: 30}} />
</TouchableOpacity>
</View>
</View>
<View style={[commonStyles.row, {flexWrap: 'wrap'}]}>
{personalInfo.map(item => (
<View
key={item.name}
style={[styles.infoView, {width: item.width}]}>
<Image source={item.icon} style={{width: 20, height: 20}} />
<View style={{marginLeft: 5}}>
<AppText>{item.name}</AppText>
<AppText isSubText>{item?.value}</AppText>
</View>
</View>
))}
</View>
</View>
);
},
function (prevProps, nextProps) {
return prevProps.userInfo === nextProps.userInfo;
},
);
export default memo(PersonalInformation);
src/styles/commonStyles.js
View file @ 79905d7a
......@@ -27,5 +27,6 @@ const commonStyles = StyleSheet.create({
marginVertical20: {
marginVertical: 20,
},
centerView: {justifyContent: 'center', alignItems: 'center'},
});
export default commonStyles;
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