update comment

src/components/FiDataGrid.js

@@ -139,8 +139,14 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
 
     function CustomNoRowsOverlay() {
         return (
-            <GridOverlay>
-                <Typography variant="body1">
+            <GridOverlay
+                sx={{
+                    width: "100%",
+                    justifyContent: "flex-start", // align overlay to left
+                    pl: 2, // padding-left to match grid cells
+                }}
+            >
+                <Typography variant="body1" sx={{ textAlign: "left", width: "100%" }}>
                     <FormattedMessage id="noRecordFound" />
                 </Typography>
             </GridOverlay>
@@ -228,7 +234,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
                     }),
                 }}
                 components={{
-                    noRowsOverlay: CustomNoRowsOverlay,
+                    NoRowsOverlay: CustomNoRowsOverlay,
                     ...(pagination
                     ? {
                         Pagination: () => (

src/pages/Payment/Search_GLD/DataGrid.js

@@ -22,6 +22,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
     const [isPopUp, setIsPopUp] = React.useState(false);
     const [bibId, setBibId] = React.useState();
     const [bib, setBib] = React.useState();
+    const [appNo, setAppNo] = React.useState();
     const [refreshTrigger, setRefreshTrigger] = React.useState(0);
 
     const forceRefresh = () => {
@@ -63,9 +64,10 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
         });
     }
     
-    const popUPBib = (id, bibFlag) => {
+    const popUPBib = (id, bibFlag, appNo) => {
         setBibId(id)
         setBib(bibFlag)
+        setAppNo(appNo)
         setIsPopUp(true);
     }
 
@@ -115,7 +117,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             headerName: 'BIB',
             width: 150,
             renderCell: (params) => {
-                return <Checkbox checked={params.row.bib} onChange={() => {popUPBib(params.row.id, params.row.bib)}}/>;
+                return <Checkbox checked={params.row.bib} onChange={() => {popUPBib(params.row.id, params.row.bib, params.row.appNos)}}/>;
             }
         },
         {
@@ -170,7 +172,7 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
                 >
                     <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>
+                        <Typography variant="h5" style={{ padding: '16px' }}>{bib?"Cancel Bank-in-bank?":"Set "+appNo+" as Bank-in-bank?"}</Typography>
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>

src/pages/PublicNotice/Details_GLD/index.js

@@ -42,6 +42,7 @@ import * as DateUtils from "utils/DateUtils";
 import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction";
 import ForwardIcon from '@mui/icons-material/Forward';
 import { useNavigate } from "react-router-dom";
+import {getModeByTextEng} from "utils/statusUtils/PublicNoteStatusUtils";
 
 // ==============================|| Body - DEFAULT ||============================== //
 
@@ -123,8 +124,9 @@ const PublicNoticeDetail_GLD = () => {
             setIssueNum(" No. " + gazetteIssueDetail.issueNo);
             setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
             setGroupNo(response.data.data.groupNo);
-            if (response.data.data.mode != null){
-              setMode("("+response.data.data.mode+")");
+            if (response.data.data?.mode != null){
+              const modeStr = getModeByTextEng(response.data.data.mode);
+              setMode("("+modeStr+")");
             }
             setLoading(false);
           }

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -13,7 +13,7 @@ import {
     isDummyLoggedIn,
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
-import {getStatusIntl,getModeEng} from "utils/statusUtils/PublicNoteStatusUtils";
+import {getStatusIntl,getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import {FormattedMessage, useIntl} from "react-intl";
 
 // ==============================|| EVENT TABLE ||============================== //
@@ -36,15 +36,8 @@ export default function BaseGrid({setCount, url}) {
             headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
-        },
-        {
-            id: 'mode',
-            field: 'mode',
-            headerName: intl.formatMessage({ id: 'applicationMode' }),
-            width: isMdOrLg ? 'auto' : 100,
-            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return [getModeEng(params)]
+                return [params.row.appNo+getModeIntl(params,intl)]
             },
         },
         {

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -13,6 +13,7 @@ import {
     isDummyLoggedIn,
 } from "utils/Utils";
 import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst";
+import {getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import { useTheme } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as React from 'react';
@@ -41,15 +42,8 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'applicationId' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
-        },
-        {
-            id: 'mode',
-            field: 'mode',
-            headerName: intl.formatMessage({ id: 'applicationMode' }),
-            width: isMdOrLg ? 'auto' : 100,
-            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
-                return [StatusUtils.getModeEng(params)]
+                return [params.row.appNo+getModeIntl(params,intl)]
             },
         },
         {

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -26,11 +26,13 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
     const [type, setType] = React.useState([]);
     // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
-    const [orgSelected, setOrgSelected] = React.useState({});
+    const [orgSelected, setOrgSelected] = React.useState(null);
+    const [inputValue, setInputValue] = React.useState("");
     const [orgCombo, setOrgCombo] = React.useState();
     const [issueSelected, setIssueSelected] = React.useState({});
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [selectedStatus, setSelectedStatus] = React.useState({key: 0, label: 'All', type: 'all'});
+    const [selectedMode, setSelectedMode] = React.useState({key: 0, label: 'All', type: 'all'});
     const [groupSelected, setGroupSelected] = React.useState(searchCriteria.gazettGroup!=undefined?ComboData.groupTitle.find(item => item.code === searchCriteria.gazettGroup):{});
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
@@ -44,9 +46,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                 ComboData.publicNoticeStatic_GLD[0]
             }else{
                 setSelectedStatus(ComboData.publicNoticeStatic_GLD.find(item => item.type === searchCriteria.status))
+                setSelectedMode(ComboData.publicNoticeMode_GLD.find(item => item.type === searchCriteria.mode))
             }
         }else{
             setSelectedStatus(ComboData.publicNoticeStatic_GLD[0])      
+            setSelectedMode(ComboData.publicNoticeMode_GLD[0])      
         }
     }, [searchCriteria]);
     
@@ -66,6 +70,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     const onSubmit = (data) => {
         // localStorage.setItem('searchCriteria',"")
         data.status = selectedStatus?.type
+        data.mode = selectedMode?.type
         let typeArray = [];
         let sentDateFrom = "";
         let sentDateTo = "";
@@ -89,7 +94,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
             issueId: issueSelected?.id,
             groupNo: data.groupNo,
             gazettGroup: groupSelected?.code,
-            mode: data.mode,
+            mode: (data.mode === '' || data.mode?.includes("all")) ? "" : data.mode,
             start:0,
             limit:10
         };
@@ -118,17 +123,18 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     function resetForm() {
         setType([]);
         // setStatus({ key: 0, label: 'All', type: 'all' });
-        setOrgSelected({});
+        setOrgSelected(null);
+        setInputValue("");
         setIssueSelected({});
         setGroupSelected({});
         setSelectedStatus({key: 0, label: 'All', type: 'all'});
+        setSelectedMode({key: 0, label: 'All', type: 'all'});
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
         reset({
             appNo:"",
             contact:"",
-            groupNo:"",
-            mode:""
+            groupNo:""
         });
         localStorage.setItem('searchCriteria',"")
     }
@@ -260,7 +266,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                         </Grid>
 
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
-                        <Autocomplete
+                            <Autocomplete
                                 {...register("status")}
                                 id="status"
                                 size="small"
@@ -284,39 +290,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                     />
                                 )}
                             />
-                            {/* <Autocomplete
-                                multiple
-                                {...register("status")}
-                                id="status"
-                                size="small"
-                                options={ComboData.publicNoticeStatic_GLD}
-                                value={selectedStatus}
-                                onChange={(event, newValue) => {
-                                    const findAllIndex = newValue.findIndex((ele) => {
-                                        return ele.type === "all"
-                                    })
-
-                                    if (findAllIndex > -1) {
-                                        setSelectedStatus([newValue[findAllIndex]]);
-                                        setSelectedLabelsString('all')
-                                    } else {
-                                        const selectedLabels = newValue.map(option => option.type);
-                                        const selectedLabelsString = `${selectedLabels.join(',')}`;
-                                        setSelectedStatus(newValue);
-                                        setSelectedLabelsString(selectedLabelsString);
-                                    }
-                                }}
-                                getOptionLabel={(option) => option.label}
-                                renderInput={(params) => (
-                                    <TextField
-                                        {...params}
-                                        label="Status"
-                                        InputLabelProps={{
-                                            shrink: true
-                                        }}
-                                    />
-                                )}
-                            /> */}
                         </Grid>
 
                         {
@@ -330,32 +303,37 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                         groupBy={(option) => option.groupType}
                                         size="small"
                                         value={orgSelected}
-                                        getOptionLabel={(option) => option.name? option.name : ""}
-                                        inputValue={orgSelected ? orgSelected.name!=undefined?orgSelected.name:"" : ""}
+                                        getOptionLabel={(option) => option?.name ?? ""}
+                                        inputValue={inputValue}                       // 👈 controlled input text
+                                        onInputChange={(event, newInputValue) => {    // 👈 update when user types
+                                            setInputValue(newInputValue);
+                                        }}
                                         onChange={(event, newValue) => {
-                                            if (newValue !== null) {
-                                                setOrgSelected(newValue);
-                                            }else{
-                                                setOrgSelected({});
+                                            if (newValue) {
+                                            setOrgSelected(newValue);
+                                            } else {
+                                            setOrgSelected({});
                                             }
                                         }}
                                         renderInput={(params) => (
-                                            <TextField {...params}
-                                                label="Organisation"
-                                                InputLabelProps={{
-                                                    shrink: true
-                                                }}
+                                            <TextField
+                                            {...params}
+                                            label="Organisation"
+                                            InputLabelProps={{
+                                                shrink: true,
+                                            }}
                                             />
                                         )}
                                         renderGroup={(params) => (
                                             <Grid item key={params.key}>
-                                                <Typography fontSize={20} fontStyle="italic" p={1}>
+                                            <Typography fontSize={20} fontStyle="italic" p={1}>
                                                 {params.group}
-                                                </Typography>
-                                                {params.children}
+                                            </Typography>
+                                            {params.children}
                                             </Grid>
                                         )}
                                     />
+
                                 </Grid>
                                 : <></>
                         }
@@ -421,15 +399,29 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             />
                         </Grid>
                         <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
-                            <TextField
-                                fullWidth
+                            <Autocomplete
                                 {...register("mode")}
-                                id='mode'
-                                label="Mode"
-                                defaultValue={searchCriteria.mode}
-                                InputLabelProps={{
-                                    shrink: true
+                                id="mode"
+                                size="small"
+                                options={ComboData.publicNoticeMode_GLD}
+                                value={selectedMode}
+                                onChange={(event, newValue) => {
+                                    if(newValue==null){
+                                        setSelectedMode(ComboData.publicNoticeMode_GLD[0]);
+                                    }else{
+                                        setSelectedMode(newValue);
+                                    }
                                 }}
+                                getOptionLabel={(option) => option.label}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Mode"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
                             />
                         </Grid>
 

src/translations/en.json

@@ -369,6 +369,8 @@
   "searchApplyRecord": "Search application records",
   "applicationId": "Application No.",
   "applicationMode": "Mode",
+  "applicationModeOnline": "",
+  "applicationModeOffline": " (Offline)",
   "submitDate": "Submit Date",
   "submitDateFrom": "Submit Date (From)",
   "submitDateTo": "Submit Date (To)",

src/translations/zh-CN.json

@@ -402,6 +402,8 @@
   "searchApplyRecord": "搜寻申请记录",
   "applicationId": "申请编号",
   "applicationMode": "方式",
+  "applicationModeOnline": "",
+  "applicationModeOffline": " (离线)",
   "submitDate": "提交日期",
   "submitDateFrom": "提交日期 (从)",
   "submitDateTo": "提交日期 (到)",

src/translations/zh-HK.json

@@ -403,6 +403,8 @@
   "searchApplyRecord": "搜尋申請記錄",
   "applicationId": "申請編號",
   "applicationMode": "方式",
+  "applicationModeOnline": "",
+  "applicationModeOffline": " (離線)",
   "submitDate": "提交日期",
   "submitDateFrom": "提交日期 (從)",
   "submitDateTo": "提交日期 (到)",

src/utils/ComboData.js

@@ -74,6 +74,11 @@ export const publicNoticeStatic_GLD = [
     { key: 9, label: 'Withdrawn',  type: 'withdrawn' },
 ];
 
+export const publicNoticeMode_GLD = [
+    { key: 0, label: 'All',  type: 'all' }, 
+    { key: 1, label: 'Online',  type: 'online' },
+    { key: 1, label: 'Offline',  type: 'offline' },
+];
 
 // export const publicNoticeStatic_GLD = [
 //     { key: 0, label: 'All',  type: 'all' }, 

src/utils/statusUtils/PublicNoteStatusUtils.js

@@ -116,3 +116,17 @@ export function getModeByTextEng(mode) {
             return ""
     }
 }
+
+export function getModeIntl(params,intl) {
+    return getModeByTextIntl(params.row.mode, intl);
+}
+export function getModeByTextIntl(mode, intl) {
+    switch (mode) {
+        case "offline":
+            return intl.formatMessage({id: 'applicationModeOffline'})
+        case "online":
+            return intl.formatMessage({id: 'applicationModeOnline'})
+        default:
+            return ""
+    }
+}