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,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 (
-    <Drawer.Navigator
-      drawerContent={(drawerProps) => <CustomDrawerContent {...drawerProps} />}
-      initialRouteName={ScreenName.FILTERMONTH}
-      screenOptions={({ navigation, route }) => ({
-        headerLeft: () => (
-          <View style={styles.headerLeftContainer}>
-            <HeaderBackButton
-              onPress={() => {
-                if (navigation.canGoBack()) {
-                  navigation.pop();
-                } else {
+    <>
+      <Drawer.Navigator
+        drawerContent={(drawerProps) => <CustomDrawerContent {...drawerProps} />}
+        initialRouteName={ScreenName.FILTERMONTH}
+        screenOptions={({ navigation, route }) => ({
+          headerLeft: () => (
+            <View style={styles.headerLeftContainer}>
+              <HeaderBackButton
+                onPress={() => {
+                  if (navigation.canGoBack()) {
+                    navigation.pop();
+                  } else {
+                    navigation.toggleDrawer();
+                  }
+                }}
+                canGoBack={navigation.canGoBack()}
+              />
+              <MenuButton
+                onPress={() => {
                   navigation.toggleDrawer();
-                }
-              }}
-              canGoBack={navigation.canGoBack()}
-            />
-            <MenuButton
-              onPress={() => {
-                navigation.toggleDrawer();
-              }}
-            />
-          </View>
-        ),
+                }}
+              />
+            </View>
+          ),
 
-        headerTitle: () => (
-          <View style={styles.headerTitleContainer}>
-            <HeaderTitle navigation={navigation} route={route} />
-          </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>
-        ),
+          headerTitle: () => (
+            <View style={styles.headerTitleContainer}>
+              <HeaderTitle navigation={navigation} route={route} />
+            </View>
+          ),
 
-        headerStyle: {
-          backgroundColor: R.colors.blue,
-        },
-      })}
-    >
-      <Drawer.Screen
-        name={ScreenName.FILTERMONTH} 
-        component={ClassSchedule}
-        options={{
-          drawerLabel: () => null,
-          drawerIcon: () => null,
-          drawerItemStyle: { height: 0 },
-        }}
-      />
-      <Drawer.Screen
-        name={ScreenName.FILTER3DATE}
-        component={Filter3Date}
-        options={{
-          drawerLabel: () => null,
-          drawerIcon: () => null,
-          drawerItemStyle: { height: 0 },
-        }}
-      />
-      <Drawer.Screen
-        name={ScreenName.FILTERDATE}
-        component={FilterDateView}
-        options={{
-          drawerItemStyle: { height: 0 },
-        }}
-      />
+          headerRight: () => (
+            <View style={styles.headerRightContainer}>
+              <TouchableOpacity 
+                style={styles.searchButton}
+                onPress={handleSearchPress}
+              >
+                <Image source={IconSearch} style={styles.iconSearch} resizeMode="contain" tintColor={R.colors.white}/>
+              </TouchableOpacity>
+              <View style={styles.avatarButton} />
+            </View>
+          ),
+
+          headerStyle: {
+            backgroundColor: R.colors.blue,
+          },
+        })}
+      >
+        <Drawer.Screen
+          name={ScreenName.FILTERMONTH} 
+          component={ClassSchedule}
+          options={{
+            drawerLabel: () => null,
+            drawerIcon: () => null,
+            drawerItemStyle: { height: 0 },
+          }}
+        />
+        <Drawer.Screen
+          name={ScreenName.FILTER3DATE}
+          component={Filter3Date}
+          options={{
+            drawerLabel: () => null,
+            drawerIcon: () => null,
+            drawerItemStyle: { height: 0 },
+          }}
+        />
         <Drawer.Screen
-        name={ScreenName.FILTERWEEK}
-        component={FilterWeekView}
-        options={{
-          drawerItemStyle: { height: 0 },
-        }}
-      />
-    </Drawer.Navigator>
+          name={ScreenName.FILTERDATE}
+          component={FilterDateView}
+          options={{
+            drawerItemStyle: { height: 0 },
+          }}
+        />
+        <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({
     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