Skip to content

A
AppUms_Lecturer
Commit 71e7f49b by tungnq
Options

IMPORTANT : Đã bổ sung camera vào màn profile

parent f5753f42
Showing with 823 additions and 631 deletions
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<application
android:name=".MainApplication"
......
ios/AppUms_Lecturer/Info.plist
......@@ -2,6 +2,8 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
......
package.json
......@@ -68,6 +68,7 @@
"react-native-tab-view": "^3.0.1",
"react-native-touch-id": "^4.4.1",
"react-native-vector-icons": "^8.1.0",
"react-native-vision-camera": "^4.7.2",
"react-native-webview": "^13.12.2",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
......
src/components/CameraScreen.js 0 → 100644
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { Camera } from 'react-native-vision-camera';
const CameraScreen = ({
avatarUri,
openCamera, // () => void
showCamera, // boolean
cameraRef, // React.RefObject<Camera>
device, // CameraDevice | undefined
onToggleCameraPosition, // () => void (thay cho setUseFront)
onTakePhoto, // () => void
onCloseCamera, // () => void (thay cho setShowCamera(false))
}) => {
return (
<View style={{ flex: 1 }}>
{/* Avatar */}
<View style={{ alignItems: 'center', marginTop: 16 }}>
{avatarUri ? (
<Image source={{ uri: avatarUri }} style={{ width: 120, height: 120, borderRadius: 60 }} />
) : (
<View style={{ width: 120, height: 120, borderRadius: 60, backgroundColor: '#eee' }} />
)}
<TouchableOpacity onPress={openCamera} style={styles.pickBtn}>
<Text style={styles.pickBtnText}>Chọn ảnh</Text>
</TouchableOpacity>
</View>
{/* Overlay Camera */}
{showCamera && (
<View style={styles.overlay}>
{device ? (
<>
<Camera
ref={cameraRef}
style={StyleSheet.absoluteFill}
device={device}
isActive={showCamera}
photo // cần để dùng takePhoto()
/>
<View style={styles.controls}>
<TouchableOpacity style={styles.smallBtn} onPress={onToggleCameraPosition}>
<Text style={styles.btnText}>Đổi cam</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.shutter} onPress={onTakePhoto} />
<TouchableOpacity style={styles.smallBtn} onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
</>
) : (
<View style={[styles.overlay, styles.center]}>
<Text style={{ color: '#fff' }}>Không tìm thấy camera</Text>
<TouchableOpacity style={[styles.smallBtn, { marginTop: 16 }]} onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
)}
</View>
)}
</View>
);
};
export default CameraScreen;
const styles = StyleSheet.create({
overlay: {
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
backgroundColor: 'black',
},
controls: {
position: 'absolute', bottom: 30, left: 0, right: 0,
flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center',
},
shutter: {
width: 68, height: 68, borderRadius: 34,
borderWidth: 4, borderColor: '#fff',
backgroundColor: 'rgba(255,255,255,0.2)',
},
smallBtn: {
paddingHorizontal: 12, paddingVertical: 8,
borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.2)',
},
btnText: { color: '#fff', fontWeight: '600' },
pickBtn: {
marginTop: 12, padding: 8, backgroundColor: '#2e6ef7', borderRadius: 8,
},
pickBtnText: { color: '#fff', fontWeight: '600' },
center: { justifyContent: 'center', alignItems: 'center' },
});
src/screens/profile/index.js
import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import React, { useRef, useState } from 'react';
import { Platform } from 'react-native';
import ProfileView from './view';
import { useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
const Profile = props => {
const [user, setUser] = useState({
const Profile = () => {
// --- mock profile ---
const [user] = useState({
name: 'Phạm Minh Quân',
role: 'Trợ lý bộ môn thuộc trường',
code: '80578',
......@@ -24,7 +26,7 @@ const Profile = props => {
workCommencementDate: '20/03/2025',
});
// States cho các TextField trong form
// --- form states ---
const [phoneNumber, setPhoneNumber] = useState('');
const [oldTeacherCode, setOldTeacherCode] = useState('');
const [workPlace, setWorkPlace] = useState('');
......@@ -58,16 +60,45 @@ const Profile = props => {
const [salaryIncreaseMilestone, setSalaryIncreaseMilestone] = useState('');
const [lecturerTitle, setLecturerTitle] = useState('');
// --- radio group ---
const [selectedValue2, setSelectedValue2] = useState('1');
const options2 = [
{label: 'Cơ chế', value: '1'},
{label: 'Biên hữu', value: '2'},
{ label: 'Cơ chế', value: '1' },
{ label: 'Biên hữu', value: '2' },
];
const onValueChange2 = value => {
setSelectedValue2(value);
const onValueChange2 = (v) => setSelectedValue2(v);
// --- camera logic (container) ---
const [showCamera, setShowCamera] = useState(false);
const [avatarUri, setAvatarUri] = useState(null);
const [useFront, setUseFront] = useState(false);
const cameraRef = useRef(null);
const device = useCameraDevice(useFront ? 'front' : 'back');
const { hasPermission, requestPermission } = useCameraPermission();
const openCamera = async () => {
if (!hasPermission) {
const ok = await requestPermission();
if (!ok) return;
}
setShowCamera(true);
};
const onTakePhoto = async () => {
if (!cameraRef.current) return;
const photo = await cameraRef.current.takePhoto({
qualityPrioritization: 'balanced',
flash: 'off',
});
const uri = Platform.OS === 'android' ? 'file://' + photo.path : photo.path;
setAvatarUri(uri);
setShowCamera(false);
};
const onToggleCameraPosition = () => setUseFront((v) => !v);
const onCloseCamera = () => setShowCamera(false);
// --- save handler ---
const handleSave = () => {
const formData = {
phoneNumber,
......@@ -103,84 +134,68 @@ const Profile = props => {
currentSalaryCoefficient,
salaryIncreaseMilestone,
lecturerTitle,
avatarUri,
};
console.log('Profile Form Data:', formData);
// TODO: Implement save logic
// TODO: call API save
};
// ❗ Chỉ MỘT return: truyền mọi thứ xuống View
return (
<ProfileView
// profile
dataProfile={user}
// camera props (UI sẽ dùng để hiển thị)
avatarUri={avatarUri}
onPressSelectImage={openCamera}
showCamera={showCamera}
cameraRef={cameraRef}
device={device}
onToggleCameraPosition={onToggleCameraPosition}
onTakePhoto={onTakePhoto}
onCloseCamera={onCloseCamera}
// radio
selectedValue2={selectedValue2}
options2={options2}
onValueChange2={onValueChange2}
// TextField states
phoneNumber={phoneNumber}
setPhoneNumber={setPhoneNumber}
oldTeacherCode={oldTeacherCode}
setOldTeacherCode={setOldTeacherCode}
workPlace={workPlace}
setWorkPlace={setWorkPlace}
position={position}
setPosition={setPosition}
extraDuty={extraDuty}
setExtraDuty={setExtraDuty}
laborType={laborType}
setLaborType={setLaborType}
employmentType={employmentType}
setEmploymentType={setEmploymentType}
appointmentDecision={appointmentDecision}
setAppointmentDecision={setAppointmentDecision}
appointmentDate={appointmentDate}
setAppointmentDate={setAppointmentDate}
issuingAgency={issuingAgency}
setIssuingAgency={setIssuingAgency}
jobBeforeRecruitment={jobBeforeRecruitment}
setJobBeforeRecruitment={setJobBeforeRecruitment}
allowanceSeniorityDate={allowanceSeniorityDate}
setAllowanceSeniorityDate={setAllowanceSeniorityDate}
workAllowancePercent={workAllowancePercent}
setWorkAllowancePercent={setWorkAllowancePercent}
teacherAllowancePercent={teacherAllowancePercent}
setTeacherAllowancePercent={setTeacherAllowancePercent}
teacherType={teacherType}
setTeacherType={setTeacherType}
academicUnit={academicUnit}
setAcademicUnit={setAcademicUnit}
subjectDepartment={subjectDepartment}
setSubjectDepartment={setSubjectDepartment}
employmentStatus={employmentStatus}
setEmploymentStatus={setEmploymentStatus}
workStartDate={workStartDate}
setWorkStartDate={setWorkStartDate}
currentContractType={currentContractType}
setCurrentContractType={setCurrentContractType}
contractStartDate={contractStartDate}
setContractStartDate={setContractStartDate}
contractEndDate={contractEndDate}
setContractEndDate={setContractEndDate}
currentContractNumber={currentContractNumber}
setCurrentContractNumber={setCurrentContractNumber}
contractEffectiveDate={contractEffectiveDate}
setContractEffectiveDate={setContractEffectiveDate}
fullTimeWorkStartDate={fullTimeWorkStartDate}
setFullTimeWorkStartDate={setFullTimeWorkStartDate}
lastClassificationDate={lastClassificationDate}
setLastClassificationDate={setLastClassificationDate}
currentWorkAllowancePercent={currentWorkAllowancePercent}
setCurrentWorkAllowancePercent={setCurrentWorkAllowancePercent}
salaryGrade={salaryGrade}
setSalaryGrade={setSalaryGrade}
currentSalaryLevel={currentSalaryLevel}
setCurrentSalaryLevel={setCurrentSalaryLevel}
currentSalaryCoefficient={currentSalaryCoefficient}
setCurrentSalaryCoefficient={setCurrentSalaryCoefficient}
salaryIncreaseMilestone={salaryIncreaseMilestone}
setSalaryIncreaseMilestone={setSalaryIncreaseMilestone}
lecturerTitle={lecturerTitle}
setLecturerTitle={setLecturerTitle}
// Handlers
// form states
phoneNumber={phoneNumber} setPhoneNumber={setPhoneNumber}
oldTeacherCode={oldTeacherCode} setOldTeacherCode={setOldTeacherCode}
workPlace={workPlace} setWorkPlace={setWorkPlace}
position={position} setPosition={setPosition}
extraDuty={extraDuty} setExtraDuty={setExtraDuty}
laborType={laborType} setLaborType={setLaborType}
employmentType={employmentType} setEmploymentType={setEmploymentType}
appointmentDecision={appointmentDecision} setAppointmentDecision={setAppointmentDecision}
appointmentDate={appointmentDate} setAppointmentDate={setAppointmentDate}
issuingAgency={issuingAgency} setIssuingAgency={setIssuingAgency}
jobBeforeRecruitment={jobBeforeRecruitment} setJobBeforeRecruitment={setJobBeforeRecruitment}
allowanceSeniorityDate={allowanceSeniorityDate} setAllowanceSeniorityDate={setAllowanceSeniorityDate}
workAllowancePercent={workAllowancePercent} setWorkAllowancePercent={setWorkAllowancePercent}
teacherAllowancePercent={teacherAllowancePercent} setTeacherAllowancePercent={setTeacherAllowancePercent}
teacherType={teacherType} setTeacherType={setTeacherType}
academicUnit={academicUnit} setAcademicUnit={setAcademicUnit}
subjectDepartment={subjectDepartment} setSubjectDepartment={setSubjectDepartment}
employmentStatus={employmentStatus} setEmploymentStatus={setEmploymentStatus}
workStartDate={workStartDate} setWorkStartDate={setWorkStartDate}
currentContractType={currentContractType} setCurrentContractType={setCurrentContractType}
contractStartDate={contractStartDate} setContractStartDate={setContractStartDate}
contractEndDate={contractEndDate} setContractEndDate={setContractEndDate}
currentContractNumber={currentContractNumber} setCurrentContractNumber={setCurrentContractNumber}
contractEffectiveDate={contractEffectiveDate} setContractEffectiveDate={setContractEffectiveDate}
fullTimeWorkStartDate={fullTimeWorkStartDate} setFullTimeWorkStartDate={setFullTimeWorkStartDate}
lastClassificationDate={lastClassificationDate} setLastClassificationDate={setLastClassificationDate}
currentWorkAllowancePercent={currentWorkAllowancePercent} setCurrentWorkAllowancePercent={setCurrentWorkAllowancePercent}
salaryGrade={salaryGrade} setSalaryGrade={setSalaryGrade}
currentSalaryLevel={currentSalaryLevel} setCurrentSalaryLevel={setCurrentSalaryLevel}
currentSalaryCoefficient={currentSalaryCoefficient} setCurrentSalaryCoefficient={setCurrentSalaryCoefficient}
salaryIncreaseMilestone={salaryIncreaseMilestone} setSalaryIncreaseMilestone={setSalaryIncreaseMilestone}
lecturerTitle={lecturerTitle} setLecturerTitle={setLecturerTitle}
// actions
onSave={handleSave}
/>
);
......
src/screens/profile/style.js
......@@ -59,5 +59,13 @@ const styles = StyleSheet.create({
sizedBox: {
width: 15,
},
overlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'black' },
controls: { position: 'absolute', bottom: 30, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' },
shutter: { width: 68, height: 68, borderRadius: 34, borderWidth: 4, borderColor: '#fff', backgroundColor: 'rgba(255,255,255,0.2)' },
smallBtn: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, backgroundColor: 'rgba(255,255,255,0.2)' },
btnText: { color: '#fff', fontWeight: '600' },
absoluteFill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
center: { justifyContent: 'center', alignItems: 'center' },
});
export default styles;
src/screens/profile/view.js
......@@ -2,24 +2,35 @@ import React from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Image,
ScrollView,
TouchableOpacity,
} from 'react-native';
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';
import {
Camera,
} from 'react-native-vision-camera'
const ProfileView = props => {
const {
dataProfile,
selectedValue2,
options2,
dataProfile,
// camera
avatarUri,
onPressSelectImage,
showCamera,
cameraRef,
device,
onToggleCameraPosition,
onTakePhoto,
onCloseCamera,
selectedValue2,
options2,
onValueChange2,
// TextField states
phoneNumber,
......@@ -90,573 +101,629 @@ const ProfileView = props => {
onSave,
} = props;
console.log(dataProfile?.name);
return (
<View style={styles.container}>
<Header title={'Hồ sơ giảng viên'} isBack />
<ScrollView showsVerticalScrollIndicator={false} vertical>
<View style={styles.body}>
<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>
const renderButtonCamera = () => {
return (
<Button
title="Chọn ảnh"
onPress={onPressSelectImage}
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}
/>
);
};
const renderHeaderBody = () => {
return (
<View style={styles.headerBody}>
<View style={styles.headerLeft}>
<View style={styles.boxCamera}>
<View style={styles.containerImage}>
{avatarUri ? (
<Image source={{ uri: avatarUri }} style={styles.image} />
) : (
<Image source={R.images.iconCamera} style={styles.image} />
)}
</View>
<View style={styles.containerButton}>{renderButtonCamera()}</View>
</View>
<View style={styles.bodyProfile}>
<View style={styles.containerInput}>
<TextField
title={'Số điện thoại'}
value={phoneNumber}
onChangeText={setPhoneNumber}
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ũ'}
value={oldTeacherCode}
onChangeText={setOldTeacherCode}
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'}
value={workPlace}
onChangeText={setWorkPlace}
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ụ'}
value={position}
onChangeText={setPosition}
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 '}
value={extraDuty}
onChangeText={setExtraDuty}
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'}
value={laborType}
onChangeText={setLaborType}
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ế'}
value={employmentType}
onChangeText={setEmploymentType}
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'}
value={appointmentDecision}
onChangeText={setAppointmentDecision}
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ổ nhiệm'}
value={appointmentDate}
onChangeText={setAppointmentDate}
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Đ'}
value={issuingAgency}
onChangeText={setIssuingAgency}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
</View>
<View style={styles.containerInput}>
<TextField
title={'Công việc trước khi tuyển dụng'}
value={jobBeforeRecruitment}
onChangeText={setJobBeforeRecruitment}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</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.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>
const renderBody = () => {
return (
<View style={styles.bodyProfile}>
<View style={styles.containerInput}>
<TextField
title={'Số điện thoại'}
value={phoneNumber}
onChangeText={setPhoneNumber}
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ũ'}
value={oldTeacherCode}
onChangeText={setOldTeacherCode}
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'}
value={workPlace}
onChangeText={setWorkPlace}
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ụ'}
value={position}
onChangeText={setPosition}
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 '}
value={extraDuty}
onChangeText={setExtraDuty}
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'}
value={laborType}
onChangeText={setLaborType}
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ế'}
value={employmentType}
onChangeText={setEmploymentType}
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'}
value={appointmentDecision}
onChangeText={setAppointmentDecision}
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ổ nhiệm'}
value={appointmentDate}
onChangeText={setAppointmentDate}
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Đ'}
value={issuingAgency}
onChangeText={setIssuingAgency}
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 hưởng PCTN'}
value={allowanceSeniorityDate}
onChangeText={setAllowanceSeniorityDate}
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(%)'}
value={workAllowancePercent}
onChangeText={setWorkAllowancePercent}
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(%)'}
value={teacherAllowancePercent}
onChangeText={setTeacherAllowancePercent}
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ông việc trước khi tuyển dụng'}
value={jobBeforeRecruitment}
onChangeText={setJobBeforeRecruitment}
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={'Loại CBGV'}
value={teacherType}
onChangeText={setTeacherType}
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={'Đơn vị sinh hoạt chuyên môn'}
value={academicUnit}
onChangeText={setAcademicUnit}
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 hưởng PCTN'}
value={allowanceSeniorityDate}
onChangeText={setAllowanceSeniorityDate}
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(%)'}
value={workAllowancePercent}
onChangeText={setWorkAllowancePercent}
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(%)'}
value={teacherAllowancePercent}
onChangeText={setTeacherAllowancePercent}
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={'Bộ môn sinh hoạt chuyên môn'}
value={subjectDepartment}
onChangeText={setSubjectDepartment}
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={'Loại CBGV'}
value={teacherType}
onChangeText={setTeacherType}
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'}
value={employmentStatus}
onChangeText={setEmploymentStatus}
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'}
value={academicUnit}
onChangeText={setAcademicUnit}
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'}
value={workStartDate}
onChangeText={setWorkStartDate}
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đ hiện hành'}
value={currentContractType}
onChangeText={setCurrentContractType}
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={'Bộ môn sinh hoạt chuyên môn'}
value={subjectDepartment}
onChangeText={setSubjectDepartment}
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Đ HĐ hiện hành'}
value={contractStartDate}
onChangeText={setContractStartDate}
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'}
value={contractEndDate}
onChangeText={setContractEndDate}
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={'Trạng thái làm việc'}
value={employmentStatus}
onChangeText={setEmploymentStatus}
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={'Số hợp đồng hiện hành'}
value={currentContractNumber}
onChangeText={setCurrentContractNumber}
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'}
value={workStartDate}
onChangeText={setWorkStartDate}
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đ hiện hành'}
value={currentContractType}
onChangeText={setCurrentContractType}
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 HL HĐ hiện hành'}
value={contractEffectiveDate}
onChangeText={setContractEffectiveDate}
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'}
value={fullTimeWorkStartDate}
onChangeText={setFullTimeWorkStartDate}
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'}
value={contractStartDate}
onChangeText={setContractStartDate}
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'}
value={contractEndDate}
onChangeText={setContractEndDate}
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'}
value={lastClassificationDate}
onChangeText={setLastClassificationDate}
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'}
value={currentWorkAllowancePercent}
onChangeText={setCurrentWorkAllowancePercent}
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'}
value={currentContractNumber}
onChangeText={setCurrentContractNumber}
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ạch lương'}
value={salaryGrade}
onChangeText={setSalaryGrade}
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'}
value={contractEffectiveDate}
onChangeText={setContractEffectiveDate}
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'}
value={fullTimeWorkStartDate}
onChangeText={setFullTimeWorkStartDate}
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={'Bậc lương hiện hành'}
value={currentSalaryLevel}
onChangeText={setCurrentSalaryLevel}
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'}
value={currentSalaryCoefficient}
onChangeText={setCurrentSalaryCoefficient}
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'}
value={salaryIncreaseMilestone}
onChangeText={setSalaryIncreaseMilestone}
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={'Thời điểm xếp BL cuối'}
value={lastClassificationDate}
onChangeText={setLastClassificationDate}
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'}
value={currentWorkAllowancePercent}
onChangeText={setCurrentWorkAllowancePercent}
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={'Chức danh giảng viên'}
value={lecturerTitle}
onChangeText={setLecturerTitle}
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ạch lương'}
value={salaryGrade}
onChangeText={setSalaryGrade}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<Button
title={'Lưu'}
onPress={onSave}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
fontSize={R.sizes.sm}
paddingHorizontal={15}
paddingVertical={5}
borderRadius={10}
fontSizeTitle={R.sizes.sm}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Bậc lương hiện hành'}
value={currentSalaryLevel}
onChangeText={setCurrentSalaryLevel}
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'}
value={currentSalaryCoefficient}
onChangeText={setCurrentSalaryCoefficient}
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'}
value={salaryIncreaseMilestone}
onChangeText={setSalaryIncreaseMilestone}
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'}
value={lecturerTitle}
onChangeText={setLecturerTitle}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<Button
title={'Lưu'}
onPress={onSave}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
fontSize={R.sizes.sm}
paddingHorizontal={15}
paddingVertical={5}
borderRadius={10}
fontSizeTitle={R.sizes.sm}
/>
</View>
);
};
return (
<View style={styles.container}>
<Header title={'Hồ sơ giảng viên'} isBack />
<ScrollView showsVerticalScrollIndicator={false} vertical>
<View style={styles.body}>
{renderHeaderBody()}
{renderBody()}
</View>
</ScrollView>
{/* Overlay Camera - chỉ UI, mọi handler/state nhận từ props */}
{showCamera && (
<View style={styles.overlay}>
{device ? (
<>
<Camera
ref={cameraRef}
style={styles.absoluteFill}
device={device}
isActive={showCamera}
photo
/>
<View style={styles.controls}>
<TouchableOpacity style={styles.smallBtn} onPress={onToggleCameraPosition}>
<Text style={styles.btnText}>Đổi cam</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.shutter} onPress={onTakePhoto} />
<TouchableOpacity style={styles.smallBtn} onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
</>
) : (
<View style={[styles.overlay, styles.center]}>
<Text style={{ color: '#fff' }}>Không tìm thấy camera</Text>
<TouchableOpacity style={[styles.smallBtn, { marginTop: 16 }]} onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
)}
</View>
)}
</View>
);
};
......
yarn.lock
......@@ -7361,6 +7361,11 @@ react-native-vector-icons@^8.1.0:
prop-types "^15.7.2"
yargs "^16.1.1"
react-native-vision-camera@^4.7.2:
version "4.7.2"
resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-4.7.2.tgz#e4bd8f3d893a3f5fa9d8224ce28b8ef00d171bc1"
integrity sha512-C+5PvlSunN6I4aYplSask+v3jfhgduZumIVw6H6lG+Afpf8boIcG3uFSsSfVgj+hxI7fx6qM6bsciEhzgxEUYg==
react-native-webview@^13.12.2:
version "13.15.0"
resolved "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.15.0.tgz"
......
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