Skip to content

A
AppUms_Lecturer
Commit 2b8c3aa1 by tungnq
Options

TODO: Đã hoàn thiện giao diện hồ sơ

parent 3a37bd9f
Showing with 616 additions and 14 deletions
src/components/Input/TextField.js
...@@ -25,6 +25,7 @@ const TextField = props => { ...@@ -25,6 +25,7 @@ const TextField = props => {
containerMarginHorizontal, containerMarginHorizontal,
containerMarginBottom, containerMarginBottom,
containerBackgroundColor, containerBackgroundColor,
width,
} = props; } = props;
const renderMess = () => { const renderMess = () => {
if (value && value.trim().length > 0) return `${title} không hợp lệ`; if (value && value.trim().length > 0) return `${title} không hợp lệ`;
...@@ -32,7 +33,7 @@ const TextField = props => { ...@@ -32,7 +33,7 @@ const TextField = props => {
}; };
return ( return (
<View style={{marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor, marginTop: containerMarginTop}}> <View style={{width:width,marginVertical: containerMarginVertical, marginHorizontal: containerMarginHorizontal, marginBottom: containerMarginBottom , backgroundColor: containerBackgroundColor, marginTop: containerMarginTop}}>
<Text <Text
style={{ style={{
fontSize: fontSizeTitle, fontSize: fontSizeTitle,
......
src/components/RadioButton/RadioGroup.js
...@@ -18,7 +18,9 @@ const RadioGroup = ({ ...@@ -18,7 +18,9 @@ const RadioGroup = ({
containerMarginVertical, containerMarginVertical,
containerMarginBottom, containerMarginBottom,
backgroundBoxColor, backgroundBoxColor,
containerBoxColor,
borderBoxColor, borderBoxColor,
containerWidth,
editable = false, editable = false,
}) => { }) => {
return ( return (
...@@ -29,6 +31,8 @@ const RadioGroup = ({ ...@@ -29,6 +31,8 @@ const RadioGroup = ({
marginHorizontal: containerMarginHorizontal, marginHorizontal: containerMarginHorizontal,
marginVertical: containerMarginVertical, marginVertical: containerMarginVertical,
marginBottom: containerMarginBottom, marginBottom: containerMarginBottom,
backgroundColor: containerBoxColor,
width:containerWidth
} }
]}> ]}>
{options.map((option, index) => ( {options.map((option, index) => (
......
src/screens/profile/index.js
import React from 'react'; import React, { useState } from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import ProfileView from './view'; import ProfileView from './view';
const Profile = (props) => { const Profile = (props) => {
const [user, setUser] = useState(
{
name:'Phạm Minh Quân',
role:'Trợ lý bộ môn thuộc trường',
code:'80578',
email:'quan.pm@uit.edu.vn',
authCredential:'quanpm',
department:'Khoa học máy tính',
teachingUnit:'Trí tuệ nhân tạo',
workPlace:'Trường Cao Đẳng FPT',
extraDuty: 'Vị trí kiêm nhiệm',
employmentType:[
'Quyền trưởng phòng',
'Trợ lý bộ môn thuộc trường'
],
appointmentDecision: 'QĐ/UIT/2025',
appointmentDate:'20/03/2025',
allowanceSeniorityDate:'10/03/2025',
teacherType:'CBGV trường',
academicUnit:'Khoa Công nghệ phần mềm',
subjectDepartment:'Bộ môn Phát triển phần mềm',
employmentStatus:'Đang công tác',
workCommencementDate:'20/03/2025',
}
)
const [selectedValue2, setSelectedValue2] = useState('1');
const options2 = [
{label: 'Cơ chế', value: '1'},
{label: 'Biên hữu', value: '2'},
];
const onValueChange2 = value => {
setSelectedValue2(value);
};
return ( return (
<ProfileView /> <ProfileView dataProfile={user} selectedValue2={selectedValue2} options2={options2} onValueChange2={onValueChange2}/>
); );
}; };
......
src/screens/profile/style.js
...@@ -7,8 +7,60 @@ const styles = StyleSheet.create({ ...@@ -7,8 +7,60 @@ const styles = StyleSheet.create({
}, },
body:{ body:{
flex:1, flex:1,
backgroundColor:R.colors.white backgroundColor:R.colors.white,
padding:15
},
headerBody:{
flexDirection:'row',
marginBottom:15,
},
headerLeft:{
// backgroundColor:'red'
},
boxCamera:{
alignItems:'center',
justifyContent:'center',
maxWidth:120,
},
containerImage:{
backgroundColor:R.colors.grayBorderInputTextHeader,
width:100,
height:150,
justifyContent:'center',
alignItems:'center',
borderRadius:10,
},
image:{
width:25,
height:25,
tintColor:R.colors.gray2
},
containerButton:{
marginTop:10,
},
headerRight:{
flex:1,
marginLeft:15,
justifyContent:'flex-start',
},
text:{
fontSize:R.sizes.sm,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
color:R.colors.black,
},
bodyProfile:{
},
containerInput:{
flexDirection:'row',
marginBottom:15,
justifyContent:'space-between',
},
sizedBox:{
width:15,
} }
}) })
export default styles export default styles;
\ No newline at end of file \ No newline at end of file
src/screens/profile/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {
Text,
View,
TouchableOpacity,
StyleSheet,
Image,
ScrollView,
} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header';
import R from '../../assets/R';
import Button from '../../components/Button';
import TextField from '../../components/Input/TextField';
import RadioButton from '../../components/RadioButton/RadioButton';
import RadioGroup from '../../components/RadioButton/RadioGroup';
const ProfileView = (props) => { const ProfileView = props => {
const { } = props; const {dataProfile, selectedValue2, options2, onValueChange2} = props;
console.log(dataProfile?.name);
return ( return (
<View <View style={styles.container}>
style={styles.container}> <Header title={'Hồ sơ giảng viên'} isBack />
<TouchableOpacity> <ScrollView showsVerticalScrollIndicator={false} vertical>
<Text>Profile</Text> <View style={styles.body}>
</TouchableOpacity> <View style={styles.headerBody}>
<View style={styles.headerLeft}>
<View style={styles.boxCamera}>
<View style={styles.containerImage}>
<Image source={R.images.iconCamera} style={styles.image} />
</View>
<View style={styles.containerButton}>
<Button
title="Chọn ảnh"
onPress={() => {}}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
height={30}
borderRadius={10}
fontSize={R.sizes.sm}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
paddingVertical={3}
/>
</View>
</View>
</View>
<View style={styles.headerRight}>
<Text
style={[
styles.text,
{
lineHeight: 19,
fontSize: R.fontsize.fontsSizeTitle,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
},
]}>
{dataProfile?.name || 'Không có dữ liệu'}
</Text>
<Text
style={[styles.text, {fontSize: R.fontsize.fontsSizeSubTitle}]}>
{dataProfile?.role || 'Không có dữ liệu'}
</Text>
<Text
style={[
styles.text,
{
lineHeight: 24,
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Mã CBGV:{' '}
<Text
style={[
styles.text,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
{dataProfile?.code || 'Không có dữ liệu'}
</Text>
</Text>
<Text
style={[
styles.text,
{
lineHeight: 24,
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Email:{' '}
<Text
style={[
styles.text,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
{dataProfile?.email || 'Không có dữ liệu'}
</Text>
</Text>
<Text
style={[
styles.text,
{
lineHeight: 24,
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
TK chứng thực:{' '}
<Text
style={[
styles.text,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
{dataProfile?.authCredential || 'Không có dữ liệu'}
</Text>
</Text>
<Text
style={[
styles.text,
{
lineHeight: 24,
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Đơn vị công tác:{' '}
<Text
style={[
styles.text,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
{dataProfile?.department || 'Không có dữ liệu'}
</Text>
</Text>
<Text
style={[
styles.text,
{
lineHeight: 24,
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Bộ môn:{' '}
<Text
style={[
styles.text,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
{dataProfile?.teachingUnit || 'Không có dữ liệu'}
</Text>
</Text>
</View>
</View>
<View style={styles.bodyProfile}>
<View style={styles.containerInput}>
<TextField
title={'Số điện thoại'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Mã CBGV cũ'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
width={'100%'}
title={'Nơi công tác'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
width={'100%'}
title={'Chức vụ'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
width={'100%'}
title={'Vị trí kiêm nhiệm '}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Loại lao động'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Loại biên chế'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Quyết định bổ nhiệm'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Quyết định bổ nhiệm'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Cơ quan ban hành QĐ'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Công việc trước khi tuyển dụng'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={[styles.containerInput]}>
<RadioGroup
options={options2}
selectedValue={selectedValue2}
onValueChange={onValueChange2}
disabled={false}
size={20}
backgroundBoxColor={R.colors.blue}
borderBoxColor={R.colors.black}
direction={'row'}
marginBtnAndLabel={10}
justifyContent={'space-around'}
editable={true}
containerWidth={'100%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Ngày hưởng PCTN'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'PCTN công tác(%)'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'PCTN nhà giáo(%)'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Loại CBGV'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Đơn vị sinh hoạt chuyên môn'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Bộ môn sinh hoạt chuyên môn'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Trạng thái làm việc'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Ngày bắt đầu làm việc'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Loại hợp đồng hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Ngày BĐ HĐ hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Ngày KT HĐ hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Số hợp đồng hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Ngày HL HĐ hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Ngày BĐ làm việc CT'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Thời điểm xếp BL cuối'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'(%) PCTNVK hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Ngạch lương'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Bậc lương hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Hệ số lương hiện hành'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Mốc nâng lương'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'48%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Chức danh giảng viên'}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<Button
title={'Lưu'}
onPress={() => {}}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
fontSize={R.sizes.sm}
paddingHorizontal={15}
paddingVertical={5}
borderRadius={10}
fontSizeTitle={R.sizes.sm}
/>
</View>
</View>
</ScrollView>
</View> </View>
); );
}; };
......
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