399 lines
10 KiB
JavaScript
399 lines
10 KiB
JavaScript
import { useState, Fragment, useEffect, memo } from 'react';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import MailDetailModal from '../../components/DataManage/MailDetailModal';
|
|
import { SelectInput, TextInput } from '../../styles/Components';
|
|
import { UserMailDelete, UserMailItemDelete, UserMailView } from '../../apis';
|
|
import { useTranslation } from 'react-i18next';
|
|
import CustomConfirmModal from '../common/modal/CustomConfirmModal';
|
|
import { authType, ivenTabType, opMailType } from '../../assets/data';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { authList } from '../../store/authList';
|
|
import { convertKTC } from '../../utils';
|
|
import { TableSkeleton } from '../Skeleton/TableSkeleton';
|
|
import { opPickupType, opReadType, opYNType } from '../../assets/data/options';
|
|
import { useDynamoDBPagination, useModal } from '../../hooks/hook';
|
|
import { DynamoPagination } from '../common';
|
|
import { useLoading } from '../../context/LoadingProvider';
|
|
import { useAlert } from '../../context/AlertProvider';
|
|
import { alertTypes } from '../../assets/data/types';
|
|
|
|
const ConfirmChild = memo(({ maxCount }) => {
|
|
const { t } = useTranslation();
|
|
const [localCount, setLocalCount] = useState('1');
|
|
const {showToast} = useAlert();
|
|
|
|
const handleChange = (e) => {
|
|
let value = e.target.value;
|
|
|
|
if (value === '0' || value === '-0') {
|
|
value = '1';
|
|
} else if (value < 0) {
|
|
value = Math.abs(value).toString();
|
|
} else if(Number(value) > maxCount) {
|
|
showToast('DEL_COUNT_CHECK', {type: alertTypes.warning});
|
|
value = maxCount.toString();
|
|
}
|
|
|
|
setLocalCount(value);
|
|
};
|
|
|
|
return(
|
|
<InputItem>
|
|
<p>{t('DEL_COUNT_CONFIRM', {count: maxCount})}</p>
|
|
<TextInput
|
|
id="user-mail-item-count-input"
|
|
placeholder="수량"
|
|
type="number"
|
|
value={localCount}
|
|
onChange={handleChange}
|
|
width="200px"
|
|
/>
|
|
</InputItem>
|
|
);
|
|
});
|
|
|
|
const UserMailInfo = ({ userInfo }) => {
|
|
const token = sessionStorage.getItem('token');
|
|
const authInfo = useRecoilValue(authList);
|
|
const {withLoading} = useLoading();
|
|
const {showModal, showToast} = useAlert();
|
|
|
|
// 받은 우편, 보낸 우편
|
|
const [option, setOption] = useState('RECEIVE');
|
|
const [detail, setDetail] = useState({ title: '', content: '', item_list: [], mail_guid: '' });
|
|
const [deleteSelected, setDeleteSelected] = useState({});
|
|
const [authDelete, setAuthDelete] = useState(false);
|
|
|
|
const {
|
|
modalState,
|
|
handleModalView,
|
|
handleModalClose
|
|
} = useModal({
|
|
detail: 'hidden',
|
|
deleteItem: 'hidden'
|
|
});
|
|
|
|
const fetchMailData = async (page, startKey) => {
|
|
const params = {
|
|
mail_type: option,
|
|
guid: userInfo.guid,
|
|
page_key: startKey
|
|
};
|
|
return await UserMailView(token, params);
|
|
};
|
|
|
|
const {
|
|
data: dataList,
|
|
loading,
|
|
pagination,
|
|
fetchPage,
|
|
goToNextPage,
|
|
goToPrevPage,
|
|
resetPagination
|
|
} = useDynamoDBPagination(fetchMailData);
|
|
|
|
useEffect(() => {
|
|
resetPagination();
|
|
fetchPage(1);
|
|
}, [option]);
|
|
|
|
useEffect(() => {
|
|
setAuthDelete(authInfo.auth_list.some(auth => auth.id === authType.userSearchDelete));
|
|
}, [authInfo]);
|
|
|
|
const handleDetail = (title, content, itmeList, mail_guid) => {
|
|
setDetail({ title: title, content: content, item_list: itmeList, mail_guid: mail_guid });
|
|
};
|
|
|
|
const handleModalSubmit = async (type, param = null) => {
|
|
let params;
|
|
switch (type) {
|
|
case "detail":
|
|
showModal('USER_MAIL_DEL_CONFIRM', {
|
|
type: alertTypes.confirm,
|
|
onConfirm: () => handleModalSubmit('deleteSubmit')
|
|
});
|
|
break;
|
|
case "deleteSubmit":
|
|
params = {}
|
|
params.type = option;
|
|
params.guid = userInfo.guid;
|
|
params.mail_guid = detail.mail_guid;
|
|
|
|
await withLoading(async () => {
|
|
return await UserMailDelete(token, params);
|
|
}).then(data => {
|
|
if(data.result === "SUCCESS") {
|
|
showToast('DEL_COMPLETE', {type: alertTypes.success});
|
|
}else{
|
|
showToast(data.data.message, {type: alertTypes.error});
|
|
}
|
|
}).catch(e => {
|
|
showToast(e, {type: alertTypes.error});
|
|
});
|
|
|
|
break;
|
|
case "deleteItem":
|
|
setDeleteSelected(param);
|
|
handleModalView('deleteItem');
|
|
break;
|
|
case "deleteItemSubmit":
|
|
//랜더링 문제로 dom에서 값을 찾아 가져온다.
|
|
const inputElement = document.getElementById("user-mail-item-count-input");
|
|
|
|
if(inputElement === null) showToast('INPUT_VALUE_ERROR',{type: alertTypes.error});
|
|
const count = inputElement.value;
|
|
|
|
params = {}
|
|
params.type = option;
|
|
params.guid = userInfo.guid;
|
|
params.mail_guid = detail.mail_guid;
|
|
params.item_id = deleteSelected.item_id;
|
|
params.parrent_count = deleteSelected.count;
|
|
params.count = count;
|
|
|
|
await withLoading(async () => {
|
|
return await UserMailItemDelete(token, params);
|
|
}).then(data => {
|
|
if(data.result === "SUCCESS") {
|
|
if(deleteSelected.count <= count){
|
|
const item_idx = detail.item_list.findIndex(item => item.item_id === params.item_id);
|
|
if(item_idx >= 0) {
|
|
detail.item_list.splice(item_idx, 1);
|
|
}
|
|
}else{
|
|
deleteSelected.count = deleteSelected.count - count;
|
|
}
|
|
showToast('DEL_ITEM_COMPLETE', {type: alertTypes.success});
|
|
}else{
|
|
showToast(data.data.message, {type: alertTypes.error});
|
|
}
|
|
}).catch(e => {
|
|
showToast(e, {type: alertTypes.error});
|
|
}).finally(() => {
|
|
handleModalClose('deleteItem');
|
|
fetchPage(pagination.currentPage);
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
return (
|
|
loading ? <TableSkeleton count={10}/> :
|
|
<>
|
|
<SelectContainer>
|
|
<SelectInput
|
|
value={option}
|
|
onChange={e => {
|
|
setOption(e.target.value);
|
|
}}>
|
|
{opMailType.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
|
|
<DynamoPagination
|
|
pagination={pagination}
|
|
onNextPage={goToNextPage}
|
|
onPrevPage={goToPrevPage}
|
|
/>
|
|
</SelectContainer>
|
|
|
|
{option === 'RECEIVE' && (
|
|
<>
|
|
<UserTableWrapper>
|
|
<UserDefaultTable>
|
|
<thead>
|
|
<tr>
|
|
<th width="170">수신일자</th>
|
|
<th width="200">발송자</th>
|
|
<th width="300">우편 제목</th>
|
|
<th width="80">상태</th>
|
|
<th width="100">첨부 아이템</th>
|
|
<th width="80">수령</th>
|
|
<th width="80">시스템 우편</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dataList?.mail_list?.map((mail, idx) => {
|
|
return (
|
|
<tr key={idx}>
|
|
<td>{convertKTC(mail.create_time)}</td>
|
|
<td>{mail.sender_nickname}</td>
|
|
<td>
|
|
<MailLink
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
handleModalView('detail');
|
|
handleDetail(mail.title, mail.content, mail.item_list, mail.mail_guid);
|
|
}}>
|
|
{mail.title}
|
|
</MailLink>
|
|
</td>
|
|
<td>{opReadType.find(type => type.value === mail.status).name}</td>
|
|
<td>{opYNType.find(type => type.value === (mail.item_list.length > 0)).name}</td>
|
|
<td>{opPickupType.find(type => type.value === mail.is_get_item).name}</td>
|
|
<td>{opYNType.find(type => type.value === mail.is_system_mail).name}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</UserDefaultTable>
|
|
</UserTableWrapper>
|
|
</>
|
|
)}
|
|
{option === 'SEND' && (
|
|
<>
|
|
<UserTableWrapper>
|
|
<UserDefaultTable>
|
|
<thead>
|
|
<tr>
|
|
<th width="170">발송 일자</th>
|
|
<th width="200">수신자</th>
|
|
<th width="300">우편 제목</th>
|
|
<th width="120">첨부 아이템</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dataList && dataList.mail_list &&
|
|
dataList.mail_list.map((mail, idx) => {
|
|
return (
|
|
<tr key={idx}>
|
|
<td>{convertKTC(mail.create_time)}</td>
|
|
<td>{mail.receiver_nickname}</td>
|
|
<td>
|
|
<MailLink
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
handleModalView('detail');
|
|
handleDetail(mail.title, mail.content, mail.item_list, mail.mail_guid);
|
|
}}>
|
|
{mail.title}
|
|
</MailLink>
|
|
</td>
|
|
<td>{mail.item_list.length > 0 ? 'Y' : 'N'}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</UserDefaultTable>
|
|
</UserTableWrapper>
|
|
</>
|
|
)}
|
|
|
|
{/*상세*/}
|
|
<MailDetailModal
|
|
mailModal={modalState.detailModal}
|
|
handleClick={() => handleModalClose('detail')}
|
|
setDetail={setDetail}
|
|
content={detail}
|
|
handleDelete={() => handleModalSubmit('detail')}
|
|
handleItemDelete={(param) => handleModalSubmit('deleteItem', param)}
|
|
authDelete={authDelete}
|
|
/>
|
|
|
|
{/*메일 아이템 삭제 모달*/}
|
|
<CustomConfirmModal
|
|
ChildView={() => (
|
|
<ConfirmChild
|
|
maxCount={deleteSelected.count}
|
|
/>
|
|
)}
|
|
view={modalState.deleteItemModal}
|
|
handleSubmit={() => handleModalSubmit('deleteItemSubmit')}
|
|
handleCancel={() => handleModalClose('deleteItem')}
|
|
handleClose={() => handleModalClose('deleteItem')}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserMailInfo;
|
|
|
|
const UserDefaultTable = styled.table`
|
|
border: 1px solid #e8eaec;
|
|
border-top: 1px solid #000;
|
|
font-size: 14px;
|
|
margin-bottom: 40px;
|
|
th {
|
|
background: #efefef;
|
|
font-weight: 700;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 12px;
|
|
text-align: center;
|
|
border-left: 1px solid #e8eaec;
|
|
vertical-align: middle;
|
|
}
|
|
td {
|
|
background: #fff;
|
|
border-bottom: 1px solid #e8eaec;
|
|
word-break: break-all;
|
|
}
|
|
button {
|
|
height: 24px;
|
|
font-size: 13px;
|
|
}
|
|
`;
|
|
|
|
const QuestTable = styled(UserDefaultTable)`
|
|
tbody {
|
|
td {
|
|
padding: 9px 12px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const UserTableWrapper = styled.div`
|
|
width: 100%;
|
|
overflow: auto;
|
|
margin-bottom: 40px;
|
|
${UserDefaultTable}, ${QuestTable} {
|
|
margin-bottom: 0;
|
|
}
|
|
&::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #666666;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background: #d9d9d9;
|
|
}
|
|
`;
|
|
|
|
const MailLink = styled.div`
|
|
color: #61a2d0;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const InputItem = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center; /* 수평 중앙 정렬 */
|
|
gap: 10px;
|
|
${TextInput} {
|
|
height: 35px;
|
|
font-size: 14px;
|
|
width: 100px;
|
|
padding: 10px 20px;
|
|
}
|
|
`;
|
|
|
|
const SelectContainer = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
select {
|
|
height: 30px;
|
|
}
|
|
`; |