Commit 1a4526ca by tungnq

TODO: Bổ sung thêm trạng thái không có dữ liệu ở màn hình báo bù lịch dạy

parent c5884469
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,
backgroundColor: R.colors.white,
},
body: {
flex: 1,
},
// Card styles
cardWithMargin: {
marginHorizontal: 15,
marginTop: 10,
borderRadius: 10,
},
containerCard: {
marginHorizontal: 15,
marginVertical: 5,
borderRadius: 10,
},
card: {
......@@ -15,7 +24,6 @@ const styles = StyleSheet.create({
borderBottomStartRadius: 10,
paddingHorizontal: 10,
paddingVertical: 5,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {width: 0.5, height: 2},
......@@ -24,6 +32,7 @@ const styles = StyleSheet.create({
elevation: Platform.OS === 'ios' ? 1 : 2,
},
// Container styles for text rows
containerText: {
flexDirection: 'row',
alignItems: 'center',
......@@ -43,7 +52,14 @@ const styles = StyleSheet.create({
sizedBox: {
flex: 3,
},
containerSubText: {
flexDirection: 'row',
marginBottom: 5,
},
containerSubTextItemLeft: {},
containerSubTextItemRight: {},
// Text styles
text: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
......@@ -51,12 +67,10 @@ const styles = StyleSheet.create({
color: R.colors.black,
textAlign: 'center',
},
containerSubText: {
flexDirection: 'row',
marginBottom: 5,
regularText: {
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
},
containerSubTextItemLeft: {},
containerSubTextItemRight: {},
textTitle: {
fontSize: R.sizes.md,
fontFamily: R.fonts.fontMedium,
......@@ -64,12 +78,32 @@ const styles = StyleSheet.create({
color: R.colors.blue,
marginHorizontal: 15,
},
label: {
textTitleWithMargin: {
marginVertical: 10,
},
// Status header styles
statusHeaderText: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.white,
marginHorizontal: 10,
marginVertical: 3,
},
statusText: {
color: R.colors.white,
},
// History card text styles
historyCardText: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
// Checkbox styles
checkboxContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
......@@ -79,6 +113,13 @@ const styles = StyleSheet.create({
width: '50%',
marginBottom: 15,
},
label: {
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
imageStyle: {},
});
export default styles;
......@@ -24,14 +24,12 @@ const DetailStudentView = props => {
};
const statusColor = getStatusColor(student.status);
const renderCard = () => {
return (
<View style={styles.container}>
<Header title={'Nguyễn Minh Đức - 2598671'} isBack />
<View style={styles.body}>
<View
style={[
styles.card,
{marginHorizontal: 15, marginTop: 10, borderRadius: 10},
styles.cardWithMargin,
]}>
<View style={styles.containerText}>
<View style={styles.containerTextItemLeft}>
......@@ -53,7 +51,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.date_student}
</Text>
......@@ -66,7 +64,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.tele_phone}
</Text>
......@@ -81,7 +79,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.gender}
</Text>
......@@ -94,7 +92,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.average_score}
</Text>
......@@ -110,7 +108,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.average_score}
</Text>
......@@ -125,7 +123,7 @@ const DetailStudentView = props => {
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.training_average_score}
</Text>
......@@ -151,102 +149,86 @@ const DetailStudentView = props => {
))}
</View>
</View>
<Text style={[styles.textTitle, {marginTop: 10}]}>
Lch s tình trng ca sinh viên
</Text>
)
}
const renderCardHistory = () =>{
return (
<View
style={[
styles.containerCard,
{backgroundColor: getStatusColor(student.status)},
]}>
<Text
style={[
{
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.white,
marginHorizontal: 10,
marginVertical: 3,
},
]}>
style={styles.statusHeaderText}>
Trng thái hc tp:{' '}
<Text style={[styles.text, {color: R.colors.white}]}>
<Text style={[styles.text, styles.statusText]}>
{student.status}
</Text>
</Text>
<View style={styles.card}>
<Text
style={[
{
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
style={styles.historyCardText}>
Hc k 2, Năm hc 2024
</Text>
<Text
style={[
{
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
style={styles.historyCardText}>
Ngày quyết định:{' '}
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.date_student}
</Text>
</Text>
<Text
style={[
{
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
style={styles.historyCardText}>
Lý do:{' '}
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.date_student}
</Text>
</Text>
<Text
style={[
{
fontSize: R.sizes.sm,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
]}>
style={styles.historyCardText}>
Ghi chú:{' '}
<Text
style={[
styles.text,
{fontFamily: R.fonts.fontRegular, fontWeight: '400'},
styles.regularText,
]}>
{student.date_student}
</Text>
</Text>
</View>
</View>
)
}
const renderBody = () => {
return (
<View style={styles.body}>
{renderCard()}
<Text style={[styles.textTitle, styles.textTitleWithMargin]}>
Lch s tình trng ca sinh viên
</Text>
{renderCardHistory()}
</View>
)
};
return (
<View style={styles.container}>
<Header title={'Nguyễn Minh Đức - 2598671'} isBack />
{renderBody()}
</View>
);
};
......
......@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 100,
marginHorizontal: 15,
marginVertical: 15,
marginVertical: 10,
backgroundColor: R.colors.white,
flexDirection: 'row',
height: 35,
......@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
padding: 0,
},
statusContainer: {
marginBottom: 15,
marginBottom: 10,
marginHorizontal: 15,
flexDirection: 'row',
justifyContent: 'space-around',
......@@ -98,8 +98,7 @@ const styles = StyleSheet.create({
height: 15,
marginHorizontal: 5,
},
containerList: {
},
containerList: {},
studentInfo: {
flex: 1,
flexDirection: 'row',
......
......@@ -4,41 +4,41 @@ import CompensateView from './view';
const Compensate = props => {
const [dataList, setDataList] = useState([
{id: 1, classCode: 'ATTT2024.1', rest: 5, compensate: 0, 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: 4, classCode: 'ATTT2024.4', rest: 3, compensate: 2, total: 25},
{id: 5, classCode: 'ATTT2024.5', 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: 3, classCode: 'ATTT2024.3', rest: 6, compensate: 0, 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: 6, classCode: 'CNTT2024.1', rest: 2, compensate: 1, 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: 9, classCode: 'CNTT2024.4', rest: 3, compensate: 1, total: 25},
{id: 10, classCode: 'CNTT2024.5', rest: 6, compensate: 0, 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: 8, classCode: 'CNTT2024.3', rest: 5, compensate: 0, 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: 11, classCode: 'KTPM2024.1', rest: 4, compensate: 1, 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: 14, classCode: 'KTPM2024.4', rest: 4, compensate: 0, total: 25},
{id: 15, classCode: 'KTPM2024.5', rest: 3, 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: 13, classCode: 'KTPM2024.3', rest: 5, 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: 16, classCode: 'HTTT2024.1', rest: 5, 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: 19, classCode: 'HTTT2024.4', rest: 4, compensate: 1, total: 25},
{id: 20, classCode: 'HTTT2024.5', 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: 18, classCode: 'HTTT2024.3', rest: 3, compensate: 2, 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: 21, classCode: 'KHMT2024.1', rest: 4, compensate: 0, 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: 24, classCode: 'KHMT2024.4', rest: 3, compensate: 1, total: 25},
{id: 25, classCode: 'KHMT2024.5', rest: 5, 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: 23, classCode: 'KHMT2024.3', rest: 6, compensate: 0, 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: 26, classCode: 'MMT2024.1', rest: 4, compensate: 1, 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: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
{id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, 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: 28, classCode: 'MMT2024.3', rest: 5, compensate: 0, total: 25},
// {id: 29, classCode: 'MMT2024.4', rest: 3, compensate: 2, total: 25},
// {id: 30, classCode: 'MMT2024.5', rest: 6, compensate: 0, total: 25},
]);
return <CompensateView dataList={dataList} />;
};
......
......@@ -13,8 +13,8 @@ const styles = StyleSheet.create({
card: {
borderRadius: 10,
padding: 5,
marginTop: 15,
marginBottom: 5,
marginTop: 10,
marginBottom: 10,
marginHorizontal: 15,
alignItems: 'center',
justifyContent: 'center',
......@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
shadowColor: R.colors.black,
shadowOffset: {width: 0.5, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
shadowRadius: 2,
elevation: Platform.OS === 'ios' ? 1 : 2,
},
btnCard: {
......@@ -73,6 +73,20 @@ const styles = StyleSheet.create({
padding: 5,
height: 35,
},
containerEmpty: {
alignItems: 'center',
},
textEmpty: {
color: R.colors.black,
fontSize: R.fontsize.fontSizeSubTitle,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
},
containerList:{
flex: 1,
justifyContent: 'center',
}
});
export default styles;
......@@ -72,10 +72,23 @@ const CompensateView = props => {
</TouchableOpacity>
);
};
const renderListClass = () => {
return (
<FlatList
data={dataList || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
);
};
const renderHeaderBody = () => {
return (
<View style={styles.container}>
<Header title={'Báo bù lịch dạy'} isBack />
<View style={styles.body}>
<View style={styles.card}>
<TouchableOpacity style={styles.btnCard}>
<Text
......@@ -91,13 +104,11 @@ const CompensateView = props => {
</Text>
</TouchableOpacity>
</View>
<FlatList
data={dataList || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
);
};
const renderButtonRegister = () => {
return (
<TouchableOpacity
style={styles.btnRegister}
onPress={() => navigation.navigate(SCREENNAME.REGISTERMAKEUP)}>
......@@ -105,7 +116,43 @@ const CompensateView = props => {
Đăng kí báo bù
</Text>
</TouchableOpacity>
);
};
const renderListEmpty = () =>{
return(
<View style={styles.containerEmpty}>
<View>
<Image
source={R.images.icNoData}
style={{width: 50, height: 50}}
resizeMode="contain"
/>
</View>
<Text style={[styles.text, {color: R.colors.red}]}>
Không có d liu
</Text>
</View>
)
};
const renderBody = () => {
return (
<View style={styles.body }>
{renderHeaderBody()}
<View style={styles.containerList}>
{dataList.length > 0 ? renderListClass() : renderListEmpty()}
</View>
{renderButtonRegister()}
</View>
);
};
return (
<View style={styles.container}>
<Header title={'Báo bù lịch dạy'} isBack />
{renderBody()}
</View>
);
};
......
......@@ -82,8 +82,8 @@ const styles = StyleSheet.create({
marginHorizontal: 15,
shadowOffset: {width: 0.5, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 5,
elevation: Platform.OS === 'ios' ? 1 : 5,
shadowRadius: 2,
elevation: Platform.OS === 'ios' ? 1 : 2,
marginBottom: 15,
},
cardItemTution: {
......
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