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

src/hooks/useFilterDay.js

@@ -73,7 +73,6 @@ export const useFilterDay = (initialEvents) => {
     },
   });
 
-  // Adapter cho view cũ
   const calculateEventPosition = (start, end) => {
     const [sh, sm] = start.split(':').map(Number);
     const [eh, em] = end.split(':').map(Number);

src/routers/drawer_schedule/drawerView.js

@@ -6,8 +6,13 @@ import {
   Text,
   TouchableOpacity,
   View,
+  Modal,
+  TextInput,
+  Alert,
 } from "react-native";
-import { createDrawerNavigator } from "@react-navigation/drawer";
+import {
+  createDrawerNavigator,
+} from "@react-navigation/drawer";
 import { connect } from "react-redux";
 import ClassSchedule from "../../screens/class_schedule";
 import FilterDateView from '../../screens/class_schedule/filterday';
@@ -24,6 +29,8 @@ const IconSearch = R.images.icSearch;
 const DrawerNavigatorView = (props) => {
   const [reload, setReload] = useState(false);
   const [currentDate, setCurrentDate] = useState(new Date());
+  const [searchModalVisible, setSearchModalVisible] = useState(false);
+  const [searchText, setSearchText] = useState('');
 
   const HeaderBackButton = ({ onPress, canGoBack }) => (
     <TouchableOpacity
@@ -101,7 +108,34 @@ 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 (
+    <>
       <Drawer.Navigator
         drawerContent={(drawerProps) => <CustomDrawerContent {...drawerProps} />}
         initialRouteName={ScreenName.FILTERMONTH}
@@ -134,7 +168,10 @@ const DrawerNavigatorView = (props) => {
 
           headerRight: () => (
             <View style={styles.headerRightContainer}>
-            <TouchableOpacity style={styles.searchButton}>
+              <TouchableOpacity 
+                style={styles.searchButton}
+                onPress={handleSearchPress}
+              >
                 <Image source={IconSearch} style={styles.iconSearch} resizeMode="contain" tintColor={R.colors.white}/>
               </TouchableOpacity>
               <View style={styles.avatarButton} />
@@ -179,6 +216,48 @@ const DrawerNavigatorView = (props) => {
           }}
         />
       </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({
     width: 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);
\ No newline at end of file