Skip to content

A
AppUms_Lecturer
Commit fb8e80c7 by tungnq
Options

IMPORTANT: Bổ sung thư viện json- server và tái cấu trúc một số file

parent 5fe2ad7c
Showing with 1988 additions and 1681 deletions
db/database.json 0 → 100644
{}
\ No newline at end of file
package.json
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
"ios": "react-native run-ios", "ios": "react-native run-ios",
"lint": "eslint .", "lint": "eslint .",
"start": "react-native start", "start": "react-native start",
"test": "jest" "test": "jest",
"server": "json-server --watch db/database.json --port 3000"
}, },
"dependencies": { "dependencies": {
"@react-native-community/async-storage": "^1.12.1", "@react-native-community/async-storage": "^1.12.1",
...@@ -85,6 +86,7 @@ ...@@ -85,6 +86,7 @@
"babel-jest": "^29.6.3", "babel-jest": "^29.6.3",
"eslint": "^8.19.0", "eslint": "^8.19.0",
"jest": "^29.6.3", "jest": "^29.6.3",
"json-server": "^1.0.0-beta.3",
"prettier": "2.8.8", "prettier": "2.8.8",
"react-native-svg-transformer": "^1.5.1", "react-native-svg-transformer": "^1.5.1",
"react-test-renderer": "18.2.0", "react-test-renderer": "18.2.0",
......
src/components/Button.js
...@@ -9,13 +9,12 @@ import { ...@@ -9,13 +9,12 @@ import {
} from 'react-native'; } from 'react-native';
import R from '../assets/R'; import R from '../assets/R';
const Button = props => { const Button = props => {
const { const {
title, title,
onPress, onPress,
containerStyle, containerStyle,
txtStyle, txtStyle,
backgroundColor, backgroundColor,
height, height,
borderRadius, borderRadius,
...@@ -43,11 +42,11 @@ const Button = props => { ...@@ -43,11 +42,11 @@ const Button = props => {
{ {
width: width, width: width,
height: height, height: height,
paddingHorizontal:paddingHorizontal, paddingHorizontal: paddingHorizontal,
paddingVertical:paddingVertical, paddingVertical: paddingVertical,
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
borderRadius: borderRadius, borderRadius: borderRadius,
marginRight: marginRight marginRight: marginRight,
}, },
{...containerStyle}, {...containerStyle},
]} ]}
...@@ -55,14 +54,18 @@ const Button = props => { ...@@ -55,14 +54,18 @@ const Button = props => {
onPress={onPress}> onPress={onPress}>
<View <View
style={{ style={{
flex:1, flex: 1,
justifyContent:'space-around', justifyContent: 'space-around',
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
}}> }}>
{iconLeft && <Image source={iconLeft} tintColor={tintColorLeft} style={iconStyleLeft} />} {iconLeft && (
<Image
source={iconLeft}
tintColor={tintColorLeft}
style={iconStyleLeft}
/>
)}
<Text <Text
style={[ style={[
{ {
...@@ -77,9 +80,9 @@ const Button = props => { ...@@ -77,9 +80,9 @@ const Button = props => {
]}> ]}>
{title} {title}
</Text> </Text>
{icon&& <Image source={icon} style={iconStyle} />} {icon && <Image source={icon} style={iconStyle} />}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
export default Button ; export default Button;
src/screens/academic_advisor/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import ClassActivityView from './view'; import ClassActivityView from './view';
const ClassActivity = (props) => { const ClassActivity = props => {
const [dataList , setDataList] = useState([ const [dataList, setDataList] = useState([
{ {
id:'1', id: '1',
class_activity:'ATTT2024.1', class_activity: 'ATTT2024.1',
course:'2024', course: '2024',
training_system:'CQUI', training_system: 'CQUI',
class_by_course:'ATTT2024.1', class_by_course: 'ATTT2024.1',
science:'MMT&TT', science: 'MMT&TT',
class_leader:'Nguyễn Minh Đức', class_leader: 'Nguyễn Minh Đức',
}, },
{ {
"id": "2", id: '2',
"class_activity": "IS2024.IP57.1", class_activity: 'IS2024.IP57.1',
"course": "2024", course: '2024',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "IS2024.IP57.1", class_by_course: 'IS2024.IP57.1',
"science": "CNTT", science: 'CNTT',
"class_leader": "Trần Thị Hương" class_leader: 'Trần Thị Hương',
}, },
{ {
"id": "3", id: '3',
"class_activity": "BGF197.47.1", class_activity: 'BGF197.47.1',
"course": "2023", course: '2023',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "BGF197.47.1", class_by_course: 'BGF197.47.1',
"science": "Kinh tế", science: 'Kinh tế',
"class_leader": "Phạm Văn Nam" class_leader: 'Phạm Văn Nam',
}, },
{ {
"id": "4", id: '4',
"class_activity": "CS301.12.3", class_activity: 'CS301.12.3',
"course": "2022", course: '2022',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "CS301.12.3", class_by_course: 'CS301.12.3',
"science": "Khoa học Máy tính", science: 'Khoa học Máy tính',
"class_leader": "Lê Thị Mai" class_leader: 'Lê Thị Mai',
}, },
{ {
"id": "5", id: '5',
"class_activity": "MA205.C33.2", class_activity: 'MA205.C33.2',
"course": "2025", course: '2025',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "MA205.C33.2", class_by_course: 'MA205.C33.2',
"science": "Toán", science: 'Toán',
"class_leader": "Nguyễn Văn Hùng" class_leader: 'Nguyễn Văn Hùng',
}, },
{ {
"id": "6", id: '6',
"class_activity": "ENG101.P2.5", class_activity: 'ENG101.P2.5',
"course": "2024", course: '2024',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "ENG101.P2.5", class_by_course: 'ENG101.P2.5',
"science": "Ngoại ngữ", science: 'Ngoại ngữ',
"class_leader": "Hoàng Thu Trang" class_leader: 'Hoàng Thu Trang',
}, },
{ {
"id": "7", id: '7',
"class_activity": "PHYS202.3A.1", class_activity: 'PHYS202.3A.1',
"course": "2023", course: '2023',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "PHYS202.3A.1", class_by_course: 'PHYS202.3A.1',
"science": "Vật lý", science: 'Vật lý',
"class_leader": "Vũ Đức Anh" class_leader: 'Vũ Đức Anh',
}, },
{ {
"id": "8", id: '8',
"class_activity": "CHEM101.12.2", class_activity: 'CHEM101.12.2',
"course": "2025", course: '2025',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "CHEM101.12.2", class_by_course: 'CHEM101.12.2',
"science": "Hóa học", science: 'Hóa học',
"class_leader": "Đỗ Lan Phương" class_leader: 'Đỗ Lan Phương',
}, },
{ {
"id": "9", id: '9',
"class_activity": "BIO202.A1.1", class_activity: 'BIO202.A1.1',
"course": "2022", course: '2022',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "BIO202.A1.1", class_by_course: 'BIO202.A1.1',
"science": "Sinh học", science: 'Sinh học',
"class_leader": "Nguyễn Thị Ngọc" class_leader: 'Nguyễn Thị Ngọc',
}, },
{ {
"id": "10", id: '10',
"class_activity": "LAW303.L12.1", class_activity: 'LAW303.L12.1',
"course": "2024", course: '2024',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "LAW303.L12.1", class_by_course: 'LAW303.L12.1',
"science": "Luật", science: 'Luật',
"class_leader": "Phan Minh Tuấn" class_leader: 'Phan Minh Tuấn',
}, },
{ {
"id": "11", id: '11',
"class_activity": "HIS204.HB1.3", class_activity: 'HIS204.HB1.3',
"course": "2023", course: '2023',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "HIS204.HB1.3", class_by_course: 'HIS204.HB1.3',
"science": "Lịch sử", science: 'Lịch sử',
"class_leader": "Trần Văn Bình" class_leader: 'Trần Văn Bình',
}, },
{ {
"id": "12", id: '12',
"class_activity": "PSY101.PC2.1", class_activity: 'PSY101.PC2.1',
"course": "2025", course: '2025',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "PSY101.PC2.1", class_by_course: 'PSY101.PC2.1',
"science": "Tâm lý", science: 'Tâm lý',
"class_leader": "Ngô Thị Hạnh" class_leader: 'Ngô Thị Hạnh',
}, },
{ {
"id": "13", id: '13',
"class_activity": "ART203.AR3.2", class_activity: 'ART203.AR3.2',
"course": "2022", course: '2022',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "ART203.AR3.2", class_by_course: 'ART203.AR3.2',
"science": "Mỹ thuật", science: 'Mỹ thuật',
"class_leader": "Bùi Văn Sơn" class_leader: 'Bùi Văn Sơn',
}, },
{ {
"id": "14", id: '14',
"class_activity": "ECON305.EC2.1", class_activity: 'ECON305.EC2.1',
"course": "2024", course: '2024',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "ECON305.EC2.1", class_by_course: 'ECON305.EC2.1',
"science": "Kinh tế quốc tế", science: 'Kinh tế quốc tế',
"class_leader": "Nguyễn Thuỳ Dung" class_leader: 'Nguyễn Thuỳ Dung',
}, },
{ {
"id": "15", id: '15',
"class_activity": "MED401.MC1.1", class_activity: 'MED401.MC1.1',
"course": "2025", course: '2025',
"training_system": "CQUI", training_system: 'CQUI',
"class_by_course": "MED401.MC1.1", class_by_course: 'MED401.MC1.1',
"science": "Y học", science: 'Y học',
"class_leader": "Trần Quốc Việt" class_leader: 'Trần Quốc Việt',
}, },
{ {
"id": "16", id: '16',
"class_activity": "EDU202.ED5.2", class_activity: 'EDU202.ED5.2',
"course": "2023", course: '2023',
"training_system": "CLC", training_system: 'CLC',
"class_by_course": "EDU202.ED5.2", class_by_course: 'EDU202.ED5.2',
"science": "Giáo dục", science: 'Giáo dục',
"class_leader": "Lê Hoài Nam" class_leader: 'Lê Hoài Nam',
} },
]);
]) return <ClassActivityView dataList={dataList} setDataList={setDataList} />;
return (
<ClassActivityView dataList={dataList}
setDataList={setDataList}
/>
);
}; };
export default ClassActivity; export default ClassActivity;
src/screens/academic_advisor/list_student/detail/index.js
...@@ -2,7 +2,7 @@ import React, {useState} from 'react'; ...@@ -2,7 +2,7 @@ import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailStudentView from './view'; import DetailStudentView from './view';
const DetailStudent = (props) => { const DetailStudent = props => {
const [student, setStudent] = useState({ const [student, setStudent] = useState({
name: 'Nguyễn Minh Đức', name: 'Nguyễn Minh Đức',
code_student: '2598671', code_student: '2598671',
...@@ -11,58 +11,53 @@ const DetailStudent = (props) => { ...@@ -11,58 +11,53 @@ const DetailStudent = (props) => {
tele_phone: '0123456789', tele_phone: '0123456789',
gender: 'Nam', gender: 'Nam',
average_score: '8.5', average_score: '8.5',
latest_semester_average_score:'8.5', latest_semester_average_score: '8.5',
training_average_score:'100', training_average_score: '100',
type:[ type: [
{ {
id:1, id: 1,
name:'Chuẩn đầu ra NN', name: 'Chuẩn đầu ra NN',
status:true, status: true,
}, },
{ {
id:2, id: 2,
name:'Chuẩn trình NN', name: 'Chuẩn trình NN',
status:true, status: true,
}, },
{ {
id:3, id: 3,
name:'Quá tiến độ học tập', name: 'Quá tiến độ học tập',
status:false, status: false,
}, },
{ {
id:4, id: 4,
name:'Nợ học phí', name: 'Nợ học phí',
status:false, status: false,
}, },
] ],
}); });
const handleCheckboxChange = (itemId, newValue) => { const handleCheckboxChange = (itemId, newValue) => {
setStudent(prevStudent => { setStudent(prevStudent => {
// Sao chép danh sách type cũ
const updatedTypes = prevStudent.type.map(item => { const updatedTypes = prevStudent.type.map(item => {
if (item.id === itemId) { if (item.id === itemId) {
// Nếu id trùng -> tạo object mới với status cập nhật
return { return {
...item, ...item,
status: newValue, status: newValue,
}; };
} else { } else {
// Nếu không trùng -> giữ nguyên item
return item; return item;
} }
}); });
// Trả về student mới với type đã cập nhật
return { return {
...prevStudent, ...prevStudent,
type: updatedTypes, type: updatedTypes,
}; };
}); });
}; };
return ( return (
<DetailStudentView <DetailStudentView
student={student} student={student}
onCheckboxChange={handleCheckboxChange} onCheckboxChange={handleCheckboxChange}
/> />
......
src/screens/academic_advisor/list_student/detail/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../../../assets/R' import R from '../../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
containerCard:{ containerCard: {
marginHorizontal:15, marginHorizontal: 15,
marginVertical:5, marginVertical: 5,
borderRadius:10, borderRadius: 10,
}, },
card:{ card: {
borderBottomEndRadius:10, borderBottomEndRadius: 10,
borderBottomStartRadius:10, borderBottomStartRadius: 10,
paddingHorizontal:10, paddingHorizontal: 10,
paddingVertical:5, paddingVertical: 5,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
shadowColor:R.colors.black, shadowColor: R.colors.black,
shadowOffset:{width:0.5,height:2}, shadowOffset: {width: 0.5, height: 2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1, shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:2, shadowRadius: 2,
elevation:Platform.OS === 'ios' ? 1 : 2, elevation: Platform.OS === 'ios' ? 1 : 2,
}, },
containerText:{ containerText: {
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
marginBottom:5, marginBottom: 5,
}, },
containerTextItemLeft:{ containerTextItemLeft: {
alignItems:'flex-start', alignItems: 'flex-start',
justifyContent:'flex-start', justifyContent: 'flex-start',
width:'45%', width: '45%',
}, },
containerTextItemRight:{ containerTextItemRight: {
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
}, },
sizedBox:{ sizedBox: {
flex:3 flex: 3,
}, },
text:{
fontSize:R.sizes.sm,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
textAlign:'center',
},
containerSubText:{
flexDirection:'row',
marginBottom:5
},
containerSubTextItemLeft:{
},
containerSubTextItemRight:{
},
textTitle:{
fontSize:R.sizes.md,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.blue,
marginHorizontal:15,
},
label:{
fontSize:R.sizes.sm,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
},
checkboxContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
checkboxItem: {
width: '50%',
marginBottom: 15,
},
})
export default styles text: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
textAlign: 'center',
},
containerSubText: {
flexDirection: 'row',
marginBottom: 5,
},
containerSubTextItemLeft: {},
containerSubTextItemRight: {},
textTitle: {
fontSize: R.sizes.md,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.blue,
marginHorizontal: 15,
},
label: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
checkboxContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
checkboxItem: {
width: '50%',
marginBottom: 15,
},
});
export default styles;
src/screens/academic_advisor/list_student/detail/view.js
...@@ -23,18 +23,23 @@ const DetailStudentView = props => { ...@@ -23,18 +23,23 @@ const DetailStudentView = props => {
return statusColors[status] || '#9E9E9E'; return statusColors[status] || '#9E9E9E';
}; };
const statusColor = getStatusColor(student.status); const statusColor = getStatusColor(student.status);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Nguyễn Minh Đức - 2598671'} isBack /> <Header title={'Nguyễn Minh Đức - 2598671'} isBack />
<View style={styles.body}> <View style={styles.body}>
<View style={[styles.card ,{marginHorizontal:15, marginTop:10 , borderRadius:10}]}> <View
style={[
styles.card,
{marginHorizontal: 15, marginTop: 10, borderRadius: 10},
]}>
<View style={styles.containerText}> <View style={styles.containerText}>
<View style={styles.containerTextItemLeft}> <View style={styles.containerTextItemLeft}>
<Text style={styles.text}>STC TL / STC CTDT 23 / 102</Text> <Text style={styles.text}>STC TL / STC CTDT 23 / 102</Text>
</View> </View>
<View style={styles.sizedBox}></View> <View style={styles.sizedBox}></View>
<View style={styles.containerTextItemRight}> <View style={styles.containerTextItemRight}>
<Text style={[styles.text]}>Tình trạng: {' '}</Text> <Text style={[styles.text]}>Tình trạng: </Text>
<Text style={[styles.text, {color: statusColor}]}> <Text style={[styles.text, {color: statusColor}]}>
{student.status} {student.status}
</Text> </Text>
...@@ -44,7 +49,7 @@ const DetailStudentView = props => { ...@@ -44,7 +49,7 @@ const DetailStudentView = props => {
<View style={styles.containerSubText}> <View style={styles.containerSubText}>
<View style={styles.containerSubTextItemLeft}> <View style={styles.containerSubTextItemLeft}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
Ngày sinh: {' '} Ngày sinh:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -57,7 +62,7 @@ const DetailStudentView = props => { ...@@ -57,7 +62,7 @@ const DetailStudentView = props => {
<View style={styles.sizedBox}></View> <View style={styles.sizedBox}></View>
<View style={styles.containerSubTextItemRight}> <View style={styles.containerSubTextItemRight}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
SDT: {' '} SDT:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -72,7 +77,7 @@ const DetailStudentView = props => { ...@@ -72,7 +77,7 @@ const DetailStudentView = props => {
<View style={styles.containerSubText}> <View style={styles.containerSubText}>
<View style={styles.containerSubTextItemLeft}> <View style={styles.containerSubTextItemLeft}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
Giới tính: {' '} Giới tính:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -85,7 +90,7 @@ const DetailStudentView = props => { ...@@ -85,7 +90,7 @@ const DetailStudentView = props => {
<View style={styles.sizedBox}></View> <View style={styles.sizedBox}></View>
<View style={styles.containerSubTextItemRight}> <View style={styles.containerSubTextItemRight}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
Điểm trung bình: {' '} Điểm trung bình:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -101,7 +106,7 @@ const DetailStudentView = props => { ...@@ -101,7 +106,7 @@ const DetailStudentView = props => {
<View style={styles.containerSubText}> <View style={styles.containerSubText}>
<View style={styles.containerSubTextItemLeft}> <View style={styles.containerSubTextItemLeft}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
Điểm TB học kì gần nhất: {' '} Điểm TB học kì gần nhất:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -116,7 +121,7 @@ const DetailStudentView = props => { ...@@ -116,7 +121,7 @@ const DetailStudentView = props => {
<View style={styles.containerSubText}> <View style={styles.containerSubText}>
<View style={styles.containerSubTextItemLeft}> <View style={styles.containerSubTextItemLeft}>
<Text style={[styles.text]}> <Text style={[styles.text]}>
Điểm rèn luyện TB: {' '} Điểm rèn luyện TB:{' '}
<Text <Text
style={[ style={[
styles.text, styles.text,
...@@ -146,17 +151,23 @@ const DetailStudentView = props => { ...@@ -146,17 +151,23 @@ const DetailStudentView = props => {
))} ))}
</View> </View>
</View> </View>
<Text style={[styles.textTitle ,{marginTop:10}]}>Lịch sử tình trạng của sinh viên</Text> <Text style={[styles.textTitle, {marginTop: 10}]}>
<View style={[styles.containerCard, {backgroundColor:getStatusColor(student.status)}]}> Lịch sử tình trạng của sinh viên
<Text </Text>
<View
style={[
styles.containerCard,
{backgroundColor: getStatusColor(student.status)},
]}>
<Text
style={[ style={[
{ {
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '600', fontWeight: '600',
color: R.colors.white, color: R.colors.white,
marginHorizontal:10, marginHorizontal: 10,
marginVertical:3 marginVertical: 3,
}, },
]}> ]}>
Trạng thái học tập:{' '} Trạng thái học tập:{' '}
...@@ -165,7 +176,6 @@ const DetailStudentView = props => { ...@@ -165,7 +176,6 @@ const DetailStudentView = props => {
</Text> </Text>
</Text> </Text>
<View style={styles.card}> <View style={styles.card}>
<Text <Text
style={[ style={[
{ {
...@@ -178,8 +188,6 @@ const DetailStudentView = props => { ...@@ -178,8 +188,6 @@ const DetailStudentView = props => {
Học kỳ 2, Năm học 2024 Học kỳ 2, Năm học 2024
</Text> </Text>
<Text <Text
style={[ style={[
{ {
...@@ -236,7 +244,7 @@ const DetailStudentView = props => { ...@@ -236,7 +244,7 @@ const DetailStudentView = props => {
{student.date_student} {student.date_student}
</Text> </Text>
</Text> </Text>
</View> </View>
</View> </View>
</View> </View>
</View> </View>
......
src/screens/academic_advisor/list_student/style.js
...@@ -5,7 +5,6 @@ const styles = StyleSheet.create({ ...@@ -5,7 +5,6 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
//Search
containerSearchBox: { containerSearchBox: {
borderColor: R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
borderWidth: 1, borderWidth: 1,
...@@ -14,7 +13,7 @@ const styles = StyleSheet.create({ ...@@ -14,7 +13,7 @@ const styles = StyleSheet.create({
marginVertical: 15, marginVertical: 15,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
flexDirection: 'row', flexDirection: 'row',
height:35 height: 35,
}, },
boxIconSearch: { boxIconSearch: {
maxWidth: 35, maxWidth: 35,
...@@ -28,20 +27,18 @@ const styles = StyleSheet.create({ ...@@ -28,20 +27,18 @@ const styles = StyleSheet.create({
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '500', fontWeight: '500',
flex: 1, flex: 1,
margin:0, margin: 0,
padding:0, padding: 0,
}, },
//Filter
statusContainer: { statusContainer: {
marginBottom: 15, marginBottom: 15,
marginHorizontal: 15, marginHorizontal: 15,
flexDirection: "row", flexDirection: 'row',
justifyContent: "space-around" justifyContent: 'space-around',
}, },
statusCard: { statusCard: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}, },
statusDot: { statusDot: {
width: 10, width: 10,
...@@ -64,11 +61,11 @@ const styles = StyleSheet.create({ ...@@ -64,11 +61,11 @@ const styles = StyleSheet.create({
}, },
body: { body: {
flex:1, flex: 1,
}, },
listContainer: { listContainer: {
paddingBottom: 20, paddingBottom: 20,
}, },
studentCard: { studentCard: {
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderRadius: 15, borderRadius: 15,
...@@ -112,8 +109,6 @@ const styles = StyleSheet.create({ ...@@ -112,8 +109,6 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
}, },
statusIndicator: { statusIndicator: {
width: 15, width: 15,
height: 15, height: 15,
......
src/screens/academic_advisor/list_student/view.js
...@@ -13,12 +13,11 @@ import Header from '../../../components/Header/Header'; ...@@ -13,12 +13,11 @@ import Header from '../../../components/Header/Header';
import styles from './style'; import styles from './style';
import R from '../../../assets/R'; import R from '../../../assets/R';
import * as SCREENNAME from '../../../routers/ScreenNames'; import * as SCREENNAME from '../../../routers/ScreenNames';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const ListStudentView = props => { const ListStudentView = props => {
const {searchText, onSearchChange, filter, statusStats} = props; const {searchText, onSearchChange, filter, statusStats} = props;
console.log(props); console.log(props);
const navigate = useNavigation(); const navigate = useNavigation();
//Search
const renderSearchBox = () => { const renderSearchBox = () => {
return ( return (
<View style={styles.containerSearchBox}> <View style={styles.containerSearchBox}>
...@@ -42,12 +41,9 @@ const ListStudentView = props => { ...@@ -42,12 +41,9 @@ const ListStudentView = props => {
</View> </View>
); );
}; };
//List status
const renderListStatus = () => { const renderListStatus = () => {
return ( return (
<View <View style={styles.statusContainer}>
style={styles.statusContainer}
>
{statusStats.map((stat, index) => ( {statusStats.map((stat, index) => (
<View <View
key={index} key={index}
...@@ -65,8 +61,7 @@ const ListStudentView = props => { ...@@ -65,8 +61,7 @@ const ListStudentView = props => {
); );
}; };
//List student const renderStudentItem = ({item, onPress}) => {
const renderStudentItem = ({item , onPress}) => {
const isLeftIcon = item.gender === 'Nam'; const isLeftIcon = item.gender === 'Nam';
const genderIcon = const genderIcon =
item.gender === 'Nam' ? R.images.icMale : R.images.icFemale; item.gender === 'Nam' ? R.images.icMale : R.images.icFemale;
...@@ -74,17 +69,29 @@ const ListStudentView = props => { ...@@ -74,17 +69,29 @@ const ListStudentView = props => {
const statusColor = getStatusColor(item.status); const statusColor = getStatusColor(item.status);
return ( return (
<TouchableOpacity style={styles.studentCard} onPress={()=>{navigate.navigate(SCREENNAME.DETAILSTUDENT)}}> <TouchableOpacity
style={styles.studentCard}
onPress={() => {
navigate.navigate(SCREENNAME.DETAILSTUDENT);
}}>
<View style={styles.studentCardContent}> <View style={styles.studentCardContent}>
<View style={styles.studentInfo}> <View style={styles.studentInfo}>
{/*Tên sinh viên*/} {/*Tên sinh viên*/}
<View style={styles.leftSection}> <View style={styles.leftSection}>
<Text style={styles.studentName}>{item.name}</Text> <Text style={styles.studentName}>{item.name}</Text>
{isLeftIcon && ( {isLeftIcon && (
<Image source={genderIcon} style={styles.genderIcon} resizeMode="contain"/> <Image
source={genderIcon}
style={styles.genderIcon}
resizeMode="contain"
/>
)} )}
{!isLeftIcon && ( {!isLeftIcon && (
<Image source={genderIcon} style={styles.genderIcon} resizeMode="contain"/> <Image
source={genderIcon}
style={styles.genderIcon}
resizeMode="contain"
/>
)} )}
</View> </View>
<View style={styles.rightSection}> <View style={styles.rightSection}>
...@@ -106,11 +113,23 @@ const ListStudentView = props => { ...@@ -106,11 +113,23 @@ const ListStudentView = props => {
<View style={styles.studentInfo}> <View style={styles.studentInfo}>
{/*Tên sinh viên*/} {/*Tên sinh viên*/}
<View style={styles.leftSection}> <View style={styles.leftSection}>
<Text style={[styles.studentName,{fontFamily:R.fonts.fontRegular,fontWeight:'400'}]}>Ngày sinh: {item.date_student}</Text> <Text
style={[
styles.studentName,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
]}>
Ngày sinh: {item.date_student}
</Text>
</View> </View>
<View style={styles.rightSection}> <View style={styles.rightSection}>
{/*Mã sinh viên*/} {/*Mã sinh viên*/}
<Text style={[styles.studentName,{fontFamily:R.fonts.fontRegular,fontWeight:'400'}]}>SĐT: {item.tele_phone}</Text> <Text
style={[
styles.studentName,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
]}>
SĐT: {item.tele_phone}
</Text>
</View> </View>
</View> </View>
</View> </View>
...@@ -133,14 +152,14 @@ const ListStudentView = props => { ...@@ -133,14 +152,14 @@ const ListStudentView = props => {
<View style={styles.body}> <View style={styles.body}>
{renderSearchBox()} {renderSearchBox()}
{renderListStatus()} {renderListStatus()}
<FlatList <FlatList
data={filter || []} data={filter || []}
renderItem={renderStudentItem} renderItem={renderStudentItem}
vertical vertical
keyExtractor={(item, index) => `${index}`} keyExtractor={(item, index) => `${index}`}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingTop: 5}} contentContainerStyle={{paddingTop: 5}}
/> />
</View> </View>
</View> </View>
); );
......
src/screens/academic_advisor/style.js
import { StyleSheet , Platform} from 'react-native' import {StyleSheet, Platform} from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
},
card:{ },
borderWidth:1, containerList: {
borderColor:R.colors.grayBorderInputTextHeader, flex: 1,
borderRadius:10, justifyContent: 'center',
padding:5,
marginTop:15, },
marginBottom:15, card: {
marginHorizontal:15, borderWidth: 1,
alignItems:'center', borderColor: R.colors.grayBorderInputTextHeader,
justifyContent:'center', borderRadius: 10,
padding: 5,
marginTop: 15,
marginBottom: 15,
marginHorizontal: 15,
alignItems: 'center',
justifyContent: 'center',
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
shadowColor:R.colors.black, shadowColor: R.colors.black,
shadowOffset:{width:0.5,height:2}, shadowOffset: {width: 0.5, height: 2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1, shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:5, shadowRadius: 5,
elevation:Platform.OS === 'ios' ? 1 : 2, elevation: Platform.OS === 'ios' ? 1 : 2,
}, },
btnCard:{ btnCard: {
borderRadius:10, borderRadius: 10,
borderWidth:1, borderWidth: 1,
padding:5, padding: 5,
width:'100%', width: '100%',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
borderColor:R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
}, },
text_title:{ text_title: {
fontSize:R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontWeight:'600', fontWeight: '600',
color:R.colors.black, color: R.colors.black,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
}, },
text:{ text: {
fontSize:R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
color:R.colors.black, color: R.colors.black,
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
fontWeight:'400', fontWeight: '400',
}, },
containerCard:{ containerCard: {
padding:10, padding: 10,
marginBottom:15 , marginBottom: 15,
borderRadius:10, borderRadius: 10,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
shadowColor:R.colors.black, shadowColor: R.colors.black,
shadowOffset:{width:0,height:2}, shadowOffset: {width: 0, height: 2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1, shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:1, shadowRadius: 1,
elevation:Platform.OS === 'ios' ? 1 : 2, elevation: Platform.OS === 'ios' ? 1 : 2,
marginHorizontal:15, marginHorizontal: 15,
marginVertical:15, marginVertical: 15,
}, },
containerText:{ containerEmpty: {
flexDirection:'row', alignItems: 'center',
}, justifyContent: 'center',
sizedBox:{ },
width:'35%', textEmpty: {
}, color: R.colors.black,
containerButton:{ fontSize: R.fontsize.fontSizeSubTitle,
alignItems:'flex-end', fontWeight: '500',
} fontFamily: R.fonts.fontMedium,
},
textHeader:{
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
containerText: {
flexDirection: 'row',
},
sizedBox: {
width: '35%',
},
containerButton: {
alignItems: 'flex-end',
},
});
}) export default styles;
export default styles
\ No newline at end of file
src/screens/academic_advisor/view.js
import React from 'react'; import React from 'react';
import { import {Text, View, TouchableOpacity, FlatList, Image} from 'react-native';
Text,
View,
TouchableOpacity,
StyleSheet,
SafeAreaView,
FlatList,
} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header'; import Header from '../../components/Header/Header';
import Button from '../../components/Button'; import Button from '../../components/Button';
import R from '../../assets/R'; import R from '../../assets/R';
import * as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const ClassActivityView = props => { const ClassActivityView = props => {
const {dataList, setDataList} = props; const {dataList, setDataList} = props;
const navigate = useNavigation(); const navigate = useNavigation();
const renderItem = ({item}) => { const renderItem = ({item}) => {
return ( return (
<View style={styles.containerCard}> <View style={styles.containerCard}>
<Text style={styles.text_title}>Lớp sinh hoạt:{' '} <Text style={styles.text_title}>
<Text style={styles.text}>{item.class_activity}</Text> Lớp sinh hoạt: <Text style={styles.text}>{item.class_activity}</Text>
</Text> </Text>
<View style={styles.containerText}> <View style={styles.containerText}>
<Text style={styles.text_title}>Khoá: {' '} <Text style={styles.text_title}>
<Text style={styles.text}>{item.course}</Text> Khoá: <Text style={styles.text}>{item.course}</Text>
</Text>
<View style={styles.sizedBox}></View>
<Text style={styles.text_title}>Hệ ĐT: {' '}
<Text style={styles.text}>{item.training_system}</Text>
</Text>
</View>
<Text style={styles.text_title}>Lớp theo khoa: {' '}
<Text style={styles.text}>{item.class_by_course}</Text>
</Text>
<Text style={styles.text_title}>Khoa: {' '}
<Text style={styles.text}>{item.science}</Text>
</Text> </Text>
<Text style={styles.text_title}>Lớp trưởng: {' '} <View style={styles.sizedBox}></View>
<Text style={styles.text}>{item.class_leader}</Text> <Text style={styles.text_title}>
Hệ ĐT: <Text style={styles.text}>{item.training_system}</Text>
</Text> </Text>
</View>
<Text style={styles.text_title}>
Lớp theo khoa: <Text style={styles.text}>{item.class_by_course}</Text>
</Text>
<Text style={styles.text_title}>
Khoa: <Text style={styles.text}>{item.science}</Text>
</Text>
<Text style={styles.text_title}>
Lớp trưởng: <Text style={styles.text}>{item.class_leader}</Text>
</Text>
<View style={styles.containerButton}> <View style={styles.containerButton}>
<Button <Button
title="Chi tiết" title="Chi tiết"
...@@ -60,23 +55,50 @@ const ClassActivityView = props => { ...@@ -60,23 +55,50 @@ const ClassActivityView = props => {
</View> </View>
); );
}; };
return ( const renderItemEmpty = () => {
<View style={styles.container}> return (
<Header title={'Danh sách lớp sinh hoạt'} isBack /> <View style={styles.containerEmpty}>
<View style={styles.body}> <Image source={R.images.icNoData} maxWidth={50} maxHeight={50} />
<View style={styles.card}> <Text style={styles.textEmpty}>Không có dữ liệu</Text>
<TouchableOpacity style={styles.btnCard}>
<Text style={styles.text}>Khoá 2024</Text>
</TouchableOpacity>
</View> </View>
);
};
const renderList = () => {
return (
<FlatList <FlatList
data={dataList || []} data={dataList || []}
renderItem={renderItem} renderItem={renderItem}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
vertical vertical
keyExtractor={(item, index) => `${index}`} keyExtractor={(item, index) => `${index}`}
/> />
);
};
const renderHeaderBody = () => {
return (
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard} onPress={() => {}}>
<Text style={[styles.text, styles.textHeader]}>Khoá 2024</Text>
</TouchableOpacity>
</View>
);
};
const renderBody = () => {
return (
<View style={styles.body}>
{renderHeaderBody()}
<View style={styles.containerList}>
{dataList?.length > 0 ? renderList() : renderItemEmpty()}
</View>
</View> </View>
);
};
return (
<View style={styles.container}>
<Header title={'Danh sách lớp sinh hoạt'} isBack />
{renderBody()}
</View> </View>
); );
}; };
......
src/screens/class_schedule/detail/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../../assets/R' import R from '../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
back_button: { back_button: {
position: 'absolute', position: 'absolute',
top: 20, top: 20,
left: 15, left: 15,
}, },
background_header: { background_header: {
width: '100%', width: '100%',
height: 178, height: 178,
}, },
text_title: { text_title: {
fontSize: R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontWeight: '600', fontWeight: '600',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.blue, color: R.colors.blue,
}, },
container_content: { container_content: {
padding: 15, padding: 15,
}, },
text_content: { text_content: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontWeight: '400', fontWeight: '400',
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
}, },
icon:{ icon: {
width:20, width: 20,
height:15, height: 15,
}, },
info:{ info: {
paddingHorizontal: 15, paddingVertical: 5 paddingHorizontal: 15,
} paddingVertical: 5,
}) },
export default styles });
\ No newline at end of file export default styles;
src/screens/class_schedule/detail/view.js
import React from 'react'; import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet, ImageBackground, Image } from 'react-native'; import {
Text,
View,
TouchableOpacity,
StyleSheet,
ImageBackground,
Image,
} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
import styles from './style'; import styles from './style';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const DetailClassScheduleView = (props) => { const DetailClassScheduleView = props => {
const { } = props; const {} = props;
const navigate = useNavigation(); const navigate = useNavigation();
const ArrowLeftIcon = R.images.icBack; const ArrowLeftIcon = R.images.icBack;
return ( return (
<View <View style={styles.container}>
style={styles.container} <ImageBackground
>
<ImageBackground
source={R.images.igBackground} source={R.images.igBackground}
style={styles.background_header} style={styles.background_header}>
> <TouchableOpacity
<TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}> style={styles.back_button}
<Image source={ArrowLeftIcon} style= {styles.icon}/> onPress={() => navigate.goBack()}>
<Image source={ArrowLeftIcon} style={styles.icon} />
</TouchableOpacity> </TouchableOpacity>
</ImageBackground> </ImageBackground>
<View style={styles.container_content}> <View style={styles.container_content}>
<Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text> <Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text>
<Text style={[styles.text_content, {fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Thứ 6: 25/07/2025, 07:00 - 09:00</Text> <Text
style={[
styles.text_content,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
Thứ 6: 25/07/2025, 07:00 - 09:00
</Text>
<View style={[styles.container_content, styles.info]}> <View style={[styles.container_content, styles.info]}>
<Text style={[styles.text_content, {fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Vị trí: <Text
style={[
styles.text_content,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
Vị trí:
<Text style={styles.text_content}> Phòng B205</Text> <Text style={styles.text_content}> Phòng B205</Text>
</Text> </Text>
<Text style={[styles.text_content, {fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Sĩ số: <Text
style={[
styles.text_content,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
Sĩ số:
<Text style={styles.text_content}> 40</Text> <Text style={styles.text_content}> 40</Text>
</Text> </Text>
<Text style={[styles.text_content, {fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Lớp học: <Text
style={[
styles.text_content,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
Lớp học:
<Text style={styles.text_content}> C810</Text> <Text style={styles.text_content}> C810</Text>
</Text> </Text>
<Text style={[styles.text_content, {fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>Hình thức học: <Text
style={[
styles.text_content,
{fontWeight: '600', fontFamily: R.fonts.fontMedium},
]}>
Hình thức học:
<Text style={styles.text_content}> Thực hành</Text> <Text style={styles.text_content}> Thực hành</Text>
</Text> </Text>
</View> </View>
</View> </View>
</View> </View>
......
src/screens/class_schedule/filter3day/index.js
...@@ -59,32 +59,50 @@ const Filter3Day = ({navigation}) => { ...@@ -59,32 +59,50 @@ const Filter3Day = ({navigation}) => {
const mockEvents = createMockEvents(); const mockEvents = createMockEvents();
const formatDateToString = (date) => { const formatDateToString = date => {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
const getEventsForDate = (date) => { const getEventsForDate = date => {
const dateStr = formatDateToString(date); const dateStr = formatDateToString(date);
return mockEvents.filter(event => event.date === dateStr); return mockEvents.filter(event => event.date === dateStr);
}; };
const getDayName = (date) => { const getDayName = date => {
const days = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7']; const days = [
'Chủ nhật',
'Thứ 2',
'Thứ 3',
'Thứ 4',
'Thứ 5',
'Thứ 6',
'Thứ 7',
];
return days[date.getDay()]; return days[date.getDay()];
}; };
const getMonthName = (monthIndex) => { const getMonthName = monthIndex => {
const months = [ const months = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 1',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12', 'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]; ];
return months[monthIndex]; return months[monthIndex];
}; };
const get3DaysDates = (date) => { const get3DaysDates = date => {
const dates = []; const dates = [];
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
const dayDate = new Date(date); const dayDate = new Date(date);
...@@ -94,7 +112,7 @@ const Filter3Day = ({navigation}) => { ...@@ -94,7 +112,7 @@ const Filter3Day = ({navigation}) => {
return dates; return dates;
}; };
const isToday = (date) => { const isToday = date => {
const today = new Date(); const today = new Date();
return ( return (
date.getDate() === today.getDate() && date.getDate() === today.getDate() &&
...@@ -103,7 +121,7 @@ const Filter3Day = ({navigation}) => { ...@@ -103,7 +121,7 @@ const Filter3Day = ({navigation}) => {
); );
}; };
const handleMonthSelect = (monthIndex) => { const handleMonthSelect = monthIndex => {
const newDate = new Date(currentDate); const newDate = new Date(currentDate);
newDate.setMonth(monthIndex); newDate.setMonth(monthIndex);
setCurrentDate(newDate); setCurrentDate(newDate);
...@@ -149,20 +167,20 @@ const Filter3Day = ({navigation}) => { ...@@ -149,20 +167,20 @@ const Filter3Day = ({navigation}) => {
const calculateEventPosition = (startTime, endTime) => { const calculateEventPosition = (startTime, endTime) => {
const [startHour, startMinute] = startTime.split(':').map(Number); const [startHour, startMinute] = startTime.split(':').map(Number);
const [endHour, endMinute] = endTime.split(':').map(Number); const [endHour, endMinute] = endTime.split(':').map(Number);
const startTotalMinutes = startHour * 60 + startMinute; const startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute; const endTotalMinutes = endHour * 60 + endMinute;
const durationMinutes = endTotalMinutes - startTotalMinutes; const durationMinutes = endTotalMinutes - startTotalMinutes;
const HOUR_HEIGHT = 80; const HOUR_HEIGHT = 80;
const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT; const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT;
const height = (durationMinutes / 60) * HOUR_HEIGHT; const height = (durationMinutes / 60) * HOUR_HEIGHT;
return { topPosition, height }; return {topPosition, height};
}; };
return ( return (
<Filter3DayView <Filter3DayView
navigation={navigation} navigation={navigation}
currentDate={currentDate} currentDate={currentDate}
selectedDate={selectedDate} selectedDate={selectedDate}
......
src/screens/class_schedule/filter3day/style.js
import { StyleSheet, Dimensions } from 'react-native'; import {StyleSheet, Dimensions} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
const { width: screenWidth, height: screenHeight } = Dimensions.get('window'); const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const HOUR_HEIGHT = 80; const HOUR_HEIGHT = 80;
const DAY_COLUMN_WIDTH = (screenWidth - 70) / 3; const DAY_COLUMN_WIDTH = (screenWidth - 70) / 3;
...@@ -71,7 +71,7 @@ const styles = StyleSheet.create({ ...@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
borderRadius: 15, borderRadius: 15,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
marginVertical: 5 marginVertical: 5,
}, },
todayNumberContainer: { todayNumberContainer: {
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
...@@ -90,8 +90,7 @@ const styles = StyleSheet.create({ ...@@ -90,8 +90,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
scrollContent: { scrollContent: {},
},
timelineContainer: { timelineContainer: {
flexDirection: 'row', flexDirection: 'row',
position: 'relative', position: 'relative',
...@@ -155,4 +154,4 @@ const styles = StyleSheet.create({ ...@@ -155,4 +154,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default styles; export default styles;
\ No newline at end of file
src/screens/class_schedule/filter3day/view.js
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
import R from '../../../assets/R'; import R from '../../../assets/R';
import styles from './style'; import styles from './style';
const Filter3DayView = (props) => { const Filter3DayView = props => {
const { const {
currentDate, currentDate,
showMonthPicker, showMonthPicker,
...@@ -21,10 +21,9 @@ const Filter3DayView = (props) => { ...@@ -21,10 +21,9 @@ const Filter3DayView = (props) => {
get3DaysDates, get3DaysDates,
isToday, isToday,
handleMonthSelect, handleMonthSelect,
calculateEventPosition calculateEventPosition,
} = props; } = props;
const renderMonthPicker = () => { const renderMonthPicker = () => {
if (!showMonthPicker) return null; if (!showMonthPicker) return null;
...@@ -45,7 +44,8 @@ const Filter3DayView = (props) => { ...@@ -45,7 +44,8 @@ const Filter3DayView = (props) => {
<Text <Text
style={[ style={[
styles.monthItemText, styles.monthItemText,
currentDate.getMonth() === index && styles.monthItemTextSelected, currentDate.getMonth() === index &&
styles.monthItemTextSelected,
]}> ]}>
{getMonthName(index)} {getMonthName(index)}
</Text> </Text>
...@@ -64,23 +64,26 @@ const Filter3DayView = (props) => { ...@@ -64,23 +64,26 @@ const Filter3DayView = (props) => {
<View style={styles.timeColumnHeader} /> <View style={styles.timeColumnHeader} />
{threeDaysDates.map((date, index) => { {threeDaysDates.map((date, index) => {
const isTodayDate = isToday(date); const isTodayDate = isToday(date);
return ( return (
<View key={index} style={styles.dayHeaderCell}> <View key={index} style={styles.dayHeaderCell}>
<Text style={[ <Text
styles.dayHeaderText, style={[
isTodayDate && styles.todayHeaderText styles.dayHeaderText,
]}> isTodayDate && styles.todayHeaderText,
]}>
{getDayName(date)} {getDayName(date)}
</Text> </Text>
<View style={[ <View
styles.dayNumberContainer, style={[
isTodayDate && styles.todayNumberContainer styles.dayNumberContainer,
]}> isTodayDate && styles.todayNumberContainer,
<Text style={[
styles.dayHeaderNumber,
isTodayDate && styles.todayHeaderNumber
]}> ]}>
<Text
style={[
styles.dayHeaderNumber,
isTodayDate && styles.todayHeaderNumber,
]}>
{date.getDate()} {date.getDate()}
</Text> </Text>
</View> </View>
...@@ -92,7 +95,7 @@ const Filter3DayView = (props) => { ...@@ -92,7 +95,7 @@ const Filter3DayView = (props) => {
}; };
const renderTimeSlots = () => { const renderTimeSlots = () => {
const hours = Array.from({length: 24}, (_, i) => i); const hours = Array.from({length: 24}, (_, i) => i);
const threeDaysDates = get3DaysDates(currentDate); const threeDaysDates = get3DaysDates(currentDate);
return ( return (
...@@ -101,10 +104,9 @@ const Filter3DayView = (props) => { ...@@ -101,10 +104,9 @@ const Filter3DayView = (props) => {
ref={scrollViewRef} ref={scrollViewRef}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}> contentContainerStyle={styles.scrollContent}>
<View style={styles.timelineContainer}> <View style={styles.timelineContainer}>
<View style={styles.timeLabelsColumn}> <View style={styles.timeLabelsColumn}>
{hours.map((hour) => { {hours.map(hour => {
const timeStr = hour.toString().padStart(2, '0') + ':00'; const timeStr = hour.toString().padStart(2, '0') + ':00';
return ( return (
<View key={hour} style={styles.timeSlot}> <View key={hour} style={styles.timeSlot}>
...@@ -117,13 +119,16 @@ const Filter3DayView = (props) => { ...@@ -117,13 +119,16 @@ const Filter3DayView = (props) => {
<View style={styles.daysGridContainer}> <View style={styles.daysGridContainer}>
{threeDaysDates.map((date, dayIndex) => ( {threeDaysDates.map((date, dayIndex) => (
<View key={dayIndex} style={styles.dayColumn}> <View key={dayIndex} style={styles.dayColumn}>
{hours.map((hour) => ( {hours.map(hour => (
<View key={hour} style={styles.gridCell} /> <View key={hour} style={styles.gridCell} />
))} ))}
{getEventsForDate(date).map((event) => { {getEventsForDate(date).map(event => {
const { topPosition, height } = calculateEventPosition(event.time, event.endTime); const {topPosition, height} = calculateEventPosition(
event.time,
event.endTime,
);
return ( return (
<TouchableOpacity <TouchableOpacity
key={event.id} key={event.id}
...@@ -137,10 +142,12 @@ const Filter3DayView = (props) => { ...@@ -137,10 +142,12 @@ const Filter3DayView = (props) => {
right: 4, right: 4,
zIndex: 10, zIndex: 10,
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
} },
]} ]}
activeOpacity={0.7}> activeOpacity={0.7}>
<Text style={styles.eventTitle} numberOfLines={height > 80 ? 3 : 2}> <Text
style={styles.eventTitle}
numberOfLines={height > 80 ? 3 : 2}>
{event.title} {event.title}
</Text> </Text>
{height > 50 && ( {height > 50 && (
...@@ -149,7 +156,9 @@ const Filter3DayView = (props) => { ...@@ -149,7 +156,9 @@ const Filter3DayView = (props) => {
</Text> </Text>
)} )}
<Text style={styles.eventTime}> <Text style={styles.eventTime}>
Thời gian học: {event.time} - {event.endTime}, {getDayName(date)} {date.getDate()}/{date.getMonth() + 1}/{date.getFullYear()} Thời gian học: {event.time} - {event.endTime},{' '}
{getDayName(date)} {date.getDate()}/
{date.getMonth() + 1}/{date.getFullYear()}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
...@@ -172,5 +181,4 @@ const Filter3DayView = (props) => { ...@@ -172,5 +181,4 @@ const Filter3DayView = (props) => {
); );
}; };
export default Filter3DayView;
export default Filter3DayView
src/screens/class_schedule/filterWeek/index.js
import React, {useState, useRef, useEffect} from 'react'; import React, {useState, useRef, useEffect} from 'react';
import { import {Dimensions, DeviceEventEmitter, PanResponder} from 'react-native';
Dimensions,
DeviceEventEmitter,
PanResponder,
} from 'react-native';
import FilterWeekView from './view'; import FilterWeekView from './view';
// ==================== HẰNG SỐ ==================== // ==================== HẰNG SỐ ====================
...@@ -16,10 +12,10 @@ const FilterWeek = ({navigation}) => { ...@@ -16,10 +12,10 @@ const FilterWeek = ({navigation}) => {
// B1: State ngày tháng và lịch // B1: State ngày tháng và lịch
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date()); const [selectedDate, setSelectedDate] = useState(new Date());
// B2: State month picker // B2: State month picker
const [showMonthPicker, setShowMonthPicker] = useState(false); const [showMonthPicker, setShowMonthPicker] = useState(false);
// B3: Tham chiếu scroll // B3: Tham chiếu scroll
const scrollViewRef = useRef(null); const scrollViewRef = useRef(null);
...@@ -30,7 +26,7 @@ const FilterWeek = ({navigation}) => { ...@@ -30,7 +26,7 @@ const FilterWeek = ({navigation}) => {
// ==================== HÀM TIỆN ÍCH ==================== // ==================== HÀM TIỆN ÍCH ====================
// T1: Định dạng ngày thành chuỗi // T1: Định dạng ngày thành chuỗi
const formatDateToString = (date) => { const formatDateToString = date => {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
...@@ -38,7 +34,7 @@ const FilterWeek = ({navigation}) => { ...@@ -38,7 +34,7 @@ const FilterWeek = ({navigation}) => {
}; };
// T2: Kiểm tra ngày hôm nay // T2: Kiểm tra ngày hôm nay
const isToday = (someDate) => { const isToday = someDate => {
const today = new Date(); const today = new Date();
return ( return (
someDate.getDate() === today.getDate() && someDate.getDate() === today.getDate() &&
...@@ -48,22 +44,32 @@ const FilterWeek = ({navigation}) => { ...@@ -48,22 +44,32 @@ const FilterWeek = ({navigation}) => {
}; };
// T3: Lấy tên ngày trong tuần // T3: Lấy tên ngày trong tuần
const getDayName = (date) => { const getDayName = date => {
const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']; const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
return days[date.getDay()]; return days[date.getDay()];
}; };
// T4: Lấy tên tháng // T4: Lấy tên tháng
const getMonthName = (monthIndex) => { const getMonthName = monthIndex => {
const months = [ const months = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 1',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12', 'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]; ];
return months[monthIndex]; return months[monthIndex];
}; };
// T5: Lấy các ngày trong tuần // T5: Lấy các ngày trong tuần
const getWeekDates = (date) => { const getWeekDates = date => {
const startOfWeek = new Date(date); const startOfWeek = new Date(date);
startOfWeek.setDate(date.getDate() - date.getDay()); startOfWeek.setDate(date.getDate() - date.getDay());
...@@ -156,7 +162,7 @@ const FilterWeek = ({navigation}) => { ...@@ -156,7 +162,7 @@ const FilterWeek = ({navigation}) => {
const mockEvents = createMockEvents(); const mockEvents = createMockEvents();
// D3: Hàm truy vấn sự kiện // D3: Hàm truy vấn sự kiện
const getEventsForDate = (date) => { const getEventsForDate = date => {
const dateStr = formatDateToString(date); const dateStr = formatDateToString(date);
return mockEvents.filter(event => event.date === dateStr); return mockEvents.filter(event => event.date === dateStr);
}; };
...@@ -179,7 +185,7 @@ const FilterWeek = ({navigation}) => { ...@@ -179,7 +185,7 @@ const FilterWeek = ({navigation}) => {
// ==================== XỬ LÝ SỰ KIỆN ==================== // ==================== XỬ LÝ SỰ KIỆN ====================
// X1: Xử lý chọn tháng // X1: Xử lý chọn tháng
const handleMonthSelect = (monthIndex) => { const handleMonthSelect = monthIndex => {
const newDate = new Date(currentDate); const newDate = new Date(currentDate);
newDate.setMonth(monthIndex); newDate.setMonth(monthIndex);
setCurrentDate(newDate); setCurrentDate(newDate);
......
src/screens/class_schedule/filterWeek/style.js
...@@ -57,14 +57,14 @@ const styles = StyleSheet.create({ ...@@ -57,14 +57,14 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
fontWeight: '600', fontWeight: '600',
}, },
dayHeaderNumberContainerToday: { dayHeaderNumberContainerToday: {
borderRadius: 15, borderRadius: 15,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
dayHeaderNumberToday: { dayHeaderNumberToday: {
color: R.colors.white, color: R.colors.white,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontWeight: '600', fontWeight: '600',
...@@ -154,4 +154,4 @@ const styles = StyleSheet.create({ ...@@ -154,4 +154,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default styles; export default styles;
\ No newline at end of file
src/screens/class_schedule/filterWeek/view.js
import React from 'react'; import React from 'react';
import { import {View, Text, TouchableOpacity, ScrollView, FlatList} from 'react-native';
View,
Text,
TouchableOpacity,
ScrollView,
FlatList,
} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
import styles from './style'; import styles from './style';
...@@ -22,7 +16,6 @@ const FilterWeekView = ({ ...@@ -22,7 +16,6 @@ const FilterWeekView = ({
calculateEventPosition, calculateEventPosition,
handleMonthSelect, handleMonthSelect,
}) => { }) => {
const renderMonthPicker = () => { const renderMonthPicker = () => {
if (!showMonthPicker) return null; if (!showMonthPicker) return null;
...@@ -32,7 +25,7 @@ const FilterWeekView = ({ ...@@ -32,7 +25,7 @@ const FilterWeekView = ({
horizontal horizontal
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.monthPickerContent}> contentContainerStyle={styles.monthPickerContent}>
{Array.from({ length: 12 }, (_, index) => ( {Array.from({length: 12}, (_, index) => (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
style={[ style={[
...@@ -43,7 +36,8 @@ const FilterWeekView = ({ ...@@ -43,7 +36,8 @@ const FilterWeekView = ({
<Text <Text
style={[ style={[
styles.monthItemText, styles.monthItemText,
currentDate.getMonth() === index && styles.monthItemTextSelected, currentDate.getMonth() === index &&
styles.monthItemTextSelected,
]}> ]}>
{getMonthName(index)} {getMonthName(index)}
</Text> </Text>
...@@ -65,18 +59,23 @@ const FilterWeekView = ({ ...@@ -65,18 +59,23 @@ const FilterWeekView = ({
return ( return (
<View key={index} style={styles.dayHeaderCell}> <View key={index} style={styles.dayHeaderCell}>
<Text style={[ <Text
styles.dayHeaderText, style={[
isCurrentDay && styles.dayHeaderTextToday styles.dayHeaderText,
]}> isCurrentDay && styles.dayHeaderTextToday,
]}>
{getDayName(date)} {getDayName(date)}
</Text> </Text>
<View style={isCurrentDay ? styles.dayHeaderNumberContainerToday : {}}> <View
<Text style={[ style={
styles.dayHeaderNumber, isCurrentDay ? styles.dayHeaderNumberContainerToday : {}
isCurrentDay && styles.dayHeaderNumberToday }>
]}> <Text
style={[
styles.dayHeaderNumber,
isCurrentDay && styles.dayHeaderNumberToday,
]}>
{date.getDate()} {date.getDate()}
</Text> </Text>
</View> </View>
...@@ -88,7 +87,7 @@ const FilterWeekView = ({ ...@@ -88,7 +87,7 @@ const FilterWeekView = ({
}; };
const renderTimeSlots = () => { const renderTimeSlots = () => {
const hours = Array.from({ length: 24 }, (_, i) => i); const hours = Array.from({length: 24}, (_, i) => i);
const weekDates = getWeekDates(currentDate); const weekDates = getWeekDates(currentDate);
return ( return (
...@@ -97,10 +96,9 @@ const FilterWeekView = ({ ...@@ -97,10 +96,9 @@ const FilterWeekView = ({
ref={scrollViewRef} ref={scrollViewRef}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}> contentContainerStyle={styles.scrollContent}>
<View style={styles.timelineContainer}> <View style={styles.timelineContainer}>
<View style={styles.timeLabelsColumn}> <View style={styles.timeLabelsColumn}>
{hours.map((hour) => { {hours.map(hour => {
const timeStr = hour.toString().padStart(2, '0') + ':00'; const timeStr = hour.toString().padStart(2, '0') + ':00';
return ( return (
<View key={hour} style={styles.timeSlot}> <View key={hour} style={styles.timeSlot}>
...@@ -113,12 +111,15 @@ const FilterWeekView = ({ ...@@ -113,12 +111,15 @@ const FilterWeekView = ({
<View style={styles.weekGridContainer}> <View style={styles.weekGridContainer}>
{weekDates.map((date, dayIndex) => ( {weekDates.map((date, dayIndex) => (
<View key={dayIndex} style={styles.dayColumn}> <View key={dayIndex} style={styles.dayColumn}>
{hours.map((hour) => ( {hours.map(hour => (
<View key={hour} style={styles.gridCell} /> <View key={hour} style={styles.gridCell} />
))} ))}
{getEventsForDate(date).map((event) => { {getEventsForDate(date).map(event => {
const { topPosition, height } = calculateEventPosition(event.time, event.endTime); const {topPosition, height} = calculateEventPosition(
event.time,
event.endTime,
);
return ( return (
<TouchableOpacity <TouchableOpacity
...@@ -133,10 +134,12 @@ const FilterWeekView = ({ ...@@ -133,10 +134,12 @@ const FilterWeekView = ({
right: 2, right: 2,
zIndex: 10, zIndex: 10,
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
} },
]} ]}
activeOpacity={0.7}> activeOpacity={0.7}>
<Text style={styles.eventTitle} numberOfLines={height > 60 ? 2 : 1}> <Text
style={styles.eventTitle}
numberOfLines={height > 60 ? 2 : 1}>
{event.title} {event.title}
</Text> </Text>
{height > 40 && ( {height > 40 && (
...@@ -168,5 +171,4 @@ const FilterWeekView = ({ ...@@ -168,5 +171,4 @@ const FilterWeekView = ({
); );
}; };
export default FilterWeekView;
export default FilterWeekView;
\ No newline at end of file
src/screens/class_schedule/filterday/index.js
...@@ -12,7 +12,7 @@ const FilterDay = ({navigation}) => { ...@@ -12,7 +12,7 @@ const FilterDay = ({navigation}) => {
DeviceEventEmitter.emit('onDateChange', selectedDate); DeviceEventEmitter.emit('onDateChange', selectedDate);
}, [selectedDate]); }, [selectedDate]);
const createMockEvents = () => { const createMockEvents = () => {
return [ return [
{ {
id: '1', id: '1',
...@@ -46,32 +46,42 @@ const FilterDay = ({navigation}) => { ...@@ -46,32 +46,42 @@ const FilterDay = ({navigation}) => {
const mockEvents = createMockEvents(); const mockEvents = createMockEvents();
const formatDateToString = (date) => { const formatDateToString = date => {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}; };
const getEventsForDate = (date) => { const getEventsForDate = date => {
const dateStr = formatDateToString(date); const dateStr = formatDateToString(date);
return mockEvents.filter(event => event.date === dateStr); return mockEvents.filter(event => event.date === dateStr);
}; };
const getDayName = (date) => { const getDayName = date => {
const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']; const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
return days[date.getDay()]; return days[date.getDay()];
}; };
const getMonthName = (monthIndex) => { const getMonthName = monthIndex => {
const months = [ const months = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 1',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12', 'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]; ];
return months[monthIndex]; return months[monthIndex];
}; };
const handleMonthSelect = (monthIndex) => { const handleMonthSelect = monthIndex => {
const newDate = new Date(currentDate); const newDate = new Date(currentDate);
newDate.setMonth(monthIndex); newDate.setMonth(monthIndex);
setCurrentDate(newDate); setCurrentDate(newDate);
...@@ -117,33 +127,32 @@ const FilterDay = ({navigation}) => { ...@@ -117,33 +127,32 @@ const FilterDay = ({navigation}) => {
const calculateEventPosition = (startTime, endTime) => { const calculateEventPosition = (startTime, endTime) => {
const [startHour, startMinute] = startTime.split(':').map(Number); const [startHour, startMinute] = startTime.split(':').map(Number);
const [endHour, endMinute] = endTime.split(':').map(Number); const [endHour, endMinute] = endTime.split(':').map(Number);
const startTotalMinutes = startHour * 60 + startMinute; const startTotalMinutes = startHour * 60 + startMinute;
const endTotalMinutes = endHour * 60 + endMinute; const endTotalMinutes = endHour * 60 + endMinute;
const durationMinutes = endTotalMinutes - startTotalMinutes; const durationMinutes = endTotalMinutes - startTotalMinutes;
const HOUR_HEIGHT = 80; const HOUR_HEIGHT = 80;
const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT; const topPosition = (startTotalMinutes / 60) * HOUR_HEIGHT;
const height = (durationMinutes / 60) * HOUR_HEIGHT; const height = (durationMinutes / 60) * HOUR_HEIGHT;
return { topPosition, height }; return {topPosition, height};
}; };
return ( return (
<FilterDayView <FilterDayView
navigation={navigation} navigation={navigation}
currentDate={currentDate} currentDate={currentDate}
selectedDate={selectedDate} selectedDate={selectedDate}
showMonthPicker={showMonthPicker} showMonthPicker={showMonthPicker}
scrollViewRef={scrollViewRef} scrollViewRef={scrollViewRef}
panResponder={panResponder} panResponder={panResponder}
getEventsForDate={getEventsForDate} getEventsForDate={getEventsForDate}
getDayName={getDayName} getDayName={getDayName}
getMonthName={getMonthName} getMonthName={getMonthName}
handleMonthSelect={handleMonthSelect} handleMonthSelect={handleMonthSelect}
toggleMonthPicker={toggleMonthPicker} toggleMonthPicker={toggleMonthPicker}
calculateEventPosition={calculateEventPosition} calculateEventPosition={calculateEventPosition}
/> />
); );
}; };
......
src/screens/class_schedule/filterday/style.js
...@@ -29,10 +29,10 @@ const styles = StyleSheet.create({ ...@@ -29,10 +29,10 @@ const styles = StyleSheet.create({
paddingHorizontal: 15, paddingHorizontal: 15,
paddingVertical: 12, paddingVertical: 12,
alignItems: 'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
maxWidth:70, maxWidth: 70,
borderRightWidth:1, borderRightWidth: 1,
borderRightColor:R.colors.gray, borderRightColor: R.colors.gray,
}, },
dayName: { dayName: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
...@@ -124,4 +124,4 @@ const styles = StyleSheet.create({ ...@@ -124,4 +124,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default styles; export default styles;
\ No newline at end of file
src/screens/class_schedule/filterday/view.js
import React from 'react'; import React from 'react';
import { import {View, Text, TouchableOpacity, ScrollView} from 'react-native';
View,
Text,
TouchableOpacity,
ScrollView,
} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
import styles from './style'; import styles from './style';
const FilterDayView = (props) => { const FilterDayView = props => {
const { const {
selectedDate, selectedDate,
showMonthPicker, showMonthPicker,
scrollViewRef, scrollViewRef,
panResponder, panResponder,
getEventsForDate, getEventsForDate,
getDayName, getDayName,
calculateEventPosition, } = props; calculateEventPosition,
} = props;
const isToday = (date) => { const isToday = date => {
const today = new Date(); const today = new Date();
return ( return (
date.getDate() === today.getDate() && date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() && date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear() date.getFullYear() === today.getFullYear()
); );
}; };
const renderMonthPicker = () => { const renderMonthPicker = () => {
if (!showMonthPicker) return null; if (!showMonthPicker) return null;
} };
const renderDateInfo = () => { const renderDateInfo = () => {
return ( return (
<View style={{backgroundColor: R.colors.grayBorderInputTextHeader}}> <View style={{backgroundColor: R.colors.grayBorderInputTextHeader}}>
<View style={styles.dateInfoContainer}> <View style={styles.dateInfoContainer}>
<Text style={styles.dayName}>{getDayName(selectedDate)}</Text> <Text style={styles.dayName}>{getDayName(selectedDate)}</Text>
<Text style={ <Text
isToday(selectedDate) style={
? styles.dayNumberToday isToday(selectedDate) ? styles.dayNumberToday : styles.dayNumber
: styles.dayNumber }>
{selectedDate.getDate()}
}>{selectedDate.getDate()}</Text> </Text>
</View>
</View> </View>
</View>
); );
}; };
const renderTimeSlots = () => { const renderTimeSlots = () => {
const hours = Array.from({length: 24}, (_, i) => i); const hours = Array.from({length: 24}, (_, i) => i);
const selectedEvents = getEventsForDate(selectedDate); const selectedEvents = getEventsForDate(selectedDate);
return ( return (
<View style={styles.timeSlotsContainer} {...panResponder.panHandlers}> <View style={styles.timeSlotsContainer} {...panResponder.panHandlers}>
<ScrollView <ScrollView
ref={scrollViewRef} ref={scrollViewRef}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}> contentContainerStyle={styles.scrollContent}>
<View style={styles.timelineContainer}>
<View style={styles.timelineContainer}> <View style={styles.timeLabelsColumn}>
<View style={styles.timeLabelsColumn}> {hours.map(hour => {
{hours.map((hour) => { const timeStr = hour.toString().padStart(2, '0') + ':00';
const timeStr = hour.toString().padStart(2, '0') + ':00'; return (
return ( <View key={hour} style={styles.timeSlot}>
<View key={hour} style={styles.timeSlot}> <Text style={styles.timeText}>{timeStr}</Text>
<Text style={styles.timeText}>{timeStr}</Text> </View>
</View> );
); })}
})} </View>
</View>
<View style={styles.eventsColumn}>
<View style={styles.eventsColumn}> {hours.map(hour => (
{hours.map((hour) => ( <View key={hour} style={styles.gridLine} />
<View key={hour} style={styles.gridLine} /> ))}
))}
{selectedEvents.map(event => {
{selectedEvents.map((event) => { const {topPosition, height} = calculateEventPosition(
const { topPosition, height } = calculateEventPosition(event.time, event.endTime); event.time,
event.endTime,
return ( );
<TouchableOpacity
key={event.id} return (
style={[ <TouchableOpacity
styles.eventCard, key={event.id}
{ style={[
position: 'absolute', styles.eventCard,
top: topPosition, {
height: Math.max(height, 40), position: 'absolute',
left: 5, top: topPosition,
right: 15, height: Math.max(height, 40),
zIndex: 10, left: 5,
backgroundColor: R.colors.blue, right: 15,
} zIndex: 10,
]} backgroundColor: R.colors.blue,
activeOpacity={0.7}> },
<Text style={styles.eventTitle} numberOfLines={height > 60 ? 2 : 1}> ]}
{event.title} activeOpacity={0.7}>
</Text> <Text
{height > 40 && ( style={styles.eventTitle}
<Text style={styles.eventSubtitle} numberOfLines={1}> numberOfLines={height > 60 ? 2 : 1}>
{event.subtitle} {event.title}
</Text> </Text>
)} {height > 40 && (
<Text style={styles.eventTime}> <Text style={styles.eventSubtitle} numberOfLines={1}>
{event.time} - {event.endTime} {event.subtitle}
</Text> </Text>
</TouchableOpacity> )}
); <Text style={styles.eventTime}>
})} {event.time} - {event.endTime}
</View> </Text>
</TouchableOpacity>
);
})}
</View> </View>
</ScrollView> </View>
</View> </ScrollView>
); </View>
}; );
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
{renderMonthPicker()} {renderMonthPicker()}
{renderDateInfo()} {renderDateInfo()}
{renderTimeSlots()} {renderTimeSlots()}
</View> </View>
); );
}; };
......
src/screens/class_schedule/index.js
...@@ -11,16 +11,18 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -11,16 +11,18 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
// B1: State ngày tháng và lịch // B1: State ngày tháng và lịch
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(null); const [selectedDate, setSelectedDate] = useState(null);
// B2: State bottom sheet // B2: State bottom sheet
const [showBottomSheet, setShowBottomSheet] = useState(false); const [showBottomSheet, setShowBottomSheet] = useState(false);
// B3: Tham chiếu animation // B3: Tham chiếu animation
const bottomSheetTranslateY = useRef(new Animated.Value(BOTTOM_SHEET_HEIGHT)).current; const bottomSheetTranslateY = useRef(
new Animated.Value(BOTTOM_SHEET_HEIGHT),
).current;
// ==================== HÀM TIỆN ÍCH ==================== // ==================== HÀM TIỆN ÍCH ====================
// T1: Định dạng ngày thành chuỗi // T1: Định dạng ngày thành chuỗi
const formatDateToString = (date) => { const formatDateToString = date => {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
...@@ -28,7 +30,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -28,7 +30,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}; };
// T2: Định dạng ngày để hiển thị // T2: Định dạng ngày để hiển thị
const formatDateToDisplay = (date) => { const formatDateToDisplay = date => {
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0'); const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
...@@ -36,7 +38,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -36,7 +38,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}; };
// T3: Chuyển đổi chuỗi thành ngày // T3: Chuyển đổi chuỗi thành ngày
const parseLocalDate = (dateString) => { const parseLocalDate = dateString => {
const [year, month, day] = dateString.split('-').map(Number); const [year, month, day] = dateString.split('-').map(Number);
return new Date(year, month - 1, day); return new Date(year, month - 1, day);
}; };
...@@ -176,7 +178,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -176,7 +178,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
const allEvents = [...events, ...mockEvents]; const allEvents = [...events, ...mockEvents];
// D3: Hàm truy vấn sự kiện // D3: Hàm truy vấn sự kiện
const getEventsForDate = (date) => { const getEventsForDate = date => {
const dateStr = formatDateToString(date); const dateStr = formatDateToString(date);
return allEvents.filter(event => event.date === dateStr); return allEvents.filter(event => event.date === dateStr);
}; };
...@@ -216,11 +218,11 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -216,11 +218,11 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}, [currentDate]); }, [currentDate]);
// L2: Hàm kiểm tra ngày tháng // L2: Hàm kiểm tra ngày tháng
const isCurrentMonth = (date) => { const isCurrentMonth = date => {
return date.getMonth() === currentDate.getMonth(); return date.getMonth() === currentDate.getMonth();
}; };
const isToday = (date) => { const isToday = date => {
const today = new Date(); const today = new Date();
return ( return (
date.getDate() === today.getDate() && date.getDate() === today.getDate() &&
...@@ -251,7 +253,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -251,7 +253,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}).start(); }).start();
} }
}, },
}) }),
).current; ).current;
// A2: Hàm animation Bottom Sheet // A2: Hàm animation Bottom Sheet
...@@ -277,7 +279,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -277,7 +279,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
// ==================== XỬ LÝ SỰ KIỆN ==================== // ==================== XỬ LÝ SỰ KIỆN ====================
// X1: Xử lý điều hướng // X1: Xử lý điều hướng
const navigateMonth = (direction) => { const navigateMonth = direction => {
const newDate = new Date(currentDate); const newDate = new Date(currentDate);
if (direction === 'prev') { if (direction === 'prev') {
newDate.setMonth(newDate.getMonth() - 1); newDate.setMonth(newDate.getMonth() - 1);
...@@ -292,10 +294,10 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -292,10 +294,10 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}; };
// X2: Xử lý chọn ngày // X2: Xử lý chọn ngày
const handleDatePress = (date) => { const handleDatePress = date => {
const dateStr = formatDateToString(date); const dateStr = formatDateToString(date);
const dayEvents = getEventsForDate(date); const dayEvents = getEventsForDate(date);
setSelectedDate(dateStr); setSelectedDate(dateStr);
onDateSelect?.(dateStr); onDateSelect?.(dateStr);
...@@ -305,7 +307,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -305,7 +307,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}; };
// X3: Xử lý tương tác sự kiện // X3: Xử lý tương tác sự kiện
const handleEventPress = (event) => { const handleEventPress = event => {
onEventPress?.(event); onEventPress?.(event);
}; };
...@@ -336,4 +338,4 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -336,4 +338,4 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
); );
}; };
export default ClassSchedule; export default ClassSchedule;
\ No newline at end of file
src/screens/class_schedule/style.js
...@@ -119,9 +119,9 @@ const styles = StyleSheet.create({ ...@@ -119,9 +119,9 @@ const styles = StyleSheet.create({
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
textAlign: 'center', textAlign: 'center',
}, },
containerBottomSheet:{ containerBottomSheet: {
flex:1, flex: 1,
marginBottom:10, marginBottom: 10,
}, },
modalBackdrop: { modalBackdrop: {
...@@ -137,7 +137,6 @@ const styles = StyleSheet.create({ ...@@ -137,7 +137,6 @@ const styles = StyleSheet.create({
}, },
bottomSheetContent: { bottomSheetContent: {
height: BOTTOM_SHEET_HEIGHT, height: BOTTOM_SHEET_HEIGHT,
}, },
dragHandle: { dragHandle: {
width: 40, width: 40,
...@@ -176,7 +175,7 @@ const styles = StyleSheet.create({ ...@@ -176,7 +175,7 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
}, },
eventsScrollView: { eventsScrollView: {
paddingTop:10, paddingTop: 10,
}, },
noEventsContainer: { noEventsContainer: {
flex: 1, flex: 1,
...@@ -196,7 +195,7 @@ const styles = StyleSheet.create({ ...@@ -196,7 +195,7 @@ const styles = StyleSheet.create({
borderRadius: 12, borderRadius: 12,
padding: 15, padding: 15,
marginBottom: 10, marginBottom: 10,
marginHorizontal:15, marginHorizontal: 15,
borderLeftWidth: 4, borderLeftWidth: 4,
borderLeftColor: R.colors.blue500, borderLeftColor: R.colors.blue500,
shadowColor: R.colors.black, shadowColor: R.colors.black,
......
src/screens/class_schedule/view.js
...@@ -11,8 +11,8 @@ import { ...@@ -11,8 +11,8 @@ import {
SafeAreaView, SafeAreaView,
} from 'react-native'; } from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import { styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT } from './style'; import {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT} from './style';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
const ClassScheduleView = ({ const ClassScheduleView = ({
...@@ -37,8 +37,18 @@ const ClassScheduleView = ({ ...@@ -37,8 +37,18 @@ const ClassScheduleView = ({
const navigation = useNavigation(); const navigation = useNavigation();
const renderHeader = () => { const renderHeader = () => {
const monthNames = [ const monthNames = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 1',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12', 'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]; ];
return ( return (
...@@ -70,7 +80,7 @@ const ClassScheduleView = ({ ...@@ -70,7 +80,7 @@ const ClassScheduleView = ({
{weekDays.map((day, index) => ( {weekDays.map((day, index) => (
<View key={index} style={styles.weekDayCell}> <View key={index} style={styles.weekDayCell}>
<Text style={styles.weekDayText}>{day}</Text> <Text style={styles.weekDayText}>{day}</Text>
</View> </View>
))} ))}
</View> </View>
); );
...@@ -93,7 +103,6 @@ const ClassScheduleView = ({ ...@@ -93,7 +103,6 @@ const ClassScheduleView = ({
]} ]}
onPress={() => handleDatePress(date)} onPress={() => handleDatePress(date)}
activeOpacity={0.7}> activeOpacity={0.7}>
<Text <Text
style={[ style={[
styles.dayText, styles.dayText,
...@@ -109,9 +118,7 @@ const ClassScheduleView = ({ ...@@ -109,9 +118,7 @@ const ClassScheduleView = ({
{dayEvents.slice(0, 2).map((event, eventIndex) => ( {dayEvents.slice(0, 2).map((event, eventIndex) => (
<TouchableOpacity <TouchableOpacity
key={event.id} key={event.id}
style={[ style={[styles.eventBar]}
styles.eventBar,
]}
onPress={() => handleEventPress(event)}> onPress={() => handleEventPress(event)}>
<Text style={styles.eventBarText} numberOfLines={1}> <Text style={styles.eventBarText} numberOfLines={1}>
{event.title} {event.title}
...@@ -150,9 +157,7 @@ const ClassScheduleView = ({ ...@@ -150,9 +157,7 @@ const ClassScheduleView = ({
return ( return (
<View style={styles.bottomSheetContent}> <View style={styles.bottomSheetContent}>
<View style={styles.dragHandle} > <View style={styles.dragHandle}></View>
</View>
<View style={styles.bottomSheetHeader}> <View style={styles.bottomSheetHeader}>
<Text style={styles.bottomSheetTitle}> <Text style={styles.bottomSheetTitle}>
...@@ -171,34 +176,35 @@ const ClassScheduleView = ({ ...@@ -171,34 +176,35 @@ const ClassScheduleView = ({
<View style={styles.noEventsContainer}> <View style={styles.noEventsContainer}>
<Text style={styles.noEventsText}>Không có sự kiện nào</Text> <Text style={styles.noEventsText}>Không có sự kiện nào</Text>
</View> </View>
) : ) : (
(selectedEvents.map((event, index) => ( selectedEvents.map((event, index) => (
<View style={styles.containerBottomSheet}> <View style={styles.containerBottomSheet}>
<TouchableOpacity <TouchableOpacity
key={event.id} key={event.id}
style={styles.eventCard} style={styles.eventCard}
onPress={() => navigation.navigate(SCREENNAME.DETAILSCHEDULE, { event })} onPress={() =>
activeOpacity={0.7}> navigation.navigate(SCREENNAME.DETAILSCHEDULE, {event})
}
<View style={styles.eventTimeContainer}> activeOpacity={0.7}>
<Text style={styles.eventTime}> <View style={styles.eventTimeContainer}>
{event.time} <Text style={styles.eventTime}>
{event.endTime && ` - ${event.endTime}`} {event.time}
</Text> {event.endTime && ` - ${event.endTime}`}
</View> </Text>
</View>
<View style={styles.eventContent}> <View style={styles.eventContent}>
<Text style={styles.eventTitle} numberOfLines={2}> <Text style={styles.eventTitle} numberOfLines={2}>
{event.title} {event.title}
</Text>
{event.description && (
<Text style={styles.eventDescription} numberOfLines={3}>
{event.description}
</Text> </Text>
)} {event.description && (
</View> <Text style={styles.eventDescription} numberOfLines={3}>
</TouchableOpacity> {event.description}
</View> </Text>
)}
</View>
</TouchableOpacity>
</View>
)) ))
)} )}
</ScrollView> </ScrollView>
...@@ -213,21 +219,19 @@ const ClassScheduleView = ({ ...@@ -213,21 +219,19 @@ const ClassScheduleView = ({
transparent={true} transparent={true}
animationType="none" animationType="none"
onRequestClose={handleCloseBottomSheet}> onRequestClose={handleCloseBottomSheet}>
<TouchableOpacity <TouchableOpacity
style={styles.modalBackdrop} style={styles.modalBackdrop}
activeOpacity={1} activeOpacity={1}
onPress={handleCloseBottomSheet}> onPress={handleCloseBottomSheet}>
<Animated.View <Animated.View
style={[ style={[
styles.bottomSheet, styles.bottomSheet,
{ {
transform: [{ translateY: bottomSheetTranslateY }], transform: [{translateY: bottomSheetTranslateY}],
}, },
]} ]}
{...panResponder.panHandlers}> {...panResponder.panHandlers}>
<TouchableOpacity activeOpacity={1} > <TouchableOpacity activeOpacity={1}>
{renderBottomSheetContent()} {renderBottomSheetContent()}
</TouchableOpacity> </TouchableOpacity>
</Animated.View> </Animated.View>
...@@ -237,7 +241,6 @@ const ClassScheduleView = ({ ...@@ -237,7 +241,6 @@ const ClassScheduleView = ({
}; };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body}> <View style={styles.body}>
...@@ -251,6 +254,4 @@ const ClassScheduleView = ({ ...@@ -251,6 +254,4 @@ const ClassScheduleView = ({
); );
}; };
export default ClassScheduleView;
export default ClassScheduleView;
\ No newline at end of file
src/screens/compensate/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import CompensateView from './view'; import CompensateView from './view';
const Compensate = (props) => { const Compensate = props => {
const [dataList, setDataList] = useState([ const [dataList, setDataList] = useState([
{id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, total: 25}, {id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, total: 25},
{id: 2, classCode: 'ATTT2024.2', rest: 4, compensate: 1, total: 25}, {id: 2, classCode: 'ATTT2024.2', rest: 4, compensate: 1, total: 25},
{id: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, total: 25}, {id: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, total: 25},
{id: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25}, {id: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25},
{id: 5, classCode: 'ATTT2024.5', rest: 5, compensate: 0, total: 25}, {id: 5, classCode: 'ATTT2024.5', rest: 5, compensate: 0, total: 25},
{id: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, total: 25}, {id: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, total: 25},
{id: 7, classCode: 'CNTT2024.2', rest: 4, compensate: 0, total: 25}, {id: 7, classCode: 'CNTT2024.2', rest: 4, compensate: 0, total: 25},
{id: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, total: 25}, {id: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, total: 25},
{id: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25}, {id: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25},
{id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, total: 25}, {id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, total: 25},
{id: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, total: 25}, {id: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, total: 25},
{id: 12, classCode: 'KTPM2024.2', rest: 2, compensate: 2, total: 25}, {id: 12, classCode: 'KTPM2024.2', rest: 2, compensate: 2, total: 25},
{id: 13, classCode: 'KTPM2024.3', rest: 5, compensate: 0, total: 25}, {id: 13, classCode: 'KTPM2024.3', rest: 5, compensate: 0, total: 25},
{id: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25}, {id: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25},
{id: 15, classCode: 'KTPM2024.5', rest: 3, compensate: 1, total: 25}, {id: 15, classCode: 'KTPM2024.5', rest: 3, compensate: 1, total: 25},
{id: 16, classCode: 'HTTT2024.1', rest: 5, compensate: 0, total: 25}, {id: 16, classCode: 'HTTT2024.1', rest: 5, compensate: 0, total: 25},
{id: 17, classCode: 'HTTT2024.2', rest: 6, compensate: 0, total: 25}, {id: 17, classCode: 'HTTT2024.2', rest: 6, compensate: 0, total: 25},
{id: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, total: 25}, {id: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, total: 25},
{id: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25}, {id: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25},
{id: 20, classCode: 'HTTT2024.5', rest: 5, compensate: 0, total: 25}, {id: 20, classCode: 'HTTT2024.5', rest: 5, compensate: 0, total: 25},
{id: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, total: 25}, {id: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, total: 25},
{id: 22, classCode: 'KHMT2024.2', rest: 5, compensate: 1, total: 25}, {id: 22, classCode: 'KHMT2024.2', rest: 5, compensate: 1, total: 25},
{id: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, total: 25}, {id: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, total: 25},
{id: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25}, {id: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25},
{id: 25, classCode: 'KHMT2024.5', rest: 5, compensate: 0, total: 25}, {id: 25, classCode: 'KHMT2024.5', rest: 5, compensate: 0, total: 25},
{id: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, total: 25}, {id: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, total: 25},
{id: 27, classCode: 'MMT2024.2', rest: 2, compensate: 0, total: 25}, {id: 27, classCode: 'MMT2024.2', rest: 2, compensate: 0, total: 25},
{id: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25}, {id: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25},
{id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25}, {id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
{id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25}, {id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25},
]); ]);
return ( return <CompensateView dataList={dataList} />;
<CompensateView dataList={dataList} />
);
}; };
export default Compensate; export default Compensate;
src/screens/compensate/list/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailCompensateView from './view'; import DetailCompensateView from './view';
const DetailCompensate = (props) => { const DetailCompensate = props => {
const [item, setItem] = useState({ const [item, setItem] = useState({
rest: 5, rest: 5,
compensate: 0, compensate: 0,
total: 25, total: 25,
}); });
const [itemDetail, setItemDetail] = useState({ const [itemDetail, setItemDetail] = useState({
rest: 5, rest: 5,
compensate: 0, compensate: 0,
total: 25, total: 25,
}); });
const [listData, setDataList] = useState([ const [listData, setDataList] = useState([
{ {
id:1, id: 1,
date:'2024-01-01', date: '2024-01-01',
status:'Đã xác nhận', status: 'Đã xác nhận',
dayOfWeek:'Thứ 2', dayOfWeek: 'Thứ 2',
periods:[ periods: [
{ {
id:1, id: 1,
time:'6', time: '6',
}, },
{ {
id:2, id: 2,
time:'7', time: '7',
}, },
{ {
id:3, id: 3,
time:'8', time: '8',
}, },
{ {
id:4, id: 4,
time:'9', time: '9',
} },
], ],
dateStudy:'30/07/2025', dateStudy: '30/07/2025',
location:'Phòng B2.12', location: 'Phòng B2.12',
teacher:'Nguyễn Minh Đức', teacher: 'Nguyễn Minh Đức',
note:'', note: '',
}, },
{ {
id:2, id: 2,
date:'2024-01-01', date: '2024-01-01',
status:'Chờ phê duyệt', status: 'Chờ phê duyệt',
dayOfWeek:'Thứ 2', dayOfWeek: 'Thứ 2',
periods:[ periods: [
{ {
id:1, id: 1,
time:'6', time: '6',
}, },
{ {
id:2, id: 2,
time:'7', time: '7',
}, },
{ {
id:3, id: 3,
time:'8', time: '8',
}, },
{ {
id:4, id: 4,
time:'9', time: '9',
} },
], ],
dateStudy:'30/07/2025', dateStudy: '30/07/2025',
location:'Phòng B2.12', location: 'Phòng B2.12',
teacher:'', teacher: '',
note:'', note: '',
}, },
{ {
id:3, id: 3,
date:'2024-01-01', date: '2024-01-01',
status:'Từ chối', status: 'Từ chối',
dayOfWeek:'Thứ 2', dayOfWeek: 'Thứ 2',
periods:[ periods: [
{ {
id:1, id: 1,
time:'6', time: '6',
}, },
{ {
id:2, id: 2,
time:'7', time: '7',
}, },
{ {
id:3, id: 3,
time:'8', time: '8',
}, },
{ {
id:4, id: 4,
time:'9', time: '9',
} },
], ],
dateStudy:'30/07/2025', dateStudy: '30/07/2025',
location:'Phòng B2.12', location: 'Phòng B2.12',
teacher:'', teacher: '',
note:'', note: '',
}, },
{ {
id:4, id: 4,
date:'2024-01-01', date: '2024-01-01',
status:'Đã xác nhận', status: 'Đã xác nhận',
dayOfWeek:'Thứ 2', dayOfWeek: 'Thứ 2',
periods:[ periods: [
{ {
id:1, id: 1,
time:'6', time: '6',
}, },
{ {
id:2, id: 2,
time:'7', time: '7',
}, },
{ {
id:3, id: 3,
time:'8', time: '8',
}, },
{ {
id:4, id: 4,
time:'9', time: '9',
} },
], ],
dateStudy:'30/07/2025', dateStudy: '30/07/2025',
location:'Phòng B2.12', location: 'Phòng B2.12',
teacher:'', teacher: '',
note:'', note: '',
}, },
{ {
id:5, id: 5,
date:'2024-01-01', date: '2024-01-01',
status:'Đã xác nhận', status: 'Đã xác nhận',
dayOfWeek:'Thứ 2', dayOfWeek: 'Thứ 2',
periods:[ periods: [
{ {
id:1, id: 1,
time:'6', time: '6',
}, },
{ {
id:2, id: 2,
time:'7', time: '7',
}, },
{ {
id:3, id: 3,
time:'8', time: '8',
}, },
{ {
id:4, id: 4,
time:'9', time: '9',
} },
], ],
dateStudy:'30/07/2025', dateStudy: '30/07/2025',
location:'Phòng B2.12', location: 'Phòng B2.12',
teacher:'', teacher: '',
note:'', note: '',
}, },
]) ]);
return ( return (
<DetailCompensateView item={item} listData={listData} itemDetail={itemDetail}/> <DetailCompensateView
item={item}
listData={listData}
itemDetail={itemDetail}
/>
); );
}; };
......
src/screens/compensate/list/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
flex:1, flex: 1,
backgroundColor:R.colors.white backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
backgroundColor:R.colors.white backgroundColor: R.colors.white,
}, },
text:{ text: {
fontSize:R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
fontWeight:'400', fontWeight: '400',
color:R.colors.black, color: R.colors.black,
}, },
card:{ card: {
borderRadius:10, borderRadius: 10,
marginVertical:10,
backgroundColor:R.colors.white,
shadowColor:R.colors.black,
shadowOffset:{width:0,height:2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:5,
elevation:Platform.OS === 'ios' ? 1 : 2,
marginHorizontal:15,
}
})
export default styles; marginVertical: 10,
\ No newline at end of file backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
elevation: Platform.OS === 'ios' ? 1 : 2,
marginHorizontal: 15,
},
});
export default styles;
src/screens/compensate/list/view.js
...@@ -4,7 +4,7 @@ import styles from './style'; ...@@ -4,7 +4,7 @@ import styles from './style';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
const DetailCompensateView = (props) => { const DetailCompensateView = props => {
const {item, listData, itemDetail} = props; const {item, listData, itemDetail} = props;
const getColor = status => { const getColor = status => {
...@@ -26,23 +26,54 @@ const DetailCompensateView = (props) => { ...@@ -26,23 +26,54 @@ const DetailCompensateView = (props) => {
borderTopRightRadius: 10, borderTopRightRadius: 10,
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
}}> }}>
<View style={{borderTopRightRadius:10, borderTopLeftRadius:10, backgroundColor:getColor(item.status)}}> <View
<Text style={[styles.text, {fontSize: R.sizes.sm, paddingHorizontal:10, paddingVertical:2, color:R.colors.white , fontWeight:'bold', fontFamily:R.fonts.fontMedium,}]}> style={{
<Text style={{fontSize: R.sizes.sm ,color:R.colors.white}}>{item.status}</Text> borderTopRightRadius: 10,
borderTopLeftRadius: 10,
backgroundColor: getColor(item.status),
}}>
<Text
style={[
styles.text,
{
fontSize: R.sizes.sm,
paddingHorizontal: 10,
paddingVertical: 2,
color: R.colors.white,
fontWeight: 'bold',
fontFamily: R.fonts.fontMedium,
},
]}>
<Text style={{fontSize: R.sizes.sm, color: R.colors.white}}>
{item.status}
</Text>
</Text> </Text>
</View> </View>
</View> </View>
<View style={{paddingHorizontal:10, paddingTop:3, paddingBottom:10}}> <View style={{paddingHorizontal: 10, paddingTop: 3, paddingBottom: 10}}>
{/* Row 1 */} {/* Row 1 */}
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
}}> }}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={[styles.text, {fontSize: R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}> <Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Ngày báo nghỉ:{' '} Ngày báo nghỉ:{' '}
<Text style={{fontSize: R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}}> <Text
style={{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
}}>
{item.date} {item.date}
</Text> </Text>
</Text> </Text>
...@@ -55,54 +86,115 @@ const DetailCompensateView = (props) => { ...@@ -55,54 +86,115 @@ const DetailCompensateView = (props) => {
</View> </View>
{/* Row 2 */} {/* Row 2 */}
<View> <View>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Thời gian nghỉ:{' '} <Text
<Text style={{fontSize: R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}}>{item.dayOfWeek} - Tiết:{' '} style={[
{item.periods.map((item, index) => { styles.text,
return <Text key={index}>{item.time},</Text>; {
})} fontSize: R.fontsize.fontSizeContent,
- Ngày: {''}{item.dateStudy} fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Thời gian nghỉ:{' '}
<Text
style={{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
}}>
{item.dayOfWeek} - Tiết:{' '}
{item.periods.map((item, index) => {
return <Text key={index}>{item.time},</Text>;
})}
- Ngày: {''}
{item.dateStudy}
</Text> </Text>
</Text> </Text>
</View> </View>
{/* Row 3 */} {/* Row 3 */}
<View style={{}}> <View style={{}}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Địa điểm:{' '} <Text
<Text style={{fontSize: R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}}>{item.location}</Text> style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Địa điểm:{' '}
<Text
style={{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
}}>
{item.location}
</Text>
</Text> </Text>
</View> </View>
{/* Row 4 */} {/* Row 4 */}
<View style={{}}> <View style={{}}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Giảng viên thay thế:{' '} <Text
<Text style={{fontSize: R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}}>{item.teacher}</Text> style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Giảng viên thay thế:{' '}
<Text
style={{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
}}>
{item.teacher}
</Text>
</Text> </Text>
</View> </View>
{/* Row 5 */} {/* Row 5 */}
<View style={{}}> <View style={{}}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Ghi chú:{' '} <Text
<Text style={{fontSize: R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}}>{item.note}</Text> style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Ghi chú:{' '}
<Text
style={{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
}}>
{item.note}
</Text>
</Text> </Text>
</View> </View>
{item.status === 'Chờ phê duyệt' && (
{ <View style={{alignItems: 'flex-end'}}>
item.status === 'Chờ phê duyệt' && (
<View style={{alignItems:'flex-end'}}>
<Button <Button
title='Huỷ' title="Huỷ"
onPress={()=>{}} onPress={() => {}}
backgroundColor={R.colors.orange} backgroundColor={R.colors.orange}
textColor={R.colors.white} textColor={R.colors.white}
height={25} height={25}
width={90} width={90}
borderRadius={15} borderRadius={15}
fontSize={R.fontsize.fontSizeContent} fontSize={R.fontsize.fontSizeContent}
fontWeight={'600'} fontWeight={'600'}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
paddingHorizontal={15} paddingHorizontal={15}
/> />
</View> </View>
) )}
}
</View> </View>
</View> </View>
); );
...@@ -112,9 +204,27 @@ const DetailCompensateView = (props) => { ...@@ -112,9 +204,27 @@ const DetailCompensateView = (props) => {
<View style={styles.container}> <View style={styles.container}>
<Header title={'ATTT2024.1'} isBack /> <Header title={'ATTT2024.1'} isBack />
<View style={styles.body}> <View style={styles.body}>
<View style={{alignItems: 'center', marginTop:10}}> <View style={{alignItems: 'center', marginTop: 10}}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Nghỉ / Bù / Tổng</Text> <Text
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}]}> style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Nghỉ / Bù / Tổng
</Text>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
},
]}>
{itemDetail?.rest} / {itemDetail?.compensate} / {itemDetail?.total} {itemDetail?.rest} / {itemDetail?.compensate} / {itemDetail?.total}
</Text> </Text>
</View> </View>
......
src/screens/compensate/register/style.js
import { StyleSheet, Text, View, Dimensions } from 'react-native' import {StyleSheet, Text, View, Dimensions} from 'react-native';
import R from '../../../assets/R'; import R from '../../../assets/R';
//B1: Xác định chiều rộng cột đầu tiên //B1: Xác định chiều rộng cột đầu tiên
const width_first = 100; const width_first = 100;
//B2: Xác định chiều rộng của 15 cột tiếp theo //B2: Xác định chiều rộng của 15 cột tiếp theo
const width_second = 110; const width_second = 110;
//B3: Xác định số tiết diễn ra trong 1 ngày -> để có kích thước bảng //B3: Xác định số tiết diễn ra trong 1 ngày -> để có kích thước bảng
const period_count = 15; const period_count = 15;
//B4: Xác định chiều rộng của bảng //B4: Xác định chiều rộng của bảng
const total_width_table = width_first + (width_second * period_count); const total_width_table = width_first + width_second * period_count;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
padding:15, padding: 15,
}, },
containerInput:{ containerInput: {
flexDirection:'row', flexDirection: 'row',
justifyContent:'space-between', justifyContent: 'space-between',
marginBottom:15 marginBottom: 15,
}, },
txtSubtitle:{ txtSubtitle: {
fontWeight:'600', fontWeight: '600',
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
color:R.colors.black, color: R.colors.black,
}, },
containerDropDown:{ containerDropDown: {
marginBottom:15 marginBottom: 15,
}, },
btnRegister:{ btnRegister: {
alignItems:'flex-end', alignItems: 'flex-end',
}, },
btnRegister2:{ btnRegister2: {
marginVertical:15 marginVertical: 15,
}, },
//Header bảng lịch //Header bảng lịch
tableContainer:{ tableContainer: {
marginTop:15, marginTop: 15,
borderWidth:1, borderWidth: 1,
borderColor:R.colors.gray, borderColor: R.colors.gray,
width:total_width_table, width: total_width_table,
}, },
headerRow: { headerRow: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: R.colors.gray, borderBottomColor: R.colors.gray,
}, },
headerText: { headerText: {
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontWeight: '500', fontWeight: '500',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
}, },
dateColumn: { dateColumn: {
height: 40, height: 40,
width:width_first, width: width_first,
paddingHorizontal: 10, paddingHorizontal: 10,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: R.colors.blue2, backgroundColor: R.colors.blue2,
borderRightWidth:1, borderRightWidth: 1,
borderRightColor:R.colors.gray, borderRightColor: R.colors.gray,
}, },
periodColumn: { periodColumn: {
height: 40, height: 40,
width:width_second, width: width_second,
paddingHorizontal: 5, paddingHorizontal: 5,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: R.colors.blue2, backgroundColor: R.colors.blue2,
borderRightWidth:1, borderRightWidth: 1,
borderRightColor:R.colors.gray, borderRightColor: R.colors.gray,
}, },
dateBody:{ dateBody: {
width: width_first, width: width_first,
minHeight: 40, minHeight: 40,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderRightWidth:1, borderRightWidth: 1,
borderRightColor:R.colors.gray, borderRightColor: R.colors.gray,
}, },
periodBody:{ periodBody: {
width: width_second, width: width_second,
padding:5, padding: 5,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderRightWidth:1, borderRightWidth: 1,
borderRightColor:R.colors.gray, borderRightColor: R.colors.gray,
}, },
dataRow: { dataRow: {
flexDirection: 'row', flexDirection: 'row',
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: R.colors.gray, borderBottomColor: R.colors.gray,
minHeight: 50, minHeight: 50,
}, },
periodCell: { periodCell: {
padding: 2, padding: 2,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
minHeight: 50, minHeight: 50,
width: '100%', width: '100%',
}, },
dateText:{ dateText: {
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontWeight: '400', fontWeight: '400',
fontFamily: R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
}, },
percentText:{ percentText: {
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontWeight: '500', fontWeight: '500',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
}, },
codeText:{ codeText: {
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontWeight: '500', fontWeight: '500',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
color: R.colors.black, color: R.colors.black,
}, },
});
export default styles;
})
export default styles
\ No newline at end of file
src/screens/compensate/register/view.js
...@@ -17,8 +17,8 @@ import CheckBox from '../../../components/CheckBox'; ...@@ -17,8 +17,8 @@ import CheckBox from '../../../components/CheckBox';
const CompensateRegisterView = props => { const CompensateRegisterView = props => {
const {isShow, setShowSchedule, scheduleData, onCheckboxChange} = props; const {isShow, setShowSchedule, scheduleData, onCheckboxChange} = props;
const getCheckColor = (item) => { const getCheckColor = item => {
if ( item?.breakTime=== item?.totalSession && item?.percent === '100%') { if (item?.breakTime === item?.totalSession && item?.percent === '100%') {
return R.colors.blue; return R.colors.blue;
} }
return R.colors.red; return R.colors.red;
...@@ -36,7 +36,9 @@ const CompensateRegisterView = props => { ...@@ -36,7 +36,9 @@ const CompensateRegisterView = props => {
</View> </View>
{Array.from({length: 15}, (_, i) => ( {Array.from({length: 15}, (_, i) => (
<View key={i} style={[styles.periodColumn, {backgroundColor: R.colors.blue3}]}> <View
key={i}
style={[styles.periodColumn, {backgroundColor: R.colors.blue3}]}>
<Text style={styles.headerText}>Tiết {i + 1} </Text> <Text style={styles.headerText}>Tiết {i + 1} </Text>
</View> </View>
))} ))}
...@@ -65,34 +67,35 @@ const CompensateRegisterView = props => { ...@@ -65,34 +67,35 @@ const CompensateRegisterView = props => {
styles.periodCell, styles.periodCell,
period.available && styles.availableCell, period.available && styles.availableCell,
]}> ]}>
<CheckBox <CheckBox
checked={period.available} checked={period.available}
value={period.available} value={period.available}
onValueChange={value => onCheckboxChange(index, periodIndex, value)} onValueChange={value =>
onCheckboxChange(index, periodIndex, value)
}
size={20} size={20}
labelStyle={styles.label} labelStyle={styles.label}
checkedColor={R.colors.main} checkedColor={R.colors.main}
tickColor={R.colors.white} tickColor={R.colors.white}
/> />
<View style={{flexDirection:'row'}}> <View style={{flexDirection: 'row'}}>
<Text <Text
style={[ style={[
styles.percentText, styles.percentText,
period.available && styles.availableText, period.available && styles.availableText,
{color:getCheckColor(period)} {color: getCheckColor(period)},
]}> ]}>
{period.percent} {period.percent}
</Text> </Text>
<Text <Text
style={[ style={[
styles.codeText, styles.codeText,
{color:getCheckColor(period), marginLeft:3}, {color: getCheckColor(period), marginLeft: 3},
period.available && styles.availableText, period.available && styles.availableText,
]}> ]}>
({period.breakTime}/{period.totalSession}) ({period.breakTime}/{period.totalSession})
</Text> </Text>
</View> </View>
</View> </View>
</View> </View>
))} ))}
...@@ -210,20 +213,19 @@ const CompensateRegisterView = props => { ...@@ -210,20 +213,19 @@ const CompensateRegisterView = props => {
/> />
</View> </View>
<ScrollView <ScrollView showsHorizontalScrollIndicator={false} horizontal>
showsHorizontalScrollIndicator={false} {renderSchedule()}
horizontal>{renderSchedule()}</ScrollView> </ScrollView>
<View style={styles.btnRegister2}> <View style={styles.btnRegister2}>
<Button <Button
title={'Đăng kí dạy bù'} title={'Đăng kí dạy bù'}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
textColor={R.colors.white} textColor={R.colors.white}
onPress={()=>{}} onPress={() => {}}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
height={35} height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}} containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
/> />
</View> </View>
</View> </View>
......
src/screens/compensate/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../assets/R' import R from '../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
}, },
card: { card: {
borderRadius: 10, borderRadius: 10,
padding: 5, padding: 5,
marginTop: 15, marginTop: 15,
marginBottom:5, marginBottom: 5,
marginHorizontal: 15, marginHorizontal: 15,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0.5, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
elevation: Platform.OS === 'ios' ? 1 : 2,
},
btnCard: {
borderRadius: 10,
borderWidth: 1,
padding: 5,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
borderColor: R.colors.grayBorderInputTextHeader,
},
text: {
fontSize: R.sizes.sm,
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
},
containerCard: {
padding: 10,
borderRadius: 10,
marginVertical:10,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 1,
elevation: Platform.OS === 'ios' ? 1 : 2,
marginHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
containerText: {
alignItems: 'center',
justifyContent: 'center',
},
btnRight: {},
btnRegister:{
borderRadius:10,
alignItems:'center',
justifyContent:'center',
marginHorizontal:15,
marginVertical:10,
backgroundColor:R.colors.blue,
borderRadius:10,
padding:5,
height:35
}
})
export default styles backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0.5, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
elevation: Platform.OS === 'ios' ? 1 : 2,
},
btnCard: {
borderRadius: 10,
borderWidth: 1,
padding: 5,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
borderColor: R.colors.grayBorderInputTextHeader,
},
text: {
fontSize: R.sizes.sm,
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
},
containerCard: {
padding: 10,
borderRadius: 10,
marginVertical: 10,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 1,
elevation: Platform.OS === 'ios' ? 1 : 2,
marginHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
containerText: {
alignItems: 'center',
justifyContent: 'center',
},
btnRight: {},
btnRegister: {
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 15,
marginVertical: 10,
backgroundColor: R.colors.blue,
borderRadius: 10,
padding: 5,
height: 35,
},
});
export default styles;
src/screens/compensate/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, FlatList, Image} from 'react-native'; import {
Text,
View,
TouchableOpacity,
StyleSheet,
FlatList,
Image,
} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header'; import Header from '../../components/Header/Header';
import R from '../../assets/R'; import R from '../../assets/R';
import*as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const CompensateView = (props) => { const CompensateView = props => {
const {dataList} = props; const {dataList} = props;
const navigation = useNavigation(); const navigation = useNavigation();
const renderItem = ({item}) => { const renderItem = ({item}) => {
...@@ -29,9 +36,27 @@ const CompensateView = (props) => { ...@@ -29,9 +36,27 @@ const CompensateView = (props) => {
</Text> </Text>
</View> </View>
<View style={{alignItems:'center'}}> <View style={{alignItems: 'center'}}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Nghỉ / Bù / Tổng</Text> <Text
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:400, fontFamily:R.fonts.fontRegular}]}> style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Nghỉ / Bù / Tổng
</Text>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 400,
fontFamily: R.fonts.fontRegular,
},
]}>
{item.rest} / {item.compensate} / {item.total} {item.rest} / {item.compensate} / {item.total}
</Text> </Text>
</View> </View>
...@@ -53,7 +78,17 @@ const CompensateView = (props) => { ...@@ -53,7 +78,17 @@ const CompensateView = (props) => {
<View style={styles.body}> <View style={styles.body}>
<View style={styles.card}> <View style={styles.card}>
<TouchableOpacity style={styles.btnCard}> <TouchableOpacity style={styles.btnCard}>
<Text style={[styles.text, {fontSize:R.fontsize.fontSizeContent , fontWeight:600, fontFamily:R.fonts.fontMedium}]}>Học kỳ 2, Năm 2025</Text> <Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Học kỳ 2, Năm 2025
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<FlatList <FlatList
...@@ -63,9 +98,13 @@ const CompensateView = (props) => { ...@@ -63,9 +98,13 @@ const CompensateView = (props) => {
vertical vertical
keyExtractor={(item, index) => `${index}`} keyExtractor={(item, index) => `${index}`}
/> />
<TouchableOpacity style={styles.btnRegister} onPress={ () => navigation.navigate(SCREENNAME.REGISTERMAKEUP)}> <TouchableOpacity
<Text style={[styles.text, {color:R.colors.white}]}>Đăng kí báo bù</Text> style={styles.btnRegister}
</TouchableOpacity> onPress={() => navigation.navigate(SCREENNAME.REGISTERMAKEUP)}>
<Text style={[styles.text, {color: R.colors.white}]}>
Đăng kí báo bù
</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
); );
......
src/screens/email/detail/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailEmailView from './view'; import DetailEmailView from './view';
const DetailEmail = (props) => { const DetailEmail = props => {
const [incoming_document, setIncomingDocument] = useState({ const [incoming_document, setIncomingDocument] = useState({
title:'Đăng ký tham gia TechX 2025 - Định hình tương lai công nghệ!', title: 'Đăng ký tham gia TechX 2025 - Định hình tương lai công nghệ!',
avatar:'https://i.pinimg.com/736x/a5/71/ca/a571cac1f9e27c642f3b5e13f76f87fb.jpg', avatar:
name:'Vũ công bình', 'https://i.pinimg.com/736x/a5/71/ca/a571cac1f9e27c642f3b5e13f76f87fb.jpg',
date:'27/07/2025', name: 'Vũ công bình',
from:'ducnm@.abc.com', date: '27/07/2025',
cc:[{id:1, name:'ducnm@.abc.com'},{id:2, name:'ducnm@.abc.com'},{id:3, name:'ducnm@.abc.com'}, {id:4, name:'ducnm@.abc.com'}, {id:5, name:'ducnm@.abc.com'}, {id:6, name:'ducnm@.abc.com'}, {id:7, name:'ducnm@.abc.com'}, {id:8, name:'ducnm@.abc.com'}, {id:9, name:'ducnm@.abc.com'}, {id:10, name:'ducnm@.abc.com'}, {id:11, name:'ducnm@.abc.com'}, {id:12, name:'ducnm@.abc.com'}, {id:13, name:'ducnm@.abc.com'}, {id:14, name:'ducnm@.abc.com'}, {id:15, name:'ducnm@.abc.com'}, {id:16, name:'ducnm@.abc.com'}, {id:17, name:'ducnm@.abc.com'}, {id:18, name:'ducnm@.abc.com'}, {id:19, name:'ducnm@.abc.com'}, {id:20, name:'ducnm@.abc.com'}], from: 'ducnm@.abc.com',
bcc:'ducnm@.abc.com', cc: [
to:'ducnm@.abc.com', {id: 1, name: 'ducnm@.abc.com'},
content: "Kính gửi toàn thể Anh/Chị CBNV,\n\nTheo cập nhật mới nhất từ cơ quan khí tượng, bão số 3 (tên quốc tế: Wipha) hiện đang cách Quảng Ninh – Hải Phòng khoảng 233km về phía Đông. Trong 12 giờ qua, bão đã suy yếu 3 cấp (còn cấp 9), tuy nhiên dự báo sẽ mạnh lên khi đi vào khu vực Vịnh Bắc Bộ trong hôm nay (21/7).\n\nDự kiến từ chiều và tối nay, các tỉnh vùng ven biển và khu vực đồng bằng Bắc Bộ, bao gồm cả Hà Nội, có thể xảy ra mưa to, gió lớn, thậm chí có hiện tượng ngập úng cục bộ, cây đổ, mất điện.\n\nĐể đảm bảo an toàn cho toàn thể CBNV, công ty xin lưu ý:\n\n1. CBNV đang sinh sống tại khu vực bị ảnh hưởng bởi mưa bão có thể chủ động làm việc từ xa (remote) vào ngày mai nếu thấy điều kiện di chuyển không an toàn.\n\n2. Trong mọi trường hợp, ưu tiên cao nhất là an toàn cá nhân. Nếu gặp tình trạng ngập sâu, cây gãy đổ, đường trơn trượt nguy hiểm... vui lòng không cố gắng di chuyển đến văn phòng.\n\n3. Các quản lý trực tiếp chủ động nhắc nhở thành viên trong nhóm, và tạo điều kiện linh hoạt để đảm bảo công việc được duy trì hiệu quả, dù làm việc tại nhà.\n\nCông ty khuyến nghị anh/chị:\n\n- Hạn chế ra ngoài khi mưa gió lớn, kiểm tra và gia cố nhà cửa nếu cần thiết;\n- Liên hệ ngay với quản lý hoặc bộ phận HCNS nếu có tình huống khẩn cấp.\n\nRất mong anh/chị giữ gìn sức khỏe, an toàn và chủ động phối hợp trong thời gian này." {id: 2, name: 'ducnm@.abc.com'},
{id: 3, name: 'ducnm@.abc.com'},
{id: 4, name: 'ducnm@.abc.com'},
{id: 5, name: 'ducnm@.abc.com'},
{id: 6, name: 'ducnm@.abc.com'},
{id: 7, name: 'ducnm@.abc.com'},
{id: 8, name: 'ducnm@.abc.com'},
{id: 9, name: 'ducnm@.abc.com'},
{id: 10, name: 'ducnm@.abc.com'},
{id: 11, name: 'ducnm@.abc.com'},
{id: 12, name: 'ducnm@.abc.com'},
{id: 13, name: 'ducnm@.abc.com'},
{id: 14, name: 'ducnm@.abc.com'},
{id: 15, name: 'ducnm@.abc.com'},
{id: 16, name: 'ducnm@.abc.com'},
{id: 17, name: 'ducnm@.abc.com'},
{id: 18, name: 'ducnm@.abc.com'},
{id: 19, name: 'ducnm@.abc.com'},
{id: 20, name: 'ducnm@.abc.com'},
],
bcc: 'ducnm@.abc.com',
to: 'ducnm@.abc.com',
content:
'Kính gửi toàn thể Anh/Chị CBNV,\n\nTheo cập nhật mới nhất từ cơ quan khí tượng, bão số 3 (tên quốc tế: Wipha) hiện đang cách Quảng Ninh – Hải Phòng khoảng 233km về phía Đông. Trong 12 giờ qua, bão đã suy yếu 3 cấp (còn cấp 9), tuy nhiên dự báo sẽ mạnh lên khi đi vào khu vực Vịnh Bắc Bộ trong hôm nay (21/7).\n\nDự kiến từ chiều và tối nay, các tỉnh vùng ven biển và khu vực đồng bằng Bắc Bộ, bao gồm cả Hà Nội, có thể xảy ra mưa to, gió lớn, thậm chí có hiện tượng ngập úng cục bộ, cây đổ, mất điện.\n\nĐể đảm bảo an toàn cho toàn thể CBNV, công ty xin lưu ý:\n\n1. CBNV đang sinh sống tại khu vực bị ảnh hưởng bởi mưa bão có thể chủ động làm việc từ xa (remote) vào ngày mai nếu thấy điều kiện di chuyển không an toàn.\n\n2. Trong mọi trường hợp, ưu tiên cao nhất là an toàn cá nhân. Nếu gặp tình trạng ngập sâu, cây gãy đổ, đường trơn trượt nguy hiểm... vui lòng không cố gắng di chuyển đến văn phòng.\n\n3. Các quản lý trực tiếp chủ động nhắc nhở thành viên trong nhóm, và tạo điều kiện linh hoạt để đảm bảo công việc được duy trì hiệu quả, dù làm việc tại nhà.\n\nCông ty khuyến nghị anh/chị:\n\n- Hạn chế ra ngoài khi mưa gió lớn, kiểm tra và gia cố nhà cửa nếu cần thiết;\n- Liên hệ ngay với quản lý hoặc bộ phận HCNS nếu có tình huống khẩn cấp.\n\nRất mong anh/chị giữ gìn sức khỏe, an toàn và chủ động phối hợp trong thời gian này.',
}); });
return ( return <DetailEmailView incoming_document={incoming_document} />;
<DetailEmailView incoming_document={incoming_document}/>
);
}; };
export default DetailEmail; export default DetailEmail;
src/screens/email/detail/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../../assets/R' import R from '../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
paddingHorizontal:15, paddingHorizontal: 15,
paddingVertical:10 paddingVertical: 10,
}, },
header:{ header: {
backgroundColor:R.colors.blue, backgroundColor: R.colors.blue,
height:50, height: 50,
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'space-between', justifyContent: 'space-between',
paddingHorizontal:15 paddingHorizontal: 15,
}, },
iconBack:{ iconBack: {
width:25, width: 25,
height:20 height: 20,
}, },
iconDelete:{ iconDelete: {
width:25, width: 25,
height:20 height: 20,
}, },
title:{ title: {
fontSize:R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
color:R.colors.black, color: R.colors.black,
}, },
avatarBox:{ avatarBox: {
height:50, height: 50,
flexDirection:'row', flexDirection: 'row',
marginVertical:5 marginVertical: 5,
}, },
avatarContainer:{ avatarContainer: {
width:50, width: 50,
height:50, height: 50,
borderRadius:25, borderRadius: 25,
}, },
avatar:{ avatar: {
width:50, width: 50,
height:50, height: 50,
borderRadius:25, borderRadius: 25,
}, },
avatarTextContainer:{ avatarTextContainer: {
flex:1, flex: 1,
marginLeft:10, marginLeft: 10,
paddingVertical:2, paddingVertical: 2,
flexDirection:'row', flexDirection: 'row',
justifyContent:'space-between', justifyContent: 'space-between',
}, },
name:{ name: {
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
color:R.colors.black, color: R.colors.black,
}, },
date:{ date: {
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
color:R.colors.gray, color: R.colors.gray,
}, },
iconDrop:{ iconDrop: {
width:20, width: 20,
height:20 height: 20,
}, },
toMeContainer:{ toMeContainer: {
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
}, },
detailSendContainer:{ detailSendContainer: {
width:'100%', width: '100%',
height:200, height: 200,
backgroundColor:R.colors.blue4, backgroundColor: R.colors.blue4,
borderRadius:15, borderRadius: 15,
paddingHorizontal:15, paddingHorizontal: 15,
paddingVertical:10 paddingVertical: 10,
}, },
textTitleMail:{ textTitleMail: {
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontBold, fontFamily: R.fonts.fontBold,
fontWeight:'600', fontWeight: '600',
color:R.colors.black, color: R.colors.black,
}, },
textSubMail:{ textSubMail: {
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
fontWeight:'400', fontWeight: '400',
color:R.colors.black, color: R.colors.black,
}, },
textContent:{ textContent: {
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
fontWeight:'400', fontWeight: '400',
color:R.colors.black, color: R.colors.black,
}, },
iconReply:{ iconReply: {
width:15, width: 15,
height:15 height: 15,
}, },
iconForward:{ iconForward: {
width:15, width: 15,
height:15 height: 15,
} },
}) });
export default styles export default styles;
src/screens/email/detail/view.js
...@@ -28,61 +28,61 @@ const DetailEmailView = props => { ...@@ -28,61 +28,61 @@ const DetailEmailView = props => {
</View> </View>
); );
}; };
const renderBottomCard = () =>{ const renderBottomCard = () => {
return( return (
<View style={styles.detailSendContainer}> <View style={styles.detailSendContainer}>
<ScrollView nestedScrollEnabled={true} style={{flex:1} }> <ScrollView nestedScrollEnabled={true} style={{flex: 1}}>
<Text style={styles.textTitleMail}>From:{' '} <Text style={styles.textTitleMail}>
<Text style={styles.textSubMail}>{incoming_document.from}</Text> From:{' '}
</Text> <Text style={styles.textSubMail}>{incoming_document.from}</Text>
<Text style={styles.textTitleMail}>CC:{' '} </Text>
<Text style={styles.textSubMail}>{incoming_document.cc.map((item,index)=>{ <Text style={styles.textTitleMail}>
return( CC:{' '}
<Text key={index}>{item.name},</Text> <Text style={styles.textSubMail}>
) {incoming_document.cc.map((item, index) => {
})}</Text> return <Text key={index}>{item.name},</Text>;
</Text> })}
<Text style={styles.textTitleMail}>BCC:{' '} </Text>
<Text style={styles.textSubMail}>{incoming_document.bcc}</Text> </Text>
</Text> <Text style={styles.textTitleMail}>
<Text style={styles.textTitleMail}>TO:{' '} BCC: <Text style={styles.textSubMail}>{incoming_document.bcc}</Text>
<Text style={styles.textSubMail}>{incoming_document.to}</Text> </Text>
</Text> <Text style={styles.textTitleMail}>
</ScrollView> TO: <Text style={styles.textSubMail}>{incoming_document.to}</Text>
</View> </Text>
) </ScrollView>
</View>
} );
};
const renderButton =( const renderButton = ({
{ title,
title, onPress,
onPress, style,
style, icon,
icon, textStyle,
textStyle, iconRight,
iconRight, }) => {
} return (
)=>{
return(
<TouchableOpacity style={style} onPress={onPress}> <TouchableOpacity style={style} onPress={onPress}>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'center', marginHorizontal:10,}}> <View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 10,
}}>
<Image source={icon} style={styles.iconReply} resizeMode="contain" />
<Text style={textStyle}>{title}</Text>
<Image <Image
source={icon} source={iconRight}
style={styles.iconReply} style={[styles.iconForward, {transform: [{rotateY: '180deg'}]}]}
resizeMode="contain" resizeMode="contain"
/> />
<Text style={textStyle}>{title}</Text>
<Image
source={iconRight}
style={[styles.iconForward, { transform: [{ rotateY: '180deg' }] }]}
resizeMode="contain"
/>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
) );
} };
const renderBody = () => { const renderBody = () => {
return ( return (
...@@ -100,18 +100,18 @@ const DetailEmailView = props => { ...@@ -100,18 +100,18 @@ const DetailEmailView = props => {
<View style={styles.avatarTextContainer}> <View style={styles.avatarTextContainer}>
<View> <View>
<Text style={styles.name}>{incoming_document.name}</Text> <Text style={styles.name}>{incoming_document.name}</Text>
<TouchableOpacity <TouchableOpacity
style={styles.toMeContainer} style={styles.toMeContainer}
onPress={() => setShowBottomCard(!showBottomCard)} onPress={() => setShowBottomCard(!showBottomCard)}>
> <Text>to me</Text>
<Text>
to me
</Text>
<Image <Image
source={R.images.icDrop} source={R.images.icDrop}
style={[styles.iconDrop, { style={[
transform: [{ rotate: showBottomCard ? '180deg' : '0deg' }] styles.iconDrop,
}]} {
transform: [{rotate: showBottomCard ? '180deg' : '0deg'}],
},
]}
resizeMode="contain" resizeMode="contain"
/> />
</TouchableOpacity> </TouchableOpacity>
...@@ -119,94 +119,90 @@ const DetailEmailView = props => { ...@@ -119,94 +119,90 @@ const DetailEmailView = props => {
<Text style={styles.date}>{incoming_document.date}</Text> <Text style={styles.date}>{incoming_document.date}</Text>
</View> </View>
</View> </View>
{showBottomCard && renderBottomCard()} {showBottomCard && renderBottomCard()}
<View style={{marginVertical:15}}> <View style={{marginVertical: 15}}>
<Text style={styles.textContent}>{incoming_document.content}</Text> <Text style={styles.textContent}>{incoming_document.content}</Text>
</View> </View>
<View style={{marginBottom:35 , flexDirection:'row', justifyContent:'space-between'}}> <View
style={{
marginBottom: 35,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
{renderButton({ {renderButton({
title:'Reply', title: 'Reply',
onPress:()=>{}, onPress: () => {},
icon:R.images.icReply, icon: R.images.icReply,
style:{ style: {
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
padding:5, padding: 5,
borderRadius:15, borderRadius: 15,
borderColor:R.colors.black, borderColor: R.colors.black,
borderWidth:1, borderWidth: 1,
width:105, width: 105,
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
height:40, height: 40,
}, },
textStyle:{ textStyle: {
color:R.colors.black, color: R.colors.black,
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
marginLeft:5 marginLeft: 5,
}, },
})} })}
{renderButton({ {renderButton({
title:'Reply All', title: 'Reply All',
onPress:()=>{}, onPress: () => {},
icon:R.images.icReplyAll, icon: R.images.icReplyAll,
style:{ style: {
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
padding:5, padding: 5,
borderRadius:15, borderRadius: 15,
borderColor:R.colors.black, borderColor: R.colors.black,
borderWidth:1, borderWidth: 1,
width:105, width: 105,
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
height:40, height: 40,
}, },
textStyle:{ textStyle: {
color:R.colors.black, color: R.colors.black,
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
marginLeft:5 marginLeft: 5,
}, },
})} })}
{renderButton({ {renderButton({
title:'Forward', title: 'Forward',
onPress:()=>{}, onPress: () => {},
iconRight:R.images.icReply, iconRight: R.images.icReply,
style:{ style: {
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
padding:5, padding: 5,
borderRadius:15, borderRadius: 15,
borderColor:R.colors.black, borderColor: R.colors.black,
borderWidth:1, borderWidth: 1,
width:105, width: 105,
flexDirection:'row', flexDirection: 'row',
alignItems:'center', alignItems: 'center',
justifyContent:'center', justifyContent: 'center',
height:40, height: 40,
}, },
textStyle:{ textStyle: {
color:R.colors.black, color: R.colors.black,
fontSize:R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
marginRight:5 marginRight: 5,
}, },
})} })}
</View> </View>
</ScrollView> </ScrollView>
); );
}; };
......
src/screens/email/index.js
import React, { useState, useEffect } from 'react'; import React, {useState, useEffect} from 'react';
import EmailHomeView from './view'; import EmailHomeView from './view';
const EmailHome = (props) => { const EmailHome = props => {
const [emails, setEmails] = useState([]); const [emails, setEmails] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
...@@ -10,7 +10,7 @@ const EmailHome = (props) => { ...@@ -10,7 +10,7 @@ const EmailHome = (props) => {
const today = new Date(); const today = new Date();
const yesterday = new Date(today); const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1); yesterday.setDate(yesterday.getDate() - 1);
const weekAgo = new Date(today); const weekAgo = new Date(today);
weekAgo.setDate(weekAgo.getDate() - 7); weekAgo.setDate(weekAgo.getDate() - 7);
...@@ -22,65 +22,82 @@ const EmailHome = (props) => { ...@@ -22,65 +22,82 @@ const EmailHome = (props) => {
id: 1, id: 1,
sender: 'Nguyễn Minh Đức', sender: 'Nguyễn Minh Đức',
subject: 'Bảng lương tháng 10', subject: 'Bảng lương tháng 10',
preview: 'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...', preview:
'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...',
date: today, date: today,
isRead: true, isRead: true,
hasAttachment: false, hasAttachment: false,
avatar: 'https://via.placeholder.com/40' avatar: 'https://via.placeholder.com/40',
}, },
{ {
id: 2, id: 2,
sender: 'Vũ Công Bình', sender: 'Vũ Công Bình',
subject: 'Re: ĐƠN XIN ỨNG LƯƠNG', subject: 'Re: ĐƠN XIN ỨNG LƯƠNG',
preview: 'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...', preview:
'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...',
date: yesterday, date: yesterday,
isRead: false, isRead: false,
hasAttachment: true, hasAttachment: true,
avatar: 'https://via.placeholder.com/40' avatar: 'https://via.placeholder.com/40',
}, },
{ {
id: 3, id: 3,
sender: 'Vũ Công Bình', sender: 'Vũ Công Bình',
subject: 'Re: ĐƠN XIN ỨNG LƯƠNG', subject: 'Re: ĐƠN XIN ỨNG LƯƠNG',
preview: 'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...', preview:
'Kính gửi nhân viên ưu tú đây là bảng lương tháng 10 của bạn hãy kiểm tra nếu có thắc...',
date: yesterday, date: yesterday,
isRead: false, isRead: false,
hasAttachment: true, hasAttachment: true,
avatar: 'https://via.placeholder.com/40' avatar: 'https://via.placeholder.com/40',
}, },
{ {
id: 4, id: 4,
sender: 'Trần Thị Mai', sender: 'Trần Thị Mai',
subject: 'Thông báo họp tuần', subject: 'Thông báo họp tuần',
preview: 'Cuộc họp tuần sẽ được tổ chức vào thứ 2 tuần tới lúc 9h00 sáng tại phòng họp A...', preview:
'Cuộc họp tuần sẽ được tổ chức vào thứ 2 tuần tới lúc 9h00 sáng tại phòng họp A...',
date: weekAgo, date: weekAgo,
isRead: true, isRead: true,
hasAttachment: false, hasAttachment: false,
avatar: 'https://via.placeholder.com/40' avatar: 'https://via.placeholder.com/40',
}, },
{ {
id: 5, id: 5,
sender: 'Phòng Nhân Sự', sender: 'Phòng Nhân Sự',
subject: 'Thông báo nghỉ lễ', subject: 'Thông báo nghỉ lễ',
preview: 'Công ty thông báo lịch nghỉ lễ Quốc Khánh 2/9 từ ngày 31/8 đến 3/9...', preview:
'Công ty thông báo lịch nghỉ lễ Quốc Khánh 2/9 từ ngày 31/8 đến 3/9...',
date: monthAgo, date: monthAgo,
isRead: true, isRead: true,
hasAttachment: false, hasAttachment: false,
avatar: 'https://via.placeholder.com/40' avatar: 'https://via.placeholder.com/40',
} },
]; ];
}; };
// Logic để format ngày hiển thị // Logic để format ngày hiển thị
const formatEmailDate = (emailDate) => { const formatEmailDate = emailDate => {
const today = new Date(); const today = new Date();
const yesterday = new Date(today); const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1); yesterday.setDate(yesterday.getDate() - 1);
// Reset time để so sánh chỉ ngày // Reset time để so sánh chỉ ngày
const emailDateOnly = new Date(emailDate.getFullYear(), emailDate.getMonth(), emailDate.getDate()); const emailDateOnly = new Date(
const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate()); emailDate.getFullYear(),
const yesterdayOnly = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); emailDate.getMonth(),
emailDate.getDate(),
);
const todayOnly = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
);
const yesterdayOnly = new Date(
yesterday.getFullYear(),
yesterday.getMonth(),
yesterday.getDate(),
);
if (emailDateOnly.getTime() === todayOnly.getTime()) { if (emailDateOnly.getTime() === todayOnly.getTime()) {
return 'Hôm nay'; return 'Hôm nay';
...@@ -91,14 +108,14 @@ const EmailHome = (props) => { ...@@ -91,14 +108,14 @@ const EmailHome = (props) => {
const day = emailDate.getDate().toString().padStart(2, '0'); const day = emailDate.getDate().toString().padStart(2, '0');
const month = (emailDate.getMonth() + 1).toString().padStart(2, '0'); const month = (emailDate.getMonth() + 1).toString().padStart(2, '0');
const year = emailDate.getFullYear(); const year = emailDate.getFullYear();
return `${day}/${month}/${year}`; return `${day}/${month}/${year}`;
} }
}; };
//Nhóm các email trong danh sách theo ngày trả về một đối tượng trong đó các khoá là ngày //Nhóm các email trong danh sách theo ngày trả về một đối tượng trong đó các khoá là ngày
const groupEmailsByDate = (emailList) => { const groupEmailsByDate = emailList => {
const grouped = {}; const grouped = {};
emailList.forEach(email => { emailList.forEach(email => {
const dateLabel = formatEmailDate(email.date); const dateLabel = formatEmailDate(email.date);
if (!grouped[dateLabel]) { if (!grouped[dateLabel]) {
...@@ -118,7 +135,7 @@ const EmailHome = (props) => { ...@@ -118,7 +135,7 @@ const EmailHome = (props) => {
}, 1000); }, 1000);
}, []); }, []);
const handleEmailPress = (email) => { const handleEmailPress = email => {
console.log('Email pressed:', email.subject); console.log('Email pressed:', email.subject);
}; };
...@@ -134,7 +151,7 @@ const EmailHome = (props) => { ...@@ -134,7 +151,7 @@ const EmailHome = (props) => {
const groupedEmails = groupEmailsByDate(emails); const groupedEmails = groupEmailsByDate(emails);
return ( return (
<EmailHomeView <EmailHomeView
emails={emails} emails={emails}
groupedEmails={groupedEmails} groupedEmails={groupedEmails}
loading={loading} loading={loading}
......
src/screens/email/send/index.js
import React, { useState } from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import SendEmailView from './view'; import SendEmailView from './view';
const SendEmail = (props) => { const SendEmail = props => {
const [chip, setChips] = useState([]); const [chip, setChips] = useState([]);
const handleChange = (newChips) => { const handleChange = newChips => {
setChips(newChips); setChips(newChips);
}; };
const [dataList, setDataList] = useState([ const [dataList, setDataList] = useState([
['john@doe.com', 'jane@doe.com', 'tung@doe.com'] ['john@doe.com', 'jane@doe.com', 'tung@doe.com'],
]); ]);
return ( return (
<SendEmailView handleChange={handleChange} chip={chip} dataList={dataList}/> <SendEmailView
handleChange={handleChange}
chip={chip}
dataList={dataList}
/>
); );
}; };
......
src/screens/email/send/style.js
import { StyleSheet, Text, View } from 'react-native' import {StyleSheet, Text, View} from 'react-native';
import R from '../../../assets/R' import R from '../../../assets/R';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container: {
flex:1, flex: 1,
backgroundColor:R.colors.white backgroundColor: R.colors.white,
}, },
body:{ body: {
flex:1, flex: 1,
backgroundColor:R.colors.white, backgroundColor: R.colors.white,
padding:15 padding: 15,
}, },
header:{ header: {
flexDirection:'row', flexDirection: 'row',
backgroundColor:R.colors.blue, backgroundColor: R.colors.blue,
height:50, height: 50,
alignItems:'center', alignItems: 'center',
justifyContent:'space-between', justifyContent: 'space-between',
paddingHorizontal:15 paddingHorizontal: 15,
}, },
icon:{ icon: {
width:25, width: 25,
height:20 height: 20,
}, },
sendButton:{ sendButton: {
backgroundColor:R.colors.orange, backgroundColor: R.colors.orange,
borderRadius:5, borderRadius: 5,
width:90, width: 90,
paddingHorizontal:5, paddingHorizontal: 5,
height:35, height: 35,
alignItems:'center', alignItems: 'center',
justifyContent:'space-around', justifyContent: 'space-around',
flexDirection:'row' flexDirection: 'row',
}, },
sendText:{ sendText: {
color:R.colors.white, color: R.colors.white,
fontSize:R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontRegular, fontFamily: R.fonts.fontRegular,
fontWeight:'400', fontWeight: '400',
}, },
iconSend:{ iconSend: {
width:20, width: 20,
height:20 height: 20,
}, },
title:{ title: {
fontSize:R.fontsize.fontSizeSubTitle, fontSize: R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight:'600', fontWeight: '600',
color:R.colors.white color: R.colors.white,
}, },
iconClose:{ iconClose: {
width:15, width: 15,
height:15 height: 15,
}, },
inputContainer:{ inputContainer: {
flexDirection:'row', flexDirection: 'row',
borderBottomWidth:1, borderBottomWidth: 1,
borderColor:R.colors.grayBorderInputTextHeader, borderColor: R.colors.grayBorderInputTextHeader,
borderRadius:5, borderRadius: 5,
height:35, height: 35,
alignItems:'center', alignItems: 'center',
},
input: {
}, flex: 1,
input:{ padding: 0,
flex:1, paddingHorizontal: 10,
padding:0, paddingVertical: 0,
paddingHorizontal:10, },
paddingVertical:0, });
}
})
export default styles export default styles;
\ No newline at end of file
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