Skip to content

A
AppUms_Lecturer
Commit 89bcaa81 by tungnq
Options

TODO: Đã hoàn thiện giao diện lịch báo nghỉ theo học phần

parent 05fb9e37
Showing with 231 additions and 19 deletions
src/assets/colors.js
......@@ -22,6 +22,7 @@ const colors = {
brown: 'rgba(254, 184, 91, 0.55)',
green: 'rgba(0, 255, 21, 1)',
green1: 'rgb(9, 193, 25)',
red: 'rgba(255, 47, 48, 1)',
......
src/routers/StackNavigation.js
......@@ -24,7 +24,7 @@ function MyStack(props) {
headerStatusBarHeight: 0,
}}
headerMode={'none'}
initialRouteName={ScreenName.REGISTERABSENCE}>
initialRouteName={ScreenName.ABSENCELISTBYCOURSE}>
<Stack.Screen name={ScreenName.HOMESCREEN} component={Home} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen name={ScreenName.DETAILNOTIFICATION} component={NotificationDetail} />
......
src/screens/list_rest_report/detail/index.js
import React from 'react';
import React, { useState } from 'react';
import {Text, View, StyleSheet} from 'react-native';
import AbsenceListByCourseView from './view';
const AbsenceListByCourse = (props) => {
const [item, setItem] = useState({
rest: 5,
compensate: 0,
total: 25,
});
const [listData, setDataList] = useState([
{
id:1,
date:'2024-01-01',
status:'Đã xác nhận',
dayOfWeek:'Thứ 2',
periods:[
{
id:1,
time:'6',
},
{
id:2,
time:'7',
},
{
id:3,
time:'8',
},
{
id:4,
time:'9',
}
],
dateStudy:'30/07/2025',
location:'Phòng B2.12',
teacher:'Nguyễn Minh Đức',
note:'',
},
{
id:2,
date:'2024-01-01',
status:'Chờ phê duyệt',
dayOfWeek:'Thứ 2',
periods:[
{
id:1,
time:'6',
},
{
id:2,
time:'7',
},
{
id:3,
time:'8',
},
{
id:4,
time:'9',
}
],
dateStudy:'30/07/2025',
location:'Phòng B2.12',
teacher:'',
note:'',
},
])
return (
<AbsenceListByCourseView />
<AbsenceListByCourseView
item={item}
listData={listData}
/>
);
};
......
src/screens/list_rest_report/detail/style.js
import { StyleSheet, Text, View } from 'react-native'
import R from '../../../assets/R';
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:R.colors.white
},
body:{
flex:1,
backgroundColor:R.colors.white
},
text:{
fontSize:R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
color:R.colors.black,
},
card:{
borderRadius:10,
marginVertical:10,
backgroundColor:R.colors.white,
shadowColor:R.colors.black,
shadowOffset:{width:0,height:2},
shadowOpacity:Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius:5,
elevation:Platform.OS === 'ios' ? 1 : 2,
marginHorizontal:15,
}
})
export default styles
\ No newline at end of file
src/screens/list_rest_report/detail/view.js
import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
import {Text, View, TouchableOpacity, StyleSheet, FlatList} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import R from '../../../assets/R';
import Button from '../../../components/Button';
const AbsenceListByCourseView = props => {
const {item, listData} = props;
const getColor = status => {
switch (status) {
case 'Đã xác nhận':
return R.colors.green1;
case 'Chờ phê duyệt':
return R.colors.blue;
}
};
const renderItem = ({item}) => {
return (
<View style={styles.card}>
<View
style={{
backgroundColor: R.colors.white,
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
}}>
<View style={{borderTopRightRadius:10, borderTopLeftRadius:10, backgroundColor:getColor(item.status)}}>
<Text style={[styles.text, {fontSize: R.sizes.sm, paddingHorizontal:10, paddingVertical:2, color:R.colors.white , fontWeight:'bold', fontFamily:R.fonts.fontMedium,}]}>
<Text style={{fontSize: R.sizes.sm ,color:R.colors.white}}>{item.status}</Text>
</Text>
</View>
</View>
<View style={{paddingHorizontal:10, paddingTop:3, paddingBottom:10}}>
{/* Row 1 */}
<View
style={{
flexDirection: 'row',
}}>
<View style={{flex: 1}}>
<Text style={[styles.text, {fontSize: 11}]}>
Ngày báo nghỉ: {item.date}
</Text>
</View>
{/* <View style={{flex: 1}}>
<Text style={[styles.text, {fontSize: R.sizes.sm}]}>
Tình trạng: <Text style={{color: getColor(item.status)}}>{item.status}</Text>
</Text>
</View> */}
</View>
{/* Row 2 */}
<View>
<Text style={[styles.text, {fontSize:11}]}>
Thời gian nghỉ:{item.dayOfWeek} - Tiết:{' '}
{item.periods.map((item, index) => {
return <Text key={index}>{item.time},</Text>;
})}{' '}
- Ngày:{item.dateStudy}
</Text>
</View>
{/* Row 3 */}
<View style={{}}>
<Text style={[styles.text, {fontSize:11}]}>Địa điểm: {item.location}</Text>
</View>
{/* Row 4 */}
<View style={{}}>
<Text style={[styles.text, {fontSize:11}]}>Giảng viên thay thế: {item.teacher}
</Text>
</View>
{/* Row 5 */}
<View style={{}}>
<Text style={[styles.text, {fontSize:11}]}>Ghi chú: {item.note}</Text>
</View>
{
item.status === 'Đã xác nhận' && (
<View style={{alignItems:'flex-end'}}>
<Button
title='Báo bù'
onPress={()=>{}}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
height={25}
width={90}
borderRadius={15}
fontSize={11}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
/>
</View>
)
}
{
item.status === 'Chờ phê duyệt' && (
<View style={{alignItems:'flex-end'}}>
<Button
title='Huỷ'
onPress={()=>{}}
backgroundColor={R.colors.brown}
textColor={R.colors.white}
height={25}
width={90}
borderRadius={15}
fontSize={11}
fontWeight={'600'}
fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
/>
</View>
)
}
</View>
</View>
);
};
const AbsenceListByCourseView = (props) => {
const { } = props;
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity>
<Text>AbsenceListByCourse</Text>
</TouchableOpacity>
<View style={styles.container}>
<Header title={'ATTT2024.1'} isBack />
<View style={styles.body}>
<View style={{alignItems: 'center', marginTop:10}}>
<Text style={[styles.text]}>Nghỉ / Bù / Tổng</Text>
<Text style={[styles.text]}>
{item.rest} / {item.compensate} / {item.total}
</Text>
</View>
<FlatList
data={listData || []}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
vertical
keyExtractor={(item, index) => `${index}`}
/>
</View>
</View>
);
};
export default AbsenceListByCourseView;
const styles = StyleSheet.create({})
\ No newline at end of file
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