283 lines
8.2 KiB
JavaScript
283 lines
8.2 KiB
JavaScript
import { styled } from 'styled-components';
|
|
import { Link } from 'react-router-dom';
|
|
import React, { Fragment, useRef, useState } from 'react';
|
|
import { AnimatedPageWrapper } from '../../components/common/Layout'
|
|
|
|
import {
|
|
Title,
|
|
TableStyle,
|
|
FormWrapper,
|
|
TableWrapper,
|
|
} from '../../styles/Components';
|
|
|
|
import Button from '../../components/common/button/Button';
|
|
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { authList } from '../../store/authList';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { useDataFetch, useModal, useTable, withAuth } from '../../hooks/hook';
|
|
import {
|
|
authType,
|
|
landSize,
|
|
modalTypes,
|
|
opLandCategoryType,
|
|
opLandOwnedType,
|
|
} from '../../assets/data';
|
|
import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE, TYPE_MODIFY } from '../../assets/data/adminConstants';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CheckBox, DynamicModal, ExcelDownButton, Pagination, ViewTableInfo } from '../../components/common';
|
|
import LandInfoSearchBar, { useLandInfoSearch } from '../../components/searchBar/LandInfoSearchBar';
|
|
import { TableSkeleton } from '../../components/Skeleton/TableSkeleton';
|
|
import OwnerChangeModal from '../../components/modal/OwnerChangeModal';
|
|
import { opLandInfoStatusType } from '../../assets/data/options';
|
|
import { useAlert } from '../../context/AlertProvider';
|
|
import { alertTypes } from '../../assets/data/types';
|
|
|
|
const LandInfoView = () => {
|
|
const token = sessionStorage.getItem('token');
|
|
const userInfo = useRecoilValue(authList);
|
|
const { t } = useTranslation();
|
|
const tableRef = useRef(null);
|
|
const {showToast} = useAlert();
|
|
|
|
const [detailData, setDetailData] = useState({});
|
|
|
|
const {
|
|
modalState,
|
|
handleModalView,
|
|
handleModalClose
|
|
} = useModal({
|
|
detail: 'hidden',
|
|
deleteConfirm: 'hidden',
|
|
deleteComplete: 'hidden'
|
|
});
|
|
const [modalType, setModalType] = useState('regist');
|
|
|
|
const {
|
|
searchParams,
|
|
loading,
|
|
data: dataList,
|
|
handleSearch,
|
|
handleReset,
|
|
handlePageChange,
|
|
handlePageSizeChange,
|
|
handleOrderByChange,
|
|
updateSearchParams
|
|
} = useLandInfoSearch(token, INITIAL_PAGE_SIZE);
|
|
|
|
const {
|
|
selectedRows,
|
|
handleSelectRow,
|
|
isRowSelected,
|
|
removeSelectedRows
|
|
} = useTable(dataList?.land_info_list || [], {mode: 'single'});
|
|
|
|
// const {
|
|
// data: landData
|
|
// } = useDataFetch(() => LandView(token), [token]);
|
|
|
|
const handleModalSubmit = async (type, param = null) => {
|
|
switch (type) {
|
|
case "regist":
|
|
setModalType('regist');
|
|
const selectRow = selectedRows[0];
|
|
if(!selectRow.owned) {
|
|
showToast('LAND_OWNED_CHANGES_WARNING', {type:alertTypes.warning});
|
|
return;
|
|
}
|
|
const owner_changes = selectRow.owner_changes;
|
|
if(owner_changes.length > 0){
|
|
setModalType(TYPE_MODIFY);
|
|
}
|
|
setDetailData(selectRow);
|
|
handleModalView('detail');
|
|
break;
|
|
// case "detail":
|
|
// await LandAuctionDetailView(token, param).then(data => {
|
|
// setDetailData(data.auction_detail);
|
|
// setModalType('modify');
|
|
// handleModalView('detail');
|
|
// });
|
|
// break;
|
|
// case "delete":
|
|
// const date_check = selectedRows.every(row => {
|
|
// const timeDiff = timeDiffMinute(convertKTC(row.auction_start_dt), (new Date));
|
|
// return timeDiff < 3;
|
|
// });
|
|
// if(date_check){
|
|
// setAlertMsg(t('LAND_AUCTION_DELETE_DATE_WARNING'));
|
|
// return;
|
|
// }
|
|
// if(selectedRows[0].status === landAuctionStatusType.auction_start || selectedRows[0].status === landAuctionStatusType.stl_end){
|
|
// setAlertMsg(t('LAND_AUCTION_DELETE_STATUS_WARNING'));
|
|
// return;
|
|
// }
|
|
// handleModalView('deleteConfirm');
|
|
// break;
|
|
// case "deleteConfirm":
|
|
// let list = [];
|
|
// let isChecked = false;
|
|
//
|
|
// selectedRows.map(data => {
|
|
// // const row = dataList.list.find(row => row.id === Number(data.id));
|
|
// // if(row.status !== commonStatus.wait) isChecked = true;
|
|
// list.push({
|
|
// id: data.id,
|
|
// });
|
|
// });
|
|
//
|
|
// if(isChecked) {
|
|
// setAlertMsg(t('LAND_AUCTION_WARNING_DELETE'))
|
|
// handleModalClose('deleteConfirm');
|
|
// return;
|
|
// }
|
|
//
|
|
// await LandAuctionDelete(token, list).then(data => {
|
|
// handleModalClose('deleteConfirm');
|
|
// if(data.result === "SUCCESS") {
|
|
// handleModalView('deleteComplete');
|
|
// }else{
|
|
// setAlertMsg(t('DELETE_FAIL'));
|
|
// }
|
|
// }).catch(reason => {
|
|
// setAlertMsg(t('API_FAIL'));
|
|
// });
|
|
//
|
|
// break;
|
|
// case "deleteComplete":
|
|
// handleModalClose('deleteComplete');
|
|
// // fetchData(option);
|
|
// window.location.reload();
|
|
// break;
|
|
}
|
|
}
|
|
|
|
const handleDetailView = () => {
|
|
handleModalClose('detail');
|
|
handleSearch(updateSearchParams);
|
|
removeSelectedRows();
|
|
}
|
|
|
|
return (
|
|
<AnimatedPageWrapper>
|
|
<Title>랜드 정보 조회</Title>
|
|
<FormWrapper>
|
|
<LandInfoSearchBar
|
|
searchParams={searchParams}
|
|
onSearch={(newParams, executeSearch = true) => {
|
|
if (executeSearch) {
|
|
handleSearch(newParams);
|
|
} else {
|
|
updateSearchParams(newParams);
|
|
}
|
|
}}
|
|
onReset={handleReset}
|
|
/>
|
|
</FormWrapper>
|
|
<ViewTableInfo total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
|
|
<ExcelDownButton tableRef={tableRef} fileName={t('FILE_LAND_AUCTION')} />
|
|
{userInfo.auth_list?.some(auth => auth.id === authType.landUpdate) && (
|
|
<Button
|
|
theme={selectedRows.length === 0 ? 'disable' : 'line'}
|
|
text="소유권 변경"
|
|
type="button"
|
|
handleClick={e => handleModalSubmit('regist')}
|
|
/>
|
|
)}
|
|
</ViewTableInfo>
|
|
{loading ? <TableSkeleton width='100%' count={15} /> :
|
|
<>
|
|
<TableWrapper>
|
|
<TableStyle ref={tableRef}>
|
|
<thead>
|
|
<tr>
|
|
<th width="40"></th>
|
|
<th width="150">랜드 ID</th>
|
|
<th>랜드 이름</th>
|
|
<th>랜드 상태</th>
|
|
<th>카테고리</th>
|
|
<th>랜드 크기</th>
|
|
<th>인스턴스 수</th>
|
|
<th>유저 소유 여부</th>
|
|
<th>보유자</th>
|
|
<th>보유시작일</th>
|
|
<th>낙찰 가격</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dataList?.land_info_list?.map((data, index) => (
|
|
<Fragment key={index}>
|
|
<tr>
|
|
<td>
|
|
<CheckBox name={'select'} id={data.id}
|
|
setData={(e) => handleSelectRow(e, data)}
|
|
checked={isRowSelected(data.id)} />
|
|
</td>
|
|
<td>{data.land_id}</td>
|
|
<td>{data.land_name}</td>
|
|
<td>{opLandInfoStatusType.find(option => option.value === data.status)?.name}</td>
|
|
<td>{opLandCategoryType.find(option => option.value === data.category)?.name}</td>
|
|
<td>{landSize.find(option => option.value === data.land_size)?.name}</td>
|
|
<td>{data.socket}</td>
|
|
<td>{opLandOwnedType.find(option => option.value === data.owned)?.name}</td>
|
|
<td>{data.owner_user_nickname}</td>
|
|
{/*<td>{convertKTCDate(data.owner_user_create_date)}</td>*/}
|
|
<td>{data.owner_user_create_date}</td>
|
|
<td>{Number(data.owner_price) > 0 ? data.owner_price : ''}</td>
|
|
</tr>
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</TableStyle>
|
|
</TableWrapper>
|
|
<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
|
|
</>
|
|
}
|
|
|
|
<OwnerChangeModal
|
|
modalType={modalType}
|
|
detailView={modalState.detailModal}
|
|
handleDetailView={() => handleDetailView()}
|
|
content={detailData}
|
|
setDetailData={setDetailData}
|
|
/>
|
|
</AnimatedPageWrapper>
|
|
);
|
|
};
|
|
|
|
export default withAuth(authType.landRead)(LandInfoView);
|
|
|
|
// const TableWrapper = styled.div`
|
|
// overflow: auto;
|
|
// border-top: 1px solid #000;
|
|
// z-index: 1;
|
|
// &::-webkit-scrollbar {
|
|
// height: 4px;
|
|
// }
|
|
// &::-webkit-scrollbar-thumb {
|
|
// background: #666666;
|
|
// }
|
|
// &::-webkit-scrollbar-track {
|
|
// background: #d9d9d9;
|
|
// }
|
|
// thead {
|
|
// th {
|
|
// position: sticky;
|
|
// top: 0;
|
|
// z-index: 10;
|
|
// }
|
|
// }
|
|
// ${TableStyle} {
|
|
// min-width: 1000px;
|
|
// th {
|
|
// position: sticky;
|
|
// top: 0;
|
|
// }
|
|
// }
|
|
// `;
|
|
|
|
const LandLink = styled(Link)`
|
|
color: #61a2d0;
|
|
text-decoration: underline;
|
|
`;
|