fix request leave

parent ca8fc7a4
......@@ -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},
......
......@@ -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 && (
......
......@@ -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=`),
};
......@@ -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(
......
......@@ -36,9 +36,6 @@ const ConfirmDateMainView = ({
onOpenRequestLeavesModal,
approveReqPayload,
onChangeSelectFilter,
onChangeMonthFilter,
dayPress,
onChangeDayPressInChart,
minutesToHours,
}) => {
const typeChartColor = [
......
/* 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)} />;
};
......
......@@ -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,
},
};
}
......@@ -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];
}
},
},
......
......@@ -470,7 +470,7 @@ export const leavesModalStyles = StyleSheet.create({
alignItems: 'center',
height: 40,
borderRadius: 8,
width: 100,
paddingHorizontal: 10,
},
btnCancel: {
backgroundColor: colors.white,
......
......@@ -121,12 +121,12 @@ const AddNewLeavesSection = React.memo(props => {
<Image source={IMAGES.IcTask} style={styles.iconPlus} />
<AppText style={styles.primary_blue}>Xác nhn 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>
);
};
......
......@@ -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,76 +329,91 @@ const RequestLeavesDays = props => {
)}
</View>
</View>
<View style={{marginTop: 10}}>
<AppText
style={[
leavesModalStyles.modalTitle,
{
marginBottom: 10,
},
]}>
Người duyệt
</AppText>
{directManagersList.map((item, index) => (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 4,
}}>
{isRequest && directManagersList.length > 0 && (
<View style={{marginTop: 10}}>
<AppText
style={[
leavesModalStyles.modalTitle,
{
marginBottom: 10,
},
]}>
Người duyệt
</AppText>
{directManagersList.map((item, index) => (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingLeft: 18,
marginTop: 4,
}}>
<Image
source={{
uri: config.imageEndPoint + item.avatar,
}}
style={leavesModalStyles.avatarApprove}
/>
<AppText
<View
style={{
marginLeft: 10,
}}>{`${item.extend_user_full_name}`}</AppText>
</View>
<View style={{paddingRight: 10}}>
<CheckBox
disabled={false}
value={item.isChecked}
onValueChange={newValue =>
onSelectManagerLeaveRequest(index, newValue)
}
boxType={'square'}
animationDuration={0.3}
lineWidth={1}
key={index}
tintColors={'#9E663C'}
/>
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 18,
}}>
<Image
source={{
uri: config.imageEndPoint + item.avatar,
}}
style={leavesModalStyles.avatarApprove}
/>
<AppText
style={{
marginLeft: 10,
}}>{`${item.extend_user_full_name}`}</AppText>
</View>
<View style={{paddingRight: 10}}>
<CheckBox
disabled={false}
value={item.isChecked}
onValueChange={newValue =>
onSelectManagerLeaveRequest(index, newValue)
}
boxType={'square'}
animationDuration={0.3}
lineWidth={1}
key={index}
tintColors={'#9E663C'}
/>
</View>
</View>
</View>
))}
</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>
<TouchableOpacity
style={leavesModalStyles.btnSubmit}
onPress={onSubmitLeaveRequest}>
<AppText style={leavesModalStyles.whiteTxt}>Gửi yêu cầu</AppText>
</TouchableOpacity>
{isRequest && (
<TouchableOpacity
style={leavesModalStyles.btnSubmit}
onPress={onSubmitLeaveRequest}>
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment