Skip to content

A
AppUms_Lecturer
Commit 122d682e by tungnq
Options

IMPORTANT: Đã dựng xong table màn danh sách lớp điểm danh

parent 76276564
Showing with 263 additions and 12 deletions
src/routers/StackNavigation.js
...@@ -44,7 +44,7 @@ function MyStack(props) { ...@@ -44,7 +44,7 @@ function MyStack(props) {
headerStatusBarHeight: 0, headerStatusBarHeight: 0,
}} }}
headerMode={'none'} headerMode={'none'}
initialRouteName={ScreenName.LISTSTUDENTROLLCALL}> initialRouteName={ScreenName.TABNAVIGATOR}>
<Stack.Screen name={ScreenName.HOMESCREEN} component={Home} /> <Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} /> <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} /> <Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
......
src/screens/roll_call/list_student_roll_call/index.js
import React from 'react'; import React, { useState } from 'react';
import ListStudentRollCallView from './view'; import ListStudentRollCallView from './view';
const ListStudentRollCall = (props) => { const ListStudentRollCall = (props) => {
const [refreshing, setRefreshing] = useState(false);
const [studentList, setStudentList] = useState([
{id: 1, studentCode: '08465', name: 'Nguyễn văn A', date: '05/08/2025', isPresent: true, note: ''},
{id: 2, studentCode: '08466', name: 'Trần thị B', date: '05/08/2025', isPresent: true, note: ''},
{id: 3, studentCode: '08467', name: 'Lê văn C', date: '05/08/2025', isPresent: false, note: 'Nghỉ không phép'},
{id: 4, studentCode: '08468', name: 'Phạm thị D', date: '05/08/2025', isPresent: true, note: ''},
{id: 5, studentCode: '08469', name: 'Hoàng văn E', date: '05/08/2025', isPresent: false, note: 'Nghỉ không phép'},
{id: 6, studentCode: '08470', name: 'Vũ thị F', date: '05/08/2025', isPresent: true, note: ''},
{id: 7, studentCode: '08471', name: 'Đỗ văn G', date: '05/08/2025', isPresent: true, note: ''},
{id: 8, studentCode: '08472', name: 'Bùi thị H', date: '05/08/2025', isPresent: false, note: 'Nghỉ không phép'},
{id: 9, studentCode: '08473', name: 'Ngô văn I', date: '05/08/2025', isPresent: true, note: ''},
{id: 10, studentCode: '08474', name: 'Đinh thị K', date: '05/08/2025', isPresent: true, note: ''},
]);
return ( return (
<ListStudentRollCallView /> <ListStudentRollCallView refreshing={refreshing} setRefreshing={setRefreshing} studentList={studentList} setStudentList={setStudentList} />
); );
}; };
......
src/screens/roll_call/list_student_roll_call/style.js
import { StyleSheet, Text, View } from 'react-native' import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React from 'react' import React from 'react'
import R from '../../../assets/R'
const {width, height} = Dimensions.get('window')
const FIRST_COLUMN = 80
const NAME_COLUMN = 180
const DATE_COLUMN = 100
const STATUS_COLUMN = 100
const NOTE_COLUMN = 350
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container:{ container:{
flex:1, flex:1,
...@@ -9,7 +16,115 @@ const styles = StyleSheet.create({ ...@@ -9,7 +16,115 @@ const styles = StyleSheet.create({
body:{ body:{
flex:1, flex:1,
backgroundColor:R.colors.white, backgroundColor:R.colors.white,
} paddingHorizontal:15,
paddingVertical:10,
},
textTitle:{
fontSize:R.fontsize.fontsSizeTitle,
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
color:R.colors.blue,
marginBottom:10,
},
summaryContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: R.colors.blue4,
padding: 10,
borderRadius: 8,
marginBottom: 15,
},
summaryText: {
fontSize: 14,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
summaryNumber: {
fontSize: 16,
fontWeight: '700',
fontFamily: R.fonts.fontBold,
},
tableContainer: {
flex: 1,
borderWidth:1,
borderColor: R.colors.gray3,
},
tableWrapper: {
minWidth: FIRST_COLUMN + NAME_COLUMN + DATE_COLUMN + STATUS_COLUMN + NOTE_COLUMN,
},
tableHeader: {
flexDirection: 'row',
backgroundColor: R.colors.blue2,
height: 50,
paddingVertical: 12,
paddingHorizontal: 8,
},
headerText: {
fontSize: 12,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
textAlign: 'center',
},
tableRow: {
flexDirection: 'row',
alignItems: 'center',
height: 60,
},
tableCell: {
height: 60,
paddingVertical: 10,
paddingHorizontal: 4,
borderRightWidth: 1,
borderRightColor: R.colors.gray3,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray3,
justifyContent: 'center',
alignItems: 'center',
},
cellText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
textAlign: 'center',
},
codeColumn: {
width: FIRST_COLUMN,
},
nameColumn: {
width: NAME_COLUMN,
textAlign: 'left',
},
dateColumn: {
width: DATE_COLUMN,
},
statusColumn: {
width: STATUS_COLUMN,
},
noteColumn: {
width: NOTE_COLUMN,
fontSize: 10,
},
statusContainer: {
alignItems: 'center',
justifyContent: 'center',
},
statusText: {
fontSize: 10,
fontFamily: R.fonts.fontMedium,
marginTop: 2,
textAlign: 'center',
},
noteInput: {
width: '100%',
minHeight: 40,
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
textAlign: 'left',
paddingHorizontal: 8,
paddingVertical: 4,
},
}) })
export default styles export default styles
\ No newline at end of file
src/screens/roll_call/list_student_roll_call/view.js
import React from 'react'; import React, {useState, useEffect} from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, StyleSheet, ScrollView, FlatList, RefreshControl, Switch, TextInput} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import R from '../../../assets/R';
const ListStudentRollCallView = props => { const ListStudentRollCallView = props => {
const {} = props; const {refreshing, setRefreshing, studentList, setStudentList} = props;
const onRefresh = () => {
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 1000);
};
const toggleAttendance = (studentId) => {
setStudentList(prevList =>
prevList.map(student => {
if (student.id === studentId) {
const newIsPresent = !student.isPresent;
// Auto-fill "nghỉ ko phép" when switching to absent if no custom note
const newNote = !newIsPresent && (!student.note || student.note === '')
? 'Nghỉ không phép'
: (newIsPresent ? '' : student.note);
return {...student, isPresent: newIsPresent, note: newNote};
}
return student;
})
);
};
const updateStudentNote = (studentId, note) => {
setStudentList(prevList =>
prevList.map(student =>
student.id === studentId
? {...student, note: note}
: student
)
);
};
const countAttendance = () => {
const present = studentList.filter(studentList => studentList.isPresent).length;
const absent = studentList.filter(studentList => !studentList.isPresent).length;
console.log(`Có mặt: ${present}, Vắng mặt: ${absent}`);
return {present, absent};
};
useEffect(() => {
countAttendance();
}, [studentList]);
const renderTableHeader = () => (
<View style={styles.tableHeader}>
<Text style={[styles.headerText, styles.codeColumn]}>Mã sv</Text>
<Text style={[styles.headerText, styles.nameColumn]}>Họ và tên</Text>
<Text style={[styles.headerText, styles.dateColumn]}>Ngày học</Text>
<Text style={[styles.headerText, styles.statusColumn]}>Trạng thái</Text>
<Text style={[styles.headerText, styles.noteColumn]}>Ghi chú</Text>
</View>
);
const renderStudentItem = ({item}) => (
<View style={styles.tableRow}>
<View style={[styles.tableCell, styles.codeColumn]}>
<Text style={styles.cellText}>{item.studentCode}</Text>
</View>
<View style={[styles.tableCell, styles.nameColumn]}>
<Text style={[styles.cellText, {textAlign: 'left'}]}>{item.name}</Text>
</View>
<View style={[styles.tableCell, styles.dateColumn]}>
<Text style={styles.cellText}>{item.date}</Text>
</View>
<View style={[styles.tableCell, styles.statusColumn, styles.statusContainer]}>
<Switch
value={item.isPresent}
onValueChange={() => toggleAttendance(item.id)}
trackColor={{false: R.colors.red, true: R.colors.green}}
thumbColor={item.isPresent ? R.colors.white : R.colors.white}
/>
<Text style={[styles.statusText, {color: item.isPresent ? R.colors.green : R.colors.red}]}>
{item.isPresent ? 'Có mặt' : 'Vắng mặt'}
</Text>
</View>
<View style={[styles.tableCell, styles.noteColumn]}>
<TextInput
style={styles.noteInput}
value={item.note || ''}
onChangeText={(text) => updateStudentNote(item.id, text)}
placeholder="Ghi chú..."
placeholderTextColor={R.colors.gray2}
multiline={true}
textAlignVertical="top"
/>
</View>
</View>
);
const {present, absent} = countAttendance();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Điểm danh lớp: ATTT2024.P1'} isBack /> <Header title={'Điểm danh lớp: ATTT2024.P1'} isBack />
<View style={styles.body}> <View style={styles.body}>
<Text style={styles.textTitle}>
Danh sách lớp
</Text>
<View style={styles.tableContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View style={styles.tableWrapper}>
{renderTableHeader()}
<FlatList
data={studentList}
renderItem={renderStudentItem}
keyExtractor={(item) => item.id.toString()}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={[R.colors.blue]}
progressViewOffset={50}
/>
}
showsVerticalScrollIndicator={false}
scrollEventThrottle={400}
refreshing={refreshing}
/>
</View>
</ScrollView>
</View>
</View> </View>
</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