fix confirm working day

src/api/confirmDateAPI.js

@@ -8,6 +8,14 @@ const confirmDateAPI = {
       `myAbsentApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
     ),
   requestGetAbsentChart: () => axiosClient.get('myAbsentRequests/statistic'),
+  requestPostConfirmWorkingDay: payload =>
+    axiosClient.post('absentRequests', payload),
+  requestPostApproveConfirmWorkingDay: ({id}) =>
+    axiosClient.post(`absentRequests/${id}/approve?comment=&nextApproverId=`),
+  requestMyAbsentRequest: ({page, pageSize}) =>
+    axiosClient.get(
+      `myAbsentRequests?Filters=&Sorts=-start&Page=${page}&PageSize=${pageSize}`,
+    ),
 };
 
 export default confirmDateAPI;

src/components/AppText/index.js

@@ -5,15 +5,7 @@ import colors from '../../values/colors';
 
 const FONT_FAMILY_BASE = fonts.beProLight;
 
-const AppText = ({
-  variant,
-  children,
-  style,
-  onPress,
-  color,
-  isSubText,
-  isBold,
-}) => {
+const AppText = ({variant, children, style, onPress, color, isSubText}) => {
   const defaultStyle = {
     fontFamily: FONT_FAMILY_BASE,
     fontSize: isSubText ? 12 : 14,

src/screens/confirm_date/ConfirmDateContainer.js

@@ -8,13 +8,27 @@ import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
 import {
   getAbsentChart,
   getConfirmApprovedDate,
+  getMyAbsentRequests,
   getUserConfirmDay,
+  handleSelectManagersConfirmWorkingDayRequest,
+  postConfirmWorkingDay,
+  postSubmitApproveConfirmWorkingDayRequest,
 } from './confirmDateSlice';
 import ConfirmDateMainView from './template/ConfirmMainView';
 import confirmDatePropsProvider from './confirmDatePropsProvider';
 import Utils from '../../utils';
+import {launchImageLibrary} from 'react-native-image-picker';
+import {handleSelectManagersLeaveRequest} from '../onleave/onLeaveSlice';
+import {ToastMessage} from '../../utils/MessageUtil';
+import moment from 'moment';
 const ConfirmDateContainer = props => {
-  const {confirmDateList, confirmApprovedDateList, userInfo} = props;
+  const {
+    confirmDateList,
+    confirmApprovedDateList,
+    userInfo,
+    directManagersList,
+    myAbsentRequests,
+  } = props;
   const dispatch = useDispatch();
 
   const [requestApproveArr, setRequestApproveArr] = useState([]);
@@ -47,19 +61,59 @@ const ConfirmDateContainer = props => {
   const [modalRequestConfirmWorkingDays, setModalRequestConfirmWorkingDays] =
     useState({
       visible: false,
+      userInfo: null,
+      isRequest: false,
     });
 
   const [dayPress, setDayPress] = useState();
-  // open the modal
-  const onOpenDetailModal = detailItem => {};
 
-  const onOpenModalRequestConfirmWorkingDays = () => {
-    setModalRequestConfirmWorkingDays({userinfo: userInfo, visible: true});
+  const [openTimePicker, setOpenTimePicker] = useState({
+    startDate: false,
+    finishDate: false,
+    startTime: false,
+    finishTime: false,
+  });
+  const [confirmDateRequestImage, setConfirmDateRequestImage] = useState([]);
+  const [confirmDateRequestTicket, setConfirmDateRequestTicket] = useState({
+    startDate: new Date(),
+    finishDate: new Date(),
+    reason: '',
+  });
+
+  // open the modal
+  const onOpenModalRequestConfirmWorkingDays = userDetails => {
+    const user = {
+      id: userDetails?.staff_id,
+      avatar: userDetails?.extend_creator_avatar,
+      full_name: userDetails?.extend_creator_full_name,
+      employee_code: userDetails?.extend_creator_employee_code,
+      position: userDetails?.extend_creator_position,
+      isApprover: userDetails?.approver_id === userInfo?.id,
+      confirmStatus: userDetails?.extend_approved_status_name !== 'APPROVED',
+      confirm_working_id: userDetails?.id,
+    };
+    setModalRequestConfirmWorkingDays({
+      userInfo: userDetails ? user : userInfo,
+      visible: true,
+      isRequest: !userDetails ? true : false,
+    });
+    if (userDetails) {
+      setConfirmDateRequestTicket({
+        startDate: new Date(userDetails?.start),
+        finishDate: new Date(userDetails?.finish),
+        reason: userDetails?.reason,
+      });
+    }
   };
 
   const onCloseModalRequestConfirmWorkingDays = () => {
-    setModalRequestConfirmWorkingDays({userinfo: null, visible: false});
+    setModalRequestConfirmWorkingDays({
+      userInfo: null,
+      visible: false,
+      isRequest: false,
+    });
   };
+
   // main function
   const navigateToDayWage = () => {
     RootNavigation.navigate(APP_NAVIGATE_SCREEN.DAY_WAGE);
@@ -271,8 +325,126 @@ const ConfirmDateContainer = props => {
       }
     });
   }, [dataChart.month, dispatch]);
+  const fetchMyAbsentRequests = () => {
+    dispatch(getMyAbsentRequests({page: 1, pageSize: 5}));
+  };
+  //============================= REQUEST CONFIRM WORKING DAYS =============================//
+  const openGallery = () => {
+    launchImageLibrary(
+      {
+        mediaType: 'photo',
+        includeBase64: true,
+      },
+      response => {
+        if (!response.didCancel) {
+          //console.log('AAA');
+          const {assets} = response;
+          setConfirmDateRequestImage(prev => [...prev, ...assets]);
+          //console.log(response.assets[0].uri)
+        }
+      },
+    );
+  };
+  const onDeleteConfirmDateRequestImage = index => {
+    const clone = [...confirmDateRequestImage];
+    clone.splice(index, 1);
+    setConfirmDateRequestImage([...clone]);
+  };
+  const onSelectManagerConfirmWorkingDayRequest = (index, value) => {
+    dispatch(handleSelectManagersLeaveRequest({index, value}));
+  };
+  const onSubmitConfirmWorkingDayRequest = () => {
+    if (handleSubmitConfirmWorkingDayRequest()) {
+      const approver = directManagersList.filter(item => item.isChecked);
+      const payload = {
+        start: confirmDateRequestTicket.startDate,
+        finish: confirmDateRequestTicket.finishDate,
+        approver_id: approver.length > 0 ? approver[0].id : null,
+        reason: confirmDateRequestTicket.reason,
+        timeStart: moment(confirmDateRequestTicket.startDate).format('HH:mm'),
+        timeFinish: moment(confirmDateRequestTicket.finishDate).format('HH:mm'),
+      };
+      dispatch(postConfirmWorkingDay(payload)).then(response => {
+        const {success} = Utils.getValues(response, 'payload', false);
+        success && fetchAbsentApprovalRequests();
+        ToastMessage({
+          title: 'Hệ thống',
+          message: `Đã gửi yêu cầu xác nhận ${
+            success ? 'thành công' : 'thất bại'
+          }`,
+          type: success ? 'success' : 'error',
+        });
+        onCloseModalRequestConfirmWorkingDays();
+      });
+    }
+  };
+  const handleSubmitConfirmWorkingDayRequest = () => {
+    if (directManagersList?.length === 0) {
+      return false;
+    }
+    const isSelectedManager = directManagersList.filter(item => item.isChecked);
+    if (confirmDateRequestTicket.reason.length === 0) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Vui lòng nhập lý do',
+        type: 'error',
+      });
+      return false;
+    } else if (
+      moment(confirmDateRequestTicket.startDate) >
+      moment(confirmDateRequestTicket.finishDate)
+    ) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Vui lòng chọn ngày bắt đầu nhỏ hơn ngày kết thúc',
+        type: 'error',
+        timeVisible: 5000,
+      });
+      return false;
+    } else if (isSelectedManager.length === 0) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Vui lòng chọn người duyệt!!!',
+        type: 'error',
+        timeVisible: 5000,
+      });
+      return false;
+    } else {
+      return true;
+    }
+  };
+  const onSubmitApproveConfirmWorkingDaysRequest = confirm_working_id => {
+    try {
+      dispatch(
+        postSubmitApproveConfirmWorkingDayRequest({id: confirm_working_id}),
+      ).then(response => {
+        const {success} = Utils.getValues(response, 'payload', false);
+        if (success) {
+          fetchAbsentApprovalRequests();
+          onCloseModalRequestConfirmWorkingDays();
+        }
+        ToastMessage({
+          title: 'Hệ thống',
+          message: `Duyệt xác nhận ngày công ${
+            success ? 'thành công' : 'thất bại'
+          }`,
+          type: success ? 'success' : 'error',
+        });
+      });
+    } catch (err) {
+      ToastMessage({
+        title: 'Hệ thống',
+        message: 'Đã có lỗi xảy ra !!!',
+        type: 'error',
+      });
+    }
+  };
 
   // useEffect
+  useEffect(() => {
+    fetchMyAbsentRequests();
+  }, []);
+
   useEffect(() => {
     confirmDateList && formatDataConfirmListFromApi();
   }, [confirmDateList]);
@@ -302,8 +474,15 @@ const ConfirmDateContainer = props => {
     approveReqPayload,
     dayPress,
     modalRequestConfirmWorkingDays,
+    confirmDateRequestImage,
+    confirmDateRequestTicket,
+    openTimePicker,
+    directManagersList,
+    myAbsentRequests,
+    setOpenTimePicker,
+    setConfirmDateRequestTicket,
+    openGallery,
     onChangeDayPressInChart,
-    onOpenDetailModal,
     onLoadMoreConfirmList,
     navigateToDayWage,
     onLoadMoreRequestApprove,
@@ -313,6 +492,10 @@ const ConfirmDateContainer = props => {
     onChangeMonthFilter,
     onCloseModalRequestConfirmWorkingDays,
     onOpenModalRequestConfirmWorkingDays,
+    onDeleteConfirmDateRequestImage,
+    onSelectManagerConfirmWorkingDayRequest,
+    onSubmitConfirmWorkingDayRequest,
+    onSubmitApproveConfirmWorkingDaysRequest,
   };
   return <ConfirmDateMainView {...confirmDatePropsProvider(confirmProps)} />;
 };

src/screens/confirm_date/confirmDatePropsProvider.js

@@ -18,6 +18,18 @@ export default function confirmDatePropsProvider(props) {
     onChangeMonthFilter,
     onCloseModalRequestConfirmWorkingDays,
     onOpenModalRequestConfirmWorkingDays,
+    onDeleteConfirmDateRequestImage,
+    confirmDateRequestImage,
+    openGallery,
+    confirmDateRequestTicket,
+    setConfirmDateRequestTicket,
+    openTimePicker,
+    setOpenTimePicker,
+    directManagersList,
+    onSelectManagerConfirmWorkingDayRequest,
+    onSubmitConfirmWorkingDayRequest,
+    onSubmitApproveConfirmWorkingDaysRequest,
+    myAbsentRequests,
   } = props;
   return {
     userInfo,
@@ -40,9 +52,26 @@ export default function confirmDatePropsProvider(props) {
       approveReqPayload,
       onChangeSelectFilter,
       requestApproveArr,
-      onOpenDetailModal,
+      onOpenModalRequestConfirmWorkingDays,
+    },
+    modalRequestConfirmWorkingDaysProps: {
+      userInfo: modalRequestConfirmWorkingDays.userInfo,
+      onClose: onCloseModalRequestConfirmWorkingDays,
+      isRequest: modalRequestConfirmWorkingDays.isRequest,
+      confirmDateRequestImage,
+      onDeleteConfirmDateRequestImage,
+      openGallery,
+      setOpenTimePicker,
+      confirmDateRequestTicket,
+      openTimePicker,
+      directManagersList,
+      setConfirmDateRequestTicket,
+      onSelectManagerConfirmWorkingDayRequest,
+      onSubmitConfirmWorkingDayRequest,
+      onSubmitApproveConfirmWorkingDaysRequest,
     },
     onCloseModalRequestConfirmWorkingDays,
     onOpenModalRequestConfirmWorkingDays,
+    myAbsentRequests,
   };
 }

src/screens/confirm_date/confirmDateSlice.js

@@ -2,10 +2,14 @@ import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
 
 import serviceRequest from '../../app/serviceRequest';
 
-import Utils from '../../utils';
-import authAPI from '../../api/authAPI';
 import confirmDateAPI from '../../api/confirmDateAPI';
-const initialState = {};
+
+import Utils from '../../utils';
+
+const initialState = {
+  confirmApprovedDateList: [],
+  myAbsentRequests: [],
+};
 
 export const getUserConfirmDay = createAsyncThunk(
   'confirmDate/getUserConfirmDay',
@@ -33,6 +37,19 @@ export const getConfirmApprovedDate = createAsyncThunk(
     });
   },
 );
+export const getMyAbsentRequests = createAsyncThunk(
+  'confirmDate/getMyAbsentRequests',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: confirmDateAPI.requestMyAbsentRequest,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 export const getAbsentChart = createAsyncThunk(
   'confirmDate/getAbsentChart',
   async (data, thunkAPI) => {
@@ -46,7 +63,32 @@ export const getAbsentChart = createAsyncThunk(
     });
   },
 );
-
+export const postConfirmWorkingDay = createAsyncThunk(
+  'confirmDate/postConfirmWorkingDay',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: confirmDateAPI.requestPostConfirmWorkingDay,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
+export const postSubmitApproveConfirmWorkingDayRequest = createAsyncThunk(
+  'confirmDate/postSubmitApproveConfirmWorkingDayRequest',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: confirmDateAPI.requestPostApproveConfirmWorkingDay,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 const authSlice = createSlice({
   name: 'confirmDate',
   initialState: initialState,
@@ -54,7 +96,6 @@ const authSlice = createSlice({
   extraReducers: builder => {
     builder.addCase(getUserConfirmDay.fulfilled, (state, action) => {
       const {success} = Utils.getValues(action, 'payload', false);
-
       if (success) {
         state.confirmDateList = Utils.getValues(
           action,
@@ -73,8 +114,19 @@ const authSlice = createSlice({
         );
       }
     });
+    builder.addCase(getMyAbsentRequests.fulfilled, (state, action) => {
+      const {success} = Utils.getValues(action, 'payload', false);
+      
+      if (success) {
+        state.myAbsentRequests = Utils.getValues(
+          action,
+          'payload.data.collection',
+          [],
+        );
+      }
+    });
   },
 });
 
-const {reducer} = authSlice;
+const {reducer, actions} = authSlice;
 export default reducer;

src/screens/confirm_date/index.js

 import React from 'react';
 
 import {useSelector} from 'react-redux';
-import {authSelector, confirmDateSelector} from '../../app/selectors';
+import {
+  authSelector,
+  confirmDateSelector,
+  onLeaveSelector,
+} from '../../app/selectors';
 import ConfirmDateContainer from './ConfirmDateContainer';
 
 export default function ConfirmDateScreen() {
   const authSelect = useSelector(authSelector);
   const confirmDateSelect = useSelector(confirmDateSelector);
+  const onLeaveSelect = useSelector(onLeaveSelector);
+
+  const {directManagersList = []} = onLeaveSelect;
   const {userInfo} = authSelect;
-  const {confirmDateList, confirmApprovedDateList} = confirmDateSelect;
+  const {confirmDateList, confirmApprovedDateList, myAbsentRequests} =
+    confirmDateSelect;
   const confirmScreenProps = {
     userInfo,
     confirmDateList,
     confirmApprovedDateList,
+    directManagersList,
+    myAbsentRequests,
   };
   return <ConfirmDateContainer {...confirmScreenProps} />;
 }

src/screens/confirm_date/style.js

@@ -120,10 +120,10 @@ const styles = StyleSheet.create({
     marginTop: 22,
   },
   modalView: {
-    backgroundColor: 'white',
+    backgroundColor: colors.white,
     borderRadius: 20,
-    padding: 20,
-    shadowColor: '#000',
+    padding: 10,
+    shadowColor: colors.black1,
     shadowOffset: {
       width: 0,
       height: 2,
@@ -131,8 +131,9 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 4,
     elevation: 5,
-    marginTop: 20,
+    marginTop: 80,
     height: windowHeight,
+    width: '100%',
   },
   button: {
     borderRadius: 20,
@@ -151,7 +152,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   modalTitle: {
-    fontWeight: '500',
+    fontWeight: '800',
     fontSize: 16,
   },
   dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
@@ -181,9 +182,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   inputText: {
-    backgroundColor: '#FFF',
-    borderBottomWidth: 0.2,
-    borderColor: '#444',
+    backgroundColor: colors.white,
+    width: 200,
   },
   touchableOpacity: {
     borderColor: colors.primary_blue,
@@ -201,7 +201,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     height: 40,
     borderRadius: 8,
-    width: 100,
+    paddingHorizontal: 10,
   },
   btnCancel: {
     backgroundColor: colors.white,
@@ -411,4 +411,44 @@ export const statisticsConfirmWorkdaysStyles = StyleSheet.create({
     borderRadius: 5,
   },
 });
+export const modalRequestConfirmWorkdaysStyles = StyleSheet.create({
+  avatarUser: {
+    width: 50,
+    height: 50,
+    borderRadius: 30,
+  },
+  btnCancel: {
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 40,
+    borderRadius: 8,
+    width: 100,
+  },
+  rowView: {
+    flexDirection: 'row',
+    marginTop: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  addConfirmDateRequestImageBtn: {
+    borderColor: colors.primary_blue,
+    borderStyle: 'dotted',
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 50,
+    padding: 10,
+    width: 50,
+  },
+  chooseTimeSection: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomWidth: 0.5,
+    height: 35,
+    width: 200,
+    borderColor: colors.grey444,
+  },
+});
 export default styles;

src/screens/onleave/style.js

@@ -417,7 +417,7 @@ export const leavesModalStyles = StyleSheet.create({
   },
 
   modalView: {
-    backgroundColor: 'white',
+    backgroundColor: colors.white,
     borderRadius: 20,
     paddingHorizontal: 10,
     shadowColor: colors.black1,

src/styles/commonStyles.js

@@ -24,5 +24,8 @@ const commonStyles = StyleSheet.create({
   marginVertical10: {
     marginVertical: 10,
   },
+  marginVertical20: {
+    marginVertical: 20,
+  },
 });
 export default commonStyles;