Skip to content

A
AppUms_Lecturer
Commit 5345fd17 by tungnq
Options

TODO: Đã hoàn thiện giao diện cơ bản của bảng lịch học đang bổ sung check box

parent fe74061b
Showing with 347 additions and 219 deletions
src/screens/compensate/register/index.js
...@@ -9,123 +9,117 @@ const CompensateRegister = (props) => { ...@@ -9,123 +9,117 @@ const CompensateRegister = (props) => {
{ {
date: 'Thứ 2\n28/07/2025', date: 'Thứ 2\n28/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)' }, { period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 2, percent: '100%', code: '(24/24)' }, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', code: '(24/24)' }, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', code: '(24/24)' }, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', code: '(24/24)' }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', code: '(24/24)' }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)' }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)' }, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', code: '(24/24)' }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)' }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)' }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)' }, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', code: '(24/24)' }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)' }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)' } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] },
},
{ {
date: 'Thứ 3\n29/07/2025', date: 'Thứ 3\n29/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)', available: true }, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', code: '(24/24)', available: true }, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', code: '(24/24)', available: true }, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', code: '(24/24)', available: true }, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', code: '(24/24)', available: true }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', code: '(24/24)', available: true }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)', available: true }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)', available: true }, { period: 8, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 9, percent: '100%', code: '(24/24)', available: true }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)', available: true }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)', available: true }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)', available: true }, { period: 12, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 13, percent: '100%', code: '(24/24)', available: true }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)', available: true }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)', available: true } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] },
},
{ {
date: 'Thứ 4\n30/07/2025', date: 'Thứ 4\n30/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)' }, { period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 2, percent: '100%', code: '(24/24)' }, { period: 2, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 3, percent: '100%', code: '(24/24)' }, { period: 3, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 4, percent: '100%', code: '(24/24)' }, { period: 4, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 5, percent: '100%', code: '(24/24)' }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', code: '(24/24)' }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)' }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)' }, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', code: '(24/24)' }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)' }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)' }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)' }, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', code: '(24/24)' }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)' }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)' } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] },
},
{ {
date: 'Thứ 5\n31/07/2025', date: 'Thứ 5\n31/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)', available: true }, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', code: '(24/24)', available: true }, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', code: '(24/24)', available: true }, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '0%', code: '(0/24)', available: true }, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '0%', code: '(0/24)', available: true }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '0%', code: '(0/24)', available: true }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)', available: true }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)', available: true }, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', code: '(24/24)', available: true }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)', available: true }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)', available: true }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)', available: true }, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', code: '(24/24)', available: true }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)', available: true }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)', available: true } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] },
},
{ {
date: 'Thứ 6\n01/08/2025', date: 'Thứ 6\n01/08/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)' }, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', code: '(24/24)' }, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', code: '(24/24)' }, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', code: '(24/24)' }, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', code: '(24/24)' }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', code: '(24/24)' }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)' }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)' }, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', code: '(24/24)' }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)' }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)' }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)' }, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', code: '(24/24)' }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)' }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)' } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] },
},
{ {
date: 'Thứ 7\n02/08/2025', date: 'Thứ 7\n02/08/2025',
periods: [ periods: [
{ period: 1, percent: '100%', code: '(24/24)' }, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', code: '(24/24)' }, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', code: '(24/24)' }, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', code: '(24/24)' }, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', code: '(24/24)' }, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', code: '(24/24)' }, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', code: '(24/24)' }, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', code: '(24/24)' }, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', code: '(24/24)' }, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', code: '(24/24)' }, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', code: '(24/24)' }, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', code: '(24/24)' }, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', code: '(24/24)' }, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', code: '(24/24)' }, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', code: '(24/24)' } { period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] ] }
}
]; ];
......
src/screens/compensate/register/style.js
import { StyleSheet, Text, View } 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
const width_first = 100;
//B2: Xác định chiều rộng của 15 cột tiếp theo
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
const period_count = 15;
//B4: Xác định chiều rộng của bảng
const total_width_table = width_first + (width_second * period_count);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container:{
flex:1, flex:1,
...@@ -29,6 +37,13 @@ container:{ ...@@ -29,6 +37,13 @@ container:{
}, },
//Header bảng lịch //Header bảng lịch
tableContainer:{
marginTop:15,
borderWidth:1,
borderColor:R.colors.gray,
width:total_width_table,
},
headerRow: { headerRow: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
...@@ -43,7 +58,8 @@ container:{ ...@@ -43,7 +58,8 @@ container:{
color: R.colors.black, color: R.colors.black,
}, },
dateColumn: { dateColumn: {
minHeight: 40, height: 40,
width:width_first,
paddingHorizontal: 10, paddingHorizontal: 10,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -52,13 +68,65 @@ container:{ ...@@ -52,13 +68,65 @@ container:{
borderRightColor:R.colors.gray, borderRightColor:R.colors.gray,
}, },
periodColumn: { periodColumn: {
minHeight: 40, height: 40,
paddingHorizontal: 10, width:width_second,
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:{
width: width_first,
minHeight: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.white,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
periodBody:{
width: width_second,
padding:5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.white,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
dataRow: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
minHeight: 50,
},
periodCell: {
padding: 2,
alignItems: 'center',
justifyContent: 'center',
minHeight: 50,
width: '100%',
},
dateText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
percentText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
codeText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
}) })
export default styles export default styles
\ No newline at end of file
src/screens/compensate/register/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, ScrollView} from 'react-native'; import {
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';
...@@ -7,142 +13,201 @@ import R from '../../../assets/R'; ...@@ -7,142 +13,201 @@ 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';
import CheckBox from '../../../components/CheckBox';
const CompensateRegisterView = props => { const CompensateRegisterView = props => {
const { const {isShow, setShowSchedule, scheduleData} = props;
isShow,
setShowSchedule, const getCheckColor = (item) => {
scheduleData, console.log(item?.totalSession);
} = props; if ( item?.breakTime=== item?.totalSession && item?.percent === '100%') {
return R.colors.blue;
}
return R.colors.red;
};
const handleToggleSchedule = () => { const handleToggleSchedule = () => {
setShowSchedule(prevState => !prevState); setShowSchedule(prevState => !prevState);
}; };
//Header Lịch học //Header Lịch học
const renderHeaderSchedule = () =>{ const renderHeaderSchedule = () => {
return( return (
<View style= {styles.headerRow}> <View style={styles.headerRow}>
<View style={[styles.dateColumn, {minWidth: 80}]}>
<View style={styles.dateColumn}>
<Text style={styles.headerText}>Thứ / Tiết</Text> <Text style={styles.headerText}>Thứ / Tiết</Text>
</View> </View>
{Array.from({length: 15}, (_, i) => ( {Array.from({length: 15}, (_, i) => (
<View key={i} style={styles.periodColumn}> <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>
))} ))}
</View>
);
};
//Render một dòng của bảng lịch
const renderRow = (dayData, index) => {
return (
<View key={index} style={styles.dataRow}>
<View style={styles.dateBody}>
<Text
style={[
styles.dateText,
{textAlign: 'center', paddingHorizontal: 2},
]}>
{dayData.date}
</Text>
</View> </View>
)
}
const renderSchedule = (item) =>{ {dayData.periods.map((period, periodIndex) => (
<View key={periodIndex} style={styles.periodBody}>
<View
style={[
styles.periodCell,
period.available && styles.availableCell,
]}>
<CheckBox
size={20}
checked={period.available}
/>
<View style={{flexDirection:'row'}}>
<Text
style={[
styles.percentText,
period.available && styles.availableText,
{color:getCheckColor(period)}
]}>
{period.percent}
</Text>
<Text
style={[
styles.codeText,
{color:getCheckColor(period), marginLeft:3},
period.available && styles.availableText,
]}>
({period.breakTime}/{period.totalSession})
</Text>
</View>
</View>
</View>
))}
</View>
);
};
const renderSchedule = item => {
if (!isShow) return null; if (!isShow) return null;
return( return (
<ScrollView horizontal style={{marginTop:15}}> <View style={styles.tableContainer}>
{renderHeaderSchedule()} {renderHeaderSchedule()}
</ScrollView> {scheduleData.map((dayData, index) => renderRow(dayData, index))}
) </View>
} );
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Đăng kí báo bù'} isBack /> <Header title={'Đăng kí báo bù'} isBack />
<ScrollView> <ScrollView>
<View style={styles.body}> <View style={styles.body}>
<View style={styles.containerInput}> <View style={styles.containerInput}>
<TextField <TextField
title={'Học kì'} title={'Học kì'}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
backgroundColor={R.colors.gray} backgroundColor={R.colors.gray}
required required
fontSizeTitle={R.sizes.sm} fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
width={'48%'} width={'48%'}
/> />
<View style={styles.sizedBox}></View> <View style={styles.sizedBox}></View>
<TextField <TextField
title={'Năm học'} title={'Năm học'}
color={R.colors.black} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
backgroundColor={R.colors.gray} backgroundColor={R.colors.gray}
required required
fontSizeTitle={R.sizes.sm} fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} containerBackgroundColor={R.colors.white}
width={'48%'} 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> </View>
<Dropdown title={'Giảng viên thay thế'} /> <View style={styles.containerInput}>
</View> <TextField
<View style={styles.containerDropDown}> title={'Mã CBGV'}
<View style={{flexDirection: 'row'}}> color={R.colors.black}
<Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo cần bù </Text> fontSize={R.sizes.sm}
<Text style={{color: R.colors.red}}>*</Text> required
backgroundColor={R.colors.gray}
fontSizeTitle={R.sizes.sm}
width={'100%'}
containerBackgroundColor={R.colors.white}
/>
</View> </View>
<Dropdown title={'Lịch báo cần bù'} /> <View style={styles.containerDropDown}>
</View> <View style={{flexDirection: 'row'}}>
<View style={styles.containerInput}> <Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
<TextField Mã lớp{' '}
title={'Số tiết đã nghỉ'} </Text>
color={R.colors.black} <Text style={{color: R.colors.red}}>*</Text>
fontSize={R.sizes.sm} </View>
backgroundColor={R.colors.white} <Dropdown title={'Giảng viên thay thế'} />
fontSizeTitle={R.sizes.sm} </View>
containerBackgroundColor={R.colors.white} <View style={styles.containerDropDown}>
width={'38%'} <View style={{flexDirection: 'row'}}>
/> <Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
<View style={styles.sizedBox}></View> Lịch báo cần bù{' '}
<TextField </Text>
title={'Ngày học bù'} <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} color={R.colors.black}
fontSize={R.sizes.sm} fontSize={R.sizes.sm}
backgroundColor={R.colors.white} titleFontSize={R.sizes.sm}
required containerMarginBottom={15}
fontSizeTitle={R.sizes.sm}
containerBackgroundColor={R.colors.white} 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> <View style={styles.btnRegister}>
<Button
{renderSchedule()} 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>
</View> <ScrollView horizontal>{renderSchedule()}</ScrollView>
</View>
</ScrollView> </ScrollView>
</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