Skip to content

A
AppUms_Lecturer
Commit d09748e2 by tungnq
Options

TODO: Bổ sung chức năng đăng kí báo nghỉ

parent 5178bcb5
Showing with 313 additions and 186 deletions
src/screens/list_rest_report/add/index.js
import React from 'react'; import React, { useState } from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import RegisterAbsenceView from './view'; import RegisterAbsenceView from './view';
const RegisterAbsence = props => { const RegisterAbsence = props => {
return <RegisterAbsenceView />; // State cho các TextField
const [semester, setSemester] = useState('');
const [academicYear, setAcademicYear] = useState('');
const [teacherCode, setTeacherCode] = useState('');
const [reason, setReason] = useState('');
// State cho các Dropdown
const [selectedClass, setSelectedClass] = useState('');
const [selectedSchedule, setSelectedSchedule] = useState('');
const [selectedSubstituteTeacher, setSelectedSubstituteTeacher] = useState('');
// State cho document
const [selectedDocument, setSelectedDocument] = useState(null);
const handleSubmit = () => {
// Validation
if (!semester.trim()) {
alert('Vui lòng nhập học kỳ');
return;
}
if (!academicYear.trim()) {
alert('Vui lòng nhập năm học');
return;
}
if (!teacherCode.trim()) {
alert('Vui lòng nhập mã CBGV');
return;
}
if (!selectedClass) {
alert('Vui lòng chọn mã lớp');
return;
}
if (!selectedSchedule) {
alert('Vui lòng chọn lịch báo nghỉ');
return;
}
if (!reason.trim()) {
alert('Vui lòng nhập lý do nghỉ');
return;
}
if (!selectedSubstituteTeacher) {
alert('Vui lòng chọn giảng viên thay thế');
return;
}
// Tạo object data để submit
const formData = {
semester: semester.trim(),
academicYear: academicYear.trim(),
teacherCode: teacherCode.trim(),
selectedClass,
selectedSchedule,
reason: reason.trim(),
selectedSubstituteTeacher,
document: selectedDocument,
};
console.log('Form Data:', formData);
// TODO: Implement submit logic
};
const handleDocumentPicker = () => {
// TODO: Implement document picker
console.log('Open document picker');
};
return (
<RegisterAbsenceView
// Text field states
semester={semester}
setSemester={setSemester}
academicYear={academicYear}
setAcademicYear={setAcademicYear}
teacherCode={teacherCode}
setTeacherCode={setTeacherCode}
reason={reason}
setReason={setReason}
// Dropdown states
selectedClass={selectedClass}
setSelectedClass={setSelectedClass}
selectedSchedule={selectedSchedule}
setSelectedSchedule={setSelectedSchedule}
selectedSubstituteTeacher={selectedSubstituteTeacher}
setSelectedSubstituteTeacher={setSelectedSubstituteTeacher}
// Document state
selectedDocument={selectedDocument}
setSelectedDocument={setSelectedDocument}
// Handlers
onSubmit={handleSubmit}
onDocumentPicker={handleDocumentPicker}
/>
);
}; };
export default RegisterAbsence; export default RegisterAbsence;
src/screens/list_rest_report/add/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,
...@@ -44,5 +45,41 @@ const styles = StyleSheet.create({ ...@@ -44,5 +45,41 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderColor: R.colors.blue, borderColor: R.colors.blue,
}, },
// Styles cho spacing và layout
flexOne: {
flex: 1,
},
flexSpacer: {
flex: 0.1,
},
marginBottom35: {
marginBottom: 35,
},
marginTop15: {
marginTop: 15,
},
marginBottom5: {
marginBottom: 5,
},
// Styles cho text
titleText: {
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
requiredText: {
color: R.colors.red,
},
documentText: {
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
// Styles cho row layout
rowLayout: {
flexDirection: 'row',
},
}); });
export default styles; export default styles;
src/screens/list_rest_report/add/view.js
import React from 'react'; import React, { useState } from 'react';
import { import {
Text, Text,
View, View,
...@@ -15,150 +15,160 @@ import R from '../../../assets/R'; ...@@ -15,150 +15,160 @@ import R from '../../../assets/R';
import Dropdown from '../../../components/DropdownAlert/Dropdown'; import Dropdown from '../../../components/DropdownAlert/Dropdown';
import TextMulti from '../../../components/Input/TextMulti'; import TextMulti from '../../../components/Input/TextMulti';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
const RegisterAbsenceView = props => { const RegisterAbsenceView = props => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']); LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
const {} = props; const {
semester,
academicYear,
teacherCode,
reason,
selectedClass,
selectedSchedule,
selectedSubstituteTeacher,
selectedDocument,
setSelectedClass,
setSelectedSchedule,
setSelectedSubstituteTeacher,
setReason,
setTeacherCode,
setSemester,
setAcademicYear,
onSubmit,
onDocumentPicker,
} = props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Đăng ký báo nghỉ'} isBack /> <Header title={'Đăng ký báo nghỉ'} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={styles.body}> <ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
<View style={{marginBottom: 35}}> <View style={styles.marginBottom35}>
<View style={styles.containerInput}> <View style={styles.containerInput}>
<View style={{flex: 1}}> <View style={styles.flexOne}>
<TextField <TextField
title={'Học kỳ'} title={'Học kỳ'}
required required
value={semester}
onChangeText={setSemester}
backgroundColor={R.colors.gray} backgroundColor={R.colors.gray}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm} fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
placeholder="Nhập học kỳ"
editable={false}
/> />
</View> </View>
<View style={{flex: 0.1}}></View> <View style={styles.flexSpacer}></View>
<View style={{flex: 1}}> <View style={styles.flexOne}>
<TextField <TextField
title={'Năm học'} title={'Năm học'}
required required
value={academicYear}
onChangeText={setAcademicYear}
backgroundColor={R.colors.gray} backgroundColor={R.colors.gray}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm} fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
placeholder="Nhập năm học"
editable={false}
/> />
</View> </View>
</View> </View>
<TextField <TextField
title={'Mã CBGV'} title={'Mã CBGV'}
required required
value={teacherCode}
onChangeText={setTeacherCode}
backgroundColor={R.colors.gray} backgroundColor={R.colors.gray}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm} fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
placeholder="Nhập mã CBGV"
editable={false}
/> />
<View style={styles.containerDropDown}> <View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}> <View style={styles.rowLayout}>
<Text <Text style={[styles.txtSubtitle, styles.titleText]}>
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Mã lớp{' '} Mã lớp{' '}
</Text> </Text>
<Text style={{color: R.colors.red}}>*</Text> <Text style={styles.requiredText}>*</Text>
</View> </View>
<Dropdown title={'Mã lớp '} /> <Dropdown
title={'Mã lớp'}
selectedValue={selectedClass}
onValueChange={setSelectedClass}
/>
</View> </View>
<View style={styles.containerDropDown}> <View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}> <View style={styles.rowLayout}>
<Text <Text style={[styles.txtSubtitle, styles.titleText]}>
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Lịch báo nghỉ{' '} Lịch báo nghỉ{' '}
</Text> </Text>
<Text style={{color: R.colors.red}}>*</Text> <Text style={styles.requiredText}>*</Text>
</View> </View>
<Dropdown title={'Lịch báo nghỉ '} /> <Dropdown
title={'Lịch báo nghỉ'}
selectedValue={selectedSchedule}
onValueChange={setSelectedSchedule}
/>
</View> </View>
<TextMulti <TextMulti
title={'Lý do nghỉ'} title={'Lý do nghỉ'}
required required
value={reason}
onChangeText={setReason}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
titleFontSize={R.sizes.sm} titleFontSize={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
containerMarginTop={15} containerMarginTop={15}
placeholder="Nhập lý do nghỉ"
/> />
<View style={styles.containerDropDown}> <View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}> <View style={styles.rowLayout}>
<Text <Text style={[styles.txtSubtitle, styles.titleText]}>
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Giảng viên thay thế Giảng viên thay thế
</Text> </Text>
<Text style={{color: R.colors.red}}>*</Text> <Text style={styles.requiredText}>*</Text>
</View> </View>
<Dropdown title={'Giảng viên thay thế'} /> <Dropdown
title={'Giảng viên thay thế'}
selectedValue={selectedSubstituteTeacher}
onValueChange={setSelectedSubstituteTeacher}
/>
</View> </View>
<View style={{marginTop: 15}}> <View style={styles.marginTop15}>
<Text <Text style={[styles.txtSubtitle, styles.titleText]}>
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Minh chứng Minh chứng
</Text> </Text>
<TouchableOpacity style={styles.cardDocument}> <TouchableOpacity
style={styles.cardDocument}
onPress={() => {
// TODO: Implement document picker
console.log('Open document picker');
}}
>
<Image <Image
source={R.images.icDocument} source={R.images.icDocument}
style={{width: 30, height: 30}} style={{width: 30, height: 30}}
resizeMode="contain" resizeMode="contain"
/> />
<Text <Text style={[styles.txtSubtitle, styles.documentText]}>
style={[ {selectedDocument ? selectedDocument.name : 'Thêm tài liệu'}
styles.txtSubtitle,
{
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Thêm tài liệu
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Button <Button
title={'Đăng kí'} title={'Đăng ký'}
textColor={R.colors.white} textColor={R.colors.white}
onPress={() => {}} onPress={onSubmit}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium} fontFamily={R.fonts.fontMedium}
......
src/screens/list_rest_report/detail/style.js
import {StyleSheet, Text, View} from 'react-native'; import {StyleSheet, Text, View, 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,
...@@ -17,7 +18,6 @@ const styles = StyleSheet.create({ ...@@ -17,7 +18,6 @@ const styles = StyleSheet.create({
}, },
card: { card: {
borderRadius: 10, borderRadius: 10,
marginVertical: 10, marginVertical: 10,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
shadowColor: R.colors.black, shadowColor: R.colors.black,
...@@ -27,5 +27,73 @@ const styles = StyleSheet.create({ ...@@ -27,5 +27,73 @@ const styles = StyleSheet.create({
elevation: Platform.OS === 'ios' ? 1 : 2, elevation: Platform.OS === 'ios' ? 1 : 2,
marginHorizontal: 15, marginHorizontal: 15,
}, },
// Styles cho status header
statusHeaderContainer: {
backgroundColor: R.colors.white,
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
},
statusHeader: {
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
},
statusText: {
fontSize: R.sizes.sm,
paddingHorizontal: 10,
paddingVertical: 2,
color: R.colors.white,
fontWeight: 'bold',
fontFamily: R.fonts.fontMedium,
},
statusTextInner: {
fontSize: R.sizes.sm,
color: R.colors.white,
},
// Styles cho card content
cardContent: {
paddingHorizontal: 10,
paddingTop: 3,
paddingBottom: 10,
},
row: {
flexDirection: 'row',
},
rowFlex: {
flex: 1,
},
labelText: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
valueText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
color: R.colors.black,
},
// Styles cho button container
buttonContainer: {
alignItems: 'flex-end',
},
// Styles cho summary section
summaryContainer: {
alignItems: 'center',
marginTop: 10,
},
summaryTitle: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
summaryValue: {
fontSize: 11,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
}); });
export default styles; export default styles;
src/screens/list_rest_report/detail/view.js
...@@ -3,7 +3,6 @@ import { ...@@ -3,7 +3,6 @@ import {
Text, Text,
View, View,
TouchableOpacity, TouchableOpacity,
StyleSheet,
FlatList, FlatList,
LogBox, LogBox,
} from 'react-native'; } from 'react-native';
...@@ -11,8 +10,12 @@ import styles from './style'; ...@@ -11,8 +10,12 @@ 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';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../../routers/ScreenNames';
const AbsenceListByCourseView = props => { const AbsenceListByCourseView = props => {
const {item, listData} = props; const {item, listData} = props;
const navigation = useNavigation();
LogBox.ignoreLogs(['VirtualizedLists should never be nested']); LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
const getColor = status => { const getColor = status => {
...@@ -23,83 +26,37 @@ const AbsenceListByCourseView = props => { ...@@ -23,83 +26,37 @@ const AbsenceListByCourseView = props => {
return R.colors.blue; return R.colors.blue;
} }
}; };
const renderItem = ({item}) => { const renderItem = ({item}) => {
return ( return (
<View style={styles.card}> <View style={styles.card}>
<View <View style={styles.statusHeaderContainer}>
style={{ <View style={[styles.statusHeader, {backgroundColor: getColor(item.status)}]}>
backgroundColor: R.colors.white, <Text style={[styles.text, styles.statusText]}>
borderTopRightRadius: 10, <Text style={styles.statusTextInner}>
borderTopLeftRadius: 10,
}}>
<View
style={{
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} {item.status}
</Text> </Text>
</Text> </Text>
</View> </View>
</View> </View>
<View style={{paddingHorizontal: 10, paddingTop: 3, paddingBottom: 10}}> <View style={styles.cardContent}>
{/* Row 1 */} {/* Row 1 */}
<View <View style={styles.row}>
style={{ <View style={styles.rowFlex}>
flexDirection: 'row', <Text style={[styles.text, styles.labelText]}>
}}>
<View style={{flex: 1}}>
<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 <Text style={[styles.text, styles.valueText]}>
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
{item.date} {item.date}
</Text> </Text>
</Text> </Text>
</View> </View>
{/* <View style={{flex: 1}}>
<Text style={[styles.text, {fontSize: R.sizes.sm}]}>
Tình trạng: <Text style={{color: getColor(item.status)}}>{item.status}</Text>
</Text>
</View> */}
</View> </View>
{/* Row 2 */} {/* Row 2 */}
<View> <View>
<Text <Text style={[styles.text, styles.labelText]}>
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Thời gian nghỉ:{' '} Thời gian nghỉ:{' '}
<Text <Text style={[styles.text, styles.valueText]}>
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
{item.dayOfWeek} - Tiết:{' '} {item.dayOfWeek} - Tiết:{' '}
{item.periods.map((item, index) => { {item.periods.map((item, index) => {
return <Text key={index}>{item.time},</Text>; return <Text key={index}>{item.time},</Text>;
...@@ -109,64 +66,37 @@ const AbsenceListByCourseView = props => { ...@@ -109,64 +66,37 @@ const AbsenceListByCourseView = props => {
</Text> </Text>
</View> </View>
{/* Row 3 */} {/* Row 3 */}
<View style={{}}> <View>
<Text <Text style={[styles.text, styles.labelText]}>
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Địa điểm: Địa điểm:
<Text <Text style={[styles.text, styles.valueText]}>
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
{item.location} {item.location}
</Text> </Text>
</Text> </Text>
</View> </View>
{/* Row 4 */} {/* Row 4 */}
<View style={{}}> <View>
<Text <Text style={[styles.text, styles.labelText]}>
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Giảng viên thay thế: Giảng viên thay thế:
<Text <Text style={[styles.text, styles.valueText]}>
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
{item.teacher} {item.teacher}
</Text> </Text>
</Text> </Text>
</View> </View>
{/* Row 5 */} {/* Row 5 */}
<View style={{}}> <View>
<Text <Text style={[styles.text, styles.labelText]}>
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Ghi chú: Ghi chú:
<Text <Text style={[styles.text, styles.valueText]}>
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
{item.note} {item.note}
</Text> </Text>
</Text> </Text>
</View> </View>
{item.status === 'Đã xác nhận' && ( {item.status === 'Đã xác nhận' && (
<View style={{alignItems: 'flex-end'}}> <View style={styles.buttonContainer}>
<Button <Button
title="Báo bù" title="Báo bù"
onPress={() => {}} onPress={() => navigation.navigate(SCREENNAME.LISTMAKEUPCLASSES)}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
textColor={R.colors.white} textColor={R.colors.white}
height={25} height={25}
...@@ -180,7 +110,7 @@ const AbsenceListByCourseView = props => { ...@@ -180,7 +110,7 @@ const AbsenceListByCourseView = props => {
</View> </View>
)} )}
{item.status === 'Chờ phê duyệt' && ( {item.status === 'Chờ phê duyệt' && (
<View style={{alignItems: 'flex-end'}}> <View style={styles.buttonContainer}>
<Button <Button
title="Huỷ" title="Huỷ"
onPress={() => {}} onPress={() => {}}
...@@ -205,23 +135,11 @@ const AbsenceListByCourseView = props => { ...@@ -205,23 +135,11 @@ const AbsenceListByCourseView = 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={styles.summaryContainer}>
<Text <Text style={[styles.text, styles.summaryTitle]}>
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
Nghỉ / Bù / Tổng Nghỉ / Bù / Tổng
</Text> </Text>
<Text <Text style={[styles.text, styles.summaryValue]}>
style={[
styles.text,
{fontSize: 11, fontWeight: 400, fontFamily: R.fonts.fontRegular},
]}>
{item.rest} / {item.compensate} / {item.total} {item.rest} / {item.compensate} / {item.total}
</Text> </Text>
</View> </View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment