Skip to content

A
anawork-mobile-v2
Commit ca8fc7a4 authored by quynhquang400@gmail.com's avatar quynhquang400@gmail.com
Browse files
Options

request leaves days

parent 165dde72
Hide whitespace changes
Inline Side-by-side
Showing with 758 additions and 959 deletions
src/components/AppText/index.js
View file @ ca8fc7a4
......@@ -3,11 +3,19 @@ import {Text} from 'react-native-paper';
import {fonts} from '../../assets/fonts/fonts';
import colors from '../../values/colors';
const FONT_FAMILY = fonts.beProLight;
const FONT_FAMILY_BASE = fonts.beProLight;
const AppText = ({variant, children, style, onPress, color, isSubText}) => {
const AppText = ({
variant,
children,
style,
onPress,
color,
isSubText,
isBold,
}) => {
const defaultStyle = {
fontFamily: FONT_FAMILY,
fontFamily: FONT_FAMILY_BASE,
fontSize: isSubText ? 12 : 14,
color: color ?? colors.textColor,
};
......
src/components/Select/index.js
View file @ ca8fc7a4
......@@ -16,14 +16,24 @@ const data = [
{label: 'Item 8', value: '8'},
];
const SelectDropdownComponent = ({selectData = [], value, setValue}) => {
const SelectDropdownComponent = ({
selectData = [],
value,
setValue,
width,
height,
}) => {
// const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);
return (
<View style={styles.container}>
<Dropdown
style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
style={[
styles.dropdown,
{width: width ?? 100, height: height ?? 40},
isFocus && {borderColor: 'blue'},
]}
itemTextStyle={{color: colors.textColor}}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
......@@ -56,12 +66,9 @@ export default SelectDropdownComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
dropdown: {
width: 100,
height: 40,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
......
src/components/TextInputComponent.js
View file @ ca8fc7a4
......@@ -123,7 +123,7 @@ const stylesTextInput = StyleSheet.create({
marginTop: 5,
paddingHorizontal: 8,
paddingRight: 12,
borderBottomWidth: 0.2,
borderBottomWidth: 0.5,
},
icon: {
width: 20,
......
src/network/api/onLeaveApi.js
View file @ ca8fc7a4
......@@ -9,4 +9,7 @@ export default {
axiosClient.get(
`myLeaveDayApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`,
),
requestGetLeaveCategory: () => axiosClient.get('leaveCategories'),
requestGetDirectManagers: () => axiosClient.get('myDirectManagers'),
requestPostLeaveRequest: (payload) => axiosClient.post('leaveDays', payload),
};
src/screens/onleave/OnLeaveContainer.js
View file @ ca8fc7a4
......@@ -16,9 +16,17 @@ import {
getUserLeavesDay,
getApproveRequestLeavesDays,
getUserRestDay,
getLeaveCategory,
getDirectManagers,
handleSelectManagersLeaveRequest,
postLeaveRequest,
} from './onLeaveSlice';
import OnLeaveMainView from './template/OnLeaveMainView';
import onLeavePropsProvider from './onLeavePropsProvider';
import {launchImageLibrary} from 'react-native-image-picker';
import {ToastMessage} from '../../utils/MessageUtil';
import moment from 'moment';
import Utils from '../../utils';
const initPayloadApprove = {
type: 'Tất cả',
......@@ -35,12 +43,11 @@ const OnLeaveContainer = props => {
userRestDayList,
userInfo,
approveRequestLeavesDaysList,
leaveCategory,
directManagersList,
} = props;
const dispatch = useDispatch();
// const userLeaveDaysPending = useSelector(
// state => state.UserLeavesPending.userLeavesPending,
// );
const dispatch = useDispatch();
const [dataChart, setDataChart] = useState();
// get api with payload
......@@ -49,7 +56,6 @@ const OnLeaveContainer = props => {
const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove);
const [leaveRequestList, setLeaveRequestList] = useState([]);
const [leaveApproveReqList, setLeaveApproveReqList] = useState([]);
const [showAlert, setShowAlert] = useState({
isError: false,
......@@ -69,6 +75,24 @@ const OnLeaveContainer = props => {
const [modalContent, setModalContent] = useState(null);
const [leavesDaysModal, setLeavesDaysModal] = useState(null);
const [openTimePicker, setOpenTimePicker] = useState({
startDate: false,
finishDate: false,
startTime: false,
finishTime: false,
});
const [timeRequestLeave, setTimeRequestLeave] = useState({
startDate: new Date(),
finishDate: new Date(),
startTime: new Date(),
finishTime: new Date(),
});
const [leaveRequestImage, setLeaveRequestImage] = useState([]);
const [leaveRequestTicket, setLeaveRequestTicket] = useState({
leaveCategory: '',
reason: '',
});
// open the modal
const onOpenDetailModal = detailItem => {
setModalContent(
......@@ -141,72 +165,6 @@ const OnLeaveContainer = props => {
isRefresh: false,
}));
};
const checkVisibleLoadMore = () => {
// console.log(
// leaveApproveReqList.length == totalArr.totalApproveReqLeaves,
// leaveApproveReqList.length,
// totalArr.totalApproveReqLeaves,
// );
if (
leaveApproveReqList.length > 0 &&
leaveApproveReqList.length == totalArr.totalApproveReqLeaves
) {
setDisableLoadMore(prev => ({
...prev,
approveReqBtn: true,
}));
} else if (
leaveApproveReqList.length > 0 &&
leaveApproveReqList.length < totalArr.totalApproveReqLeaves
) {
setDisableLoadMore(prev => ({
...prev,
approveReqBtn: false,
}));
} else if (
leaveRequestList.length > 0 &&
leaveRequestList.length == totalArr.totalLeaveList
) {
//.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({
...prev,
leaveBtn: true,
}));
} else if (
leaveRequestList.length > 0 &&
leaveRequestList.length < totalArr.totalLeaveList
) {
//.log('checkVisibleLoadMore');
setDisableLoadMore(prev => ({
...prev,
leaveBtn: false,
}));
}
};
const loadLeavesTicketsFromApi = async () => {
const response = await dispatch(
getUserLeavesDay({
filter: payloadLeaves.filter,
sort: payloadLeaves.sort,
page: payloadLeaves.page,
pageSize: payloadLeaves.pageSize,
}),
);
if (response.success) {
const {collection, total} = response.data;
if (!collection || collection.length === 0) {
return;
}
//console.log('loadLeavesTicketsFromApi', collection);
if (payloadLeaves.isRefresh) {
setTotalArr(prev => ({...prev, totalLeaveList: total}));
return;
}
setTotalArr(prev => ({...prev, totalLeaveList: total}));
}
};
// refresh onClick event
const onRefreshLeaveList = () => {
setPayloadLeaves({
......@@ -330,19 +288,109 @@ const OnLeaveContainer = props => {
const fetchLeavesRestDays = () => {
dispatch(getUserRestDay());
};
const fetchLeaveCategory = () => {
dispatch(getLeaveCategory());
};
const fetchDirectManagers = () => {
dispatch(getDirectManagers());
};
//============================== ADD NEW LEAVES =============================//
const openCreateNewLeaveDay = async () => {
const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
let obj = [];
objectClone.forEach(element => {
element.checked = false;
obj.push(element);
});
setUserManagerList(obj);
getRangeTimeLeave();
const openGallery = () => {
launchImageLibrary(
{
mediaType: 'photo',
includeBase64: true,
},
response => {
if (!response.didCancel) {
//console.log('AAA');
const {assets} = response;
setLeaveRequestImage(prev => [...prev, ...assets]);
//console.log(response.assets[0].uri)
}
},
);
};
const onDeleteLeaveRequestImage = index => {
const clone = [...leaveRequestImage];
clone.splice(index, 1);
setLeaveRequestImage([...clone]);
};
const onSubmitLeaveRequest = () => {
if (handleSubmitLeaveRequest()) {
const selectLeaveCategory = leaveCategory.filter(item =>
item.name === leaveRequestTicket.leaveCategory.length
? leaveRequestTicket.leaveCategory
: leaveCategory[0].name,
);
const approver = directManagersList.filter(item => item.isChecked);
const payload = {
start: timeRequestLeave.startDate,
finish: timeRequestLeave.finishDate,
leave_category_id:
selectLeaveCategory.length > 0 ? selectLeaveCategory[0].id : null,
approver_id: approver.length > 0 ? approver[0].id : null,
reason: leaveRequestTicket.reason,
};
dispatch(postLeaveRequest(payload)).then(response => {
const {success, message} = Utils.getValues(response, 'payload', false);
ToastMessage({
title: 'Hệ thống',
message: success ? 'Đã gửi yêu cầu nghỉ phép thành công' : message,
type: success ? 'success' : 'error',
});
onCloseModal();
});
}
};
const handleSubmitLeaveRequest = () => {
if (directManagersList?.length === 0) {
return false;
}
const isSelectedManager = directManagersList.filter(item => item.isChecked);
if (leaveRequestTicket.reason.length === 0) {
ToastMessage({
title: 'Hệ thống',
message: 'Vui lòng nhập lý do nghỉ',
type: 'error',
});
return false;
} else if (
moment(timeRequestLeave.startDate) > moment(timeRequestLeave.finishDate)
) {
ToastMessage({
title: 'Hệ thống',
message: 'Vui lòng chọn ngày bắt đầu nghỉ nhỏ hơn ngày kết thúc',
type: 'error',
timeVisible: 5000,
});
return false;
} else if (
moment(timeRequestLeave.startTime) > moment(timeRequestLeave.finishTime)
) {
ToastMessage({
title: 'Hệ thống',
message: 'Vui lòng chọn giờ bắt đầu nghỉ nhỏ hơn giờ 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 onSelectManagerLeaveRequest = (index, value) => {
dispatch(handleSelectManagersLeaveRequest({index, value}));
};
// useEffect
useEffect(() => {
usersLeavesDayList && formatLeaveLstFromApi();
......@@ -350,6 +398,8 @@ const OnLeaveContainer = props => {
useEffect(() => {
fetchLeavesRestDays();
fetchLeaveCategory();
fetchDirectManagers();
}, []);
useEffect(() => {
......@@ -363,10 +413,6 @@ const OnLeaveContainer = props => {
payloadApproveRequestLeavesDays && fetchApproveRequestLeavesDays();
}, [payloadApproveRequestLeavesDays]);
useEffect(() => {
checkVisibleLoadMore();
}, [leaveRequestList, leaveApproveReqList, totalArr]);
useEffect(() => {
if (props?.route?.params) {
const {refId} = props?.route?.params;
......@@ -385,11 +431,22 @@ const OnLeaveContainer = props => {
totalArr,
isDisableLoadMore,
leaveRequestList,
leaveApproveReqList,
modalContent,
payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList,
leavesDaysModal,
leaveCategory,
directManagersList,
openTimePicker,
timeRequestLeave,
leaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
openGallery,
onDeleteLeaveRequestImage,
setLeaveRequestImage,
setTimeRequestLeave,
setOpenTimePicker,
onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList,
onRefreshLeaveApproveReqList,
......@@ -403,6 +460,8 @@ const OnLeaveContainer = props => {
onCloseModal,
onChangeSelectFilter,
minutesToHours,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest,
};
return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />;
};
......
src/screens/onleave/index.js
View file @ ca8fc7a4
......@@ -11,6 +11,8 @@ export default function OnLeaveScreen() {
usersLeavesDayList = [],
userRestDayList = [],
approveRequestLeavesDaysList = [],
leaveCategory = [],
directManagersList = [],
} = onLeaveSelect;
const {userInfo} = authSelect;
const onLeaveScreenProps = {
......@@ -18,6 +20,8 @@ export default function OnLeaveScreen() {
usersLeavesDayList,
userRestDayList,
approveRequestLeavesDaysList,
leaveCategory,
directManagersList,
};
return <OnLeaveContainer {...onLeaveScreenProps} />;
}
src/screens/onleave/onLeavePropsProvider.js
View file @ ca8fc7a4
......@@ -25,6 +25,19 @@ export default function onLeavePropsProvider(props) {
onChangeSelectFilter,
minutesToHours,
leavesDaysModal,
leaveCategory,
directManagersList,
openTimePicker,
setOpenTimePicker,
timeRequestLeave,
setTimeRequestLeave,
leaveRequestImage,
openGallery,
onDeleteLeaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest
} = props;
return {
leavesDaysModal,
......@@ -59,5 +72,22 @@ export default function onLeavePropsProvider(props) {
userInfo,
onOpenDetailModal,
},
leaveRequestModalProps: {
leaveCategory,
userInfo,
onCloseModal,
directManagersList,
openTimePicker,
setOpenTimePicker,
timeRequestLeave,
setTimeRequestLeave,
leaveRequestImage,
openGallery,
onDeleteLeaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest
},
};
}
src/screens/onleave/onLeaveSlice.js
View file @ ca8fc7a4
......@@ -6,9 +6,7 @@ import onLeaveApi from '../../network/api/onLeaveApi';
import Utils from '../../utils';
const initialHome = {
quotationList: [],
news: [],
birthdayListInMonth: [],
directManagersList: [],
};
export const getUserLeavesDay = createAsyncThunk(
......@@ -50,11 +48,58 @@ export const getApproveRequestLeavesDays = createAsyncThunk(
});
},
);
export const getLeaveCategory = createAsyncThunk(
'onLeave/getLeaveCategory',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: onLeaveApi.requestGetLeaveCategory,
payload: data,
options: {
skipLoader: false,
},
});
},
);
export const getDirectManagers = createAsyncThunk(
'onLeave/getDirectManagers',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: onLeaveApi.requestGetDirectManagers,
payload: data,
options: {
skipLoader: false,
},
});
},
);
export const postLeaveRequest = createAsyncThunk(
'onLeave/postLeaveRequest',
async (data, thunkAPI) => {
return serviceRequest({
dispatch: thunkAPI.dispatch,
serviceMethod: onLeaveApi.requestPostLeaveRequest,
payload: data,
options: {
skipLoader: false,
},
});
},
);
const onLeaveSlice = createSlice({
name: 'onLeave',
initialState: initialHome,
reducers: {},
reducers: {
handleSelectManagersLeaveRequest: (state, payload) => {
const {index, value} = payload.payload;
let managers = JSON.parse(JSON.stringify(state.directManagersList));
if (managers.length > 0) {
managers[index].isChecked = value;
state.directManagersList = [...managers]
}
},
},
extraReducers: builder => {
builder.addCase(getUserLeavesDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
......@@ -86,8 +131,28 @@ const onLeaveSlice = createSlice({
);
}
});
builder.addCase(getLeaveCategory.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
state.leaveCategory = Utils.getValues(action, 'payload.data', []);
}
});
builder.addCase(getDirectManagers.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false);
if (success) {
const managers = Utils.getValues(action, 'payload.data', []);
const addKeySelect = managers.map(item => {
return {
...item,
isChecked: false,
};
});
state.directManagersList = [...addKeySelect];
}
});
},
});
const {reducer} = onLeaveSlice;
const {reducer, actions} = onLeaveSlice;
export const {handleSelectManagersLeaveRequest} = actions;
export default reducer;
src/screens/onleave/style.js
View file @ ca8fc7a4
......@@ -402,5 +402,139 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
});
export const leavesModalStyles = StyleSheet.create({
container: {
flex: 1,
},
whiteTxt: {
color: colors.white,
fontWeight: '500',
},
blueTxt: {
color: '#5d78ff',
fontWeight: '500',
},
modalView: {
backgroundColor: 'white',
borderRadius: 20,
paddingHorizontal: 10,
shadowColor: colors.black1,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
marginTop: 80,
height: windowHeight,
width: '100%',
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
modalTitle: {
fontWeight: 'bold',
fontSize: 16,
},
rowView: {
flexDirection: 'row',
marginTop: 10,
justifyContent: 'space-between',
alignItems: 'center',
},
inputText: {
backgroundColor: colors.white,
width: 200,
},
addLeaveRequestImageBtn: {
borderColor: colors.primary_blue,
borderStyle: 'dotted',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
height: 50,
padding: 10,
width: 50,
},
btnSubmit: {
backgroundColor: '#5d78ff',
justifyContent: 'center',
alignItems: 'center',
height: 40,
borderRadius: 8,
width: 100,
},
btnCancel: {
backgroundColor: colors.white,
justifyContent: 'center',
alignItems: 'center',
height: 40,
borderRadius: 8,
width: 100,
},
ImgAvatar: {
width: 50,
height: 50,
borderRadius: 30,
},
imgUpload: {
resizeMode: 'contain',
height: 50,
width: 50,
marginRight: 10,
borderRadius: 5,
},
reason: {
width: windowWidth / 2 - 25,
textAlign: 'right',
},
checkbox: {
alignSelf: 'center',
height: 16,
width: 16,
marginRight: 4,
},
avatarApprove: {
width: 32,
height: 32,
borderRadius: 4,
},
takeTimeStyle: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
borderBottomColor: '#444',
borderBottomWidth: 0.2,
height: 24,
},
btnClose: {
width: 20,
height: 20,
position: 'absolute',
top: -5,
right: 0,
zIndex: 10,
},
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/template/OnLeaveMainView.js
View file @ ca8fc7a4
......@@ -156,6 +156,7 @@ const ApproveRequestLeavesDays = React.memo(
</View>
</View>
{approveRequestLeavesDaysList.length > 0 &&
userInfo &&
approveRequestLeavesDaysList[0].approver_id === userInfo.id &&
approveRequestLeavesDaysList.map((item, index) => (
<TouchableOpacity
......@@ -316,6 +317,7 @@ const OnLeaveMainView = ({
leaveRequestList,
onCloseModal,
leavesDaysModal,
leaveRequestModalProps,
}) => {
return (
<SafeAreaView>
......@@ -335,9 +337,7 @@ const OnLeaveMainView = ({
onOpenDetailModal={onOpenDetailModal}
/>
</ScrollView>
{leavesDaysModal && (
<RequestLeavesDays userInfo={userInfo} onClose={onCloseModal} />
)}
{leavesDaysModal && <RequestLeavesDays {...leaveRequestModalProps} />}
</SafeAreaView>
);
};
......
src/screens/onleave/template/subViews/RequestLeavesDays.js
View file @ ca8fc7a4
/* eslint-disable react-native/no-inline-styles */
import CheckBox from '@react-native-community/checkbox';
import Moment from 'moment';
import React, {useEffect, useState} from 'react';
import React, {useMemo} from 'react';
import {
Dimensions,
Image,
Modal,
SafeAreaView,
ScrollView,
StyleSheet,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import Alert from 'react-native-awesome-alerts';
import {launchImageLibrary} from 'react-native-image-picker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown';
import Toast from 'react-native-toast-message';
import {useDispatch, useSelector} from 'react-redux';
import AppText from '../../../../components/AppText';
import ButtonComponent from '../../../../components/ButtonComponent';
import {
getRangeTimeFinish,
getRangeTimeStart,
postUserLeave,
} from '../../../../store/actions/UserAction';
import colors from '../../../../values/colors';
import {IMAGES} from '../../../../values/images';
import SelectDropdownComponent from '../../../../components/Select';
import config from '../../../../config';
import {IMAGES} from '../../../../values/images';
import {leavesModalStyles} from '../../style';
import TextInputComponent from '../../../../components/TextInputComponent';
import colors from '../../../../values/colors';
const RequestLeavesDays = props => {
const {
userInfo,
onCloseModal,
leaveCategory,
directManagersList,
openTimePicker,
setOpenTimePicker,
timeRequestLeave,
setTimeRequestLeave,
leaveRequestImage = [],
openGallery,
onDeleteLeaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest,
} = props;
const RequestLeavesDays = ({userInfo, onClose}) => {
// const dispatch = useDispatch();
// const userDirectManagersList = useSelector(
// state => state.MyDirectManagers.myDirectManagers,
// );
// const idLeavesCategory = useSelector(
// state => state.UserLeavesPending.leaveCategories,
// );
// // init state
// const initStateLeave = {
// id: '',
// since: new Date(),
// timeStart: '8:30',
// dateStart: '',
// toDate: new Date(),
// timeFinish: '17:30',
// dateFinish: '',
// reason: '',
// taken_hours: 0,
// approved_date: new Date(),
// approver_id: '',
// };
// // state
// const [leave, setLeave] = useState(initStateLeave);
// const [userManagerList, setUserManagerList] = useState([]);
// const [rangeTimeStart, setRangeTimeStart] = useState([]);
// const [rangeTimeFinish, setRangeTimeFinish] = useState([]);
// const [durationLeave, setDurationLeave] = useState({
// time: 0,
// stringTime: '',
// });
// const [openTimePicker, setOpenTimePicker] = useState({
// start: false,
// finish: false,
// });
// const [nameLeaves, setNameLeaves] = useState([]);
// const [postImage, setPostImage] = useState([]);
// const [isNextApprover, setIsNextApprover] = useState(false);
// const [nextApproverId, setNextApproverId] = useState('');
// const [showAlert, setShowAlert] = useState({
// isShow: false,
// title: '',
// message: '',
// });
// // main function
// const alertMessage = message => {
// setShowAlert({
// isError: true,
// title: 'Thông báo',
// message: `${message} 👍`,
// });
// };
// const onHideAlert = () => {
// setShowAlert({
// isError: false,
// title: '',
// message: '',
// });
// };
// const openCreateNewLeaveDay = async () => {
// const objectClone = JSON.parse(JSON.stringify(userDirectManagersList));
// let obj = [];
// objectClone.forEach(element => {
// element.checked = false;
// obj.push(element);
// });
// setUserManagerList(obj);
// getRangeTimeLeave();
// };
// const getRangeTimeLeave = async () => {
// const responseRangeStart = await dispatch(
// getRangeTimeStart(
// Moment(leave.since).format('YYYY-MM-DD'),
// userDetails.id,
// ),
// );
// let tempArrRangeTimeStart = JSON.parse(JSON.stringify(responseRangeStart));
// let arrStart = [];
// tempArrRangeTimeStart.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrStart.push(time);
// });
// if (arrStart.length > 0) {
// setRangeTimeStart(arrStart);
// }
// //finish time
// const responseRangeFinish = await dispatch(
// getRangeTimeFinish(
// Moment(leave.toDate).format('YYYY-MM-DD'),
// userDetails.id,
// ),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
// let arrFinish = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrFinish.push(time);
// });
// if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
// };
// const onSelectDateStart = async time => {
// const responseRangeStart = await dispatch(
// getRangeTimeStart(Moment(time).format('YYYY-MM-DD'), userDetails.id),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeStart));
// let arrStart = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrStart.push(time);
// });
// if (arrStart.length > 0) {
// setRangeTimeStart(arrStart);
// }
// setOpenTimePicker(state => ({
// ...state,
// start: false,
// }));
// setLeave(state => ({
// ...state,
// since: time,
// }));
// };
// const onSelectDateFinish = async time => {
// const responseRangeFinish = await dispatch(
// getRangeTimeFinish(Moment(time).format('YYYY-MM-DD'), userDetails.id),
// );
// let tempArrRangeTime = JSON.parse(JSON.stringify(responseRangeFinish));
// let arrFinish = [];
// tempArrRangeTime.forEach(item => {
// const timeConverse = parseInt(item.slice(0, 2)) + 7;
// const hours = timeConverse > 23 ? timeConverse - 24 : timeConverse;
// const time = hours + item.substring(2);
// arrFinish.push(time);
// });
// if (arrFinish.length > 0) setRangeTimeFinish(arrFinish);
// setOpenTimePicker(state => ({
// ...state,
// finish: false,
// }));
// setLeave(state => ({
// ...state,
// toDate: time,
// }));
// };
// const onSubmitLeave = async () => {
// if (!leave.id) {
// alertMessage('Vui lòng chọn loại ngày nghỉ!');
// return;
// }
// if (!leave.since) {
// alertMessage('Vui lòng chọn ngày bắt đầu!');
// return;
// }
// if (!leave.timeStart) {
// alertMessage('Vui lòng chọn giờ bắt đầu!');
// return;
// }
// if (!leave.toDate) {
// alertMessage('Vui lòng chọn ngày kết thúc!');
// return;
// }
// if (!leave.timeFinish) {
// alertMessage('Vui lòng chọn giờ kết thúc!');
// return;
// }
// if (!leave.reason) {
// alertMessage('Vui lòng nhập lý do !');
// return;
// }
// if (!leave.approver_id) {
// alertMessage('Vui lòng chọn người duyệt!');
// return;
// }
// const isValid = isDateStartAndFinishChange();
// if (isValid) {
// //console.log('isValid', isValid);
// const res = await dispatch(
// postUserLeave(userDetails.id, leave, postImage, durationLeave.time),
// );
// //console.log('res', res);
// if (res) {
// Toast.show({
// type: 'success',
// text1: `Hệ thống`,
// text2: `Yêu cầu nghỉ phép thành công`,
// style: {zIndex: 1001},
// visibilityTime: 2000,
// });
// refreshAfterSubmit();
// } else {
// alertMessage('Bạn đã hết ngày nghỉ phép');
// }
// return;
// }
// alertMessage('Vui lòng nhập ngày bắt đầu nhỏ hơn ngày kết thúc');
// };
// const refreshAfterSubmit = () => {
// onClose(null);
// setLeave(initStateLeave);
// };
// const copyNameCategory = () => {
// idLeavesCategory.map((item, index) => {
// setNameLeaves(prevState => [...prevState, item.name]);
// return;
// });
// };
// const onSelectTimeStart = (selectedItem, indexItem) => {
// console.log('selectedItem', selectedItem);
// setLeave(state => ({
// ...state,
// timeStart: selectedItem,
// }));
// };
// const onSelectTimeFinish = (selectedItem, indexItem) => {
// setLeave(state => ({
// ...state,
// timeFinish: selectedItem,
// }));
// };
// const onSelectManager = async (value, index, item) => {
// let userManagerListClone = [...userManagerList];
// let elementFound = userManagerListClone.find(
// element => element.id == item.id,
// );
// let indexElementFound = userManagerListClone.findIndex(
// element => element.id == item.id,
// );
// userManagerListClone.splice(indexElementFound, 1, {
// ...elementFound,
// checked: value,
// });
// setUserManagerList(userManagerListClone);
// setLeave(state => ({
// ...state,
// approver_id: item.id,
// }));
// if (isNextApprover) {
// setNextApproverId(item.id);
// } else {
// setNextApproverId('');
// setLeave(state => ({
// ...state,
// approver_id: item.id,
// }));
// }
// };
// const isDateStartAndFinishChange = () => {
// if (leave.since <= leave.toDate) {
// let duration = calDurationLeave(leave.since, leave.toDate);
// let hour = 0;
// if (leave.timeStart && leave.timeFinish) {
// const hourDiff = Moment(leave.timeFinish, 'HH:mm').diff(
// Moment(leave.timeStart, 'HH:mm'),
// 'hour',
// );
// //console.log('hourDiff', hourDiff);
// if (hourDiff < 9 && hourDiff > 0) {
// hour = 0.5;
// } else if (hourDiff >= 9) {
// hour = 1;
// } else {
// hour = 0;
// }
// }
// //console.log('hour', hour);
// //console.log('duration', duration);
// let total = parseFloat(duration && duration >= 0 ? duration : 0) + hour;
// //console.log('total', total);
// setDurationLeave({
// time: total,
// stringTime: total + ' Ngày',
// });
// return true;
// }
// return false;
// };
// const calDurationLeave = (fstDay, lstDay) => {
// var finish_day = new Moment(lstDay);
// var since_day = new Moment(fstDay);
// var duration = Moment.duration(finish_day.diff(since_day)).asHours();
// if (duration >= 24) {
// return duration / 24;
// }
// //console.log(duration);
// return duration;
// };
// const openGallery = () => {
// launchImageLibrary(
// {
// mediaType: 'photo',
// includeBase64: true,
// },
// response => {
// if (!response.didCancel) {
// //console.log('AAA');
// const {assets} = response;
// setPostImage(prev => [...prev, ...assets]);
// //console.log(response.assets[0].uri)
// }
// },
// );
// };
// const onDeleteImage = index => {
// const clone = [...postImage];
// clone.splice(index, 1);
// setPostImage(clone);
// };
// //useEffect
// useEffect(() => {
// openCreateNewLeaveDay();
// }, []);
// useEffect(() => {
// idLeavesCategory && copyNameCategory();
// }, [idLeavesCategory]);
// useEffect(() => {
// leave && isDateStartAndFinishChange();
// }, [leave]);
const formatLeaveCategory = useMemo(() => {
leaveCategory.map(item => {
return {label: item.name, value: item.name};
});
return leaveCategory.length > 0
? leaveCategory.map(item => {
return {label: item.name, value: item.name};
})
: [];
}, [leaveCategory]);
return (
<Modal
animationType="slide"
transparent={true}
visible={true}
onRequestClose={() => onClose(null)}>
<SafeAreaView>
<ScrollView>
<View style={styles.modalView}>
<View style={{marginVertical: 10}}>
<AppText style={styles.modalTitle}>Nghỉ phép mới</AppText>
onRequestClose={() => onCloseModal(null)}>
<ScrollView>
<View style={leavesModalStyles.modalView}>
<View style={{marginVertical: 10}}>
<AppText style={leavesModalStyles.modalTitle}>
Nghỉ phép mới
</AppText>
</View>
<View style={{flexDirection: 'row', marginVertical: 10}}>
<Image
source={
userInfo?.avatar
? {
uri: config.imageEndPoint + userInfo?.avatar,
}
: IMAGES.IcAvatarDefault
}
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>{userInfo?.position}</AppText>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Image
source={{
uri: config.imageEndPoint + userInfo.avatar,
}}
style={styles.ImgAvatar}
</View>
<View>
<AppText style={leavesModalStyles.modalTitle}>
Thông tin chung
</AppText>
<View style={leavesModalStyles.rowView}>
<AppText>Loại nghỉ phép</AppText>
<SelectDropdownComponent
selectData={formatLeaveCategory}
setValue={value =>
setLeaveRequestTicket(prev => ({
...prev,
leaveCategory: value,
}))
}
width={200}
height={30}
/>
<View style={{marginLeft: 15}}>
<AppText style={styles.modalTitle}>{`${userInfo?.first_name} ${
userInfo?.middle_name ? userInfo?.middle_name : ''
} ${userInfo?.last_name} - ${
userInfo?.employee_code
}`}</AppText>
<AppText>{userInfo?.position}</AppText>
</View>
<View style={leavesModalStyles.rowView}>
<AppText>Từ ngày</AppText>
<View>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
startDate: true,
}))
}
style={leavesModalStyles.chooseTimeSection}>
<AppText>
{Moment(timeRequestLeave.startDate).format('DD/MM/YYYY')}
</AppText>
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
<DateTimePickerModal
isVisible={openTimePicker.startDate}
mode="date"
date={timeRequestLeave.startDate}
onConfirm={time => {
setTimeRequestLeave(prev => ({...prev, startDate: time}));
setOpenTimePicker(state => ({
...state,
startDate: false,
}));
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
startDate: false,
}));
}}
/>
</View>
</View>
<View style={{marginTop: 20}}>
<AppText style={styles.modalTitle}>Thông tin chung</AppText>
<View style={styles.rowView}>
<View style={{flex: 1}}>
<AppText
style={{
flex: 1,
// color: leave?.id?.length === 0 ? 'red' : 'grey',
}}>
Loại nghỉ phép
<View style={leavesModalStyles.rowView}>
<AppText>Giờ</AppText>
<View>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
startTime: true,
}))
}
style={leavesModalStyles.chooseTimeSection}>
<AppText>
{Moment(timeRequestLeave.startDate).format('HH:mm')}
</AppText>
</View>
<View style={{flex: 1}}>
<SelectDropdown
// data={nameLeaves}
data={['Chọn loại nghỉ phép']}
dropdownIconPosition={'right'}
defaultButtonText={'Chọn loại nghỉ phép'}
buttonStyle={styles.dropdown1BtnStyle}
onSelect={(selectedItem, index) => {
// setLeave(state => ({
// ...state,
// id: idLeavesCategory[index].id,
// }));
}}
placeholder
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return (
<Image
source={
isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
}
style={{width: 20, height: 20}}
/>
);
}}
<Image
source={IMAGES.IcLeaveNoti}
style={{width: 20, height: 20}}
/>
</View>
</TouchableOpacity>
<DateTimePickerModal
isVisible={openTimePicker.startTime}
mode="time"
date={timeRequestLeave.startDate}
onConfirm={time => {
setTimeRequestLeave(prev => ({...prev, startDate: time}));
setOpenTimePicker(state => ({
...state,
startTime: false,
}));
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
startTime: false,
}));
}}
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Từ ngày</AppText>
<View style={{flex: 1}}>
<TouchableOpacity
// onPress={() =>
// setOpenTimePicker(state => ({
// ...state,
// start: true,
// }))
// }
style={[
styles.dropdown1BtnStyle,
{
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
paddingRight: 8,
paddingLeft: 16,
},
]}>
{/* <AppText>
{Moment(leave.since).format('DD/MM/YYYY')}
</AppText> */}
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
{/* <DateTimePickerModal
isVisible={openTimePicker.start}
mode="date"
date={leave.since}
onConfirm={time => {
onSelectDateStart(time);
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
start: false,
}));
}}
/> */}
</View>
</View>
<View style={leavesModalStyles.rowView}>
<AppText>Đến ngày</AppText>
<View>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
finishDate: true,
}))
}
style={leavesModalStyles.chooseTimeSection}>
<AppText>
{Moment(timeRequestLeave.finishDate).format('DD/MM/YYYY')}
</AppText>
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
<DateTimePickerModal
isVisible={openTimePicker.finishDate}
mode="date"
date={timeRequestLeave.finishDate}
onConfirm={time => {
setTimeRequestLeave(prev => ({...prev, finishDate: time}));
setOpenTimePicker(state => ({
...state,
finishDate: false,
}));
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
finishDate: false,
}));
}}
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}>
{/* <SelectDropdown
data={rangeTimeStart}
dropdownIconPosition={'right'}
defaultButtonText={leave.timeStart || 'Giờ'}
renderDropdownIcon={() => {
return (
<Image
source={IMAGES.IcLockGrey}
style={{width: 20, height: 20}}
/>
);
}}
buttonStyle={styles.dropdown1BtnStyle}
buttonTextStyle={{fontSize: 14, textAlign: 'left'}}
dropdownStyle={styles.dropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdownSelectTimeText}
onSelect={(selectedItem, index) =>
onSelectTimeStart(selectedItem, index)
}
/> */}
</View>
</View>
<View style={leavesModalStyles.rowView}>
<AppText>Giờ</AppText>
<View>
<TouchableOpacity
onPress={() =>
setOpenTimePicker(state => ({
...state,
finishTime: true,
}))
}
style={leavesModalStyles.chooseTimeSection}>
<AppText>
{Moment(timeRequestLeave.finishDate).format('HH:mm')}
</AppText>
<Image
source={IMAGES.IcLeaveNoti}
style={{width: 20, height: 20}}
/>
</TouchableOpacity>
<DateTimePickerModal
isVisible={openTimePicker.finishTime}
mode="time"
date={timeRequestLeave.finishDate}
onConfirm={time => {
setTimeRequestLeave(prev => ({...prev, finishDate: time}));
setOpenTimePicker(state => ({
...state,
finishTime: false,
}));
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
finishTime: false,
}));
}}
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Đến ngày</AppText>
<View style={{flex: 1}}>
<TouchableOpacity
// onPress={() =>
// setOpenTimePicker(state => ({
// ...state,
// finish: true,
// }))
// }
// style={[
// styles.dropdown1BtnStyle,
// {
// alignItems: 'flex-end',
// flexDirection: 'row',
// justifyContent: 'space-between',
// paddingRight: 8,
// paddingLeft: 16,
// },
// ]}
>
{/* <AppText>
{Moment(leave.toDate).format('DD/MM/YYYY')}
</AppText> */}
<Image
source={IMAGES.IcCalendarGray}
style={{width: 20, height: 20, marginLeft: 8}}
/>
</TouchableOpacity>
{/* <DateTimePickerModal
isVisible={openTimePicker.finish}
mode="date"
date={leave.toDate}
minimumDate={leave.since}
onConfirm={time => {
onSelectDateFinish(time);
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
finish: false,
}));
}}
/> */}
</View>
</View>
{/* <View style={leavesModalStyles.rowView}>
<AppText>{`Thời gian nghỉ (*)`}</AppText>
<View style={leavesModalStyles.takeTimeStyle}>
<AppText style={{paddingLeft: 18}}>
{durationLeave.stringTime}
</AppText>
</View>
</View> */}
<View style={leavesModalStyles.rowView}>
<AppText
style={{
color:
leaveRequestTicket.reason.length === 0 ? 'red' : 'grey',
}}>{`Lý do(*)`}</AppText>
<View>
<TextInputComponent
styleAreaInput={leavesModalStyles.inputText}
value={leaveRequestTicket.reason}
placeholder="Nhập lý do tại đây"
onChangeText={text => {
setLeaveRequestTicket(state => ({
...state,
reason: text,
}));
}}
noBorder
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Giờ</AppText>
<View style={{flex: 1}}>
{/* <SelectDropdown
data={rangeTimeFinish}
dropdownIconPosition={'right'}
defaultButtonText={leave.timeFinish || 'Giờ'}
renderDropdownIcon={() => {
return (
</View>
<View style={leavesModalStyles.rowView}>
<AppText>Tệp đính kèm</AppText>
<View style={{flexDirection: 'row'}}>
{leaveRequestImage.length > 0 &&
leaveRequestImage.map((item, index) => {
//console.log("item", item[0].uri)
return (
<View key={index}>
<ButtonComponent
iconSource={IMAGES.IcReject}
style={leavesModalStyles.btnClose}
onPress={() => onDeleteLeaveRequestImage(index)}
/>
<Image
source={IMAGES.IcLockGrey}
style={{width: 20, height: 20}}
source={{uri: item.uri}}
style={leavesModalStyles.imgUpload}
/>
);
}}
buttonStyle={styles.dropdown1BtnStyle}
buttonTextStyle={{fontSize: 14, textAlign: 'left'}}
dropdownStyle={styles.dropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdownSelectTimeText}
onSelect={(selectedItem, index) =>
onSelectTimeFinish(selectedItem, index)
}
/> */}
</View>
</View>
<View style={styles.rowView}>
<AppText
style={{
flex: 1,
}}>{`Thời gian nghỉ (*)`}</AppText>
<View style={styles.takeTimeStyle}>
{/* <AppText style={{paddingLeft: 18}}>
{durationLeave.stringTime}
</AppText> */}
</View>
</View>
);
})}
{leaveRequestImage.length < 3 && (
<ButtonComponent
style={leavesModalStyles.addLeaveRequestImageBtn}
onPress={openGallery}
iconSource={IMAGES.IcAddMoreImg}
/>
)}
</View>
<View style={styles.rowView}>
<AppText
style={{
flex: 1,
// color: leave.reason.length === 0 ? 'red' : 'grey',
}}>{`Lý do(*)`}</AppText>
</View>
<View style={{marginTop: 10}}>
<AppText
style={[
leavesModalStyles.modalTitle,
{
marginBottom: 10,
},
]}>
Người duyệt
</AppText>
{directManagersList.map((item, index) => (
<View
key={index}
style={{
flex: 1,
borderBottomWidth: 0.2,
borderColor: '#444',
}}>
{/* <TextInput
style={styles.inputText}
value={leave.reason}
placeholder="Nhập lý do tại đây"
onChangeText={text => {
setLeave(state => ({
...state,
reason: text,
}));
}}
/> */}
</View>
</View>
<View style={{...styles.rowView, flexWrap: 'wrap'}}>
<ButtonComponent
text={'Nghỉ việc riêng'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ việc riêng',
// }))
// }
/>
<ButtonComponent
text={'Nghỉ khám bệnh'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ khám bệnh',
// }))
// }
/>
<ButtonComponent
text={'Nghỉ việc không lương'}
textStyle={{fontSize: 12}}
style={{borderRadius: 10, padding: 5, borderWidth: 0.5}}
// onPress={() =>
// setLeave(state => ({
// ...state,
// reason: 'Nghỉ việc không lương',
// }))
// }
/>
</View>
<View style={styles.rowView}>
<AppText style={{flex: 1}}>Tệp đính kèm</AppText>
{/* <View
style={{
flex: 2,
flexDirection: 'row',
justifyContent: 'center',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 10,
marginTop: 4,
}}>
{postImage.length > 0 &&
postImage.map((item, index) => {
//console.log("item", item[0].uri)
return (
<View key={index}>
<ButtonComponent
iconSource={IMAGES.IcClose}
style={styles.btnClose}
onPress={() => onDeleteImage(index)}
/>
<Image
source={{uri: item.uri}}
style={[styles.imgUpload]}
/>
</View>
);
})}
{postImage.length < 3 && (
<ButtonComponent
style={styles.touchableOpacity}
onPress={openGallery}
iconSource={IMAGES.IcAddMoreImg}
/>
)}
</View> */}
</View>
<View style={{marginTop: 20}}>
<AppText
style={[
styles.modalTitle,
{
marginBottom: 10,
},
]}>
Người duyệt
</AppText>
{/* {userManagerList.map((item, index) => (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 4,
paddingLeft: 18,
}}>
<View
<Image
source={{
uri: config.imageEndPoint + item.avatar,
}}
style={leavesModalStyles.avatarApprove}
/>
<AppText
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 18,
}}>
<Image
source={{
uri: 'https://meu.anawork.com' + item.avatar,
}}
style={styles.avatarApprove}
/>
<AppText
style={{
fontSize: 16,
fontWeight: '500',
marginLeft: 10,
}}>{`${item.extend_user_full_name}`}</AppText>
</View>
<View style={{paddingRight: 10}}>
<CheckBox
disabled={false}
value={item.checked}
onValueChange={newValue =>
onSelectManager(newValue, index, item)
}
boxType="square"
animationDuration={0.3}
lineWidth={1}
key={index}
/>
</View>
marginLeft: 10,
}}>{`${item.extend_user_full_name}`}</AppText>
</View>
))} */}
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 40,
}}>
<TouchableOpacity
onPress={() => onClose(null)}
style={styles.btnCancel}>
<AppText style={styles.blueTxt}>Hủy</AppText>
</TouchableOpacity>
{/* <TouchableOpacity
style={styles.btnSubmit}
onPress={onSubmitLeave}>
<AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText>
</TouchableOpacity> */}
<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>
</ScrollView>
</SafeAreaView>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 10,
}}>
<TouchableOpacity
onPress={() => onCloseModal(null)}
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>
</View>
</View>
</ScrollView>
</Modal>
);
};
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
container: {
flex: 1,
},
whiteTxt: {
color: colors.white,
fontWeight: '500',
},
blueTxt: {
color: '#5d78ff',
fontWeight: '500',
},
modalView: {
backgroundColor: 'white',
borderRadius: 20,
paddingHorizontal: 10,
shadowColor: colors.black1,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
marginTop: 80,
height: windowHeight,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
modalTitle: {
fontWeight: '500',
fontSize: 16,
},
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown1RowStyle: {
backgroundColor: '#EFEFEF',
borderBottomColor: '#C5C5C5',
height: 38,
borderRadius: 4,
},
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left', fontSize: 14},
dropdownSelectTimeText: {color: '#444', textAlign: 'left', fontSize: 14},
dropdown1BtnStyle: {
backgroundColor: '#FFF',
borderBottomWidth: 0.2,
height: 24,
width: '100%',
fontSize: 12,
borderColor: '#444',
},
dropdown1BtnTxtStyle: {color: '#000', fontSize: 14, textAlign: 'left'},
rowView: {
flexDirection: 'row',
marginTop: 10,
justifyContent: 'space-between',
alignItems: 'center',
},
inputText: {
backgroundColor: '#FFF',
paddingLeft: 18,
marginTop: 4,
},
touchableOpacity: {
borderColor: colors.primary_blue,
borderStyle: 'dotted',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
height: 50,
padding: 10,
width: 50,
},
btnSubmit: {
backgroundColor: '#5d78ff',
justifyContent: 'center',
alignItems: 'center',
height: 40,
borderRadius: 8,
width: 100,
},
btnCancel: {
backgroundColor: colors.white,
justifyContent: 'center',
alignItems: 'center',
height: 40,
borderRadius: 8,
width: 100,
},
ImgAvatar: {
width: 50,
height: 50,
borderRadius: 30,
},
imgUpload: {
resizeMode: 'contain',
height: 80,
width: 80,
},
reason: {
width: windowWidth / 2 - 25,
textAlign: 'right',
},
checkbox: {
alignSelf: 'center',
height: 16,
width: 16,
marginRight: 4,
},
avatarApprove: {
width: 32,
height: 32,
borderRadius: 4,
},
takeTimeStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
borderBottomColor: '#444',
borderBottomWidth: 0.2,
height: 24,
},
btnClose: {
width: 20,
height: 20,
position: 'absolute',
top: -10,
right: 0,
},
});
export default RequestLeavesDays;
src/values/colors.js
View file @ ca8fc7a4
......@@ -23,6 +23,7 @@ const colors = {
greenE0: '#e0f7f0',
lightGray: '#E5E5E5',
grey: '#CACACA',
grey444: '#444',
royal_blue: '#057DCD',
grayC4: '#C4C4C4',
white: '#fff',
......
src/values/images.js
View file @ ca8fc7a4
......@@ -268,6 +268,7 @@ export const IMAGES = {
IcMore,
IcOutlineSend,
IcAvatarDefault,
IcLeaveNoti,
};
export const BgIntroduce = {
BgStep1,
......
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