120 lines
3.7 KiB
JavaScript
120 lines
3.7 KiB
JavaScript
import React, { Fragment, useMemo, useRef } from 'react';
|
|
|
|
import {
|
|
TableStyle,
|
|
FormWrapper,
|
|
TableWrapper, ListOption
|
|
} from '../../styles/Components';
|
|
|
|
import {
|
|
AssetsIndexSearchBar, useAssetsIndexSearch,
|
|
} from '../searchBar';
|
|
import { TopButton, ViewTableInfo } from '../common';
|
|
import { TableSkeleton } from '../Skeleton/TableSkeleton';
|
|
import { numberFormatter } from '../../utils';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { AnimatedPageWrapper } from '../common/Layout';
|
|
import CSVDownloadButton from '../common/button/CsvDownButton';
|
|
import DailyDashBoard from './DailyCaliumDashBoard';
|
|
|
|
const ItemAssetsContent = () => {
|
|
const { t } = useTranslation();
|
|
const token = sessionStorage.getItem('token');
|
|
const tableRef = useRef(null);
|
|
|
|
const {
|
|
searchParams,
|
|
loading: dataLoading,
|
|
data: dataList,
|
|
handleSearch,
|
|
handleReset,
|
|
updateSearchParams
|
|
} = useAssetsIndexSearch(token);
|
|
|
|
const tableHeaders = useMemo(() => {
|
|
return [
|
|
{ id: 'logDay', label: '일자', width: '100px' },
|
|
{ id: 'userCount', label: '유저수', width: '100px' },
|
|
{ id: 'item_13080002', label: '퀘스트 메달', width: '100px' },
|
|
{ id: 'item_13080004', label: '보급품 메달', width: '100px' },
|
|
{ id: 'item_13080005', label: '제작 메달', width: '100px' },
|
|
{ id: 'item_13080006', label: '에테론 315 포드', width: '100px' },
|
|
{ id: 'item_13080007', label: '에테론 316 포드', width: '100px' },
|
|
{ id: 'item_13080008', label: '에테론 317 포드', width: '100px' },
|
|
{ id: 'item_13080009', label: '에테론 318 포드', width: '100px' },
|
|
{ id: 'item_11570001', label: '강화 잉크', width: '100px' },
|
|
{ id: 'item_11570002', label: '연성 잉크', width: '100px' }
|
|
];
|
|
}, []);
|
|
|
|
return (
|
|
<AnimatedPageWrapper>
|
|
<DailyDashBoard />
|
|
<FormWrapper>
|
|
<AssetsIndexSearchBar
|
|
searchParams={searchParams}
|
|
onSearch={(newParams, executeSearch = true) => {
|
|
if (executeSearch) {
|
|
handleSearch(newParams);
|
|
} else {
|
|
updateSearchParams(newParams);
|
|
}
|
|
}}
|
|
onReset={handleReset}
|
|
/>
|
|
</FormWrapper>
|
|
<ViewTableInfo >
|
|
<ListOption>
|
|
<CSVDownloadButton tableRef={tableRef} fileName={t('FILE_INDEX_ASSETS_ITEM')} />
|
|
</ListOption>
|
|
</ViewTableInfo>
|
|
{dataLoading ? <TableSkeleton width='100%' count={15} /> :
|
|
<>
|
|
<TableWrapper>
|
|
<TableStyle ref={tableRef}>
|
|
<thead>
|
|
<tr>
|
|
{tableHeaders.map(header => {
|
|
return (
|
|
<th
|
|
key={header.id}
|
|
width={header.width}
|
|
colSpan={header.colSpan}
|
|
>
|
|
{header.label}
|
|
</th>
|
|
);
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{dataList?.assets_list?.map((data, index) => (
|
|
<Fragment key={index}>
|
|
<tr>
|
|
<td>{data.logDay}</td>
|
|
<td>{numberFormatter.formatCurrency(data.userCount)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080002)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080004)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080005)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080006)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080007)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080008)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_13080009)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_11570001)}</td>
|
|
<td>{numberFormatter.formatCurrency(data.item_11570002)}</td>
|
|
</tr>
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</TableStyle>
|
|
</TableWrapper>
|
|
<TopButton />
|
|
</>
|
|
}
|
|
</AnimatedPageWrapper>
|
|
);
|
|
};
|
|
|
|
export default ItemAssetsContent;
|