From 8e0b999d25266e8a4d1199c48dec979613f60d60 Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Sat, 27 Jul 2024 00:17:05 +0800
Subject: [PATCH] feat: add sort by for bill query

---
 src/components/bill/list.tsx        |  6 ++++++
 src/components/bill/search-form.tsx | 32 +++++++++++++++++++++--------
 src/i18n/translations/en.json       |  6 +++++-
 src/i18n/translations/sc.json       |  6 +++++-
 src/i18n/translations/tc.json       |  6 +++++-
 5 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/components/bill/list.tsx b/src/components/bill/list.tsx
index 2a187eb..8eca652 100644
--- a/src/components/bill/list.tsx
+++ b/src/components/bill/list.tsx
@@ -71,6 +71,12 @@ export const BillList: React.FC<BillListProps> = (props) => {
                 width: 150,
                 render: (value) => value ? dayjs(value).format('YYYY-MM-DD') : 'N/A',
             },
+            {
+                title: t('bill.title_create_at'),
+                dataIndex: 'create_at',
+                width: 150,
+                render: (value) => value ? dayjs(value).format('YYYY-MM-DD') : 'N/A',
+            },
             {
                 title: t('bill.title_student_name'),
                 dataIndex: 'student_english_name',
diff --git a/src/components/bill/search-form.tsx b/src/components/bill/search-form.tsx
index ad5122d..60b0b09 100644
--- a/src/components/bill/search-form.tsx
+++ b/src/components/bill/search-form.tsx
@@ -77,23 +77,23 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
         <div className="bill-search-form">
             <Form<SearchFormFields> onSubmit={formSubmit}>
                 <Row type={'flex'} gutter={20}>
-                    <Col xxl={4} xl={6} md={8}>
+                    <Col xxl={6} xl={6} md={8}>
                         <Form.Input showClear field='id' label="ID" trigger='blur' placeholder={t('base.please_enter')}/>
                     </Col>
-                    <Col xxl={4} xl={6} md={8}>
+                    <Col xxl={6} xl={6} md={8}>
                         <Form.DatePicker showClear type={'dateRange'} field="dateRange" label={t('bill.bill_date')}
                                          style={{width: '100%'}}>
                         </Form.DatePicker>
                     </Col>
-                    <Col xxl={4} xl={6} md={8}>
+                    <Col xxl={6} xl={6} md={8}>
                         <Form.Input showClear field='student_number' label={t('base.student_number')} trigger='blur'
                                     placeholder={t('base.please_enter')}/>
                     </Col>
-                    <Col xxl={4} xl={6} md={8}>
+                    <Col xxl={6} xl={6} md={8}>
                         <Form.Input showClear field='application_number' label={t('base.bill_number')} trigger='blur'
                                     placeholder={t('base.please_enter')}/>
                     </Col>
-                    <Col xxl={4} xl={6} md={8}>
+                    <Col xxl={6} xl={6} md={8}>
                         <Form.Select showClear field="payment_channel" label={t('bill.title_pay_method')}
                                      placeholder={t('base.please_select')} style={{width: '100%'}}>
                             <Form.Select.Option value="ASIAPAY">ASIAPAY</Form.Select.Option>
@@ -101,15 +101,31 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
                             <Form.Select.Option value="PPS">PPS</Form.Select.Option>
                         </Form.Select>
                     </Col>
+                    <Col xxl={6} xl={6} md={8}>
+                        <Form.Select showClear field="payment_channel" label={t('bill.title_pay_sort')}
+                                     placeholder={t('base.please_select')} style={{width: '100%'}}>
+                            <Form.Select.Option value="id desc">ID {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="id asc">ID {t('bill.sort_asc')}</Form.Select.Option>
+                            <Form.Select.Option value="student_number desc">{t('base.student_number')} {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="student_number asc">{t('base.student_number')} {t('bill.sort_asc')}</Form.Select.Option>
+                            <Form.Select.Option value="bill_number desc">{t('base.bill_number')} {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="bill_number asc">{t('base.bill_number')} {t('bill.sort_asc')}</Form.Select.Option>
+                            <Form.Select.Option value="paid_at desc">{t('bill.title_paid_at')} {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="paid_at asc">{t('bill.title_paid_at')} {t('bill.sort_asc')}</Form.Select.Option>
+
+                            <Form.Select.Option value="create_at desc">{t('bill.title_create_at')} {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="create_at asc">{t('bill.title_create_at')} {t('bill.sort_asc')}</Form.Select.Option>
+                        </Form.Select>
+                    </Col>
                     {props.showApply && <>
-                        <Col xxl={4} xl={6} md={8}>
+                        <Col xxl={6} xl={6} md={8}>
                             <Form.Select showClear field="bill_status" label={t('bill.pay_status')}
                                          placeholder={t('base.please_select')} style={{width: '100%'}}>
                                 {billStatusOptions.map((item, index) => (
                                     <Form.Select.Option key={index} value={item.value}>{item.label}</Form.Select.Option>))}
                             </Form.Select>
                         </Col>
-                        <Col xxl={4} xl={6} md={8}>
+                        <Col xxl={6} xl={6} md={8}>
                             <Form.Select showClear field="apply_status" label={t('bill.title_reconciliation_status')}
                                          placeholder={t('base.please_select')} style={{width: '100%'}}>
                                 {applyStatusOptions.map((item, index) => (
@@ -117,7 +133,7 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
                             </Form.Select>
                         </Col>
                     </>}
-                    <Col xxl={4} xl={6} md={8} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}>
+                    <Col xxl={6} xl={6} md={8} style={{display: 'flex', alignItems: 'flex-end', paddingBottom: 12}}>
                         <Button loading={props.loading} style={{width: 100}} htmlType={'submit'} theme={'solid'}
                                 type={'primary'}>{t('base.btn_search_submit')}</Button>
                     </Col>
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0c90f56..e81a63b 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -57,7 +57,11 @@
     "title_service_charge": "Service Charge",
     "title_student_name": "Student Name",
     "title_student_name_en": "English Name",
-    "title_year": "Year"
+    "title_year": "Year",
+    "title_create_at":"Input Date",
+    "title_pay_sort":"Sort By",
+    "sort_desc":"DESC",
+    "sort_asc":"ASC"
   },
   "error": {
     "go_back": "Go Back",
diff --git a/src/i18n/translations/sc.json b/src/i18n/translations/sc.json
index 4ab0cce..516cedb 100644
--- a/src/i18n/translations/sc.json
+++ b/src/i18n/translations/sc.json
@@ -57,7 +57,11 @@
     "title_service_charge": "手续费",
     "title_student_name": "学生姓名",
     "title_student_name_en": "英文名称",
-    "title_year": "学年"
+    "title_year": "学年",
+    "title_create_at":"创建时间",
+    "title_pay_sort":"排序方式",
+    "sort_desc":"降序",
+    "sort_asc":"升序"
   },
   "error": {
     "go_back": "返回上一页",
diff --git a/src/i18n/translations/tc.json b/src/i18n/translations/tc.json
index d0bba0c..8d740b3 100644
--- a/src/i18n/translations/tc.json
+++ b/src/i18n/translations/tc.json
@@ -57,7 +57,11 @@
     "title_service_charge": "手續費",
     "title_student_name": "學生姓名",
     "title_student_name_en": "英文名稱",
-    "title_year": "學年"
+    "title_year": "學年",
+    "title_create_at":"創建時間",
+    "title_pay_sort":"排序方式",
+    "sort_desc":"降序",
+    "sort_asc":"升序"
   },
   "error": {
     "go_back": "返回上一頁",