Skip to content

A
AppUms_Lecturer
Commit ce49f291 by tungnq
Options

TODO: Đã thêm chức năng check box

parent 5345fd17
Showing with 109 additions and 98 deletions
src/screens/compensate/register/index.js
...@@ -5,131 +5,137 @@ import CompensateRegisterView from './view'; ...@@ -5,131 +5,137 @@ import CompensateRegisterView from './view';
const CompensateRegister = (props) => { const CompensateRegister = (props) => {
const [isShow, setShowSchedule] = useState(false); const [isShow, setShowSchedule] = useState(false);
const scheduleData = [ const [scheduleData, setScheduleData] = useState([
{ {
date: 'Thứ 2\n28/07/2025', date: 'Thứ 2\n28/07/2025',
periods: [ periods: [
{ period: 1, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 1, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] }, ] },
{ {
date: 'Thứ 3\n29/07/2025', date: 'Thứ 3\n29/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 8, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 12, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] }, ] },
{ {
date: 'Thứ 4\n30/07/2025', date: 'Thứ 4\n30/07/2025',
periods: [ periods: [
{ period: 1, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 1, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 2, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 2, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 3, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 3, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 4, percent: '3%', totalSession: '24' , breakTime:'1'}, { period: 4, percent: '3%', totalSession: '24' , breakTime:'1', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] }, ] },
{ {
date: 'Thứ 5\n31/07/2025', date: 'Thứ 5\n31/07/2025',
periods: [ periods: [
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] }, ] },
{ {
date: 'Thứ 6\n01/08/2025', date: 'Thứ 6\n01/08/2025',
periods: [ periods: [
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] }, ] },
{ {
date: 'Thứ 7\n02/08/2025', date: 'Thứ 7\n02/08/2025',
periods: [ periods: [
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 1, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 2, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 3, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 4, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 5, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 6, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 7, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 8, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 9, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 10, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 11, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 12, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 13, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'}, { period: 14, percent: '100%', totalSession: '24' , breakTime:'24', available: false},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'} { period: 15, percent: '100%', totalSession: '24' , breakTime:'24', available: false}
] } ] }
]; ]);
const handleCheckboxChange = (dayIndex, periodIndex, newValue) => {
setScheduleData(prevData => {
const updatedData = [...prevData];
updatedData[dayIndex].periods[periodIndex].available = newValue;
return updatedData;
});
};
return ( return (
<CompensateRegisterView <CompensateRegisterView
isShow={isShow} isShow={isShow}
setShowSchedule={setShowSchedule} setShowSchedule={setShowSchedule}
scheduleData={scheduleData} scheduleData={scheduleData}
onCheckboxChange={handleCheckboxChange}
/> />
); );
}; };
......
src/screens/compensate/register/style.js
...@@ -110,8 +110,8 @@ container:{ ...@@ -110,8 +110,8 @@ container:{
}, },
dateText:{ dateText:{
fontSize: R.sizes.sm, fontSize: R.sizes.sm,
fontWeight: '500', fontWeight: '400',
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontRegular,
color: R.colors.black, color: R.colors.black,
}, },
percentText:{ percentText:{
......
src/screens/compensate/register/view.js
...@@ -15,7 +15,7 @@ import TextMulti from '../../../components/Input/TextMulti'; ...@@ -15,7 +15,7 @@ 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} = props; const {isShow, setShowSchedule, scheduleData, onCheckboxChange} = props;
const getCheckColor = (item) => { const getCheckColor = (item) => {
console.log(item?.totalSession); console.log(item?.totalSession);
...@@ -67,8 +67,13 @@ const CompensateRegisterView = props => { ...@@ -67,8 +67,13 @@ const CompensateRegisterView = props => {
period.available && styles.availableCell, period.available && styles.availableCell,
]}> ]}>
<CheckBox <CheckBox
size={20}
checked={period.available} checked={period.available}
value={period.available}
onValueChange={value => onCheckboxChange(index, periodIndex, value)}
size={20}
labelStyle={styles.label}
checkedColor={R.colors.main}
tickColor={R.colors.white}
/> />
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Text <Text
......
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