Skip to content

A
AppUms_Lecturer
Commit 5178bcb5 by tungnq
Options

TODO : Đã bổ sung thêm dialog cho lịch nút button tìm kiếm

parent 7cf52c5d
Showing with 212 additions and 75 deletions
src/hooks/useFilterDay.js
...@@ -73,7 +73,6 @@ export const useFilterDay = (initialEvents) => { ...@@ -73,7 +73,6 @@ export const useFilterDay = (initialEvents) => {
}, },
}); });
// Adapter cho view cũ
const calculateEventPosition = (start, end) => { const calculateEventPosition = (start, end) => {
const [sh, sm] = start.split(':').map(Number); const [sh, sm] = start.split(':').map(Number);
const [eh, em] = end.split(':').map(Number); const [eh, em] = end.split(':').map(Number);
......
src/routers/drawer_schedule/drawerView.js
...@@ -6,8 +6,13 @@ import { ...@@ -6,8 +6,13 @@ import {
Text, Text,
TouchableOpacity, TouchableOpacity,
View, View,
Modal,
TextInput,
Alert,
} from "react-native"; } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer"; import {
createDrawerNavigator,
} from "@react-navigation/drawer";
import { connect } from "react-redux"; import { connect } from "react-redux";
import ClassSchedule from "../../screens/class_schedule"; import ClassSchedule from "../../screens/class_schedule";
import FilterDateView from '../../screens/class_schedule/filterday'; import FilterDateView from '../../screens/class_schedule/filterday';
...@@ -24,6 +29,8 @@ const IconSearch = R.images.icSearch; ...@@ -24,6 +29,8 @@ const IconSearch = R.images.icSearch;
const DrawerNavigatorView = (props) => { const DrawerNavigatorView = (props) => {
const [reload, setReload] = useState(false); const [reload, setReload] = useState(false);
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [searchModalVisible, setSearchModalVisible] = useState(false);
const [searchText, setSearchText] = useState('');
const HeaderBackButton = ({ onPress, canGoBack }) => ( const HeaderBackButton = ({ onPress, canGoBack }) => (
<TouchableOpacity <TouchableOpacity
...@@ -101,84 +108,156 @@ const DrawerNavigatorView = (props) => { ...@@ -101,84 +108,156 @@ const DrawerNavigatorView = (props) => {
); );
}; };
const handleSearchPress = () => {
setSearchModalVisible(true);
};
const handleSearchSubmit = () => {
if (searchText.trim()) {
// Emit event để các screen khác có thể lắng nghe và xử lý tìm kiếm
DeviceEventEmitter.emit('onScheduleSearch', {
searchText: searchText.trim(),
currentScreen: 'schedule'
});
setSearchModalVisible(false);
setSearchText('');
Alert.alert('Tìm kiếm', `Đang tìm kiếm: "${searchText.trim()}"`);
} else {
Alert.alert('Thông báo', 'Vui lòng nhập từ khóa tìm kiếm');
}
};
const handleSearchCancel = () => {
setSearchModalVisible(false);
setSearchText('');
};
return ( return (
<Drawer.Navigator <>
drawerContent={(drawerProps) => <CustomDrawerContent {...drawerProps} />} <Drawer.Navigator
initialRouteName={ScreenName.FILTERMONTH} drawerContent={(drawerProps) => <CustomDrawerContent {...drawerProps} />}
screenOptions={({ navigation, route }) => ({ initialRouteName={ScreenName.FILTERMONTH}
headerLeft: () => ( screenOptions={({ navigation, route }) => ({
<View style={styles.headerLeftContainer}> headerLeft: () => (
<HeaderBackButton <View style={styles.headerLeftContainer}>
onPress={() => { <HeaderBackButton
if (navigation.canGoBack()) { onPress={() => {
navigation.pop(); if (navigation.canGoBack()) {
} else { navigation.pop();
} else {
navigation.toggleDrawer();
}
}}
canGoBack={navigation.canGoBack()}
/>
<MenuButton
onPress={() => {
navigation.toggleDrawer(); navigation.toggleDrawer();
} }}
}} />
canGoBack={navigation.canGoBack()} </View>
/> ),
<MenuButton
onPress={() => {
navigation.toggleDrawer();
}}
/>
</View>
),
headerTitle: () => ( headerTitle: () => (
<View style={styles.headerTitleContainer}> <View style={styles.headerTitleContainer}>
<HeaderTitle navigation={navigation} route={route} /> <HeaderTitle navigation={navigation} route={route} />
</View> </View>
), ),
headerRight: () => (
<View style={styles.headerRightContainer}>
<TouchableOpacity style={styles.searchButton}>
<Image source={IconSearch} style={styles.iconSearch} resizeMode="contain" tintColor={R.colors.white}/>
</TouchableOpacity>
<View style={styles.avatarButton} />
</View>
),
headerStyle: { headerRight: () => (
backgroundColor: R.colors.blue, <View style={styles.headerRightContainer}>
}, <TouchableOpacity
})} style={styles.searchButton}
> onPress={handleSearchPress}
<Drawer.Screen >
name={ScreenName.FILTERMONTH} <Image source={IconSearch} style={styles.iconSearch} resizeMode="contain" tintColor={R.colors.white}/>
component={ClassSchedule} </TouchableOpacity>
options={{ <View style={styles.avatarButton} />
drawerLabel: () => null, </View>
drawerIcon: () => null, ),
drawerItemStyle: { height: 0 },
}} headerStyle: {
/> backgroundColor: R.colors.blue,
<Drawer.Screen },
name={ScreenName.FILTER3DATE} })}
component={Filter3Date} >
options={{ <Drawer.Screen
drawerLabel: () => null, name={ScreenName.FILTERMONTH}
drawerIcon: () => null, component={ClassSchedule}
drawerItemStyle: { height: 0 }, options={{
}} drawerLabel: () => null,
/> drawerIcon: () => null,
<Drawer.Screen drawerItemStyle: { height: 0 },
name={ScreenName.FILTERDATE} }}
component={FilterDateView} />
options={{ <Drawer.Screen
drawerItemStyle: { height: 0 }, name={ScreenName.FILTER3DATE}
}} component={Filter3Date}
/> options={{
drawerLabel: () => null,
drawerIcon: () => null,
drawerItemStyle: { height: 0 },
}}
/>
<Drawer.Screen <Drawer.Screen
name={ScreenName.FILTERWEEK} name={ScreenName.FILTERDATE}
component={FilterWeekView} component={FilterDateView}
options={{ options={{
drawerItemStyle: { height: 0 }, drawerItemStyle: { height: 0 },
}} }}
/> />
</Drawer.Navigator> <Drawer.Screen
name={ScreenName.FILTERWEEK}
component={FilterWeekView}
options={{
drawerItemStyle: { height: 0 },
}}
/>
</Drawer.Navigator>
{/* Search Modal */}
<Modal
visible={searchModalVisible}
transparent={true}
animationType="fade"
onRequestClose={handleSearchCancel}
>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.modalTitle}>Tìm kiếm lịch</Text>
<TextInput
style={styles.searchInput}
value={searchText}
onChangeText={setSearchText}
placeholder="Nhập từ khóa tìm kiếm..."
placeholderTextColor={R.colors.gray}
autoFocus={true}
returnKeyType="search"
onSubmitEditing={handleSearchSubmit}
/>
<View style={styles.modalButtonContainer}>
<TouchableOpacity
style={styles.cancelButton}
onPress={handleSearchCancel}
>
<Text style={styles.cancelButtonText}>Hủy</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.searchButtonModal}
onPress={handleSearchSubmit}
>
<Text style={styles.searchButtonText}>Tìm kiếm</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</>
); );
}; };
...@@ -234,6 +313,64 @@ const styles = StyleSheet.create({ ...@@ -234,6 +313,64 @@ const styles = StyleSheet.create({
width: 20, width: 20,
height: 20, height: 20,
}, },
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalContent: {
backgroundColor: R.colors.white,
borderRadius: 10,
padding: 20,
width: '80%',
},
modalTitle: {
fontSize: R.sizes.lg,
color: R.colors.black,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
marginBottom: 10,
},
searchInput: {
height: 40,
borderColor: R.colors.gray,
borderWidth: 1,
paddingHorizontal: 10,
paddingVertical: 5,
marginBottom: 10,
},
modalButtonContainer: {
flexDirection: 'row',
justifyContent:'flex-end'
},
cancelButton: {
backgroundColor: R.colors.orange,
borderRadius: 5,
marginRight: 10,
height:30,
width:80,
alignItems:'center',
justifyContent:'center',
},
cancelButtonText: {
fontSize: R.sizes.md,
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
searchButtonModal: {
backgroundColor: R.colors.blue,
borderRadius: 5,
height:30,
width:80,
alignItems:'center',
justifyContent:'center',
},
searchButtonText: {
fontSize: R.sizes.md,
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
},
}); });
export default connect(mapStateToProps, {})(DrawerNavigatorView); export default connect(mapStateToProps, {})(DrawerNavigatorView);
\ 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