- 안명인증 페이지 추가
This commit is contained in:
HyeonJongKim
@@ -1,12 +1,11 @@
|
||||
import moment from 'moment';
|
||||
import { ProcessResult } from '@/entities/additional-service/model/types';
|
||||
import { SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { AdditionalServiceCategory, ProcessResult } from '@/entities/additional-service/model/types';
|
||||
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { JSX, useEffect, useState } from 'react';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import {
|
||||
@@ -16,26 +15,28 @@ import {
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
|
||||
import { FaceAuthList } from '@/entities/additional-service/ui/face-auth/face-auth-list';
|
||||
import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
|
||||
import { FaceAuthListItem, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
|
||||
import { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
|
||||
import { ExtensionFaceAuthExcelDownlaodPrams, ExtensionFaceAuthExcelDownlaodResponse, ExtensionFaceAuthListParams, ExtensionFaceAuthListResponse, FaceAuthListItem, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
|
||||
import { AuthResultBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
|
||||
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||
import { useExtensionFaceAuthListtMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-list-mutation';
|
||||
import { useExtensionFaceAuthDownloadExcelMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation';
|
||||
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
|
||||
|
||||
export const FaceAuthPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
|
||||
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [mid, setMid] = useState<string>(userMid);
|
||||
const [memberId, setMemberId] = useState<string>('');
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [transactionType, setTransactionType] = useState<FaceAuthTransactionType>(FaceAuthTransactionType.ALL);
|
||||
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
|
||||
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
|
||||
const [mid, setMid] = useState<string>("faceauth0m");
|
||||
const [userMallId, setUserMallId] = useState<string>('');
|
||||
const [fromDate, setFromDate] = useState<string>('20220101');
|
||||
const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
|
||||
const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
|
||||
const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
|
||||
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
useSetHeaderTitle('안면인증');
|
||||
@@ -45,48 +46,31 @@ export const FaceAuthPage = () => {
|
||||
navigate(PATHS.home);
|
||||
});
|
||||
|
||||
//TODO : API 연동
|
||||
//const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthHistoryListMutation();
|
||||
//const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
|
||||
|
||||
const assembleData = (content: Array<FaceAuthListItem>) => {
|
||||
console.log('rs.content:', content);
|
||||
let data: any = {};
|
||||
if (content && content.length > 0) {
|
||||
for (let i = 0; i < content?.length; i++) {
|
||||
let requestDate = content[i]?.requestDate?.substring(0, 8);
|
||||
let groupDate = moment(requestDate).format('YYYYMMDD');
|
||||
if (!!groupDate && !data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if (!!groupDate && data.hasOwnProperty(groupDate)) {
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Data : ', data);
|
||||
return data;
|
||||
};
|
||||
const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthListtMutation();
|
||||
const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
|
||||
|
||||
const callList = (option?: {
|
||||
sortType?: SortTypeKeys,
|
||||
val?: string
|
||||
authResult?: FaceAuthResult
|
||||
}) => {
|
||||
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
|
||||
setPageParam(pageParam);
|
||||
let listParams = {
|
||||
let params: ExtensionFaceAuthListParams = {
|
||||
mid: mid,
|
||||
memberId: memberId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
transactionType: transactionType,
|
||||
resultStatus: processResult,
|
||||
userMallId: userMallId,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
transType: transType,
|
||||
authResult: option?.authResult ?? authResult,
|
||||
page: pageParam
|
||||
};
|
||||
|
||||
//faceAuthHistoryList(listParams).then((rs) => {
|
||||
// setListItems(assembleData(rs.content));
|
||||
//});
|
||||
if (params.page) {
|
||||
params.page.sortType = option?.sortType || sortType;
|
||||
setPageParam(params.page);
|
||||
}
|
||||
|
||||
faceAuthHistoryList(params).then((rs: ExtensionFaceAuthListResponse) => {
|
||||
setListItems(rs.content);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToOpenEmailBottomSheet = () => {
|
||||
@@ -95,17 +79,15 @@ export const FaceAuthPage = () => {
|
||||
|
||||
const onSendRequest = (selectedEmail?: string) => {
|
||||
if (selectedEmail) {
|
||||
// downloadExcel({
|
||||
// mid: mid,
|
||||
// //email: selectedEmail,
|
||||
// memberId: memberId,
|
||||
// fromDate: startDate,
|
||||
// toDate: endDate,
|
||||
// transactionType: transactionType,
|
||||
// resultStatus: processResult
|
||||
// }).then((rs) => {
|
||||
// console.log('Excel Download Status: ' + rs.status);
|
||||
// });
|
||||
const params: ExtensionFaceAuthExcelDownlaodPrams = {
|
||||
mid: mid,
|
||||
email: selectedEmail,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate
|
||||
};
|
||||
downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
|
||||
console.log('Excel Download Status:', rs.status);
|
||||
});
|
||||
}
|
||||
setEmailBottomSheetOn(false);
|
||||
};
|
||||
@@ -119,16 +101,62 @@ export const FaceAuthPage = () => {
|
||||
callList({ sortType: sort });
|
||||
};
|
||||
|
||||
const onClickToTransactionStatus = (val: ProcessResult) => {
|
||||
setProcessResult(val);
|
||||
const onClickToAuthResult = (val: FaceAuthResult) => {
|
||||
setAuthResult(val);
|
||||
callList({
|
||||
val: val
|
||||
authResult: val
|
||||
});
|
||||
};
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs= [];
|
||||
let date = '';
|
||||
let list= [];
|
||||
for (let i = 0; i < listItems.length; i++) {
|
||||
let item = listItems[i];
|
||||
if (!!item) {
|
||||
let requestDate = item?.requestDate;
|
||||
requestDate = requestDate?.substring(0, 8);
|
||||
if (!!requestDate) {
|
||||
if (i === 0) {
|
||||
date = requestDate;
|
||||
}
|
||||
if (date !== requestDate) {
|
||||
if (list.length > 0) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
|
||||
mid={mid}
|
||||
key={date + '-' + i}
|
||||
date={date}
|
||||
items={list as any}
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
date = requestDate;
|
||||
list = [];
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (list.length > 0) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
|
||||
mid={mid}
|
||||
key={date + '-last'}
|
||||
date={date}
|
||||
items={list as any}
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, [mid, memberId, startDate, endDate, transactionType, processResult]);
|
||||
}, [mid, userMallId, fromDate, toDate, transType, authResult]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -141,7 +169,7 @@ export const FaceAuthPage = () => {
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
|
||||
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
@@ -172,25 +200,28 @@ export const FaceAuthPage = () => {
|
||||
<SortTypeBox
|
||||
sortType={sortType}
|
||||
onClickToSort={onClickToSort}
|
||||
sortOptions={[
|
||||
{ key: SortTypeKeys.LATEST, label: '최신순' },
|
||||
{ key: SortTypeKeys.OLDEST, label: '오래된순' }
|
||||
]}
|
||||
></SortTypeBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
ResultStatusBtnGroup.map((value, index) => (
|
||||
AuthResultBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToTransactionStatus(value.value)}
|
||||
className={`keyword-tag ${(authResult === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToAuthResult(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FaceAuthList
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
></FaceAuthList>
|
||||
<section className="transaction-list">
|
||||
{getListDateGroup()}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -198,17 +229,17 @@ export const FaceAuthPage = () => {
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
mid={mid}
|
||||
memberId={memberId}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
transactionType={transactionType}
|
||||
processResult={processResult}
|
||||
userMallId={userMallId}
|
||||
fromDate={fromDate}
|
||||
toDate={toDate}
|
||||
transType={transType}
|
||||
authResult={authResult}
|
||||
setMid={setMid}
|
||||
setMemberId={setMemberId}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setTransactionType={setTransactionType}
|
||||
setProcessResult={setProcessResult}
|
||||
setUserMallId={setUserMallId}
|
||||
setFromDate={setFromDate}
|
||||
setToDate={setToDate}
|
||||
setTransType={setTransType}
|
||||
setAuthResult={setAuthResult}
|
||||
/>
|
||||
<EmailBottomSheet
|
||||
bottomSheetOn={emailBottomSheetOn}
|
||||
|
||||
Reference in New Issue
Block a user