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'; ...@@ -3,11 +3,19 @@ import {Text} from 'react-native-paper';
import {fonts} from '../../assets/fonts/fonts'; import {fonts} from '../../assets/fonts/fonts';
import colors from '../../values/colors'; 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 = { const defaultStyle = {
fontFamily: FONT_FAMILY, fontFamily: FONT_FAMILY_BASE,
fontSize: isSubText ? 12 : 14, fontSize: isSubText ? 12 : 14,
color: color ?? colors.textColor, color: color ?? colors.textColor,
}; };
......
src/components/Select/index.js
View file @ ca8fc7a4
...@@ -16,14 +16,24 @@ const data = [ ...@@ -16,14 +16,24 @@ const data = [
{label: 'Item 8', value: '8'}, {label: 'Item 8', value: '8'},
]; ];
const SelectDropdownComponent = ({selectData = [], value, setValue}) => { const SelectDropdownComponent = ({
selectData = [],
value,
setValue,
width,
height,
}) => {
// const [value, setValue] = useState(null); // const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false); const [isFocus, setIsFocus] = useState(false);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Dropdown <Dropdown
style={[styles.dropdown, isFocus && {borderColor: 'blue'}]} style={[
styles.dropdown,
{width: width ?? 100, height: height ?? 40},
isFocus && {borderColor: 'blue'},
]}
itemTextStyle={{color: colors.textColor}} itemTextStyle={{color: colors.textColor}}
placeholderStyle={styles.placeholderStyle} placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle} selectedTextStyle={styles.selectedTextStyle}
...@@ -56,12 +66,9 @@ export default SelectDropdownComponent; ...@@ -56,12 +66,9 @@ export default SelectDropdownComponent;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1,
backgroundColor: 'white', backgroundColor: 'white',
}, },
dropdown: { dropdown: {
width: 100,
height: 40,
borderColor: 'gray', borderColor: 'gray',
borderWidth: 0.5, borderWidth: 0.5,
borderRadius: 8, borderRadius: 8,
......
src/components/TextInputComponent.js
View file @ ca8fc7a4
...@@ -123,7 +123,7 @@ const stylesTextInput = StyleSheet.create({ ...@@ -123,7 +123,7 @@ const stylesTextInput = StyleSheet.create({
marginTop: 5, marginTop: 5,
paddingHorizontal: 8, paddingHorizontal: 8,
paddingRight: 12, paddingRight: 12,
borderBottomWidth: 0.2, borderBottomWidth: 0.5,
}, },
icon: { icon: {
width: 20, width: 20,
......
src/network/api/onLeaveApi.js
View file @ ca8fc7a4
...@@ -9,4 +9,7 @@ export default { ...@@ -9,4 +9,7 @@ export default {
axiosClient.get( axiosClient.get(
`myLeaveDayApprovalRequests?Filters=${filter}&Sorts=${sort}&Page=${page}&PageSize=${pageSize}`, `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 { ...@@ -16,9 +16,17 @@ import {
getUserLeavesDay, getUserLeavesDay,
getApproveRequestLeavesDays, getApproveRequestLeavesDays,
getUserRestDay, getUserRestDay,
getLeaveCategory,
getDirectManagers,
handleSelectManagersLeaveRequest,
postLeaveRequest,
} from './onLeaveSlice'; } from './onLeaveSlice';
import OnLeaveMainView from './template/OnLeaveMainView'; import OnLeaveMainView from './template/OnLeaveMainView';
import onLeavePropsProvider from './onLeavePropsProvider'; 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 = { const initPayloadApprove = {
type: 'Tất cả', type: 'Tất cả',
...@@ -35,12 +43,11 @@ const OnLeaveContainer = props => { ...@@ -35,12 +43,11 @@ const OnLeaveContainer = props => {
userRestDayList, userRestDayList,
userInfo, userInfo,
approveRequestLeavesDaysList, approveRequestLeavesDaysList,
leaveCategory,
directManagersList,
} = props; } = props;
const dispatch = useDispatch();
// const userLeaveDaysPending = useSelector(
// state => state.UserLeavesPending.userLeavesPending,
// );
const dispatch = useDispatch();
const [dataChart, setDataChart] = useState(); const [dataChart, setDataChart] = useState();
// get api with payload // get api with payload
...@@ -49,7 +56,6 @@ const OnLeaveContainer = props => { ...@@ -49,7 +56,6 @@ const OnLeaveContainer = props => {
const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove); const [payloadLeaves, setPayloadLeaves] = useState(initPayloadApprove);
const [leaveRequestList, setLeaveRequestList] = useState([]); const [leaveRequestList, setLeaveRequestList] = useState([]);
const [leaveApproveReqList, setLeaveApproveReqList] = useState([]);
const [showAlert, setShowAlert] = useState({ const [showAlert, setShowAlert] = useState({
isError: false, isError: false,
...@@ -69,6 +75,24 @@ const OnLeaveContainer = props => { ...@@ -69,6 +75,24 @@ const OnLeaveContainer = props => {
const [modalContent, setModalContent] = useState(null); const [modalContent, setModalContent] = useState(null);
const [leavesDaysModal, setLeavesDaysModal] = 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 // open the modal
const onOpenDetailModal = detailItem => { const onOpenDetailModal = detailItem => {
setModalContent( setModalContent(
...@@ -141,72 +165,6 @@ const OnLeaveContainer = props => { ...@@ -141,72 +165,6 @@ const OnLeaveContainer = props => {
isRefresh: false, 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 // refresh onClick event
const onRefreshLeaveList = () => { const onRefreshLeaveList = () => {
setPayloadLeaves({ setPayloadLeaves({
...@@ -330,19 +288,109 @@ const OnLeaveContainer = props => { ...@@ -330,19 +288,109 @@ const OnLeaveContainer = props => {
const fetchLeavesRestDays = () => { const fetchLeavesRestDays = () => {
dispatch(getUserRestDay()); dispatch(getUserRestDay());
}; };
const fetchLeaveCategory = () => {
dispatch(getLeaveCategory());
};
const fetchDirectManagers = () => {
dispatch(getDirectManagers());
};
//============================== ADD NEW LEAVES =============================// //============================== ADD NEW LEAVES =============================//
const openCreateNewLeaveDay = async () => { const openGallery = () => {
const objectClone = JSON.parse(JSON.stringify(userDirectManagersList)); launchImageLibrary(
let obj = []; {
objectClone.forEach(element => { mediaType: 'photo',
element.checked = false; includeBase64: true,
obj.push(element); },
}); response => {
setUserManagerList(obj); if (!response.didCancel) {
getRangeTimeLeave(); //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
useEffect(() => { useEffect(() => {
usersLeavesDayList && formatLeaveLstFromApi(); usersLeavesDayList && formatLeaveLstFromApi();
...@@ -350,6 +398,8 @@ const OnLeaveContainer = props => { ...@@ -350,6 +398,8 @@ const OnLeaveContainer = props => {
useEffect(() => { useEffect(() => {
fetchLeavesRestDays(); fetchLeavesRestDays();
fetchLeaveCategory();
fetchDirectManagers();
}, []); }, []);
useEffect(() => { useEffect(() => {
...@@ -363,10 +413,6 @@ const OnLeaveContainer = props => { ...@@ -363,10 +413,6 @@ const OnLeaveContainer = props => {
payloadApproveRequestLeavesDays && fetchApproveRequestLeavesDays(); payloadApproveRequestLeavesDays && fetchApproveRequestLeavesDays();
}, [payloadApproveRequestLeavesDays]); }, [payloadApproveRequestLeavesDays]);
useEffect(() => {
checkVisibleLoadMore();
}, [leaveRequestList, leaveApproveReqList, totalArr]);
useEffect(() => { useEffect(() => {
if (props?.route?.params) { if (props?.route?.params) {
const {refId} = props?.route?.params; const {refId} = props?.route?.params;
...@@ -385,11 +431,22 @@ const OnLeaveContainer = props => { ...@@ -385,11 +431,22 @@ const OnLeaveContainer = props => {
totalArr, totalArr,
isDisableLoadMore, isDisableLoadMore,
leaveRequestList, leaveRequestList,
leaveApproveReqList,
modalContent, modalContent,
payloadApproveRequestLeavesDays, payloadApproveRequestLeavesDays,
approveRequestLeavesDaysList, approveRequestLeavesDaysList,
leavesDaysModal, leavesDaysModal,
leaveCategory,
directManagersList,
openTimePicker,
timeRequestLeave,
leaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
openGallery,
onDeleteLeaveRequestImage,
setLeaveRequestImage,
setTimeRequestLeave,
setOpenTimePicker,
onLoadMoreLeavesApproveReqTicket, onLoadMoreLeavesApproveReqTicket,
onRefreshLeaveList, onRefreshLeaveList,
onRefreshLeaveApproveReqList, onRefreshLeaveApproveReqList,
...@@ -403,6 +460,8 @@ const OnLeaveContainer = props => { ...@@ -403,6 +460,8 @@ const OnLeaveContainer = props => {
onCloseModal, onCloseModal,
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, minutesToHours,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest,
}; };
return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />; return <OnLeaveMainView {...onLeavePropsProvider(leaveProps)} />;
}; };
......
src/screens/onleave/index.js
View file @ ca8fc7a4
...@@ -11,6 +11,8 @@ export default function OnLeaveScreen() { ...@@ -11,6 +11,8 @@ export default function OnLeaveScreen() {
usersLeavesDayList = [], usersLeavesDayList = [],
userRestDayList = [], userRestDayList = [],
approveRequestLeavesDaysList = [], approveRequestLeavesDaysList = [],
leaveCategory = [],
directManagersList = [],
} = onLeaveSelect; } = onLeaveSelect;
const {userInfo} = authSelect; const {userInfo} = authSelect;
const onLeaveScreenProps = { const onLeaveScreenProps = {
...@@ -18,6 +20,8 @@ export default function OnLeaveScreen() { ...@@ -18,6 +20,8 @@ export default function OnLeaveScreen() {
usersLeavesDayList, usersLeavesDayList,
userRestDayList, userRestDayList,
approveRequestLeavesDaysList, approveRequestLeavesDaysList,
leaveCategory,
directManagersList,
}; };
return <OnLeaveContainer {...onLeaveScreenProps} />; return <OnLeaveContainer {...onLeaveScreenProps} />;
} }
src/screens/onleave/onLeavePropsProvider.js
View file @ ca8fc7a4
...@@ -25,6 +25,19 @@ export default function onLeavePropsProvider(props) { ...@@ -25,6 +25,19 @@ export default function onLeavePropsProvider(props) {
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, minutesToHours,
leavesDaysModal, leavesDaysModal,
leaveCategory,
directManagersList,
openTimePicker,
setOpenTimePicker,
timeRequestLeave,
setTimeRequestLeave,
leaveRequestImage,
openGallery,
onDeleteLeaveRequestImage,
leaveRequestTicket,
setLeaveRequestTicket,
onSubmitLeaveRequest,
onSelectManagerLeaveRequest
} = props; } = props;
return { return {
leavesDaysModal, leavesDaysModal,
...@@ -59,5 +72,22 @@ export default function onLeavePropsProvider(props) { ...@@ -59,5 +72,22 @@ export default function onLeavePropsProvider(props) {
userInfo, userInfo,
onOpenDetailModal, 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'; ...@@ -6,9 +6,7 @@ import onLeaveApi from '../../network/api/onLeaveApi';
import Utils from '../../utils'; import Utils from '../../utils';
const initialHome = { const initialHome = {
quotationList: [], directManagersList: [],
news: [],
birthdayListInMonth: [],
}; };
export const getUserLeavesDay = createAsyncThunk( export const getUserLeavesDay = createAsyncThunk(
...@@ -50,11 +48,58 @@ export const getApproveRequestLeavesDays = 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({ const onLeaveSlice = createSlice({
name: 'onLeave', name: 'onLeave',
initialState: initialHome, 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 => { extraReducers: builder => {
builder.addCase(getUserLeavesDay.fulfilled, (state, action) => { builder.addCase(getUserLeavesDay.fulfilled, (state, action) => {
const {success} = Utils.getValues(action, 'payload', false); const {success} = Utils.getValues(action, 'payload', false);
...@@ -86,8 +131,28 @@ const onLeaveSlice = createSlice({ ...@@ -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; export default reducer;
src/screens/onleave/style.js
View file @ ca8fc7a4
...@@ -402,5 +402,139 @@ const styles = StyleSheet.create({ ...@@ -402,5 +402,139 @@ const styles = StyleSheet.create({
alignItems: 'center', 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; export default styles;
src/screens/onleave/template/OnLeaveMainView.js
View file @ ca8fc7a4
...@@ -156,6 +156,7 @@ const ApproveRequestLeavesDays = React.memo( ...@@ -156,6 +156,7 @@ const ApproveRequestLeavesDays = React.memo(
</View> </View>
</View> </View>
{approveRequestLeavesDaysList.length > 0 && {approveRequestLeavesDaysList.length > 0 &&
userInfo &&
approveRequestLeavesDaysList[0].approver_id === userInfo.id && approveRequestLeavesDaysList[0].approver_id === userInfo.id &&
approveRequestLeavesDaysList.map((item, index) => ( approveRequestLeavesDaysList.map((item, index) => (
<TouchableOpacity <TouchableOpacity
...@@ -316,6 +317,7 @@ const OnLeaveMainView = ({ ...@@ -316,6 +317,7 @@ const OnLeaveMainView = ({
leaveRequestList, leaveRequestList,
onCloseModal, onCloseModal,
leavesDaysModal, leavesDaysModal,
leaveRequestModalProps,
}) => { }) => {
return ( return (
<SafeAreaView> <SafeAreaView>
...@@ -335,9 +337,7 @@ const OnLeaveMainView = ({ ...@@ -335,9 +337,7 @@ const OnLeaveMainView = ({
onOpenDetailModal={onOpenDetailModal} onOpenDetailModal={onOpenDetailModal}
/> />
</ScrollView> </ScrollView>
{leavesDaysModal && ( {leavesDaysModal && <RequestLeavesDays {...leaveRequestModalProps} />}
<RequestLeavesDays userInfo={userInfo} onClose={onCloseModal} />
)}
</SafeAreaView> </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 CheckBox from '@react-native-community/checkbox';
import Moment from 'moment'; import Moment from 'moment';
import React, {useEffect, useState} from 'react'; import React, {useMemo} from 'react';
import { import {
Dimensions,
Image, Image,
Modal, Modal,
SafeAreaView,
ScrollView, ScrollView,
StyleSheet,
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native'; } 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 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 AppText from '../../../../components/AppText';
import ButtonComponent from '../../../../components/ButtonComponent'; import ButtonComponent from '../../../../components/ButtonComponent';
import { import SelectDropdownComponent from '../../../../components/Select';
getRangeTimeFinish,
getRangeTimeStart,
postUserLeave,
} from '../../../../store/actions/UserAction';
import colors from '../../../../values/colors';
import {IMAGES} from '../../../../values/images';
import config from '../../../../config'; 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 formatLeaveCategory = useMemo(() => {
// const dispatch = useDispatch(); leaveCategory.map(item => {
// const userDirectManagersList = useSelector( return {label: item.name, value: item.name};
// state => state.MyDirectManagers.myDirectManagers, });
// ); return leaveCategory.length > 0
// const idLeavesCategory = useSelector( ? leaveCategory.map(item => {
// state => state.UserLeavesPending.leaveCategories, return {label: item.name, value: item.name};
// ); })
: [];
// // init state }, [leaveCategory]);
// 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]);
return ( return (
<Modal <Modal
animationType="slide" animationType="slide"
transparent={true} transparent={true}
visible={true} visible={true}
onRequestClose={() => onClose(null)}> onRequestClose={() => onCloseModal(null)}>
<SafeAreaView> <ScrollView>
<ScrollView> <View style={leavesModalStyles.modalView}>
<View style={styles.modalView}> <View style={{marginVertical: 10}}>
<View style={{marginVertical: 10}}> <AppText style={leavesModalStyles.modalTitle}>
<AppText style={styles.modalTitle}>Nghỉ phép mới</AppText> 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>
<View style={{flexDirection: 'row', marginTop: 10}}> </View>
<Image <View>
source={{ <AppText style={leavesModalStyles.modalTitle}>
uri: config.imageEndPoint + userInfo.avatar, Thông tin chung
}} </AppText>
style={styles.ImgAvatar} <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}}> </View>
<AppText style={styles.modalTitle}>{`${userInfo?.first_name} ${ <View style={leavesModalStyles.rowView}>
userInfo?.middle_name ? userInfo?.middle_name : '' <AppText>Từ ngày</AppText>
} ${userInfo?.last_name} - ${ <View>
userInfo?.employee_code <TouchableOpacity
}`}</AppText> onPress={() =>
<AppText>{userInfo?.position}</AppText> 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> </View>
<View style={{marginTop: 20}}> <View style={leavesModalStyles.rowView}>
<AppText style={styles.modalTitle}>Thông tin chung</AppText> <AppText>Giờ</AppText>
<View style={styles.rowView}> <View>
<View style={{flex: 1}}> <TouchableOpacity
<AppText onPress={() =>
style={{ setOpenTimePicker(state => ({
flex: 1, ...state,
// color: leave?.id?.length === 0 ? 'red' : 'grey', startTime: true,
}}> }))
Loại nghỉ phép }
style={leavesModalStyles.chooseTimeSection}>
<AppText>
{Moment(timeRequestLeave.startDate).format('HH:mm')}
</AppText> </AppText>
</View> <Image
<View style={{flex: 1}}> source={IMAGES.IcLeaveNoti}
<SelectDropdown style={{width: 20, height: 20}}
// 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}}
/>
);
}}
/> />
</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>
<View style={styles.rowView}> </View>
<AppText style={{flex: 1}}>Từ ngày</AppText> <View style={leavesModalStyles.rowView}>
<AppText>Đến ngày</AppText>
<View style={{flex: 1}}> <View>
<TouchableOpacity <TouchableOpacity
// onPress={() => onPress={() =>
// setOpenTimePicker(state => ({ setOpenTimePicker(state => ({
// ...state, ...state,
// start: true, finishDate: true,
// })) }))
// } }
style={[ style={leavesModalStyles.chooseTimeSection}>
styles.dropdown1BtnStyle, <AppText>
{ {Moment(timeRequestLeave.finishDate).format('DD/MM/YYYY')}
alignItems: 'flex-end', </AppText>
flexDirection: 'row', <Image
justifyContent: 'space-between', source={IMAGES.IcCalendarGray}
paddingRight: 8, style={{width: 20, height: 20, marginLeft: 8}}
paddingLeft: 16, />
}, </TouchableOpacity>
]}> <DateTimePickerModal
{/* <AppText> isVisible={openTimePicker.finishDate}
{Moment(leave.since).format('DD/MM/YYYY')} mode="date"
</AppText> */} date={timeRequestLeave.finishDate}
<Image onConfirm={time => {
source={IMAGES.IcCalendarGray} setTimeRequestLeave(prev => ({...prev, finishDate: time}));
style={{width: 20, height: 20, marginLeft: 8}} setOpenTimePicker(state => ({
/> ...state,
</TouchableOpacity> finishDate: false,
{/* <DateTimePickerModal }));
isVisible={openTimePicker.start} }}
mode="date" onCancel={() => {
date={leave.since} setOpenTimePicker(state => ({
onConfirm={time => { ...state,
onSelectDateStart(time); finishDate: false,
}} }));
onCancel={() => { }}
setOpenTimePicker(state => ({ />
...state,
start: false,
}));
}}
/> */}
</View>
</View> </View>
<View style={styles.rowView}> </View>
<AppText style={{flex: 1}}>Giờ</AppText> <View style={leavesModalStyles.rowView}>
<View style={{flex: 1}}> <AppText>Giờ</AppText>
{/* <SelectDropdown <View>
data={rangeTimeStart} <TouchableOpacity
dropdownIconPosition={'right'} onPress={() =>
defaultButtonText={leave.timeStart || 'Giờ'} setOpenTimePicker(state => ({
renderDropdownIcon={() => { ...state,
return ( finishTime: true,
<Image }))
source={IMAGES.IcLockGrey} }
style={{width: 20, height: 20}} style={leavesModalStyles.chooseTimeSection}>
/> <AppText>
); {Moment(timeRequestLeave.finishDate).format('HH:mm')}
}} </AppText>
buttonStyle={styles.dropdown1BtnStyle} <Image
buttonTextStyle={{fontSize: 14, textAlign: 'left'}} source={IMAGES.IcLeaveNoti}
dropdownStyle={styles.dropdownStyle} style={{width: 20, height: 20}}
rowStyle={styles.dropdown1RowStyle} />
rowTextStyle={styles.dropdownSelectTimeText} </TouchableOpacity>
onSelect={(selectedItem, index) => <DateTimePickerModal
onSelectTimeStart(selectedItem, index) isVisible={openTimePicker.finishTime}
} mode="time"
/> */} date={timeRequestLeave.finishDate}
</View> onConfirm={time => {
setTimeRequestLeave(prev => ({...prev, finishDate: time}));
setOpenTimePicker(state => ({
...state,
finishTime: false,
}));
}}
onCancel={() => {
setOpenTimePicker(state => ({
...state,
finishTime: false,
}));
}}
/>
</View> </View>
<View style={styles.rowView}> </View>
<AppText style={{flex: 1}}>Đến ngày</AppText> {/* <View style={leavesModalStyles.rowView}>
<View style={{flex: 1}}> <AppText>{`Thời gian nghỉ (*)`}</AppText>
<TouchableOpacity <View style={leavesModalStyles.takeTimeStyle}>
// onPress={() => <AppText style={{paddingLeft: 18}}>
// setOpenTimePicker(state => ({ {durationLeave.stringTime}
// ...state, </AppText>
// finish: true, </View>
// })) </View> */}
// } <View style={leavesModalStyles.rowView}>
// style={[ <AppText
// styles.dropdown1BtnStyle, style={{
// { color:
// alignItems: 'flex-end', leaveRequestTicket.reason.length === 0 ? 'red' : 'grey',
// flexDirection: 'row', }}>{`Lý do(*)`}</AppText>
// justifyContent: 'space-between', <View>
// paddingRight: 8, <TextInputComponent
// paddingLeft: 16, styleAreaInput={leavesModalStyles.inputText}
// }, value={leaveRequestTicket.reason}
// ]} placeholder="Nhập lý do tại đây"
> onChangeText={text => {
{/* <AppText> setLeaveRequestTicket(state => ({
{Moment(leave.toDate).format('DD/MM/YYYY')} ...state,
</AppText> */} reason: text,
<Image }));
source={IMAGES.IcCalendarGray} }}
style={{width: 20, height: 20, marginLeft: 8}} noBorder
/> />
</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>
<View style={styles.rowView}> </View>
<AppText style={{flex: 1}}>Giờ</AppText> <View style={leavesModalStyles.rowView}>
<View style={{flex: 1}}> <AppText>Tệp đính kèm</AppText>
{/* <SelectDropdown <View style={{flexDirection: 'row'}}>
data={rangeTimeFinish} {leaveRequestImage.length > 0 &&
dropdownIconPosition={'right'} leaveRequestImage.map((item, index) => {
defaultButtonText={leave.timeFinish || 'Giờ'} //console.log("item", item[0].uri)
renderDropdownIcon={() => { return (
return ( <View key={index}>
<ButtonComponent
iconSource={IMAGES.IcReject}
style={leavesModalStyles.btnClose}
onPress={() => onDeleteLeaveRequestImage(index)}
/>
<Image <Image
source={IMAGES.IcLockGrey} source={{uri: item.uri}}
style={{width: 20, height: 20}} style={leavesModalStyles.imgUpload}
/> />
); </View>
}} );
buttonStyle={styles.dropdown1BtnStyle} })}
buttonTextStyle={{fontSize: 14, textAlign: 'left'}}
dropdownStyle={styles.dropdownStyle} {leaveRequestImage.length < 3 && (
rowStyle={styles.dropdown1RowStyle} <ButtonComponent
rowTextStyle={styles.dropdownSelectTimeText} style={leavesModalStyles.addLeaveRequestImageBtn}
onSelect={(selectedItem, index) => onPress={openGallery}
onSelectTimeFinish(selectedItem, index) iconSource={IMAGES.IcAddMoreImg}
} />
/> */} )}
</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> </View>
<View style={styles.rowView}> </View>
<AppText <View style={{marginTop: 10}}>
style={{ <AppText
flex: 1, style={[
// color: leave.reason.length === 0 ? 'red' : 'grey', leavesModalStyles.modalTitle,
}}>{`Lý do(*)`}</AppText> {
marginBottom: 10,
},
]}>
Người duyệt
</AppText>
{directManagersList.map((item, index) => (
<View <View
key={index}
style={{ 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', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'space-between',
alignItems: 'center', 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 <View
key={index}
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginTop: 4, paddingLeft: 18,
}}> }}>
<View <Image
source={{
uri: config.imageEndPoint + item.avatar,
}}
style={leavesModalStyles.avatarApprove}
/>
<AppText
style={{ style={{
flexDirection: 'row', marginLeft: 10,
alignItems: 'center', }}>{`${item.extend_user_full_name}`}</AppText>
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>
</View> </View>
))} */} <View style={{paddingRight: 10}}>
</View> <CheckBox
</View> disabled={false}
<View value={item.isChecked}
style={{ onValueChange={newValue =>
flexDirection: 'row', onSelectManagerLeaveRequest(index, newValue)
justifyContent: 'flex-end', }
marginTop: 40, boxType={'square'}
}}> animationDuration={0.3}
<TouchableOpacity lineWidth={1}
onPress={() => onClose(null)} key={index}
style={styles.btnCancel}> tintColors={'#9E663C'}
<AppText style={styles.blueTxt}>Hủy</AppText> />
</TouchableOpacity> </View>
{/* <TouchableOpacity </View>
style={styles.btnSubmit} ))}
onPress={onSubmitLeave}>
<AppText style={styles.whiteTxt}>Gửi yêu cầu</AppText>
</TouchableOpacity> */}
</View> </View>
</View> </View>
</ScrollView> <View
</SafeAreaView> 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> </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; export default RequestLeavesDays;
src/values/colors.js
View file @ ca8fc7a4
...@@ -23,6 +23,7 @@ const colors = { ...@@ -23,6 +23,7 @@ const colors = {
greenE0: '#e0f7f0', greenE0: '#e0f7f0',
lightGray: '#E5E5E5', lightGray: '#E5E5E5',
grey: '#CACACA', grey: '#CACACA',
grey444: '#444',
royal_blue: '#057DCD', royal_blue: '#057DCD',
grayC4: '#C4C4C4', grayC4: '#C4C4C4',
white: '#fff', white: '#fff',
......
src/values/images.js
View file @ ca8fc7a4
...@@ -268,6 +268,7 @@ export const IMAGES = { ...@@ -268,6 +268,7 @@ export const IMAGES = {
IcMore, IcMore,
IcOutlineSend, IcOutlineSend,
IcAvatarDefault, IcAvatarDefault,
IcLeaveNoti,
}; };
export const BgIntroduce = { export const BgIntroduce = {
BgStep1, 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