Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -8,24 +9,84 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
+import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
+import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
+import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+
+const requestStatusBtnGroup = [
+  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+];
 
 export const KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
 
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
+  const [minAmount, setMinAmount] = useState<number | string>();
+  const [maxAmount, setMaxAmount] = useState<number | string>();
+
+
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToDownloadExcel = () => {
+    // downloadExcel({
+    //   mid,
+    //   fromDate: '',
+    //   toDate: '',
+    //   paymentStatus: '',
+    //   minAmount: 0,
+    //   maxAmount: 0
+    // }).then((rs) => {
+
+    // });
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    // TODO : callList 구현
+  };
+
+  const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
+    setTransactionStatus(val);
+    // TODO : callList 구현
+  };
+
   const onClickToNavigation = () => {
     navigate(PATHS.additionalService.keyInPayment.request)
   }
 
+  useEffect(() => {
+    // TODO : callList();
+  }, []);
+
   return (
     <>
       <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <section className="summary-section no-border">
+            <section className="summary-section">
               <div className="credit-controls">
                 <div>
                   <input
@@ -41,6 +102,7 @@ export const KeyInPaymentPage = () => {
                     <img
                       src={IMAGE_ROOT + '/ico_setting.svg'}
                       alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
                     />
                   </button>
                 </div>
@@ -51,26 +113,31 @@ export const KeyInPaymentPage = () => {
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
                     alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
                   />
                 </button>
               </div>
             </section>
 
-            <section className="filter-section">
-              <div className="sort-options">
-                <button className="sort-btn active">최신순</button>
-                <span className="sort-divider">|</span>
-                <button className="sort-btn">고액순</button>
-              </div>
+            <div className="filter-section">
+              <SortOptionsBox
+                sortBy={sortBy}
+                onClickToSort={onClickToSort}
+              ></SortOptionsBox>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">승인</span>
-                  <span className="keyword-tag">전취소</span>
-                  <span className="keyword-tag">후취소</span>
+                  {
+                    requestStatusBtnGroup.map((value, index) => (
+                      <span
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToTransactionStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
                 </div>
               </div>
-            </section>
+            </div>
 
             <section className="transaction-list">
               <div className="date-group">
@@ -148,6 +215,22 @@ export const KeyInPaymentPage = () => {
                 onClick={() => onClickToNavigation()}
               >결제 신청</button>
             </div>
+            <KeyInPaymentFilter
+              filterOn={filterOn}
+              setFilterOn={setFilterOn}
+              mid={mid}
+              startDate={startDate}
+              endDate={endDate}
+              transactionStatus={transactionStatus}
+              minAmount={minAmount}
+              maxAmount={maxAmount}
+              setMid={setMid}
+              setStartDate={setStartDate}
+              setEndDate={setEndDate}
+              setTransactionStatus={setTransactionStatus}
+              setMinAmount={setMinAmount}
+              setMaxAmount={setMaxAmount}
+            ></KeyInPaymentFilter>
           </div>
         </div>
       </main>