/* eslint-disable prettier/prettier */ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable prettier/prettier */ import CheckBox from '@react-native-community/checkbox'; import Moment from 'moment'; import React, {useEffect, useState} from 'react'; import { Image, Modal, ScrollView, TextInput, TouchableOpacity, View, KeyboardAvoidingView, } from 'react-native'; import ButtonComponent from '../../../components/ButtonComponent'; import {launchImageLibrary} from 'react-native-image-picker'; import {useDispatch, useSelector} from 'react-redux'; import {getUserInfoById} from '../../../store/actions/CommonAction'; import { getAttachmentByOTId, getCommentList, getOTbyId, getOTHistoriesByOTId, getUserDirectManagers, postApproveOTVoucher, postAttachmentToComment, postLikeComment, postNewComment, deleteOtTicketRequest, postRejectOTVoucher, } from '../../../store/actions/UserAction'; import {IMAGES} from '../../../values/images'; import styles from '../style'; import Toast from 'react-native-toast-message'; import AppText from '../../../components/AppText'; const OverTimeModalDetail = props => { const dispatch = useDispatch(); const userDetails = useSelector(state => state.UserInfo.userInfo); const {onClose, modalDetailId, setPayloadOtApproveList} = props; const [OTDetail, setOTDetail] = useState(null); const [OTDetailAttachmentList, setOTDetailAttachmentList] = useState([]); const [OTDetailHistoriesList, setOTDetailHistoriesList] = useState([]); const [comment, setComment] = useState(''); const [toggleNextApprover, setToggleNextApprover] = useState(false); const [myDirectorManagerList, setMyDirectorManagerList] = useState([]); const [toggleSelectedNextApprover, setToggleSelectedNextApprover] = useState(false); const [comment2, setComment2] = useState(''); const [commentAttachmentList, setCommentAttachmentList] = useState([]); const [commentList, setCommentList] = useState([]); const [nextApproverId, setNextApproverId] = useState(''); const [historyUserData, setHistoryUserData] = useState(null); const getOTDetailId = async () => { const res = await dispatch(getOTbyId(modalDetailId)); setOTDetail(res); }; const getAttachmentByOtID = async () => { const res = await dispatch(getAttachmentByOTId(modalDetailId)); setOTDetailAttachmentList(res); }; const getOTHistoriesByOtId = async () => { const res = await dispatch(getOTHistoriesByOTId(modalDetailId)); setOTDetailHistoriesList(res); }; const getMyDirectorManagerList = async () => { const res = await dispatch(getUserDirectManagers()); setMyDirectorManagerList(res); }; const onPostAttachmentOfComment = async commentId => { const res = await dispatch( postAttachmentToComment(commentId, commentAttachmentList), ); //console.log('onPostAttachmentOfComment', res); if (res) { setCommentAttachmentList([]); getCommentOfModalDetailList(); } }; const onPostNewComment = async () => { let body = { code: `${modalDetailId}`, content: `${comment2}`, number_of_like: 0, reply_for: null, }; const res = await dispatch(postNewComment(body)); if (res) { let commentId = res.id; if (commentAttachmentList.length && commentId) { onPostAttachmentOfComment(commentId); } } }; const getCommentOfModalDetailList = async () => { const res = await dispatch(getCommentList(modalDetailId)); setCommentList(res); }; const onApproverOTVoucher = async () => { let body = { OtId: modalDetailId, body: { comment: comment, nextApproverId: nextApproverId, }, }; const res = await dispatch(postApproveOTVoucher(body)); if (res) { Toast.show({ type: 'success', text1: 'Hệ thống', text2: 'Lưu yêu cầu tăng ca thành công👍', style: {zIndex: 1001}, }); setPayloadOtApproveList(prev => ({...prev, isRefresh: true})); } else { Toast.show({ type: 'error', text1: 'Hệ thống', text2: 'Thao tác không thành công👍', style: {zIndex: 1001}, }); } onClose(); }; const onRejectOTVoucher = async () => { const res = await dispatch(postRejectOTVoucher(modalDetailId, comment)); if (res) { Toast.show({ type: 'success', text1: 'Hệ thống', text2: 'Từ chối yêu cầu tăng ca thành công👍', style: {zIndex: 1001}, }); setPayloadOtApproveList(prev => ({...prev, isRefresh: true})); } else { Toast.show({ type: 'error', text1: 'Hệ thống', text2: 'Từ chối yêu cầu tăng ca không thành côngg👍', style: {zIndex: 1001}, }); } onClose(); }; const onDeleteRequest = async () => { const res = await dispatch(deleteOtTicketRequest(OTDetail.id)); if (res) { Toast.show({ type: 'success', text1: 'Hệ thống', text2: 'Hủy thành công👍', style: {zIndex: 1001}, }); onClose(null); } else { Toast.show({ type: 'error', text1: 'Hệ thống', text2: 'Hủy thất bại 💔', style: {zIndex: 1001}, }); onClose(null); } }; const onPostNewLikeOfComment = async commentId => { const res = await dispatch(postLikeComment(commentId)); if (res) { getCommentOfModalDetailList(); } }; const getUserById = async userId => { const res = await dispatch(getUserInfoById(userId)); setHistoryUserData(res); }; useEffect(() => { getCommentOfModalDetailList(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { getOTDetailId(); getAttachmentByOtID(); getOTHistoriesByOtId(); getMyDirectorManagerList(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [modalDetailId]); useEffect(() => { if (OTDetailHistoriesList.length === 0) { getUserById(OTDetail?.approver_id || OTDetail?.staff_id); } }, [OTDetail]); //console.log('OTDetailAttachmentList', OTDetailAttachmentList); return ( onClose(null)}> Chi tiết tăng ca onClose(null)}> {`${OTDetail?.extend_creator_full_name}`} {OTDetail?.extend_creator_department} Thông tin tăng ca Từ ngày {Moment(OTDetail?.start).format('DD/MM/YYYY')} Giờ {Moment(OTDetail?.start).format('HH:mm')} Đến ngày {Moment(OTDetail?.finish).format('DD/MM/YYYY')} Giờ {Moment(OTDetail?.finish).format('HH:mm')} Lý do {OTDetail?.reason} Tệp đính kèm {OTDetailAttachmentList && OTDetailAttachmentList.length !== 0 ? ( OTDetailAttachmentList.map((el, index) => { // ; return {el.file_name}; }) ) : ( Không có tệp đính kèm )} {/* Lịch sử duyệt */} Lịch sử duyệt {OTDetailHistoriesList && OTDetailHistoriesList.length !== 0 ? ( OTDetailHistoriesList.map((item, index) => ( {`${item.extend_approver_full_name}`} {item.extend_approved_status_name == 'APPROVED' && ( )} {item.extend_approved_status_name == 'PENDING' && ( )} {item.extend_approved_status_name == 'REJECTED' && ( )} {`${item.extend_approved_status_code}`} {item.comment && ( {`${item.comment}`} )} )) ) : ( {`${ OTDetail?.extend_approver_full_name || OTDetail?.extend_creator_full_name }`} Đang chờ {OTDetail?.approver_id == userDetails.id && OTDetail?.extend_approved_status_name === 'PENDING' && ( { setComment(text); }} style={{ borderWidth: 1, marginTop: 10, borderColor: 'lightgray', borderRadius: 8, }} /> )} )} {OTDetail?.extend_approved_status_name === 'PENDING' && ( setToggleNextApprover(!toggleNextApprover)} /> Chọn người duyệt tiếp theo )} {myDirectorManagerList.length !== 0 ? ( toggleNextApprover && myDirectorManagerList.map((el, index) => ( {`${el?.extend_user_full_name}`} {`${el?.position} - ${el?.department}`} { setToggleSelectedNextApprover( !toggleSelectedNextApprover, ); setNextApproverId(!toggleNextApprover ? el?.id : ''); }} /> )) ) : ( Không có người duyệt )} {/* Bình luận */} Bình luận {commentAttachmentList.length > 0 && ( {commentAttachmentList.map((imageItem, index) => ( ))} )} {commentList && commentList?.length !== 0 && commentList?.map((el, index) => ( {`${el.extend_staff_full_name}`} {`${Moment(el.created_at).format('HH:mm - DD/MM/YYYY')}`} {`${el.content}`} onPostNewLikeOfComment(el?.id)}> {`${el.number_of_like}`} ))} { setComment2(text); }} style={{ borderWidth: 1, marginTop: 10, borderColor: 'lightgray', borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomColor: '#5c65dc', position: 'relative', }} /> { onPostNewComment(); setComment2(''); }}> launchImageLibrary( { mediaType: 'photo', includeBase64: true, }, response => { if (!response.didCancel) { setCommentAttachmentList(response.assets); } }, ) }> {/**Action button */} { onClose(); }} style={styles.btnCancel}> Đóng {OTDetail?.approver_id !== userDetails.id && OTDetail?.extend_approved_status_name === 'PENDING' && ( )} {OTDetail?.approver_id === userDetails.id && OTDetail?.extend_approved_status_name === 'PENDING' && ( )} ); }; export default OverTimeModalDetail;