Parcourir la source

navigation and some fixes

Viktoriia il y a 1 mois
Parent
commit
cd005750ab

+ 2 - 1
src/screens/InAppScreens/MapScreen/RegionViewScreen/index.tsx

@@ -211,7 +211,8 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
       selectedNoOfVisits: regionData?.no_of_visits || 1,
       id: regionId
     });
-    setIsEditModalVisible(true);
+    // setIsEditModalVisible(true);
+    navigation.navigate(NAVIGATION_PAGES.EDIT_NM_DATA, { regionId: regionId });
   };
 
   const handleUpdateNmModal = (

+ 2 - 1
src/screens/InAppScreens/TravelsScreen/EditCountryDataScreen/index.tsx

@@ -118,7 +118,8 @@ const EditCountryDataScreen = ({ route }: { route: any }) => {
       selectedNoOfVisits: item.visits || 1,
       id: item.id
     });
-    setIsEditModalVisible(true);
+    // setIsEditModalVisible(true);
+    navigation.navigate(...([NAVIGATION_PAGES.EDIT_NM_DATA, { regionId: item.id }] as never));
   };
 
   useEffect(() => {

+ 139 - 47
src/screens/InAppScreens/TravelsScreen/EditNmDataScreen/index.tsx

@@ -65,13 +65,7 @@ interface DatePickerState {
   field: 'startDate' | 'endDate';
 }
 
-const EditNmDataScreen = ({
-  navigation,
-  route
-}: {
-  navigation: any;
-  route: any;
-}) => {
+const EditNmDataScreen = ({ navigation, route }: { navigation: any; route: any }) => {
   const id = route.params?.regionId;
   const token = storage.get('token', StoreType.STRING) as string;
 
@@ -301,22 +295,36 @@ const EditNmDataScreen = ({
   }, [validateVisits, visits, navigation]);
 
   const currentYear = new Date().getFullYear();
-  const years = Array.from({ length: 100 }, (_, i) => currentYear - i);
-  const months = [
-    { label: '-', value: null },
-    { label: 'January', value: 1 },
-    { label: 'February', value: 2 },
-    { label: 'March', value: 3 },
-    { label: 'April', value: 4 },
-    { label: 'May', value: 5 },
-    { label: 'June', value: 6 },
-    { label: 'July', value: 7 },
-    { label: 'August', value: 8 },
-    { label: 'September', value: 9 },
-    { label: 'October', value: 10 },
-    { label: 'November', value: 11 },
-    { label: 'December', value: 12 }
-  ];
+  const years = Array.from({ length: 100 }, (_, i) => currentYear - 99 + i);
+  const getAvailableMonths = (year: number) => {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth() + 1;
+
+    const allMonths = [
+      { label: '-', value: null },
+      { label: 'Jan', value: 1 },
+      { label: 'Feb', value: 2 },
+      { label: 'Mar', value: 3 },
+      { label: 'Apr', value: 4 },
+      { label: 'May', value: 5 },
+      { label: 'Jun', value: 6 },
+      { label: 'Jul', value: 7 },
+      { label: 'Aug', value: 8 },
+      { label: 'Sep', value: 9 },
+      { label: 'Oct', value: 10 },
+      { label: 'Nov', value: 11 },
+      { label: 'Dec', value: 12 }
+    ];
+
+    if (year == currentYear) {
+      return allMonths.filter((month) => month.value === null || month.value <= currentMonth);
+    }
+
+    return allMonths;
+  };
+
+  const months = getAvailableMonths(selectedYear);
 
   const getDaysInMonth = (
     year: number,
@@ -324,10 +332,20 @@ const EditNmDataScreen = ({
   ): Array<{ label: string; value: number | null }> => {
     if (!month) return [{ label: '-', value: null }];
 
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth() + 1;
+    const currentDay = currentDate.getDate();
+
     const daysCount = moment(`${year}-${month}`, 'YYYY-M').daysInMonth();
     const days = [{ label: '-', value: null }];
 
-    for (let i = 1; i <= daysCount; i++) {
+    let maxDay = daysCount;
+    if (year == currentYear && month == currentMonth) {
+      maxDay = currentDay;
+    }
+
+    for (let i = 1; i <= maxDay; i++) {
       days.push({ label: i.toString(), value: i });
     }
 
@@ -337,11 +355,30 @@ const EditNmDataScreen = ({
   const days = getDaysInMonth(selectedYear, selectedMonth);
 
   useEffect(() => {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth() + 1;
+    const currentDay = currentDate.getDate();
+
     if (selectedDay && selectedMonth) {
       const maxDays = moment(`${selectedYear}-${selectedMonth}`, 'YYYY-M').daysInMonth();
+
       if (selectedDay > maxDays) {
-        setSelectedDay(null);
+        setSelectedDay(currentDay);
       }
+
+      if (
+        selectedYear === currentYear &&
+        selectedMonth === currentMonth &&
+        selectedDay > currentDay
+      ) {
+        setSelectedDay(currentDay);
+      }
+    }
+
+    if (selectedYear === currentYear && selectedMonth && selectedMonth > currentMonth) {
+      setSelectedMonth(currentMonth);
+      setSelectedDay(currentDay);
     }
   }, [selectedYear, selectedMonth, selectedDay]);
 
@@ -352,14 +389,15 @@ const EditNmDataScreen = ({
   ) => {
     setShowDatePicker({ visitId, field });
 
-    if (initialDate) {
-      setSelectedYear(initialDate.year || currentYear);
+    if (initialDate && initialDate.year) {
+      setSelectedYear(initialDate.year);
       setSelectedMonth(initialDate.month || null);
       setSelectedDay(initialDate.day || null);
     } else {
-      setSelectedYear(currentYear);
-      setSelectedMonth(null);
-      setSelectedDay(null);
+      const today = new Date();
+      setSelectedYear(today.getFullYear());
+      setSelectedMonth(today.getMonth() + 1);
+      setSelectedDay(today.getDate());
     }
 
     actionSheetRef.current?.show();
@@ -535,7 +573,7 @@ const EditNmDataScreen = ({
 
       <ActionSheet
         ref={actionSheetRef}
-        gestureEnabled={true}
+        gestureEnabled={false}
         headerAlwaysVisible={true}
         CustomHeaderComponent={
           <View style={styles.datePickerHeader}>
@@ -551,12 +589,17 @@ const EditNmDataScreen = ({
       >
         <View style={styles.wheelContainer}>
           <View style={styles.wheelColumn}>
-            <Text style={styles.wheelLabel}>Year</Text>
+            <Text style={styles.wheelLabel}>Day</Text>
             <WheelPicker
               style={styles.wheelPicker}
-              pickerData={years}
-              selectedValue={selectedYear}
-              onValueChange={(value: number) => setSelectedYear(value)}
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600', padding: 0 }}
+              pickerData={days?.map((d) => d.label)}
+              selectedValue={days?.find((d) => d.value === selectedDay)?.label || '-'}
+              onValueChange={(value: string) => {
+                const day = days?.find((d) => d.label === value);
+                setSelectedDay(day?.value || null);
+              }}
             />
           </View>
 
@@ -564,25 +607,74 @@ const EditNmDataScreen = ({
             <Text style={styles.wheelLabel}>Month</Text>
             <WheelPicker
               style={styles.wheelPicker}
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{
+                fontSize: 16,
+                fontFamily: 'montserrat-600'
+              }}
               pickerData={months ? months?.map((m) => m.label) : []}
               selectedValue={months?.find((m) => m.value === selectedMonth)?.label || '-'}
               onValueChange={(value: string) => {
                 const month = months?.find((m) => m.label === value);
                 setSelectedMonth(month?.value || null);
-                if (!month?.value) setSelectedDay(null);
+
+                if (!month?.value) {
+                  setSelectedDay(null);
+                } else {
+                  const currentDate = new Date();
+                  const currentYear = currentDate.getFullYear();
+                  const currentMonth = currentDate.getMonth() + 1;
+
+                  if (selectedDay) {
+                    const maxDaysInMonth = moment(
+                      `${selectedYear}-${month.value}`,
+                      'YYYY-M'
+                    ).daysInMonth();
+                    if (selectedDay > maxDaysInMonth) {
+                      setSelectedDay(maxDaysInMonth);
+                    }
+                  }
+                }
               }}
             />
           </View>
 
           <View style={styles.wheelColumn}>
-            <Text style={styles.wheelLabel}>Day</Text>
+            <Text style={styles.wheelLabel}>Year</Text>
             <WheelPicker
               style={styles.wheelPicker}
-              pickerData={days?.map((d) => d.label)}
-              selectedValue={days?.find((d) => d.value === selectedDay)?.label || '-'}
-              onValueChange={(value: string) => {
-                const day = days?.find((d) => d.label === value);
-                setSelectedDay(day?.value || null);
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600' }}
+              isCyclic={true}
+              pickerData={years}
+              selectedValue={selectedYear}
+              onValueChange={(value: number) => {
+                setSelectedYear(value);
+
+                const currentDate = new Date();
+                const currentYear = currentDate.getFullYear();
+                const currentMonth = currentDate.getMonth() + 1;
+
+                if (value == currentYear && selectedMonth && selectedMonth > currentMonth) {
+                  setSelectedMonth(currentMonth);
+                  setSelectedDay(currentDate.getDate());
+                } else if (selectedMonth) {
+                  const maxDaysInMonth = moment(
+                    `${value}-${selectedMonth}`,
+                    'YYYY-M'
+                  ).daysInMonth();
+                  if (selectedDay && selectedDay > maxDaysInMonth) {
+                    setSelectedDay(maxDaysInMonth);
+                  }
+                  if (
+                    value === currentYear &&
+                    selectedMonth === currentMonth &&
+                    selectedDay &&
+                    selectedDay > currentDate.getDate()
+                  ) {
+                    setSelectedDay(currentDate.getDate());
+                  }
+                }
               }}
             />
           </View>
@@ -708,7 +800,7 @@ const styles = StyleSheet.create({
   },
   wheelContainer: {
     flexDirection: 'row',
-    paddingHorizontal: 16,
+    paddingHorizontal: 14,
     paddingTop: 16,
     paddingBottom: 24
   },
@@ -718,12 +810,12 @@ const styles = StyleSheet.create({
   },
   wheelLabel: {
     fontSize: 14,
-    color: '#666',
-    marginBottom: 10,
-    fontWeight: '500'
+    color: Colors.DARK_BLUE,
+    marginBottom: 8,
+    fontWeight: '600'
   },
   wheelPicker: {
-    height: 215,
+    height: 210,
     width: '100%',
     backgroundColor: 'white'
   },

+ 2 - 1
src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -96,7 +96,8 @@ const RegionsScreen = () => {
       selectedNoOfVisits: item.visits || 1,
       id: item.id
     });
-    setIsEditModalVisible(true);
+    // setIsEditModalVisible(true);
+    navigation.navigate(...([NAVIGATION_PAGES.EDIT_NM_DATA, { regionId: item.id }] as never));
   };
 
   const handleUpdateTCC = useCallback(