fix request leave

src/components/Select/index.js

@@ -22,6 +22,7 @@ const SelectDropdownComponent = ({
   setValue,
   width,
   height,
+  disable = false,
 }) => {
   //   const [value, setValue] = useState(null);
   const [isFocus, setIsFocus] = useState(false);
@@ -29,6 +30,7 @@ const SelectDropdownComponent = ({
   return (
     <View style={styles.container}>
       <Dropdown
+        disable={disable}
         style={[
           styles.dropdown,
           {width: width ?? 100, height: height ?? 40},

src/components/TextInputComponent.js

@@ -36,7 +36,6 @@ const TextInputComponent = ({
   noBorder,
   autoCompleteType,
   borderColor,
-  type,
 }) => {
   return (
     <View style={stylesTextInput.container}>
@@ -78,7 +77,7 @@ const TextInputComponent = ({
           secureTextEntry={secureTextEntry}
           maxLength={maxLength}
           onFocus={onFocus}
-          editable={!disable}
+          editable={disable}
           autoComplete={autoCompleteType}
         />
         {rightIcon && (

src/network/api/onLeaveApi.js

@@ -11,5 +11,7 @@ export default {
     ),
   requestGetLeaveCategory: () => axiosClient.get('leaveCategories'),
   requestGetDirectManagers: () => axiosClient.get('myDirectManagers'),
-  requestPostLeaveRequest: (payload) => axiosClient.post('leaveDays', payload),
+  requestPostLeaveRequest: payload => axiosClient.post('leaveDays', payload),
+  requestPostApproveLeaveRequest: ({id}) =>
+    axiosClient.post(`leaveDays/${id}/approve?comment=`),
 };

src/screens/confirm_date/ConfirmDateContainer.js

@@ -50,17 +50,7 @@ const ConfirmDateContainer = props => {
 
   const [dayPress, setDayPress] = useState();
   // open the modal
-  const onOpenDetailModal = detailItem => {
-    setModalContent(
-      <ConfirmModalDetails
-        onClose={onCloseModal}
-        alertMessage={alertMessage}
-        userDetails={userInfo}
-        detailItem={detailItem}
-        setApproveReqPayload={setApproveReqPayload}
-      />,
-    );
-  };
+  const onOpenDetailModal = detailItem => {};
 
   const onOpenAddModal = () => {
     setModalContent(

src/screens/confirm_date/template/ConfirmMainView.js

@@ -36,9 +36,6 @@ const ConfirmDateMainView = ({
   onOpenRequestLeavesModal,
   approveReqPayload,
   onChangeSelectFilter,
-  onChangeMonthFilter,
-  dayPress,
-  onChangeDayPressInChart,
   minutesToHours,
 }) => {
   const typeChartColor = [

src/screens/onleave/OnLeaveContainer.js

 /* eslint-disable react-hooks/exhaustive-deps */
 
 import Moment from 'moment';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import RootNavigation from '../../navigation/RootNavigation';
 import {
@@ -20,6 +20,7 @@ import {
   getDirectManagers,
   handleSelectManagersLeaveRequest,
   postLeaveRequest,
+  postSubmitApproveLeaveRequest,
 } from './onLeaveSlice';
 import OnLeaveMainView from './template/OnLeaveMainView';
 import onLeavePropsProvider from './onLeavePropsProvider';
@@ -57,23 +58,16 @@ const OnLeaveContainer = props => {
 
   const [leaveRequestList, setLeaveRequestList] = useState([]);
 
-  const [showAlert, setShowAlert] = useState({
-    isError: false,
-    title: '',
-    message: '',
-  });
-
-  const [totalArr, setTotalArr] = useState({
-    totalApproveReqLeaves: 0,
-    totalLeaveList: 0,
-  });
   const [isDisableLoadMore, setDisableLoadMore] = useState({
     approveReqBtn: false,
     leaveBtn: false,
   });
 
-  const [modalContent, setModalContent] = useState(null);
-  const [leavesDaysModal, setLeavesDaysModal] = useState(null);
+  const [leavesDaysModal, setLeavesDaysModal] = useState({
+    visible: false,
+    userInfo: null,
+    isRequest: false,
+  });
 
   const [openTimePicker, setOpenTimePicker] = useState({
     startDate: false,
@@ -94,24 +88,46 @@ const OnLeaveContainer = props => {
     reason: '',
   });
   // open the modal
-  const onOpenDetailModal = detailItem => {
-    setModalContent(
-      <OnLeaveModalDetail
-        onClose={onCloseModal}
-        alertMessage={alertMessage}
-        userInfo={userInfo}
-        detailItem={detailItem}
-        setPayloadApproveLeaves={setPayloadApproveRequestLeavesDays}
-      />,
-    );
+  const onOpenDetailModal = useCallback(
+    detail => {
+      if (detail) {
+        const user = {
+          id: detail?.staff_id,
+          avatar: detail?.extend_creator_avatar,
+          full_name: detail?.extend_creator_full_name,
+          employee_code: detail?.extend_creator_employee_code,
+          position: detail?.extend_creator_position,
+          isApprover: detail?.approver_id === userInfo?.id,
+          leave_id: detail?.id,
         };
+        setLeaveRequestTicket({
+          leaveCategory: detail?.extend_category_name,
+          reason: detail?.reason,
+        });
+        setLeavesDaysModal({
+          visible: true,
+          userInfo: user,
+          isRequest: false,
+        });
+      }
+    },
+    [userInfo],
+  );
 
-  const onOpenRequestLeavesModal = () => {
-    setLeavesDaysModal(true);
+  const onOpenRequestLeavesModal = userDetails => {
+    setLeavesDaysModal({
+      visible: true,
+      userInfo: userInfo,
+      isRequest: true,
+    });
   };
 
   const onCloseModal = () => {
-    setLeavesDaysModal(null);
+    setLeavesDaysModal({
+      visible: false,
+      userInfo: null,
+      isRequest: false,
+    });
   };
   const formatDataChart = () => {
     // console.log('userRestDays', userRestDays);
@@ -136,21 +152,6 @@ const OnLeaveContainer = props => {
     RootNavigation.navigate(APP_NAVIGATE_SCREEN.OVERTIME);
   };
 
-  const alertMessage = message => {
-    setShowAlert({
-      isError: true,
-      title: 'Thông báo',
-      message: `${message} 👍`,
-    });
-  };
-  const onHideAlert = () => {
-    setShowAlert({
-      isError: false,
-      title: '',
-      message: '',
-    });
-  };
-
   const onLoadMoreLeavesTicket = () => {
     setPayloadLeaves(prev => ({
       ...prev,
@@ -391,6 +392,29 @@ const OnLeaveContainer = props => {
   const onSelectManagerLeaveRequest = (index, value) => {
     dispatch(handleSelectManagersLeaveRequest({index, value}));
   };
+  const onSubmitApproveLeaveRequest = leave_id => {
+    try {
+      dispatch(postSubmitApproveLeaveRequest({id: leave_id})).then(response => {
+        const {success} = Utils.getValues(response, 'payload', false);
+        if (success) {
+          fetchApproveRequestLeavesDays();
+          onCloseModal();
+        }
+        ToastMessage({
+          title: 'Hệ thống',
+          message: `Duyệt nghỉ phép ${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(() => {
     usersLeavesDayList && formatLeaveLstFromApi();
@@ -427,11 +451,8 @@ const OnLeaveContainer = props => {
     usersLeavesDayList,
     userInfo,
     dataChart,
-    showAlert,
-    totalArr,
     isDisableLoadMore,
     leaveRequestList,
-    modalContent,
     payloadApproveRequestLeavesDays,
     approveRequestLeavesDaysList,
     leavesDaysModal,
@@ -452,8 +473,6 @@ const OnLeaveContainer = props => {
     onRefreshLeaveApproveReqList,
     navigateToConfirmDate,
     navigateToOverTime,
-    alertMessage,
-    onHideAlert,
     onLoadMoreLeavesTicket,
     onOpenDetailModal,
     onOpenRequestLeavesModal,
@@ -462,6 +481,7 @@ const OnLeaveContainer = props => {
     minutesToHours,
     onSubmitLeaveRequest,
     onSelectManagerLeaveRequest,
+    onSubmitApproveLeaveRequest,
   };
   return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />;
 };

src/screens/onleave/onLeavePropsProvider.js

@@ -37,7 +37,8 @@ export default function onLeavePropsProvider(props) {
     leaveRequestTicket,
     setLeaveRequestTicket,
     onSubmitLeaveRequest,
-    onSelectManagerLeaveRequest
+    onSelectManagerLeaveRequest,
+    onSubmitApproveLeaveRequest,
   } = props;
   return {
     leavesDaysModal,
@@ -74,7 +75,7 @@ export default function onLeavePropsProvider(props) {
     },
     leaveRequestModalProps: {
       leaveCategory,
-      userInfo,
+      userInfo: leavesDaysModal.userInfo || userInfo,
       onCloseModal,
       directManagersList,
       openTimePicker,
@@ -87,7 +88,9 @@ export default function onLeavePropsProvider(props) {
       leaveRequestTicket,
       setLeaveRequestTicket,
       onSubmitLeaveRequest,
-      onSelectManagerLeaveRequest
+      onSelectManagerLeaveRequest,
+      isRequest: leavesDaysModal.isRequest,
+      onSubmitApproveLeaveRequest,
     },
   };
 }

src/screens/onleave/onLeaveSlice.js

@@ -87,6 +87,19 @@ export const postLeaveRequest = createAsyncThunk(
     });
   },
 );
+export const postSubmitApproveLeaveRequest = createAsyncThunk(
+  'onLeave/postSubmitApproveLeaveRequest',
+  async (data, thunkAPI) => {
+    return serviceRequest({
+      dispatch: thunkAPI.dispatch,
+      serviceMethod: onLeaveApi.requestPostApproveLeaveRequest,
+      payload: data,
+      options: {
+        skipLoader: false,
+      },
+    });
+  },
+);
 const onLeaveSlice = createSlice({
   name: 'onLeave',
   initialState: initialHome,
@@ -96,7 +109,7 @@ const onLeaveSlice = createSlice({
       let managers = JSON.parse(JSON.stringify(state.directManagersList));
       if (managers.length > 0) {
         managers[index].isChecked = value;
-         state.directManagersList = [...managers]
+        state.directManagersList = [...managers];
       }
     },
   },

src/screens/onleave/style.js

@@ -470,7 +470,7 @@ export const leavesModalStyles = StyleSheet.create({
     alignItems: 'center',
     height: 40,
     borderRadius: 8,
-    width: 100,
+    paddingHorizontal: 10,
   },
   btnCancel: {
     backgroundColor: colors.white,

src/screens/onleave/template/OnLeaveMainView.js

@@ -121,12 +121,12 @@ const AddNewLeavesSection = React.memo(props => {
         <Image source={IMAGES.IcTask} style={styles.iconPlus} />
         <AppText style={styles.primary_blue}>Xác nhận ngày công</AppText>
       </TouchableOpacity>
-      <TouchableOpacity
+      {/* <TouchableOpacity
         onPress={navigateToOverTime}
         style={{flexDirection: 'row', marginTop: 5}}>
         <Image source={IMAGES.IcBackTime} style={styles.iconPlus} />
         <AppText style={styles.primary_blue}>Tăng ca của tôi</AppText>
-      </TouchableOpacity>
+      </TouchableOpacity> */}
     </View>
   );
 });
@@ -262,7 +262,7 @@ const LeavesRequest = React.memo(
         {leaveRequestList &&
           leaveRequestList.map((item, index) => (
             <TouchableOpacity
-              onPress={() => onOpenDetailModal(item)}
+              onPress={() => onOpenDetailModal(item, true)}
               key={index}>
               <View
                 style={[
@@ -306,7 +306,6 @@ const LeavesRequest = React.memo(
 );
 
 const OnLeaveMainView = ({
-  userInfo,
   navigateToConfirmDate,
   navigateToOverTime,
   dataChart,
@@ -315,7 +314,6 @@ const OnLeaveMainView = ({
   onOpenRequestLeavesModal,
   approveRequestLeavesDaysProps,
   leaveRequestList,
-  onCloseModal,
   leavesDaysModal,
   leaveRequestModalProps,
 }) => {
@@ -337,7 +335,9 @@ const OnLeaveMainView = ({
           onOpenDetailModal={onOpenDetailModal}
         />
       </ScrollView>
-      {leavesDaysModal && <RequestLeavesDays {...leaveRequestModalProps} />}
+      {leavesDaysModal?.visible && (
+        <RequestLeavesDays {...leaveRequestModalProps} />
+      )}
     </SafeAreaView>
   );
 };

src/screens/onleave/template/subViews/RequestLeavesDays.js

@@ -24,7 +24,7 @@ const RequestLeavesDays = props => {
     userInfo,
     onCloseModal,
     leaveCategory,
-    directManagersList,
+    directManagersList = [],
     openTimePicker,
     setOpenTimePicker,
     timeRequestLeave,
@@ -36,8 +36,9 @@ const RequestLeavesDays = props => {
     setLeaveRequestTicket,
     onSubmitLeaveRequest,
     onSelectManagerLeaveRequest,
+    isRequest = false,
+    onSubmitApproveLeaveRequest,
   } = props;
-
   const formatLeaveCategory = useMemo(() => {
     leaveCategory.map(item => {
       return {label: item.name, value: item.name};
@@ -49,6 +50,14 @@ const RequestLeavesDays = props => {
       : [];
   }, [leaveCategory]);
 
+  const fullName = useMemo(() => {
+    return userInfo?.full_name
+      ? userInfo?.full_name
+      : `${userInfo?.first_name} ${
+          userInfo?.middle_name ? userInfo?.middle_name : ''
+        } ${userInfo?.last_name}`;
+  }, [userInfo]);
+
   return (
     <Modal
       animationType="slide"
@@ -74,11 +83,10 @@ const RequestLeavesDays = props => {
               style={leavesModalStyles.ImgAvatar}
             />
             <View style={{marginLeft: 15}}>
-              <AppText style={leavesModalStyles.modalTitle}>{`${
-                userInfo?.first_name
-              } ${userInfo?.middle_name ? userInfo?.middle_name : ''} ${
-                userInfo?.last_name
-              } - ${userInfo?.employee_code}`}</AppText>
+              <AppText
+                style={
+                  leavesModalStyles.modalTitle
+                }>{`${fullName} - ${userInfo?.employee_code}`}</AppText>
               <AppText>{userInfo?.position}</AppText>
             </View>
           </View>
@@ -89,6 +97,7 @@ const RequestLeavesDays = props => {
             <View style={leavesModalStyles.rowView}>
               <AppText>Loại nghỉ phép</AppText>
               <SelectDropdownComponent
+                disable={!isRequest}
                 selectData={formatLeaveCategory}
                 setValue={value =>
                   setLeaveRequestTicket(prev => ({
@@ -104,6 +113,7 @@ const RequestLeavesDays = props => {
               <AppText>Từ ngày</AppText>
               <View>
                 <TouchableOpacity
+                  disabled={!isRequest}
                   onPress={() =>
                     setOpenTimePicker(state => ({
                       ...state,
@@ -143,6 +153,7 @@ const RequestLeavesDays = props => {
               <AppText>Giờ</AppText>
               <View>
                 <TouchableOpacity
+                  disabled={!isRequest}
                   onPress={() =>
                     setOpenTimePicker(state => ({
                       ...state,
@@ -182,6 +193,7 @@ const RequestLeavesDays = props => {
               <AppText>Đến ngày</AppText>
               <View>
                 <TouchableOpacity
+                  disabled={!isRequest}
                   onPress={() =>
                     setOpenTimePicker(state => ({
                       ...state,
@@ -221,6 +233,7 @@ const RequestLeavesDays = props => {
               <AppText>Giờ</AppText>
               <View>
                 <TouchableOpacity
+                  disabled={!isRequest}
                   onPress={() =>
                     setOpenTimePicker(state => ({
                       ...state,
@@ -272,6 +285,7 @@ const RequestLeavesDays = props => {
                 }}>{`Lý do(*)`}</AppText>
               <View>
                 <TextInputComponent
+                  disable={isRequest}
                   styleAreaInput={leavesModalStyles.inputText}
                   value={leaveRequestTicket.reason}
                   placeholder="Nhập lý do tại đây"
@@ -315,6 +329,7 @@ const RequestLeavesDays = props => {
                 )}
               </View>
             </View>
+            {isRequest && directManagersList.length > 0 && (
               <View style={{marginTop: 10}}>
                 <AppText
                   style={[
@@ -368,23 +383,37 @@ const RequestLeavesDays = props => {
                   </View>
                 ))}
               </View>
+            )}
           </View>
           <View
             style={{
               flexDirection: 'row',
               justifyContent: 'flex-end',
-              marginTop: 10,
+              marginTop: 20,
             }}>
             <TouchableOpacity
-              onPress={() => onCloseModal(null)}
+              onPress={onCloseModal}
               style={leavesModalStyles.btnCancel}>
               <AppText style={leavesModalStyles.blueTxt}>Hủy</AppText>
             </TouchableOpacity>
+            {isRequest && (
               <TouchableOpacity
                 style={leavesModalStyles.btnSubmit}
                 onPress={onSubmitLeaveRequest}>
-              <AppText style={leavesModalStyles.whiteTxt}>Gửi yêu cầu</AppText>
+                <AppText style={leavesModalStyles.whiteTxt}>
+                  Gửi yêu cầu
+                </AppText>
               </TouchableOpacity>
+            )}
+            {userInfo?.isApprover && (
+              <TouchableOpacity
+                style={leavesModalStyles.btnSubmit}
+                onPress={() => onSubmitApproveLeaveRequest(userInfo?.leave_id)}>
+                <AppText style={leavesModalStyles.whiteTxt}>
+                  Duyệt yêu cầu
+                </AppText>
+              </TouchableOpacity>
+            )}
           </View>
         </View>
       </ScrollView>