diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts index d6a2077..39d373d 100644 --- a/src/entities/common/model/types.ts +++ b/src/entities/common/model/types.ts @@ -1,3 +1,9 @@ +import { + BillingPaymentMethod, + BillingProcessResult, + BillingRequestStatus +} from '@/entities/transaction/model/types'; + export enum SuccessResult { SUCCESS = 'SUCCESS', FAIL = 'FAIL' @@ -27,6 +33,23 @@ export enum HeaderType { LeftArrow = 'LeftArrow', RightClose = 'RightClose', }; +export interface FilterRangeAmountProps { + title?: string; + minAmount?: number | string; + maxAmount?: number | string; + setMinAmount: (minAmount: number | string) => void; + setMaxAmount: (maxAmount: number | string) => void; +}; +export interface FilterButtonGroupsProps { + title: string; + activeValue?: string; + btnGroups?: Array + setter: (value: any) => void; +}; +export interface ButtonItemProp { + name?: string; + value?: string; +}; export interface HeaderNavigationProps { onBack?: (() => void) | undefined; headerTitle?: string; diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index d80d210..e0de5b0 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -463,6 +463,8 @@ export interface BillingFilterProps extends FilterProps { requestStatus: BillingRequestStatus; processResult: BillingProcessResult; paymentMethod: BillingPaymentMethod; + minAmount?: number | string; + maxAmount?: number | string; setMid: (mid: string) => void; setSearchType: (searchType: BillingSearchType) => void; setSearchKeyword: (searchKeyword: string) => void; @@ -471,6 +473,8 @@ export interface BillingFilterProps extends FilterProps { setRequestStatus: (requestStatus: BillingRequestStatus) => void; setProcessResult: (processResult: BillingProcessResult) => void; setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; }; export interface CashReceiptPurposeUpdateParams { diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 4ac70c0..d5d28e7 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -12,6 +12,8 @@ import { import { FilterDateOptions } from '@/entities/common/model/types'; import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; +import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; +import { useEffect } from 'react'; export const BillingFilter = ({ filterOn, @@ -24,6 +26,8 @@ export const BillingFilter = ({ requestStatus, processResult, paymentMethod, + minAmount, + maxAmount, setMid, setSearchType, setSearchKeyword, @@ -31,7 +35,9 @@ export const BillingFilter = ({ setEndDate, setRequestStatus, setProcessResult, - setPaymentMethod + setPaymentMethod, + setMinAmount, + setMaxAmount }: BillingFilterProps) => { const [filterMid, setFilterMid] = useState(mid); @@ -42,7 +48,8 @@ export const BillingFilter = ({ const [filterRequestStatus, setFilterRequestStatus] = useState(requestStatus); const [filterProcessResult, setFilterProcessResult] = useState(processResult); const [filterPaymentMethod, setFilterPaymentMethod] = useState(paymentMethod); - + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); const [dateReadOnly, setDateReadyOnly] = useState(true); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); @@ -56,39 +63,7 @@ export const BillingFilter = ({ const onClickToClose = () => { setFilterOn(false); }; - const setFilterDate = (dateOptions: FilterDateOptions) => { - if(dateOptions === FilterDateOptions.Today){ - setFilterStartDate(moment().format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Today); - } - else if(dateOptions === FilterDateOptions.Week){ - setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Week); - } - else if(dateOptions === FilterDateOptions.Month){ - setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Month); - } - else if(dateOptions === FilterDateOptions.Input){ - setDateReadyOnly(false); - setFilterDateOptionsBtn(FilterDateOptions.Input); - } - }; - const onClickToOpenCalendar = () => { - if(!dateReadOnly){ - setCalendarOpen(true); - } - else{ - setCalendarOpen(false); - } - }; - + const setNewDate = (newDate: any) => { console.log(newDate) }; @@ -102,6 +77,7 @@ export const BillingFilter = ({ setRequestStatus(filterRequestStatus); setProcessResult(filterProcessResult); setPaymentMethod(filterPaymentMethod); + onClickToClose(); }; let requestStatusBtnGroup = [ @@ -121,6 +97,11 @@ export const BillingFilter = ({ {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT}, {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT}, ]; + + useEffect(() => { + setFilterRequestStatus(requestStatus); + }, [requestStatus]); + return ( <> -
-
거래금액
-
-
- -
- ~ -
- -
-
-
+ +