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 RegisterAbsenceView from './view';
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;
src/screens/list_rest_report/add/style.js
import {StyleSheet, Text, View} from 'react-native';
import R from '../../../assets/R';
const styles = StyleSheet.create({
container: {
flex: 1,
......@@ -44,5 +45,41 @@ const styles = StyleSheet.create({
borderWidth: 1,
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;
src/screens/list_rest_report/add/view.js
import React from 'react';
import React, { useState } from 'react';
import {
Text,
View,
......@@ -15,150 +15,160 @@ import R from '../../../assets/R';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import TextMulti from '../../../components/Input/TextMulti';
import Button from '../../../components/Button';
const RegisterAbsenceView = props => {
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 (
<View style={styles.container}>
<Header title={'Đăng ký báo nghỉ'} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
<View style={{marginBottom: 35}}>
<View style={styles.marginBottom35}>
<View style={styles.containerInput}>
<View style={{flex: 1}}>
<View style={styles.flexOne}>
<TextField
title={'Học kỳ'}
required
value={semester}
onChangeText={setSemester}
backgroundColor={R.colors.gray}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
placeholder="Nhập học kỳ"
editable={false}
/>
</View>
<View style={{flex: 0.1}}></View>
<View style={{flex: 1}}>
<View style={styles.flexSpacer}></View>
<View style={styles.flexOne}>
<TextField
title={'Năm học'}
required
value={academicYear}
onChangeText={setAcademicYear}
backgroundColor={R.colors.gray}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
placeholder="Nhập năm học"
editable={false}
/>
</View>
</View>
<TextField
title={'Mã CBGV'}
required
value={teacherCode}
onChangeText={setTeacherCode}
backgroundColor={R.colors.gray}
color={R.colors.black}
fontSize={R.sizes.sm}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
placeholder="Nhập mã CBGV"
editable={false}
/>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.rowLayout}>
<Text style={[styles.txtSubtitle, styles.titleText]}>
Mã lớp{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
<Text style={styles.requiredText}>*</Text>
</View>
<Dropdown title={'Mã lớp '} />
<Dropdown
title={'Mã lớp'}
selectedValue={selectedClass}
onValueChange={setSelectedClass}
/>
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.rowLayout}>
<Text style={[styles.txtSubtitle, styles.titleText]}>
Lịch báo nghỉ{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
<Text style={styles.requiredText}>*</Text>
</View>
<Dropdown title={'Lịch báo nghỉ '} />
<Dropdown
title={'Lịch báo nghỉ'}
selectedValue={selectedSchedule}
onValueChange={setSelectedSchedule}
/>
</View>
<TextMulti
title={'Lý do nghỉ'}
required
value={reason}
onChangeText={setReason}
color={R.colors.black}
fontSize={R.sizes.sm}
titleFontSize={R.sizes.sm}
containerBackgroundColor={R.colors.white}
containerMarginTop={15}
placeholder="Nhập lý do nghỉ"
/>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.rowLayout}>
<Text style={[styles.txtSubtitle, styles.titleText]}>
Giảng viên thay thế
</Text>
<Text style={{color: R.colors.red}}>*</Text>
<Text style={styles.requiredText}>*</Text>
</View>
<Dropdown title={'Giảng viên thay thế'} />
<Dropdown
title={'Giảng viên thay thế'}
selectedValue={selectedSubstituteTeacher}
onValueChange={setSelectedSubstituteTeacher}
/>
</View>
<View style={{marginTop: 15}}>
<Text
style={[
styles.txtSubtitle,
{
marginBottom: 5,
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.marginTop15}>
<Text style={[styles.txtSubtitle, styles.titleText]}>
Minh chứng
</Text>
<TouchableOpacity style={styles.cardDocument}>
<TouchableOpacity
style={styles.cardDocument}
onPress={() => {
// TODO: Implement document picker
console.log('Open document picker');
}}
>
<Image
source={R.images.icDocument}
style={{width: 30, height: 30}}
resizeMode="contain"
/>
<Text
style={[
styles.txtSubtitle,
{
color: R.colors.blue,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
},
]}>
Thêm tài liệu
<Text style={[styles.txtSubtitle, styles.documentText]}>
{selectedDocument ? selectedDocument.name : 'Thêm tài liệu'}
</Text>
</TouchableOpacity>
</View>
<Button
title={'Đăng kí'}
title={'Đăng ký'}
textColor={R.colors.white}
onPress={() => {}}
onPress={onSubmit}
backgroundColor={R.colors.blue}
fontSize={R.sizes.sm}
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';
const styles = StyleSheet.create({
container: {
flex: 1,
......@@ -17,7 +18,6 @@ const styles = StyleSheet.create({
},
card: {
borderRadius: 10,
marginVertical: 10,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
......@@ -27,5 +27,73 @@ const styles = StyleSheet.create({
elevation: Platform.OS === 'ios' ? 1 : 2,
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;
src/screens/list_rest_report/detail/view.js
......@@ -3,7 +3,6 @@ import {
Text,
View,
TouchableOpacity,
StyleSheet,
FlatList,
LogBox,
} from 'react-native';
......@@ -11,8 +10,12 @@ import styles from './style';
import Header from '../../../components/Header/Header';
import R from '../../../assets/R';
import Button from '../../../components/Button';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../../routers/ScreenNames';
const AbsenceListByCourseView = props => {
const {item, listData} = props;
const navigation = useNavigation();
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
const getColor = status => {
......@@ -23,83 +26,37 @@ const AbsenceListByCourseView = props => {
return R.colors.blue;
}
};
const renderItem = ({item}) => {
return (
<View style={styles.card}>
<View
style={{
backgroundColor: R.colors.white,
borderTopRightRadius: 10,
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}}>
<View style={styles.statusHeaderContainer}>
<View style={[styles.statusHeader, {backgroundColor: getColor(item.status)}]}>
<Text style={[styles.text, styles.statusText]}>
<Text style={styles.statusTextInner}>
{item.status}
</Text>
</Text>
</View>
</View>
<View style={{paddingHorizontal: 10, paddingTop: 3, paddingBottom: 10}}>
<View style={styles.cardContent}>
{/* Row 1 */}
<View
style={{
flexDirection: 'row',
}}>
<View style={{flex: 1}}>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.row}>
<View style={styles.rowFlex}>
<Text style={[styles.text, styles.labelText]}>
Ngày báo nghỉ: {''}
<Text
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
<Text style={[styles.text, styles.valueText]}>
{item.date}
</Text>
</Text>
</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>
{/* Row 2 */}
<View>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<Text style={[styles.text, styles.labelText]}>
Thời gian nghỉ:{' '}
<Text
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
<Text style={[styles.text, styles.valueText]}>
{item.dayOfWeek} - Tiết:{' '}
{item.periods.map((item, index) => {
return <Text key={index}>{item.time},</Text>;
......@@ -109,64 +66,37 @@ const AbsenceListByCourseView = props => {
</Text>
</View>
{/* Row 3 */}
<View style={{}}>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View>
<Text style={[styles.text, styles.labelText]}>
Địa điểm:
<Text
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
<Text style={[styles.text, styles.valueText]}>
{item.location}
</Text>
</Text>
</View>
{/* Row 4 */}
<View style={{}}>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View>
<Text style={[styles.text, styles.labelText]}>
Giảng viên thay thế:
<Text
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
<Text style={[styles.text, styles.valueText]}>
{item.teacher}
</Text>
</Text>
</View>
{/* Row 5 */}
<View style={{}}>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View>
<Text style={[styles.text, styles.labelText]}>
Ghi chú:
<Text
style={[styles.text, {fontSize: R.fontsize.fontSizeContent}]}>
<Text style={[styles.text, styles.valueText]}>
{item.note}
</Text>
</Text>
</View>
{item.status === 'Đã xác nhận' && (
<View style={{alignItems: 'flex-end'}}>
<View style={styles.buttonContainer}>
<Button
title="Báo bù"
onPress={() => {}}
onPress={() => navigation.navigate(SCREENNAME.LISTMAKEUPCLASSES)}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
height={25}
......@@ -180,7 +110,7 @@ const AbsenceListByCourseView = props => {
</View>
)}
{item.status === 'Chờ phê duyệt' && (
<View style={{alignItems: 'flex-end'}}>
<View style={styles.buttonContainer}>
<Button
title="Huỷ"
onPress={() => {}}
......@@ -205,23 +135,11 @@ const AbsenceListByCourseView = props => {
<View style={styles.container}>
<Header title={'ATTT2024.1'} isBack />
<View style={styles.body}>
<View style={{alignItems: 'center', marginTop: 10}}>
<Text
style={[
styles.text,
{
fontSize: R.fontsize.fontSizeContent,
fontWeight: 600,
fontFamily: R.fonts.fontMedium,
},
]}>
<View style={styles.summaryContainer}>
<Text style={[styles.text, styles.summaryTitle]}>
Nghỉ / Bù / Tổng
</Text>
<Text
style={[
styles.text,
{fontSize: 11, fontWeight: 400, fontFamily: R.fonts.fontRegular},
]}>
<Text style={[styles.text, styles.summaryValue]}>
{item.rest} / {item.compensate} / {item.total}
</Text>
</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