update set bib add search payment

src/components/FiDataGrid.js

@@ -12,7 +12,8 @@ import { getSearchCriteria, checkSearchCriteriaPath } from "auth/utils";
 
 export function FiDataGrid({ rows, columns, sx, autoHeight,
     hideFooterSelectedRowCount, rowModesModel, editMode,
-    pageSizeOptions, filterItems, customPageSize, doLoad, applyGridOnReady, applySearch, tab, ...props }) {
+    pageSizeOptions, filterItems, customPageSize, doLoad, applyGridOnReady, applySearch,
+    tab, ...props }) {
     const intl = useIntl();
     const [_rows, set_rows] = useState([]);
     const [_doLoad, set_doLoad] = useState({});

src/pages/Payment/Search_GLD/DataGrid.js

@@ -1,14 +1,17 @@
 // material-ui
 import * as React from 'react';
 import * as DateUtils from "utils/DateUtils";
-import {PAYMENT_LIST} from "utils/ApiPathConst";
+import {PAYMENT_LIST, PAYMENT_BIB} from "utils/ApiPathConst";
+import * as HttpUtils from "utils/HttpUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import { clickableLink } from 'utils/CommonFunction';
 import {
-    Checkbox
+    Checkbox,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+    Button,Typography
     // MenuItem
 } from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //
@@ -16,6 +19,14 @@ import {
 export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, applySearch}) {
     const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
     const navigate = useNavigate()
+    const [isPopUp, setIsPopUp] = React.useState(false);
+    const [bibId, setBibId] = React.useState();
+    const [bib, setBib] = React.useState();
+    const [refreshTrigger, setRefreshTrigger] = React.useState(0);
+
+    const forceRefresh = () => {
+        setRefreshTrigger(prev => prev + 1);
+    };
 
     const _sx = {
         padding: "4 2 4 2",
@@ -41,6 +52,23 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
         navigate('/paymentPage/details/' + params.row.id);
     };
 
+    const doBIB = () => {
+        setIsPopUp(false);
+        console.log(refreshTrigger)
+        HttpUtils.post({
+            url: PAYMENT_BIB + "/" + bibId,
+            onSuccess: function () {
+                forceRefresh()
+            }
+        });
+    }
+    
+    const popUPBib = (id, bibFlag) => {
+        setBibId(id)
+        setBib(bibFlag)
+        setIsPopUp(true);
+    }
+
     const columns = [
         {
             id: 'appNos',
@@ -88,7 +116,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             headerName: 'BIB',
             width: 150,
             renderCell: (params) => {
-                return <Checkbox checked={params.row.bib} onChange={() => {set_paymentMethod("demandNote")}}/>;
+                return <Checkbox checked={params.row.bib} onChange={() => {popUPBib(params.row.id, params.row.bib)}}/>;
             }
         },
         {
@@ -127,8 +155,30 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
                 doLoad={React.useMemo(() => ({
                     url: PAYMENT_LIST,
                     params: _searchCriteria,
-                }), [_searchCriteria])}
+                }), [_searchCriteria, refreshTrigger])}
             />
+            <div>
+                <Dialog
+                    open={isPopUp}
+                    onClose={() => setIsPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
+                    <DialogTitle>Bank-in-bank</DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h5" style={{ padding: '16px' }}>{bib?"Cancel Bank-in-bank?":"Is Bank-in-bank?"}</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => doBIB()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
         </div>
     );
 }

src/pages/Payment/Search_GLD/SearchForm.js

@@ -24,6 +24,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
     const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
+    const [payMethod, setPayMethod] = React.useState(ComboData.payMethod[0]);
 
     const { reset, register, handleSubmit } = useForm()
     const marginBottom = 2.5;
@@ -66,6 +67,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
             dateFrom: sentDateFrom,
             dateTo: sentDateTo,
             status : (status?.type && status?.type != 'all') ? status?.type : "",
+            payMethod : (payMethod?.type && payMethod?.type != 'all') ? payMethod?.type : "",
         };
         applySearch(temp);
     };
@@ -209,6 +211,35 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                                 }}
                             />
                         </Grid>
+                        
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                            <Autocomplete
+                                {...register("payMethod")}
+                                disablePortal={false}
+                                size="small"
+                                id="payMethod"
+                                filterOptions={(options) => options}
+                                options={ComboData.payMethod}
+                                value={payMethod}
+                                getOptionLabel={(option) => option.label}
+                                inputValue={payMethod?.label ? payMethod?.label : ""}
+                                onChange={(event, newValue) => {
+                                    if(newValue==null){
+                                        setPayMethod(ComboData.payMethod[0]);
+                                    }else{
+                                        setPayMethod(newValue);
+                                    }
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Payment Means"
+                                    />
+                                )}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
                     </Grid>
                 </Grid>
 

src/utils/ApiPathConst.js

@@ -173,6 +173,7 @@ export const PAYMENT_LIST = apiPath+'/payment/list';//GET
 export const PAYMENT_LOAD = apiPath+'/payment/load';//GET
 export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST
 export const PAYMENT_CHECK = apiPath+'/payment/check-payment';//GET
+export const PAYMENT_BIB = apiPath+'/payment/set-bib';//POST
 
 export const PAYMENT_LIMIT_SETTING_LIST = apiPath+'/settings/payment';//GET
 // export const PAYMENT_AVAILABLE_PAYMENT = paymentPath+'/api/payment/availability';//POST

src/utils/ComboData.js

@@ -136,6 +136,15 @@ export const paymentStatus = [
     { key: 4, i18nLabel: 'inProgress', labelCht: '進行中', label:'In Progress', type: 'INPR' },
 ];
 
+export const payMethod = [
+    { key: 0, labelCht: '全部', label: 'All',  type: 'all' },
+    { key: 1, labelCht: '繳費靈', label: 'PPS',  type: '01,PPSB,PPS' }, 
+    { key: 2, labelCht: '信用卡', label:'Credit Card',  type: '02,BCMP,CreditCard' },
+    { key: 3, labelCht: '銀聯', label:'UnionPay', type: '03,BCMP,CreditCard' }, 
+    { key: 4, labelCht: '轉數快', label:'FPS', type: '04,BCFP,FPS' }, 
+];
+
+
 
 export const denmandNoteStatus = [
     { key: 0, labelCht: '全部', label: 'All',  type: 'all' },