Skip to content

A
AppUms_Lecturer
Commit f5753f42 by tungnq
Options

TODO: Bổ sung chức năng lưu và xử lý dữ liệu cho màn hình đăng ký bù lịch dạy;… 

TODO: Bổ sung chức năng lưu và xử lý dữ liệu cho màn hình đăng ký bù lịch dạy; cải thiện giao diện và hiển thị thông tin phản hồi.
parent 1a4526ca
Showing with 284 additions and 175 deletions
src/screens/compensate/register/index.js
...@@ -3,7 +3,34 @@ import {Text, View, StyleSheet} from 'react-native'; ...@@ -3,7 +3,34 @@ import {Text, View, StyleSheet} from 'react-native';
import CompensateRegisterView from './view'; import CompensateRegisterView from './view';
const CompensateRegister = props => { const CompensateRegister = props => {
const initFormData ={
numberOfPeriods: '',
makeUpDay: '',
note: '',
}
const [isShow, setShowSchedule] = useState(false); const [isShow, setShowSchedule] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [formData, setFormData] = useState(initFormData);
const handleSave = async ()=>{
//1. Validate ở đây
//2.
try {
//Gọi api ở đây
console.log('Lưu thành công:',formData);
setFormData({...initFormData});
} catch (error) {
console.log('Xảy ra lỗi',error);
}finally{
setIsSaving(false);
}
}
const onChange = key => value => {
setFormData(prev => ({ ...prev, [key]: value }));
};
const [scheduleData, setScheduleData] = useState([ const [scheduleData, setScheduleData] = useState([
{ {
...@@ -676,12 +703,21 @@ const CompensateRegister = props => { ...@@ -676,12 +703,21 @@ const CompensateRegister = props => {
}); });
}; };
const handleToggle = () => {
setShowSchedule(prev => !prev);
};
return ( return (
<CompensateRegisterView <CompensateRegisterView
isShow={isShow} isShow={isShow}
isSaving={isSaving}
formData={formData}
handleToggle={handleToggle}
setShowSchedule={setShowSchedule} setShowSchedule={setShowSchedule}
scheduleData={scheduleData} scheduleData={scheduleData}
onCheckboxChange={handleCheckboxChange} onCheckboxChange={handleCheckboxChange}
onSave={handleSave}
onChange={onChange}
/> />
); );
}; };
......
src/screens/compensate/register/view.js
import React from 'react'; import React from 'react';
import { import {Text, View, ScrollView} from 'react-native';
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField'; import TextField from '../../../components/Input/TextField';
...@@ -15,7 +9,17 @@ import TextMulti from '../../../components/Input/TextMulti'; ...@@ -15,7 +9,17 @@ import TextMulti from '../../../components/Input/TextMulti';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import CheckBox from '../../../components/CheckBox'; import CheckBox from '../../../components/CheckBox';
const CompensateRegisterView = props => { const CompensateRegisterView = props => {
const {isShow, setShowSchedule, scheduleData, onCheckboxChange} = props; const {
isShow,
scheduleData,
onCheckboxChange,
handleToggle,
onSave,
onChange,
formData,
} = props;
console.log(props?.formData);
const getCheckColor = item => { const getCheckColor = item => {
if (item?.breakTime === item?.totalSession && item?.percent === '100%') { if (item?.breakTime === item?.totalSession && item?.percent === '100%') {
...@@ -24,9 +28,6 @@ const CompensateRegisterView = props => { ...@@ -24,9 +28,6 @@ const CompensateRegisterView = props => {
return R.colors.red; return R.colors.red;
}; };
const handleToggleSchedule = () => {
setShowSchedule(prevState => !prevState);
};
//Header Lịch học //Header Lịch học
const renderHeaderSchedule = () => { const renderHeaderSchedule = () => {
return ( return (
...@@ -46,7 +47,115 @@ const CompensateRegisterView = props => { ...@@ -46,7 +47,115 @@ const CompensateRegisterView = props => {
); );
}; };
//Render một dòng của bảng lịch const renderForm = () => {
return (
<View>
<View style={styles.containerInput}>
<TextField
title={'Học kì'}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.gray}
required
editable={false}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Năm học'}
color={R.colors.black}
fontSize={R.sizes.sm}
editable={false}
backgroundColor={R.colors.gray}
required
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Mã CBGV'}
color={R.colors.black}
editable={false}
fontSize={R.sizes.sm}
required
backgroundColor={R.colors.gray}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>Mã lớp </Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Giảng viên thay thế'} />
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
Lịch báo cần bù{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Lịch báo cần bù'} />
</View>
<View style={styles.containerInput}>
<TextField
title={'Số tiết đã nghỉ'}
value={formData.numberOfPeriods}
onChangeText={onChange('numberOfPeriods')}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.white}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'38%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Ngày học bù'}
color={R.colors.black}
value={formData.makeUpDay}
onChangeText={onChange('makeUpDay')}
fontSize={R.sizes.sm}
backgroundColor={R.colors.white}
required
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'58%'}
/>
</View>
<TextMulti
title={'Ghi chú'}
color={R.colors.black}
value={formData.note}
onChangeText={onChange('note')}
fontSize={R.sizes.sm}
titleFontSize={R.sizes.sm}
containerMarginBottom={15}
containerBackgroundColor={R.colors.white}
/>
<View style={styles.btnRegister}>
<Button
title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
textColor={R.colors.white}
onPress={handleToggle}
backgroundColor={R.colors.blue}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
/>
</View>
</View>
);
};
const renderRow = (dayData, index) => { const renderRow = (dayData, index) => {
return ( return (
<View key={index} style={styles.dataRow}> <View key={index} style={styles.dataRow}>
...@@ -112,124 +221,41 @@ const CompensateRegisterView = props => { ...@@ -112,124 +221,41 @@ const CompensateRegisterView = props => {
</View> </View>
); );
}; };
return (
<View style={styles.container}> const renderButton = () => {
<Header title={'Đăng kí báo bù'} isBack /> return (
<View style={styles.btnRegister2}>
<Button
title={'Đăng kí dạy bù'}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
onPress={() => onSave(formData)}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
/>
</View>
);
};
const renderBody = () => {
return (
<ScrollView showsVerticalScrollIndicator={false}> <ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body}> <View style={styles.body}>
<View style={styles.containerInput}> {renderForm()}
<TextField
title={'Học kì'}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.gray}
required
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Năm học'}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.gray}
required
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'48%'}
/>
</View>
<View style={styles.containerInput}>
<TextField
title={'Mã CBGV'}
color={R.colors.black}
fontSize={R.sizes.sm}
required
backgroundColor={R.colors.gray}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
Mã lớp{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Giảng viên thay thế'} />
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
Lịch báo cần bù{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Lịch báo cần bù'} />
</View>
<View style={styles.containerInput}>
<TextField
title={'Số tiết đã nghỉ'}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.white}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'38%'}
/>
<View style={styles.sizedBox}></View>
<TextField
title={'Ngày học bù'}
color={R.colors.black}
fontSize={R.sizes.sm}
backgroundColor={R.colors.white}
required
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white}
width={'58%'}
/>
</View>
<TextMulti
title={'Ghi chú'}
color={R.colors.black}
fontSize={R.sizes.sm}
titleFontSize={R.sizes.sm}
containerMarginBottom={15}
containerBackgroundColor={R.colors.white}
/>
<View style={styles.btnRegister}>
<Button
title={isShow ? 'Đóng' : 'Xem lịch rảnh SV'}
textColor={R.colors.white}
onPress={handleToggleSchedule}
backgroundColor={R.colors.blue}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
/>
</View>
<ScrollView showsHorizontalScrollIndicator={false} horizontal> <ScrollView showsHorizontalScrollIndicator={false} horizontal>
{renderSchedule()} {renderSchedule()}
</ScrollView> </ScrollView>
<View style={styles.btnRegister2}> {renderButton()}
<Button
title={'Đăng kí dạy bù'}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
onPress={() => {}}
fontSize={R.sizes.sm}
fontFamily={R.fonts.fontMedium}
height={35}
containerStyle={{paddingHorizontal: 15, borderRadius: 10}}
/>
</View>
</View> </View>
</ScrollView> </ScrollView>
);
};
return (
<View style={styles.container}>
<Header title={'Đăng kí báo bù'} isBack />
{renderBody()}
</View> </View>
); );
}; };
......
src/screens/feedback/detail/view.js
...@@ -2,8 +2,6 @@ import React from 'react'; ...@@ -2,8 +2,6 @@ import React from 'react';
import { import {
Text, Text,
View, View,
TouchableOpacity,
StyleSheet,
FlatList, FlatList,
ScrollView, ScrollView,
} from 'react-native'; } from 'react-native';
...@@ -12,7 +10,6 @@ import Header from '../../../components/Header/Header'; ...@@ -12,7 +10,6 @@ import Header from '../../../components/Header/Header';
import R from '../../../assets/R'; import R from '../../../assets/R';
const DetailFeedBackView = props => { const DetailFeedBackView = props => {
const {teacher, dataListQuestion} = props; const {teacher, dataListQuestion} = props;
console.log(props);
const renderTableRow = (item, index) => { const renderTableRow = (item, index) => {
return ( return (
...@@ -60,10 +57,9 @@ const DetailFeedBackView = props => { ...@@ -60,10 +57,9 @@ const DetailFeedBackView = props => {
); );
}; };
return ( const renderBodyHeader = () => {
<View style={styles.container}> return (
<Header title={'Đánh giá giảng dạy'} isBack /> <View>
<View style={styles.body}>
<Text style={styles.textSubTitle}> <Text style={styles.textSubTitle}>
Feedback của sinh viên lớp {teacher.class} môn {teacher.subject} đối Feedback của sinh viên lớp {teacher.class} môn {teacher.subject} đối
với giảng viên {teacher.teacher}. với giảng viên {teacher.teacher}.
...@@ -78,38 +74,52 @@ const DetailFeedBackView = props => { ...@@ -78,38 +74,52 @@ const DetailFeedBackView = props => {
vertical vertical
/> />
</View> </View>
</View>
);
};
<ScrollView const renderTable = () => {
showsVerticalScrollIndicator={false} return (
style={styles.tableContainer}> <ScrollView
<View style={styles.tableRow}> showsVerticalScrollIndicator={false}
<View style={styles.tableHeaderCellSmall}> style={styles.tableContainer}>
<Text style={styles.tableHeaderText}>#</Text> <View style={styles.tableRow}>
</View> <View style={styles.tableHeaderCellSmall}>
<View style={styles.tableHeaderCell}> <Text style={styles.tableHeaderText}>#</Text>
<Text style={styles.tableHeaderText}>Q1</Text> </View>
</View> <View style={styles.tableHeaderCell}>
<View style={styles.tableHeaderCell}> <Text style={styles.tableHeaderText}>Q1</Text>
<Text style={styles.tableHeaderText}>Q2</Text> </View>
</View> <View style={styles.tableHeaderCell}>
<View style={styles.tableHeaderCell}> <Text style={styles.tableHeaderText}>Q2</Text>
<Text style={styles.tableHeaderText}>Q3</Text> </View>
</View> <View style={styles.tableHeaderCell}>
<View style={styles.tableHeaderCell}> <Text style={styles.tableHeaderText}>Q3</Text>
<Text style={styles.tableHeaderText}>Q4</Text>
</View>
<View style={styles.tableHeaderCell}>
<Text style={styles.tableHeaderText}>GPA</Text>
</View>
<View style={styles.tableHeaderCell}>
<Text style={styles.tableHeaderText}>N.Xét</Text>
</View>
</View> </View>
<View style={styles.tableHeaderCell}>
<Text style={styles.tableHeaderText}>Q4</Text>
</View>
<View style={styles.tableHeaderCell}>
<Text style={styles.tableHeaderText}>GPA</Text>
</View>
<View style={styles.tableHeaderCell}>
<Text style={styles.tableHeaderText}>N.Xét</Text>
</View>
</View>
{dataListQuestion?.results?.map((item, index) => {dataListQuestion?.results?.map((item, index) =>
renderTableRow(item, index), renderTableRow(item, index),
)} )}
</ScrollView> </ScrollView>
);
};
return (
<View style={styles.container}>
<Header title={'Đánh giá giảng dạy'} isBack />
<View style={styles.body}>
{renderBodyHeader()}
{renderTable()}
</View> </View>
</View> </View>
); );
......
src/screens/feedback/index.js
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import FeedBackView from './view'; import FeedBackView from './view';
const FeedBack = props => { const FeedBack = props => {
......
src/screens/feedback/style.js
...@@ -61,6 +61,16 @@ const styles = StyleSheet.create({ ...@@ -61,6 +61,16 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
btnRight: {}, btnRight: {},
containerEmpty: {
alignItems: 'center',
justifyContent: 'center',
},
textEmpty: {
color: R.colors.red,
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
}
}); });
export default styles; export default styles;
src/screens/feedback/view.js
...@@ -15,6 +15,15 @@ import * as ScreenName from '../../routers/ScreenNames'; ...@@ -15,6 +15,15 @@ import * as ScreenName from '../../routers/ScreenNames';
const FeedBackView = props => { const FeedBackView = props => {
const {dataList, setDataList} = props; const {dataList, setDataList} = props;
const navigation = useNavigation(); const navigation = useNavigation();
const renderCard = () => {
return (
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard}>
<Text style={[styles.text, {fontFamily: R.fonts.fontMedium, fontWeight: '600'}]}>Học kỳ 2, Năm 2025</Text>
</TouchableOpacity>
</View>
);
};
const renderItem = ({item}) => { const renderItem = ({item}) => {
return ( return (
<TouchableOpacity <TouchableOpacity
...@@ -58,24 +67,43 @@ const FeedBackView = props => { ...@@ -58,24 +67,43 @@ const FeedBackView = props => {
</TouchableOpacity> </TouchableOpacity>
); );
}; };
return (
<View style={styles.container}> const renderList = () => {
<Header title={'Đánh giá giảng dạy'} isBack /> return (
<FlatList
data={dataList || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
);
};
const renderItemEmpty = () => {
return (
<View style={styles.containerEmpty}>
<Image source={R.images.icNoData} maxWidth={50} maxHeight={50} />
<Text style={styles.textEmpty}>Không có dữ liệu</Text>
</View>
);
};
const renderBody = () => {
return (
<View style={styles.body}> <View style={styles.body}>
<View style={styles.card}> {renderCard()}
<TouchableOpacity style={styles.btnCard}> <View style={{flex: 1, justifyContent: 'center'}}>
<Text style={styles.text}>Học kỳ 2, Năm 2025</Text> {dataList.length === 0 ? renderItemEmpty() : renderList()}
</TouchableOpacity>
</View> </View>
<FlatList
data={dataList || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
</View> </View>
);
};
return (
<View style={styles.container}>
<Header title={'Đánh giá giảng dạy'} isBack />
{renderBody()}
</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