Skip to content

A
AppUms_Student
Commit cc87980e by tungnq
Options

Tái cấu trúc giao diện đăng ký chứng chỉ và công nợ để cải thiện cấu trúc và kiểu dáng 

Cập nhật ListCertificateView để nâng cao khả năng đọc và bảo trì bằng cách tách phần hiển thị thân giao diện ra một hàm riêng.
Tái cấu trúc CertificateRegistrationView để tinh giản bố cục và cải thiện tính nhất quán của kiểu dáng.
Thêm các kiểu dáng mới cho màn hình đăng ký chứng chỉ và công nợ để nâng cao tính nhất quán của giao diện người dùng.
Cải thiện việc xử lý props và state trong thành phần DebtView để có hiệu suất tốt hơn.
Thực hiện các điều chỉnh về thiết kế đáp ứng (responsive design) trong các thành phần lịch học và công nợ.
Loại bỏ các kiểu dáng và import không sử dụng để dọn dẹp mã nguồn.
parent 1d3e037e
Showing with 770 additions and 708 deletions
src/components/Input/TextFieldCus.js
import React, { useRef } from 'react'; import React, {useRef} from 'react';
import { import {View, Text, TextInput, StyleSheet, Platform} from 'react-native';
View,
Text,
TextInput,
StyleSheet,
Platform,
} from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {HEIGHT} from '../../config/Functions';
const CustomTextInput = (props) => { const CustomTextInput = ({
const { title,
title, required,
placeholder, placeholder,
required, value,
value, onChangeText,
onChangeText, backgroundColor,
backgroundColor, // FUNCTIONALITY: Prop backgroundColor tùy chỉnh editable,
...restProps height,
} = props; width,
containerMarginVertical,
containerMarginHorizontal,
containerMarginBottom,
containerMarginTop,
containerBackgroundColor,
messageError,
color,
icon,
secureTextEntry,
fontSize,
onFocus,
...restProps
}) => {
const inputRef = useRef(null); const inputRef = useRef(null);
const renderMess = () => {
if (value && value.trim().length > 0) return `${title} không hợp lệ`;
return `Vui lòng nhập ${title ? title.toLowerCase() : messageError}`;
};
return ( return (
<View style={styles.container}> <View
style={{
width: width,
marginVertical: containerMarginVertical,
marginHorizontal: containerMarginHorizontal,
marginBottom: containerMarginBottom,
backgroundColor: containerBackgroundColor,
marginTop: containerMarginTop,
}}>
{/* FUNCTIONALITY: Title với sao đỏ nếu required */} {/* FUNCTIONALITY: Title với sao đỏ nếu required */}
{title && ( {title && (
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
...@@ -34,17 +54,31 @@ const CustomTextInput = (props) => { ...@@ -34,17 +54,31 @@ const CustomTextInput = (props) => {
)} )}
{/* FUNCTIONALITY: Input container với background tùy chỉnh */} {/* FUNCTIONALITY: Input container với background tùy chỉnh */}
<View style={[ <View
styles.inputContainer, style={[
backgroundColor && { backgroundColor } // NOTE: Chỉ apply backgroundColor khi có truyền vào styles.inputContainer,
]}> backgroundColor && {backgroundColor}, // NOTE: Chỉ apply backgroundColor khi có truyền vào
]}>
<TextInput <TextInput
ref={inputRef} ref={inputRef}
style={styles.input} style={{
height: HEIGHT(35),
color: color,
borderColor: R.colors.grayBorderInputTextHeader,
fontSize: fontSize,
paddingVertical: 5,
backgroundColor:
editable === false
? backgroundColor || R.colors.blue1 // khi disabled thì lấy màu xám
: backgroundColor, // khi enable thì lấy màu bạn truyền,
}}
placeholder={placeholder} placeholder={placeholder}
placeholderTextColor={R.colors.grey_100} placeholderTextColor={R.colors.grey_100}
value={value} value={value}
onChangeText={onChangeText} onChangeText={onChangeText}
editable={editable}
onFocus={onFocus}
autoCapitalize="none"
{...restProps} {...restProps}
/> />
</View> </View>
...@@ -55,8 +89,8 @@ const CustomTextInput = (props) => { ...@@ -55,8 +89,8 @@ const CustomTextInput = (props) => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
// FUNCTIONALITY: Container wrapper // FUNCTIONALITY: Container wrapper
container: { container: {
width: '100%', marginVertical: 5,
marginVertical: 5 backgroundColor: R.colors.red,
}, },
// UI/UX: Container cho title // UI/UX: Container cho title
...@@ -68,14 +102,14 @@ const styles = StyleSheet.create({ ...@@ -68,14 +102,14 @@ const styles = StyleSheet.create({
// UI/UX: Title text // UI/UX: Title text
title: { title: {
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterMedium,
fontWeight: '400', fontWeight: '600',
color: R.colors.black color: R.colors.black,
}, },
// UI/UX: Dấu sao đỏ bắt buộc // UI/UX: Dấu sao đỏ bắt buộc
required: { required: {
color: R.colors.red, color: R.colors.red,
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: '500', fontWeight: '500',
...@@ -88,17 +122,16 @@ const styles = StyleSheet.create({ ...@@ -88,17 +122,16 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderColor: R.colors.grey_200, borderColor: R.colors.grey_200,
paddingHorizontal: 15, paddingHorizontal: 15,
height: 35,
backgroundColor: R.colors.white,
}, },
// UI/UX: Input text styles // UI/UX: Input text styles
input: { input: {
fontSize: R.fontsize.fontsSize10, fontSize: R.fontsize.fontsSize10,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
fontWeight: '400', fontWeight: '400',
color: R.colors.black, // FIXME: Đổi từ grey_200 sang black để text rõ hơn color: R.colors.black, // FIXME: Đổi từ grey_200 sang black để text rõ hơn
padding: 0,
minHeight: 40,
}, },
}); });
......
src/config/Functions.js
...@@ -125,6 +125,11 @@ const {width, height} = Dimensions.get('window'); ...@@ -125,6 +125,11 @@ const {width, height} = Dimensions.get('window');
export const getWidth = () => width; export const getWidth = () => width;
export const getHeight = () => height; export const getHeight = () => height;
export const getFontSize = fz => RFValue(fz - 2); export const getFontSize = fz => RFValue(fz - 2);
export const CELL_WIDTH = (getWidth() - 30) / 7;
export const CELL_HEIGHT = (getHeight() - 160) / 6;
export const BOTTOM_SHEET_HEIGHT = getHeight() * 0.6;
// Get size for xd // Get size for xd
export const WIDTHXD = w => width * (w / 1125); export const WIDTHXD = w => width * (w / 1125);
export const HEIGHTXD = h => height * (h / 2436); export const HEIGHTXD = h => height * (h / 2436);
......
src/routers/Drawer/drawerView.js
...@@ -65,7 +65,8 @@ const DrawerNavigatorView = (props) => { ...@@ -65,7 +65,8 @@ const DrawerNavigatorView = (props) => {
const HeaderTitle = ({ navigation, route }) => { const HeaderTitle = ({ navigation, route }) => {
const getHeaderTitle = () => { const getHeaderTitle = () => {
if (route.name === ScreenName.FILTERDATE) { if (route.name === ScreenName.FILTERDATE)
{
return `Tháng ${currentDate.getMonth() + 1}`; return `Tháng ${currentDate.getMonth() + 1}`;
} }
if (route.name === ScreenName.FILTER3DATE) { if (route.name === ScreenName.FILTER3DATE) {
......
src/screens/certificate_registration/card_button.js
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'; import {StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native';
import React from 'react'; import React from 'react';
import R from '../../assets/R'; import R from '../../assets/R';
import styles from './style';
const CardButtonImage = ({ const CardButtonImage = ({
onPress, onPress,
text = "Tải ảnh ở đây", text = 'Tải ảnh ở đây',
width, width,
height = 150, height = 150,
disabled = false disabled = false,
}) => { }) => {
return ( return (
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.container_image, styles.container_image,
{ width, height }, {width, height},
disabled && styles.disabled disabled && styles.disabled,
]} ]}
onPress={onPress} onPress={onPress}
disabled={disabled} disabled={disabled}
activeOpacity={0.7} activeOpacity={0.7}>
> <View style={styles.image_placeholder}></View>
<View style={styles.image_placeholder}>
</View>
<View> <View>
<Image <Image source={R.images.icImageDownload} style={styles.image} />
source={R.images.icImageDownload}
style={{width:20,height:20, marginRight:5,marginTop:5}}
/>
</View> </View>
<Text style={styles.placeholder_text}> <Text style={styles.placeholder_text}>{text}</Text>
{text}
</Text>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
export default CardButtonImage; export default CardButtonImage;
const styles = StyleSheet.create({
container_image: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal:15,
marginTop:3,
marginBottom:15,
borderWidth: 1,
borderColor: R.colors.blue500,
borderStyle: 'dashed',
borderRadius: 15,
backgroundColor: R.colors.white,
padding: 16,
flexDirection:'row',
flex:1,
},
image_placeholder: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 10,
},
placeholder_text: {
fontSize: R.fontsize.fontsSize14,
fontWeight: '500',
color:R.colors.black,
textAlign: 'center',
letterSpacing: 0.3,
},
disabled: {
opacity: 0.5,
backgroundColor: R.colors.gray400,
}
});
\ No newline at end of file
src/screens/certificate_registration/detail/view.js
import React from "react"; import React from 'react';
import { import {
Text, Text,
View, View,
TouchableOpacity,
StyleSheet,
Image, Image,
SafeAreaView,
ScrollView, ScrollView,
} from "react-native"; } from 'react-native';
import R from "../../../assets/R"; import R from '../../../assets/R';
import Header from "../../../components/Header/Header"; import Header from '../../../components/Header/Header';
import styles from '../style';
const DetailCertificateView = (props) => { const DetailCertificateView = props => {
return ( return (
<View style={{flex:1,}}> <View style={{flex: 1}}>
<Header isBack={true} title={"Chứng chỉ toeic"} /> <Header isBack={true} title={'Chứng chỉ toeic'} />
<ScrollView showsVerticalScrollIndicator={false} style={styles.container}> <ScrollView
showsVerticalScrollIndicator={false}
style={styles.container_detail}>
<View style={styles.container_card}> <View style={styles.container_card_detail}>
<View style={styles.status}> <View style={styles.status}>
<Text style={[styles.text_title, { color: R.colors.white }]}> <Text style={[styles.text_title, {color: R.colors.white}]}>
Chứng chỉ đang được đánh giá Chứng chỉ đang được đánh giá
</Text> </Text>
</View>
<View style={styles.card_item}>
<View style={styles.header_card_item}>
<Text style={styles.text_title}>Chứng chỉ toeic</Text>
</View> </View>
<View style={styles.card_item}> <View style={styles.image_container}>
<View style={styles.header_card_item}> <Image source={R.images.igProfileDemo} style={styles.imageDetail} />
<Text style={styles.text_title}>Chứng chỉ toeic</Text> </View>
<View>
<Text style={styles.sub_text}>Loại chứng chỉ: TOEIC</Text>
</View> <Text style={styles.sub_text}>Ngày sinh: 23/10/2004</Text>
<View style={styles.image_container}> <Text style={styles.sub_text}>
<Image CCCD/CMND đăng ký: 00228956325
source={R.images.igProfileDemo} </Text>
style={styles.image} <Text style={styles.sub_text}>Ngày thi: 23/10/2024</Text>
/> <Text style={styles.sub_text}>Tổng điểm: 875</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text style={styles.sub_text}>Điểm nói: 0</Text>
<Text style={styles.sub_text}>Điểm nghe: 445</Text>
</View> </View>
<View > <View
<Text style={styles.sub_text}>Loại chứng chỉ: TOEIC</Text> style={{
<Text style={styles.sub_text}>Ngày sinh: 23/10/2004</Text> flexDirection: 'row',
<Text style={styles.sub_text}> justifyContent: 'space-between',
CCCD/CMND đăng ký: 00228956325 }}>
</Text> <Text style={styles.sub_text}>Điểm đọc: 430</Text>
<Text style={styles.sub_text}>Ngày thi: 23/10/2024</Text> <Text style={styles.sub_text}>Điểm viết: 0</Text>
<Text style={styles.sub_text}>Tổng điểm: 875</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.sub_text}>Điểm nói: 0</Text>
<Text style={styles.sub_text}>Điểm nghe: 445</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.sub_text}>Điểm đọc: 430</Text>
<Text style={styles.sub_text}>Điểm viết: 0</Text>
</View>
<Text style={styles.sub_text}>Số TRF: 085692265852</Text>
<Text style={styles.sub_text}>Có hiệu lực đến: 23/10/2026</Text>
<Text style={[styles.sub_text, { color: R.colors.main }]}>
Không dùng để đăng ký học bổng
</Text>
</View> </View>
<Text style={styles.sub_text}>Số TRF: 085692265852</Text>
<Text style={styles.sub_text}>Có hiệu lực đến: 23/10/2026</Text>
<Text style={[styles.sub_text, {color: R.colors.main}]}>
Không dùng để đăng ký học bổng
</Text>
</View> </View>
</View> </View>
</View>
</ScrollView> </ScrollView>
</View> </View>
); );
}; };
export default DetailCertificateView; export default DetailCertificateView;
const styles = StyleSheet.create({
container: {
backgroundColor:R.colors.white,
paddingBottom: 10,
},
image: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: "contain",
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: "center",
},
status: {
backgroundColor: R.colors.yellow,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
paddingLeft: 13,
paddingVertical: 5
},
container_card: {
marginVertical: 15,
borderRadius: 15,
marginHorizontal: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
},
card_item: {
backgroundColor: R.colors.white,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
paddingHorizontal: 15,
paddingVertical: 10,
},
header_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
text_title: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: "400",
color: R.colors.black,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
lineHeight: 24,
color: R.colors.black,
},
});
src/screens/certificate_registration/list/item.js
import { Image, StyleSheet, Text, View } from 'react-native' import {Image, StyleSheet, Text, View} from 'react-native';
import React from 'react' import React from 'react';
import R from '../../../assets/R' import R from '../../../assets/R';
import Button from '../../../components/Button' import Button from '../../../components/Button';
import { useNavigation } from "@react-navigation/native"; import {useNavigation} from '@react-navigation/native';
import { DETAILCERTIFICATE } from "../../../routers/ScreenNames"; import {DETAILCERTIFICATE} from '../../../routers/ScreenNames';
import styles from '../style';
const ItemNav = () => { const ItemNav = () => {
const navigation = useNavigation(); const navigation = useNavigation();
return ( return (
<View style={styles.container_card}> <View style={styles.container_card}>
<View style={styles.header_card_item}> <View style={styles.header_card_item}>
<Text style={styles.text_title_left}>Chứng chỉ toeic</Text> <Text style={styles.text_title_left}>Chứng chỉ toeic</Text>
<Text <Text
onPress={() => navigation.navigate(DETAILCERTIFICATE)} onPress={() => navigation.navigate(DETAILCERTIFICATE)}
style={styles.text_title_right}>Chi tiết</Text> style={styles.text_title_right}>
Chi tiết
</Text>
</View>
<View style={styles.image_container}>
<Image source={R.images.igProfileDemo} style={styles.image_item} />
</View>
<View style={styles.footer_card_item}>
<View>
<Text style={styles.sub_text}>Trạng thái: Đang đánh giá</Text>
<Text style={styles.sub_text}>Ngày đăng ký: 23/10/2024</Text>
<Text style={[styles.sub_text, {color: R.colors.blue500}]}>
Không dùng để đăng ký học bổng
</Text>
</View> </View>
<View style={styles.image_container}> <View style={styles.button_container}>
<Image <Button
source={R.images.igProfileDemo} title={'Huỷ'}
style={styles.image} fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={14}
width={61}
height={27}
backgroundColor={R.colors.red}
borderRadius={10}
textColor={R.colors.white}
/> />
</View> </View>
<View style={styles.footer_card_item}> </View>
<View>
<Text style={styles.sub_text}>Trạng thái: Đang đánh giá</Text>
<Text style={styles.sub_text}>Ngày đăng ký: 23/10/2024</Text>
<Text style={[styles.sub_text, { color: R.colors.blue500 }]}>Không dùng để đăng ký học bổng</Text>
</View>
<View style={styles.button_container}>
<Button
title={"Huỷ"}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={14}
width={61}
height={27}
backgroundColor={R.colors.red}
borderRadius={10}
textColor={R.colors.white}
/>
</View>
</View>
</View> </View>
) );
} };
export default ItemNav
const styles = StyleSheet.create({ export default ItemNav;
container_card: {
borderRadius: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
marginVertical: 5,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
paddingHorizontal: 15,
paddingVertical: 10,
},
button_container: {
alignSelf: "flex-end",
},
header_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
footer_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
image: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: "contain",
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: "center",
},
text_title_left: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black
},
text_title_right: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
textDecorationLine: 'underline',
color: R.colors.main
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
color: R.colors.black
}
})
\ No newline at end of file
src/screens/certificate_registration/list/view.js
import React from "react"; import React from 'react';
import { useNavigation } from "@react-navigation/native"; import {useNavigation} from '@react-navigation/native';
import { import {Text, View, StyleSheet, ScrollView, SafeAreaView} from 'react-native';
Text, import Header from '../../../components/Header/Header';
View, import Button from '../../../components/Button';
StyleSheet, import R from '../../../assets/R';
ScrollView, import ItemNav from './item';
SafeAreaView, import {CERTIFICATEREGISTRATION} from '../../../routers/ScreenNames';
} from "react-native"; import styles from '../style';
import Header from "../../../components/Header/Header"; const ListCetificateView = props => {
import Button from "../../../components/Button"; const {} = props;
import R from "../../../assets/R";
import ItemNav from "./item";
import { CERTIFICATEREGISTRATION } from "../../../routers/ScreenNames";
const ListCetificateView = (props) => {
const { } = props;
const navigate = useNavigation(); const navigate = useNavigation();
return (
<View style={{flex:1, }}>
<Header isBack={true} isSearch={true} title={"Danh sách chứng chỉ"}
/>
<ScrollView style={styles.container}>
<View style={styles.container_header}>
<Text style={styles.text}>Các chứng chỉ đã đăng kí</Text>
<Button
onPress={() => navigate.navigate(CERTIFICATEREGISTRATION)}
height={27}
borderRadius={10}
textColor={R.colors.white}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={R.fontsize.fontsSize12}
iconSpacingLeft={2}
paddingHorizontal={10}
icon={R.images.icPlus}
backgroundColor={R.colors.blue500}
title={"Thêm mới"}
/>
</View>
<View style={styles.container_item}>
<ItemNav />
</View>
const renderBody = () => {
return (
<ScrollView style={styles.box}>
<View style={styles.container_header}>
<Text style={styles.text}>Các chứng chỉ đã đăng kí</Text>
<Button
onPress={() => navigate.navigate(CERTIFICATEREGISTRATION)}
height={27}
borderRadius={10}
textColor={R.colors.white}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={R.fontsize.fontsSize12}
iconSpacingLeft={2}
paddingHorizontal={10}
icon={R.images.icPlus}
backgroundColor={R.colors.blue500}
title={'Thêm mới'}
/>
</View>
<View style={styles.container_item}>
<ItemNav />
</View>
</ScrollView> </ScrollView>
);
};
return (
<View style={{flex: 1}}>
<Header isBack={true} isSearch={true} title={'Danh sách chứng chỉ'} />
{renderBody()}
</View> </View>
); );
}; };
export default ListCetificateView; export default ListCetificateView;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingBottom: 10,
backgroundColor: R.colors.white,
},
container_header: {
alignItems: "center",
justifyContent: "space-between",
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 15,
},
text: {
fontFamily: R.fonts.InterSemiBold,
color: R.colors.main,
},
container_item: {
marginHorizontal: 15,
},
});
src/screens/certificate_registration/style.js 0 → 100644
import {StyleSheet, Dimensions} from 'react-native';
import R from '../../assets/R';
const {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
container_row: {
flexDirection: 'row',
},
container_row_body: {
marginHorizontal: 15,
},
footer: {
flexDirection: 'row',
marginBottom: 84,
marginRight: 15,
},
text_footer: {
marginLeft: 10,
flex: 1,
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
color: R.colors.black,
fontWeight: '400',
},
size_box: {
flex: 1,
},
size_box_2: {
marginHorizontal: 15,
},
size_box_3: {
flex: 1,
marginLeft: 15,
},
size_box_4: {
width: '3%',
},
container_image: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 15,
marginTop: 3,
marginBottom: 15,
borderWidth: 1,
borderColor: R.colors.blue500,
borderStyle: 'dashed',
borderRadius: 15,
backgroundColor: R.colors.white,
padding: 16,
flexDirection: 'row',
flex: 1,
},
image: {
width: 20,
height: 20,
marginRight: 5,
marginTop: 5,
},
image_placeholder: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 10,
},
placeholder_text: {
fontSize: R.fontsize.fontsSize14,
fontWeight: '500',
color: R.colors.black,
textAlign: 'center',
letterSpacing: 0.3,
},
disabled: {
opacity: 0.5,
backgroundColor: R.colors.gray400,
},
/* -------------------------------------------------------------------------- */
/* Danh sách chứng chỉ */
/* -------------------------------------------------------------------------- */
box: {
flex: 1,
paddingBottom: 10,
backgroundColor: R.colors.white,
},
container_header: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
marginVertical: 10,
marginHorizontal: 15,
},
text: {
fontFamily: R.fonts.InterSemiBold,
color: R.colors.main,
},
container_item: {
marginHorizontal: 15,
},
/* -------------------------------------------------------------------------- */
/* Item chứng chỉ */
/* -------------------------------------------------------------------------- */
container_card: {
borderRadius: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
marginVertical: 5,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
paddingHorizontal: 15,
paddingVertical: 10,
},
button_container: {
alignSelf: 'flex-end',
},
header_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
footer_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
image_item: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: 'contain',
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: 'center',
},
text_title_left: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black,
},
text_title_right: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
textDecorationLine: 'underline',
color: R.colors.main,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
color: R.colors.black,
},
/* -------------------------------------------------------------------------- */
/* Chi tiết chứng chỉ */
/* -------------------------------------------------------------------------- */
container_detail: {
backgroundColor: R.colors.white,
paddingBottom: 10,
},
imageDetail: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: 'contain',
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: 'center',
},
status: {
backgroundColor: R.colors.yellow,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
paddingLeft: 13,
paddingVertical: 5,
},
container_card_detail: {
marginVertical: 15,
borderRadius: 15,
marginHorizontal: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
},
card_item: {
backgroundColor: R.colors.white,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
paddingHorizontal: 15,
paddingVertical: 10,
},
header_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
text_title: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
lineHeight: 24,
color: R.colors.black,
},
});
export default styles;
src/screens/certificate_registration/view.js
import React from "react"; import React from 'react';
import { import {Text, View, StyleSheet, ScrollView, SafeAreaView} from 'react-native';
Text, import CheckBox from '../../components/CheckBox';
View, import Header from '../../components/Header/Header';
StyleSheet, import I18n from '../../helper/i18/i18n';
ScrollView, import R from '../../assets/R';
SafeAreaView import Button from '../../components/Button';
} from "react-native"; import CardButtonImage from './card_button';
import CheckBox from "../../components/CheckBox"; import DropdownSelect from '../../components/Dropdown/DropdownSel';
import Header from "../../components/Header/Header"; import CustomTextInput from '../../components/Input/TextFieldCus';
import I18n from "../../helper/i18/i18n"; import styles from './style';
import R from "../../assets/R";
import Button from "../../components/Button"; const CertificateRegistrationView = props => {
import CardButtonImage from "./card_button"; const {titleHeader, dataList, isSelected, setSelection} = props;
import DropdownSelect from "../../components/Dropdown/DropdownSel"; const renderBody = () => {
import CustomTextInput from "../../components/Input/TextFieldCus"; return (
const CertificateRegistrationView = (props) => {
const { titleHeader, dataList, isSelected, setSelection } = props;
return (
<View style={{ flex: 1, }}>
<Header isBack title={I18n.t(titleHeader)} />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}> contentContainerStyle={styles.scrollContent}>
<View style={styles.container}> <View style={styles.container}>
<DropdownSelect <DropdownSelect
title={"Loại chứng chỉ *"} title={'Loại chứng chỉ *'}
titleFontFamily={R.fonts.InterRegular} titleFontFamily={R.fonts.InterRegular}
titleFontSize={R.fontsize.fontsSize12} titleFontSize={R.fontsize.fontsSize12}
titleFontWeight={"400"} titleFontWeight={'400'}
titleColor={R.colors.black} titleColor={R.colors.black}
data={dataList} data={dataList}
placeholder="HS" placeholder="HS"
placeholderFontFamily={R.fonts.InterRegular} placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize12} placeholderFontSize={R.fontsize.fontsSize12}
placeholderFontWeight={"400"} placeholderFontWeight={'400'}
placeholderColor={R.colors.grey} placeholderColor={R.colors.grey}
borderRadius={10} borderRadius={10}
height={40} height={35}
marginHorizontal={15} marginHorizontal={15}
marginVertical={5} marginVertical={5}
iconColor={R.colors.black} iconColor={R.colors.black}
iconSize={10} iconSize={10}
/> />
<View style={{ marginHorizontal: 15, }}> <View style={styles.size_box_2}>
<CustomTextInput <CustomTextInput
title={"Ngày sinh "} title={'Ngày sinh '}
backgroundColor={R.colors.gray400} backgroundColor={R.colors.gray400}
editable={false}
height={35}
/> />
</View> </View>
<View style={{ marginHorizontal: 15 }}> <View style={styles.size_box_2}>
<CustomTextInput <CustomTextInput
title={"CMND/CCCD (thí sinh dùng để đăng ký thi)"} title={'CMND/CCCD (thí sinh dùng để đăng ký thi)'}
backgroundColor={R.colors.gray400} backgroundColor={R.colors.gray400}
editable={false}
height={35}
/> />
</View> </View>
<View style={styles.container_row}> <View style={[styles.container_row, {marginRight: 15}]}>
<View style={{ flex: 1, marginLeft: 15 }}> <View style={styles.size_box_3}>
<CustomTextInput <CustomTextInput
title={"Điểm nghe "} title={'Điểm nghe '}
height={35}
onChangeText={text => console.log(text)}
/> />
</View> </View>
<View style={{ width: '3%' }}></View> <View style={styles.size_box_4}></View>
<View style={{ flex: 1, marginRight: 15 }}> <View style={styles.size_box_3}>
<CustomTextInput <CustomTextInput
title={"Điểm nói "} title={'Điểm nói '}
height={35}
onChangeText={text => console.log(text)}
/> />
</View> </View>
</View> </View>
<View style={styles.container_row}> <View style={styles.container_row}>
<View style={{ flex: 1, marginLeft: 15 }}> <View style={styles.size_box_3}>
<CustomTextInput <CustomTextInput title={'Điểm đọc'} height={35} />
title={"Điểm đọc"}
/>
</View> </View>
<View style={{ width: '3%' }}></View> <View style={styles.size_box_4}></View>
<View style={{ flex: 1, marginRight: 15 }}> <View style={[styles.size_box_3, {marginRight: 15}]}>
<CustomTextInput <CustomTextInput title={'Điểm viết'} height={35} />
title={"Điểm viết "}
/>
</View> </View>
</View> </View>
<View <View style={styles.container_row}>
style={styles.container_row} <View style={{flex: 0.85, marginBottom: 10, marginLeft: 15}}>
> <CustomTextInput title={'Tổng điểm '} height={35} />
<View style={{ flex: 0.85, marginBottom: 10, marginHorizontal: 15 }}>
<CustomTextInput
title={"Tổng điểm "}
/>
</View> </View>
<CheckBox <CheckBox
label={"Đăng kí học bổng"} label={'Đăng kí học bổng'}
titleFontFamily={R.fonts.InterRegular} titleFontFamily={R.fonts.InterRegular}
titleFontSize={R.fontsize.fontsSize12} titleFontSize={R.fontsize.fontsSize12}
titleFontWeight={"300"} titleFontWeight={'300'}
borderRadius={30} borderRadius={30}
size={15} size={15}
labelStyle={{ labelStyle={{
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontWeight: "300", fontWeight: '300',
color: R.colors.black, color: R.colors.black,
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
}} }}
style={{ marginTop: 15, flex: 1 }} style={styles.size_box_3}
/> />
</View> </View>
<View style={styles.container_row_body}> <View style={styles.container_row_body}>
<CustomTextInput <CustomTextInput title={'Ngày thi '} height={35} />
title={"Ngày thi "}
/>
</View> </View>
<View style={styles.container_row_body}> <View style={styles.container_row_body}>
<CustomTextInput <CustomTextInput title={'Có hiệu lực đến'} height={35} />
title={"Có hiệu lực đến"}
/>
</View> </View>
<View style={styles.container_row_body}> <View style={styles.container_row_body}>
<CustomTextInput <CustomTextInput title={'Số TRF'} height={35} />
title={"Số TRF"}
/>
</View> </View>
<Text style={{ marginHorizontal: 15, color: R.colors.black }}> <Text style={{marginHorizontal: 15, color: R.colors.black}}>
Ảnh chứng chỉ <Text style={{ color: "red" }}>*</Text> Ảnh chứng chỉ <Text style={{color: 'red', fontSize: R.fontsize.fontsSize12}}>*</Text>
</Text> </Text>
<CardButtonImage /> <CardButtonImage />
...@@ -144,7 +125,6 @@ const CertificateRegistrationView = (props) => { ...@@ -144,7 +125,6 @@ const CertificateRegistrationView = (props) => {
onValueChange={setSelection} onValueChange={setSelection}
borderRadius={10} borderRadius={10}
marginLeft={15} marginLeft={15}
/> />
<Text style={styles.text_footer}> <Text style={styles.text_footer}>
"Tôi xin cam đoan rằng chứng chỉ mà tôi đã nộp là chứng chỉ hoàn "Tôi xin cam đoan rằng chứng chỉ mà tôi đã nộp là chứng chỉ hoàn
...@@ -170,34 +150,14 @@ const CertificateRegistrationView = (props) => { ...@@ -170,34 +150,14 @@ const CertificateRegistrationView = (props) => {
/> />
</View> </View>
</ScrollView> </ScrollView>
);
};
return (
<View style={styles.size_box}>
<Header isBack title={I18n.t(titleHeader)} />
{renderBody()}
</View> </View>
); );
}; };
export default CertificateRegistrationView; export default CertificateRegistrationView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
container_row: {
flexDirection: 'row'
},
container_row_body: {
marginHorizontal: 15,
},
footer: {
flexDirection: "row",
marginBottom: 84,
marginRight: 15
},
text_footer: {
marginLeft: 10,
flex: 1,
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
color: R.colors.black,
fontWeight: '400'
}
});
src/screens/class_schedule/index.js
...@@ -246,7 +246,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -246,7 +246,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}; };
// ==================== HỆ THỐNG ANIMATION ==================== // ==================== HỆ THỐNG ANIMATION ====================
// A1: Thiết lập PanResponder // A1: Thiết lập PanResponder cho Bottom Sheet
const panResponder = useRef( const panResponder = useRef(
PanResponder.create({ PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => { onMoveShouldSetPanResponder: (evt, gestureState) => {
...@@ -270,6 +270,36 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -270,6 +270,36 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}), }),
).current; ).current;
// A2: Thiết lập PanResponder cho Calendar Swipe Navigation
const calendarPanResponder = useMemo(
() =>
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: (evt, gestureState) => {
// Chỉ kích hoạt khi vuốt ngang nhiều hơn vuốt dọc
return Math.abs(gestureState.dx) > Math.abs(gestureState.dy) && Math.abs(gestureState.dx) > 10;
},
onPanResponderMove: (evt, gestureState) => {
// Không cần xử lý gì trong quá trình di chuyển
},
onPanResponderRelease: (evt, gestureState) => {
const {dx, vx} = gestureState;
// Kiểm tra điều kiện swipe: khoảng cách >= 50px hoặc vận tốc >= 0.3
if (Math.abs(dx) >= 50 || Math.abs(vx) >= 0.3) {
if (dx > 0) {
// Vuốt sang phải = tháng trước
navigateMonth('prev');
} else {
// Vuốt sang trái = tháng sau
navigateMonth('next');
}
}
},
}),
[navigateMonth],
);
// A2: Hàm animation Bottom Sheet // A2: Hàm animation Bottom Sheet
const showBottomSheetModal = () => { const showBottomSheetModal = () => {
setShowBottomSheet(true); setShowBottomSheet(true);
...@@ -342,6 +372,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => { ...@@ -342,6 +372,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
showBottomSheet={showBottomSheet} showBottomSheet={showBottomSheet}
bottomSheetTranslateY={bottomSheetTranslateY} bottomSheetTranslateY={bottomSheetTranslateY}
panResponder={panResponder} panResponder={panResponder}
calendarPanResponder={calendarPanResponder}
getMonthData={getMonthData} getMonthData={getMonthData}
getEventsForDate={getEventsForDate} getEventsForDate={getEventsForDate}
parseLocalDate={parseLocalDate} parseLocalDate={parseLocalDate}
......
src/screens/class_schedule/modal_bottom_sheet.js
...@@ -3,10 +3,9 @@ import { ...@@ -3,10 +3,9 @@ import {
Text, Text,
View, View,
TouchableOpacity, TouchableOpacity,
StyleSheet,
Modal, Modal,
Animated, Animated,
ScrollView ScrollView,
} from 'react-native'; } from 'react-native';
import {styles} from './style'; import {styles} from './style';
......
src/screens/class_schedule/style.js
import {StyleSheet, Dimensions} from 'react-native'; import {StyleSheet} from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {CELL_WIDTH, CELL_HEIGHT, BOTTOM_SHEET_HEIGHT} from '../../config/Functions';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const CELL_WIDTH = (screenWidth - 30) / 7;
const CELL_HEIGHT = (screenHeight - 160) / 6;
const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
// Container chính của màn hình // ===== CONTAINER CHÍNH =====
container: { container: {
flex: 1, flex: 1,
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
}, },
body:{ body: {
flex: 1, flex: 1,
width: '100%', width: '100%',
alignItems: 'center', alignItems: 'center',
}, },
// Header tháng/năm với nút điều hướng // ===== HEADER SECTION (renderHeader) =====
header: { header: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingVertical: 15, paddingVertical: 15,
marginHorizontal:15 marginHorizontal: 15,
}, },
header_title: { header_title: {
fontSize: R.fontsize.fontsSize16, fontSize: R.fontsize.fontsSize16,
...@@ -31,7 +27,6 @@ const styles = StyleSheet.create({ ...@@ -31,7 +27,6 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
fontWeight: '600', fontWeight: '600',
}, },
// Nút điều hướng tháng trước/sau
navButton: { navButton: {
width: 30, width: 30,
height: 30, height: 30,
...@@ -44,13 +39,12 @@ const styles = StyleSheet.create({ ...@@ -44,13 +39,12 @@ const styles = StyleSheet.create({
color: R.colors.white, color: R.colors.white,
fontSize: R.fontsize.fontsSize20, fontSize: R.fontsize.fontsSize20,
fontFamily: R.fonts.InterMedium, fontFamily: R.fonts.InterMedium,
}, },
// Tiêu đề các ngày trong tuần // ===== WEEK DAYS SECTION (renderWeekDays) =====
weekDaysContainer: { weekDaysContainer: {
flexDirection: 'row', flexDirection: 'row',
alignSelf:'center', alignSelf: 'center',
paddingBottom: 3, paddingBottom: 3,
marginBottom: 5, marginBottom: 5,
}, },
...@@ -65,15 +59,15 @@ const styles = StyleSheet.create({ ...@@ -65,15 +59,15 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
}, },
// Lưới lịch // ===== CALENDAR GRID SECTION (renderCalendarGrid, renderDayCell) =====
calendarGrid: { calendarGrid: {
alignSelf:'center' alignSelf: 'center',
}, },
weekRow: { weekRow: {
flexDirection: 'row', flexDirection: 'row',
}, },
// Ô ngày trong lịch // Day Cell Styles
dayCell: { dayCell: {
width: CELL_WIDTH, width: CELL_WIDTH,
minHeight: CELL_HEIGHT, minHeight: CELL_HEIGHT,
...@@ -82,12 +76,18 @@ const styles = StyleSheet.create({ ...@@ -82,12 +76,18 @@ const styles = StyleSheet.create({
padding: 6, padding: 6,
alignItems: 'center', alignItems: 'center',
}, },
// Ô ngày được chọn dayCellInactive: {
backgroundColor: R.colors.gray100, // Background cho ngày không thuộc cùng tháng
},
selectedDayCell: { selectedDayCell: {
borderColor: R.colors.blue500, borderColor: R.colors.blue500,
borderWidth: 1, borderWidth: 1,
}, },
// Text số ngày todayCell: {
// Thêm style cho ô ngày hôm nay nếu cần
},
// Day Text Styles
dayText: { dayText: {
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
fontWeight: '400', fontWeight: '400',
...@@ -95,18 +95,15 @@ const styles = StyleSheet.create({ ...@@ -95,18 +95,15 @@ const styles = StyleSheet.create({
color: R.colors.black, color: R.colors.black,
marginBottom: 2, marginBottom: 2,
}, },
// Text ngày không thuộc tháng hiện tại
dayTextInactive: { dayTextInactive: {
color: R.colors.black, color: R.colors.gray200, // Màu text mờ hơn cho ngày khác tháng
opacity: 1, opacity: 0.6,
}, },
// Text ngày được chọn
selectedDayText: { selectedDayText: {
color: R.colors.black, color: R.colors.black,
fontWeight: '500', fontWeight: '500',
fontFamily: R.fonts.InterSemiBold, fontFamily: R.fonts.InterSemiBold,
}, },
// Text ngày hôm nay
todayText: { todayText: {
color: R.colors.white, color: R.colors.white,
fontWeight: '500', fontWeight: '500',
...@@ -117,12 +114,11 @@ const styles = StyleSheet.create({ ...@@ -117,12 +114,11 @@ const styles = StyleSheet.create({
paddingVertical: 4, paddingVertical: 4,
}, },
// Sự kiện trong ô ngày // Event Styles in Day Cell
eventsContainer: { eventsContainer: {
width: '100%', width: '100%',
flex: 1, flex: 1,
}, },
// Thanh sự kiện nhỏ trong ô ngày
eventBar: { eventBar: {
paddingVertical: 2, paddingVertical: 2,
paddingHorizontal: 5, paddingHorizontal: 5,
...@@ -136,7 +132,6 @@ const styles = StyleSheet.create({ ...@@ -136,7 +132,6 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
fontFamily: R.fonts.InterRegular, fontFamily: R.fonts.InterRegular,
}, },
// Text hiển thị số sự kiện còn lại
moreEventsText: { moreEventsText: {
fontSize: R.fontsize.fontsSize12, fontSize: R.fontsize.fontsSize12,
color: R.colors.gray200, color: R.colors.gray200,
...@@ -145,7 +140,7 @@ const styles = StyleSheet.create({ ...@@ -145,7 +140,7 @@ const styles = StyleSheet.create({
textAlign: 'center', textAlign: 'center',
}, },
// Modal bottom sheet // ===== MODAL BOTTOM SHEET SECTION (ModalBottomSheetView) =====
modalBackdrop: { modalBackdrop: {
flex: 1, flex: 1,
backgroundColor: R.colors.gray220, backgroundColor: R.colors.gray220,
...@@ -157,12 +152,11 @@ const styles = StyleSheet.create({ ...@@ -157,12 +152,11 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 20, borderTopLeftRadius: 20,
borderTopRightRadius: 20, borderTopRightRadius: 20,
}, },
// Nội dung bottom sheet
bottomSheetContent: { bottomSheetContent: {
height: BOTTOM_SHEET_HEIGHT, height: BOTTOM_SHEET_HEIGHT,
}, },
// Thanh kéo
// Bottom Sheet Header
dragHandle: { dragHandle: {
width: 40, width: 40,
height: 4, height: 4,
...@@ -172,7 +166,6 @@ const styles = StyleSheet.create({ ...@@ -172,7 +166,6 @@ const styles = StyleSheet.create({
marginTop: 10, marginTop: 10,
marginBottom: 15, marginBottom: 15,
}, },
// Header của bottom sheet
bottomSheetHeader: { bottomSheetHeader: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
...@@ -186,7 +179,6 @@ const styles = StyleSheet.create({ ...@@ -186,7 +179,6 @@ const styles = StyleSheet.create({
fontWeight: '600', fontWeight: '600',
flex: 1, flex: 1,
}, },
// Nút đóng bottom sheet
closeButton: { closeButton: {
width: 30, width: 30,
height: 30, height: 30,
...@@ -202,17 +194,14 @@ const styles = StyleSheet.create({ ...@@ -202,17 +194,14 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
}, },
// Danh sách sự kiện trong bottom sheet // Bottom Sheet Events List
// ScrollView chứa danh sách sự kiện
eventsScrollView: { eventsScrollView: {
paddingTop: 10, paddingTop: 10,
}, },
// Container cho từng sự kiện
containerBottomSheet: { containerBottomSheet: {
flex: 1, flex: 1,
marginBottom: 10, marginBottom: 10,
}, },
// Trạng thái không có sự kiện
noEventsContainer: { noEventsContainer: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
...@@ -226,7 +215,7 @@ const styles = StyleSheet.create({ ...@@ -226,7 +215,7 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
}, },
// Card sự kiện chi tiết // Event Card Styles
eventCard: { eventCard: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
...@@ -245,7 +234,6 @@ const styles = StyleSheet.create({ ...@@ -245,7 +234,6 @@ const styles = StyleSheet.create({
shadowRadius: 1, shadowRadius: 1,
elevation: 2, elevation: 2,
}, },
// Container thời gian sự kiện
eventTimeContainer: { eventTimeContainer: {
minWidth: 80, minWidth: 80,
alignItems: 'flex-start', alignItems: 'flex-start',
...@@ -258,7 +246,6 @@ const styles = StyleSheet.create({ ...@@ -258,7 +246,6 @@ const styles = StyleSheet.create({
color: R.colors.blue500, color: R.colors.blue500,
fontWeight: '600', fontWeight: '600',
}, },
// Container nội dung sự kiện
eventContent: { eventContent: {
flex: 1, flex: 1,
}, },
......
src/screens/class_schedule/view.js
...@@ -4,24 +4,20 @@ import { ...@@ -4,24 +4,20 @@ import {
View, View,
TouchableOpacity, TouchableOpacity,
ScrollView, ScrollView,
Modal,
Animated,
SafeAreaView, SafeAreaView,
LogBox, LogBox,
} from 'react-native'; } from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT} from './style'; import {styles} from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import {monthNames, weekDays, formatDateToString} from '../../config/Functions'; import {monthNames, weekDays, formatDateToString} from '../../config/Functions';
import ModalBottomSheetView from './modal_bottom_sheet'; import ModalBottomSheetView from './modal_bottom_sheet';
LogBox.ignoreAllLogs(true); LogBox.ignoreAllLogs(true);
const ClassScheduleView = ({ const ClassScheduleView = ({
currentDate,
selectedDate, selectedDate,
showBottomSheet, showBottomSheet,
bottomSheetTranslateY, bottomSheetTranslateY,
panResponder, panResponder,
calendarPanResponder,
getMonthData, getMonthData,
getEventsForDate, getEventsForDate,
parseLocalDate, parseLocalDate,
...@@ -79,6 +75,7 @@ const ClassScheduleView = ({ ...@@ -79,6 +75,7 @@ const ClassScheduleView = ({
key={index} key={index}
style={[ style={[
styles.dayCell, styles.dayCell,
!isInCurrentMonth && styles.dayCellInactive, // Thêm background cho ngày khác tháng
isSelected && styles.selectedDayCell, isSelected && styles.selectedDayCell,
isTodayDate && styles.todayCell, isTodayDate && styles.todayCell,
]} ]}
...@@ -134,7 +131,9 @@ const ClassScheduleView = ({ ...@@ -134,7 +131,9 @@ const ClassScheduleView = ({
<View> <View>
{renderHeader()} {renderHeader()}
{renderWeekDays()} {renderWeekDays()}
<View style ={styles.calendarGrid}> <View
style={styles.calendarGrid}
{...(calendarPanResponder?.panHandlers || {})}>
{renderCalendarGrid()} {renderCalendarGrid()}
</View> </View>
......
src/screens/debt/item.js
import { StyleSheet, Text, View } from "react-native"; import {StyleSheet, Text, View} from 'react-native';
import React from "react"; import React from 'react';
import { useNavigation } from "@react-navigation/native"; import {useNavigation} from '@react-navigation/native';
import R from "../../assets/R"; import R from '../../assets/R';
import Button from "../../components/Button"; import Button from '../../components/Button';
const ItemList = ({ item , onPayPress}) => { import styles from './style';
const ItemList = ({item, onPayPress}) => {
const navigate = useNavigation(); const navigate = useNavigation();
const QrCodeIconButton = R.images.icQrCodeButton; const QrCodeIconButton = R.images.icQrCodeButton;
const { displayConfig } = item; const {displayConfig} = item;
return ( return (
<View style={styles.container}> <View style={styles.container_item}>
<Text style={[styles.title, { color: displayConfig.titleColor }]}> <Text style={[styles.title, {color: displayConfig.titleColor}]}>
{item.title_notifi_student_code} {item.title_notifi_student_code}
</Text> </Text>
<View style={styles.container_content}> <View style={styles.container_content}>
<Text style={styles.sub_title}>Số tiền: </Text> <Text style={styles.sub_title}>Số tiền: </Text>
<Text style={[styles.price_text, { color: displayConfig.priceColor }]}> <Text style={[styles.price_text, {color: displayConfig.priceColor}]}>
{item.price} {item.price}
</Text> </Text>
</View> </View>
...@@ -24,31 +25,32 @@ const ItemList = ({ item , onPayPress}) => { ...@@ -24,31 +25,32 @@ const ItemList = ({ item , onPayPress}) => {
</View> </View>
<View style={styles.container_content}> <View style={styles.container_content}>
<Text style={styles.sub_title}>Loại công nợ: </Text> <Text style={styles.sub_title}>Loại công nợ: </Text>
<Text style={[styles.type_of_debt, { color: displayConfig.typeDebtColor }]}> <Text
style={[styles.type_of_debt, {color: displayConfig.typeDebtColor}]}>
{item.type_debt} {item.type_debt}
</Text> </Text>
</View> </View>
<View style={styles.container_content}> <View style={styles.container_content}>
<Text style={styles.sub_title}>Ghi chú: </Text> <Text style={styles.sub_title}>Ghi chú: </Text>
<Text style={[{ flex: 1 }, styles.note]}>{item.message_debt}</Text> <Text style={[{flex: 1}, styles.note]}>{item.message_debt}</Text>
</View> </View>
<View style={styles.container_content}> <View style={styles.container_content}>
{displayConfig.showPaymentTerm && ( {displayConfig.showPaymentTerm && (
<View style={{flex:1, flexDirection:'row'}}> <View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.sub_title}>Hạn thanh toán: </Text> <Text style={styles.sub_title}>Hạn thanh toán: </Text>
<Text style={[styles.time, { color: displayConfig.timeColor }]}> <Text style={[styles.time, {color: displayConfig.timeColor}]}>
{item.payment_term} {item.payment_term}
</Text> </Text>
</View> </View>
)} )}
{displayConfig.showButton && ( {displayConfig.showButton && (
<View style={styles.container_button}> <View style={styles.container_button}>
<Button <Button
marginRight={0} marginRight={0}
title="Thanh toán" title="Thanh toán"
textStyle={styles.text_button} textStyle={styles.text_button}
icon={(props) => <QrCodeIconButton width={16} height={16} />} icon={props => <QrCodeIconButton width={16} height={16} />}
backgroundColor={R.colors.buttonColorSel} backgroundColor={R.colors.buttonColorSel}
textColor={R.colors.white} textColor={R.colors.white}
justifyContent="center" justifyContent="center"
...@@ -57,11 +59,10 @@ const ItemList = ({ item , onPayPress}) => { ...@@ -57,11 +59,10 @@ const ItemList = ({ item , onPayPress}) => {
borderRadius={8} borderRadius={8}
paddingHorizontal={12} paddingHorizontal={12}
iconSpacingHorizontal={4} iconSpacingHorizontal={4}
onPress={() => onPayPress?.(item)} onPress={() => onPayPress?.(item)}
/> />
</View> </View>
)} )}
</View> </View>
</View> </View>
); );
...@@ -69,72 +70,4 @@ const ItemList = ({ item , onPayPress}) => { ...@@ -69,72 +70,4 @@ const ItemList = ({ item , onPayPress}) => {
export default ItemList; export default ItemList;
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.backgroundCard,
marginHorizontal: 15,
marginVertical: 5,
borderRadius: 10,
paddingVertical: 9,
paddingHorizontal: 15,
},
title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium,
fontWeight:'500',
lineHeight: 24,
},
sub_title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
lineHeight: 24,
fontFamily: R.fonts.InterRegular,
},
price_text: {
color: R.colors.blue500,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
code: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
type_of_debt: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
note: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
time: {
color: R.colors.red,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
container_content: {
flexDirection: "row",
},
container_button:{
},
text_button:{
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontSize: R.fontsize.fontsSize12,
},
});
src/screens/debt/style.js 0 → 100644
import {StyleSheet, Dimensions} from 'react-native';
import R from '../../assets/R';
const {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
/* -------------------------------------------------------------------------- */
/* Body */
/* -------------------------------------------------------------------------- */
container: {
flex: 1,
backgroundColor: R.colors.white,
},
input: {
height: 40,
paddingHorizontal: 10,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
color: R.colors.gray400,
fontSize: R.fontsize.fontsSize12,
},
tab_container: {
marginHorizontal: 10,
justifyContent: 'center',
},
tab_button: {
marginHorizontal: 5,
borderRadius: 15,
width: 132,
backgroundColor: R.colors.gray400,
alignItems: 'center',
justifyContent: 'center',
},
tabButtonActive: {
backgroundColor: R.colors.blue500,
},
tabButtonText: {
fontFamily: R.fonts.InterSemiBold,
fontWeight: '600',
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
},
tabButtonTextActive: {
color: R.colors.white,
fontWeight: '600',
fontFamily: R.fonts.InterSemiBold,
fontSize: R.fontsize.fontsSize12,
},
tab_scroll_content: {
height: 28,
marginTop: 5,
},
sub_text: {
color: R.colors.black,
marginLeft: 15,
fontFamily: R.fonts.InterRegular,
fontWeight: '300',
fontSize: R.fontsize.fontsSize12,
},
/* -------------------------------------------------------------------------- */
/* Item */
/* -------------------------------------------------------------------------- */
container_item: {
backgroundColor: R.colors.backgroundCard,
marginHorizontal: 15,
marginVertical: 5,
borderRadius: 10,
paddingVertical: 9,
paddingHorizontal: 15,
},
title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium,
fontWeight: '500',
lineHeight: 24,
},
sub_title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
lineHeight: 24,
fontFamily: R.fonts.InterRegular,
},
price_text: {
color: R.colors.blue500,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
code: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
type_of_debt: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
note: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
time: {
color: R.colors.red,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
container_content: {
flexDirection: 'row',
},
container_button: {},
text_button: {
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
},
});
export default styles;
src/screens/debt/view.js
import React, { useState } from "react"; import React, {useState} from 'react';
import { import {
Text, Text,
SafeAreaView,
TouchableOpacity, TouchableOpacity,
FlatList, FlatList,
StyleSheet,
Modal,
View, View,
Image,
TextInput, TextInput,
} from "react-native"; } from 'react-native';
import Header from "../../components/Header/Header"; import Header from '../../components/Header/Header';
import I18n from "../../helper/i18/i18n"; import I18n from '../../helper/i18/i18n';
import R from "../../assets/R"; import R from '../../assets/R';
import ItemList from "./item"; import ItemList from './item';
import styles from './style';
const DebtView = (props) => { const DebtView = props => {
const { onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt } = const {onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt} =
props; props;
const IconSearch = R.images.icSearch const IconSearch = R.images.icSearch;
const renderTabViewItem = ({ item }) => { const renderTabViewItem = ({item}) => {
const isActive = activeTab === item.key; const isActive = activeTab === item.key;
return ( return (
<TouchableOpacity <TouchableOpacity
style={[styles.tab_button, isActive && styles.tabButtonActive]} style={[styles.tab_button, isActive && styles.tabButtonActive]}
onPress={() => onTabChange(item.key)} onPress={() => onTabChange(item.key)}>
>
<Text <Text
style={[styles.tabButtonText, isActive && styles.tabButtonTextActive]} style={[
> styles.tabButtonText,
isActive && styles.tabButtonTextActive,
]}>
{item.title_status} {item.title_status}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const renderItem = ({ item }) => { const renderItem = ({item}) => {
return <ItemList item={item} onPayPress={props.onPayPress} />; return <ItemList item={item} onPayPress={props.onPayPress} />;
}; };
const filteredDebtItems = dataListDebtItem.filter( const filteredDebtItems = dataListDebtItem.filter(
(item) => item.status === activeTab item => item.status === activeTab,
); );
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header isBack title={I18n.t("Debt")} /> <Header isBack title={I18n.t('Debt')} />
<View style={styles.tab_container}> <View style={styles.tab_container}>
<FlatList <FlatList
data={dataListStatus} data={dataListStatus}
renderItem={renderTabViewItem} renderItem={renderTabViewItem}
keyExtractor={(item) => item.key} keyExtractor={item => item.key}
horizontal horizontal
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.tab_scroll_content} contentContainerStyle={styles.tab_scroll_content}
/> />
</View> </View>
<View style={{ marginHorizontal: 15, flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: R.colors.gray400, borderRadius: 50, padding: 0, maxHeight: 40, paddingHorizontal: 10, marginVertical: 5 }}> <View
<IconSearch width={20} height={20} stroke={R.colors.gray400}/> style={{
marginHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: R.colors.gray400,
borderRadius: 50,
padding: 0,
maxHeight: 40,
paddingHorizontal: 10,
marginVertical: 5,
}}>
<IconSearch width={20} height={20} stroke={R.colors.gray400} />
<TextInput <TextInput
placeholder={"Tìm kiếm"} placeholder={'Tìm kiếm'}
style={styles.input} style={styles.input}
placeholderTextColor={R.colors.gray400} placeholderTextColor={R.colors.gray400}
/> />
</View> </View>
<Text style={styles.sub_text}>{props.timeDebt}</Text> <Text style={styles.sub_text}>{props.timeDebt}</Text>
<FlatList <FlatList
data={filteredDebtItems} data={filteredDebtItems}
renderItem={renderItem} renderItem={renderItem}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id.toString()} keyExtractor={item => item.id.toString()}
/> />
</View> </View>
); );
}; };
export default DebtView; export default DebtView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
input: {
height: 40,
paddingHorizontal: 10,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
color: R.colors.gray400,
fontSize: R.fontsize.fontsSize12,
},
tab_container: {
marginHorizontal: 10,
justifyContent: "center",
},
tab_button: {
marginHorizontal: 5,
borderRadius: 15,
width:132,
backgroundColor: R.colors.gray400,
alignItems: "center",
justifyContent:"center"
},
tabButtonActive: {
backgroundColor: R.colors.blue500,
},
tabButtonText: {
fontFamily: R.fonts.InterSemiBold,
fontWeight: "600",
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
},
tabButtonTextActive: {
color: R.colors.white,
fontWeight: "600",
fontFamily: R.fonts.InterSemiBold,
fontSize: R.fontsize.fontsSize12,
},
tab_scroll_content: {
height: 28,
marginTop:5
},
sub_text: {
color: R.colors.black,
marginLeft: 15,
fontFamily: R.fonts.InterRegular,
fontWeight: "300",
fontSize: R.fontsize.fontsSize12,
},
});
src/screens/exam_schedule/view.js
import React from 'react'; import React from 'react';
import {View, FlatList, SafeAreaView } from 'react-native'; import {View, FlatList, SafeAreaView } from 'react-native';
import Header from "../../components/Header/Header"; import Header from "../../components/Header/Header";
import R from "../../assets/R";
import I18n from "../../helper/i18/i18n"; import I18n from "../../helper/i18/i18n";
import ItemView from "./item_view"; import ItemView from "./item_view";
import styles from './style'; import styles from './style';
......
src/screens/profile/view.js
...@@ -20,7 +20,7 @@ const ProfileView = (props) => { ...@@ -20,7 +20,7 @@ const ProfileView = (props) => {
return ( return (
<View style={{ flex: 1, backgroundColor:R.colors.white}}> <View style={{ flex: 1, backgroundColor:R.colors.white}}>
<Header title={"Hồ sơ cá nhân"} isBack /> <Header title={"Hồ sơ cá nhân"} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}> <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 , backgroundColor:R.colors.white}}>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.body_header}> <View style={styles.body_header}>
<View style={styles.container_image}> <View style={styles.container_image}>
...@@ -346,6 +346,7 @@ const styles = StyleSheet.create({ ...@@ -346,6 +346,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
paddingHorizontal: 15, paddingHorizontal: 15,
paddingBottom: 9, paddingBottom: 9,
backgroundColor: R.colors.white
}, },
body_header: { body_header: {
flexDirection: "row", flexDirection: "row",
......
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