부가서비스 리스트
This commit is contained in:
@@ -28,7 +28,9 @@ export interface AccountHolderAuthListProps {
|
||||
listItems: Array<AccountHolderAuthItem>;
|
||||
mid: string;
|
||||
setDetailData: (detailData: DetailData) => void;
|
||||
}
|
||||
onClickToOpenFilter: () => void;
|
||||
onClickToOpenDownloadBottomSheet: () => void;
|
||||
};
|
||||
export interface AccountHolderAuthFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
startDate: string;
|
||||
|
||||
@@ -25,7 +25,9 @@ export interface AccountHolderSearchListProps {
|
||||
listItems: Array<AccountHolderSearchListItem>;
|
||||
mid: string;
|
||||
setDetailData: (detailData: DetailData) => void;
|
||||
}
|
||||
onClickToOpenFilter: () => void;
|
||||
onClickToOpenDownloadBottomSheet: () => void;
|
||||
};
|
||||
|
||||
export interface AccountHolderSearchFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
|
||||
@@ -34,7 +34,9 @@ export interface KeyInPaymentListProps {
|
||||
additionalServiceCategory: AdditionalServiceCategory;
|
||||
listItems: Array<KeyInPaymentListItem>;
|
||||
mid?: string;
|
||||
}
|
||||
onClickToOpenFilter: () => void;
|
||||
onClickToOpenDownloadBottomSheet: () => void;
|
||||
};
|
||||
|
||||
export interface KeyInPaymentFilterProps extends FilterProps {
|
||||
mid: string,
|
||||
|
||||
@@ -30,7 +30,9 @@ export interface SmsPaymentListProps {
|
||||
additionalServiceCategory: AdditionalServiceCategory;
|
||||
mid: string;
|
||||
onResendClick?: (seq: number) => void;
|
||||
}
|
||||
onClickToOpenFilter: () => void;
|
||||
onClickToOpenDownloadBottomSheet: () => void;
|
||||
};
|
||||
|
||||
export interface SmsPaymentFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { AccountHolderAuthListProps } from '../../model/account-holder-auth/types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
|
||||
export const AccountHolderAuthList = ({
|
||||
additionalServiceCategory,
|
||||
listItems,
|
||||
mid,
|
||||
setDetailData
|
||||
setDetailData,
|
||||
onClickToOpenFilter,
|
||||
onClickToOpenDownloadBottomSheet
|
||||
}: AccountHolderAuthListProps) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
@@ -57,9 +69,92 @@ export const AccountHolderAuthList = ({
|
||||
return rs;
|
||||
};
|
||||
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="transaction-list">
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{getListDateGroup()}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -6,15 +6,25 @@ import { AccountHolderSearchListProps } from '../../model/account-holder-search/
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
|
||||
export const AccountHolderSearchList = ({
|
||||
listItems,
|
||||
mid,
|
||||
setDetailData
|
||||
setDetailData,
|
||||
onClickToOpenFilter,
|
||||
onClickToOpenDownloadBottomSheet
|
||||
}: AccountHolderSearchListProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
let date = '';
|
||||
@@ -72,17 +82,100 @@ export const AccountHolderSearchList = ({
|
||||
navigate(PATHS.additionalService.accountHolderSearch.request)
|
||||
};
|
||||
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="transaction-list">
|
||||
{ getListDateGroup() }
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={onClickToNavigate}
|
||||
>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<section
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{ getListDateGroup() }
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={onClickToNavigate}
|
||||
>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,19 +2,28 @@ import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
|
||||
import { JSX } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
|
||||
|
||||
export const KeyInPaymentList = ({
|
||||
additionalServiceCategory,
|
||||
listItems,
|
||||
mid
|
||||
mid,
|
||||
onClickToOpenFilter,
|
||||
onClickToOpenDownloadBottomSheet
|
||||
}: KeyInPaymentListProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
let date = '';
|
||||
@@ -68,9 +77,92 @@ export const KeyInPaymentList = ({
|
||||
navigate(PATHS.additionalService.keyInPayment.request);
|
||||
};
|
||||
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="transaction-list">
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<section
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{getListDateGroup()}
|
||||
</section>
|
||||
<div className="apply-row">
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SmsPaymentListProps } from '../../model/sms-payment/types';
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
|
||||
export const SmsPaymentList = ({
|
||||
listItems,
|
||||
additionalServiceCategory,
|
||||
mid,
|
||||
onResendClick
|
||||
onResendClick,
|
||||
onClickToOpenFilter,
|
||||
onClickToOpenDownloadBottomSheet
|
||||
}: SmsPaymentListProps) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
@@ -56,11 +68,94 @@ export const SmsPaymentList = ({
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="transaction-list">
|
||||
{getListDateGroup()}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<section
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{getListDateGroup()}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -270,6 +270,8 @@ export const AccountHolderAuthPage = () => {
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
setDetailData={setDetailData}
|
||||
onClickToOpenFilter={ onClickToOpenFilter }
|
||||
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
|
||||
></AccountHolderAuthList>
|
||||
<div ref={setTarget}></div>
|
||||
</div>
|
||||
|
||||
@@ -281,6 +281,8 @@ export const AccountHolderSearchPage = () => {
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
setDetailData={setDetailData}
|
||||
onClickToOpenFilter={ onClickToOpenFilter }
|
||||
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
|
||||
></AccountHolderSearchList>
|
||||
<div ref={setTarget}></div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -27,7 +27,7 @@ import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/
|
||||
import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation';
|
||||
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
|
||||
import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
|
||||
import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
|
||||
@@ -69,6 +69,11 @@ export const AlimtalkListPage = () => {
|
||||
const [detailTid, setDetailTid] = useState<string>('');
|
||||
const [detailSeq, setDetailSeq] = useState<number>(0);
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
|
||||
const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
|
||||
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
|
||||
@@ -277,6 +282,65 @@ export const AlimtalkListPage = () => {
|
||||
sendCl
|
||||
]);
|
||||
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// if (!hasAccess) {
|
||||
// return <AccessDeniedDialog />;
|
||||
// }
|
||||
@@ -318,8 +382,31 @@ export const AlimtalkListPage = () => {
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<section
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{ getAlimtalkList() }
|
||||
</section>
|
||||
<div ref={ setTarget }></div>
|
||||
|
||||
@@ -4,9 +4,9 @@ import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/c
|
||||
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 { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
@@ -54,6 +54,11 @@ export const FaceAuthPage = () => {
|
||||
|
||||
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
const { groupDate, setGroupDate } = useGroupDateStore();
|
||||
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
|
||||
|
||||
const [listHeight, setListHeight] = useState<number>(0);
|
||||
|
||||
useSetHeaderTitle(t('faceAuth.title'));
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
@@ -233,6 +238,65 @@ export const FaceAuthPage = () => {
|
||||
sortType
|
||||
]);
|
||||
|
||||
const getMax = (data: Array<Record<string, any>>) => {
|
||||
let maxItem = null;
|
||||
if(data.length > 0){
|
||||
let numberArr = data.map((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top;
|
||||
});
|
||||
let max = Math.max(...numberArr);
|
||||
maxItem = data.filter((
|
||||
value: Record<string, any>,
|
||||
index: number
|
||||
) => {
|
||||
return value.top === max;
|
||||
});
|
||||
}
|
||||
|
||||
return maxItem? maxItem[0]: null;
|
||||
};
|
||||
|
||||
const setScrollAction = (e: Event) => {
|
||||
let dateHeader = document.querySelectorAll('.date-header');
|
||||
let posData: Array<Record<string, any>> = [];
|
||||
dateHeader.forEach((value, index) => {
|
||||
let date: string = value.innerHTML;
|
||||
let top: number = value.getBoundingClientRect().top;
|
||||
if(top < 10){
|
||||
posData.push({
|
||||
date: date,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
});
|
||||
let maxItem = getMax(posData);
|
||||
if(maxItem){
|
||||
setGroupDateOn(true);
|
||||
setGroupDate(maxItem.date);
|
||||
}
|
||||
else{
|
||||
setGroupDateOn(false);
|
||||
setGroupDate('');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ListScrollOn(true);
|
||||
let heightList = GetListHeight();
|
||||
setListHeight(heightList.listHeight);
|
||||
|
||||
let tabContent = document.querySelector('.tab-content');
|
||||
tabContent?.addEventListener('scroll', setScrollAction);
|
||||
|
||||
return () => {
|
||||
ListScrollOn(false);
|
||||
tabContent?.removeEventListener('scroll', setScrollAction);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// if (!hasAccess) {
|
||||
// return <AccessDeniedDialog />;
|
||||
// }
|
||||
@@ -298,7 +362,31 @@ export const FaceAuthPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="transaction-list">
|
||||
{ groupDateOn &&
|
||||
<div className="summary-amount scroll-group-date">
|
||||
<span className="amount-text">{ groupDate }</span>
|
||||
<div className="summary-actions">
|
||||
<button className="filter-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
||||
alt={t('transaction.searchOptions')}
|
||||
onClick={ onClickToOpenFilter }
|
||||
/>
|
||||
</button>
|
||||
<button className="download-btn">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_download.svg' }
|
||||
alt={t('transaction.download')}
|
||||
onClick={ onClickToOpenDownloadBottomSheet }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<section
|
||||
className="transaction-list"
|
||||
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
|
||||
>
|
||||
{ getListDateGroup() }
|
||||
</section>
|
||||
<div ref={ setTarget }></div>
|
||||
|
||||
@@ -262,6 +262,8 @@ export const KeyInPaymentPage = () => {
|
||||
listItems={listItems}
|
||||
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
|
||||
mid={mid}
|
||||
onClickToOpenFilter={ onClickToOpenFilter }
|
||||
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
|
||||
></KeyInPaymentList>
|
||||
<div ref={ setTarget }></div>
|
||||
</div>
|
||||
|
||||
@@ -249,6 +249,8 @@ export const SmsPaymentPage = () => {
|
||||
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
|
||||
mid={mid}
|
||||
onResendClick={onClickToShowDetail}
|
||||
onClickToOpenFilter={ onClickToOpenFilter }
|
||||
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
|
||||
></SmsPaymentList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user