109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import moment from 'moment';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { SettlementDays, SettlementStatus } from '../model/types';
|
|
import { useState } from 'react';
|
|
|
|
export interface CalendarSettlementItemProps {
|
|
list: Array<SettlementDays | undefined>;
|
|
settlementStatus: SettlementStatus;
|
|
filterDate?: number;
|
|
};
|
|
|
|
export const CalendarSettlementItem = ({
|
|
list,
|
|
settlementStatus,
|
|
filterDate
|
|
}: CalendarSettlementItemProps) => {
|
|
console.log(list)
|
|
const { navigate } = useNavigate();
|
|
const { t } = useTranslation();
|
|
|
|
const [newList, setNewList] = useState<Array<SettlementDays | undefined>>(list);
|
|
|
|
const getAmount = (
|
|
scheduledAmount: number | undefined,
|
|
completedAmount: number | undefined
|
|
) => {
|
|
let amount = 0;
|
|
if(settlementStatus === SettlementStatus.SCHEDULED){
|
|
amount = scheduledAmount || 0;
|
|
}
|
|
else if(settlementStatus === SettlementStatus.COMPLETED){
|
|
amount = completedAmount || 0;
|
|
}
|
|
return amount;
|
|
};
|
|
|
|
const getClassName = () => {
|
|
let className = '';
|
|
if(settlementStatus === SettlementStatus.SCHEDULED){
|
|
className = 'scheduled';
|
|
}
|
|
else if(settlementStatus === SettlementStatus.COMPLETED){
|
|
className = 'complete';
|
|
}
|
|
return className;
|
|
};
|
|
|
|
const onClickToMoveList = (settlementDate?: string) => {
|
|
if(!!settlementDate){
|
|
navigate(PATHS.settlement.list, {
|
|
state: {
|
|
startDate: settlementDate,
|
|
endDate: settlementDate
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const getStatusName = (settlementStatus?: SettlementStatus) => {
|
|
let title = '';
|
|
if(settlementStatus === SettlementStatus.COMPLETED){
|
|
title = '정산 확정';
|
|
}
|
|
else if(settlementStatus === SettlementStatus.SCHEDULED){
|
|
title = '정산 예정';
|
|
}
|
|
return title;
|
|
};
|
|
|
|
const showFilterDate = () => {
|
|
let rs = [];
|
|
for(let i=0;i<newList.length;i++){
|
|
let item = newList[i];
|
|
if(filterDate && filterDate > 0){
|
|
let shortDate = item?.settlementDate.substring(6, 8);
|
|
if(shortDate){
|
|
let checkDate = parseInt(shortDate);
|
|
if(filterDate !== checkDate){
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
rs.push(
|
|
<div
|
|
key={ `settlement-item-${i}` }
|
|
className="settlement-item"
|
|
onClick={ () => onClickToMoveList(item?.settlementDate) }
|
|
>
|
|
<div className={ `settlement-tag ${getClassName()}` }>{ getStatusName(item?.settlementStatus) }</div>
|
|
<div className="settlement-date">
|
|
{ moment(item?.settlementDate).format('MM.DD(ddd)') }
|
|
</div>
|
|
<div className="settlement-amount">
|
|
{t('home.money', { value: new Intl.NumberFormat('en-US').format(getAmount(item?.scheduledAmount, item?.completedAmount)) })}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return rs;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{ showFilterDate() }
|
|
</>
|
|
)
|
|
}; |