Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

# Conflicts:
#	src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js

src/pages/ManageOrgUserPage/index.js

@@ -73,7 +73,7 @@ const ManageOrgUserPage = () => {
 
     function getStatusTag({color="#000", textColor="#FFF",text=""}){
         return  (
-            <div style={{"border-radius":"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div>
+            <div style={{borderRadius:"25px" ,"background": color, "color":textColor, "padding":"5px 10px 5px 10px"}}><b>{text}</b></div>
         )
     }
 

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -72,9 +72,8 @@ export default function BaseGrid({rows}) {
         },
         {
             field: 'actions',
-            type: 'actions',
             headerName: '',
-            width: 50,
+            width: 80,
             cellClassName: 'actions',
             renderCell: () => {
                 return <Button onClick={()=>{}}>查看詳細</Button>;
@@ -83,7 +82,7 @@ export default function BaseGrid({rows}) {
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{height: 400, width: '100%', padding: 4}}>
             <DataGrid
                 rows={rows}
                 columns={columns}
@@ -96,6 +95,15 @@ export default function BaseGrid({rows}) {
                 }}
                 pageSizeOptions={[5, 10]}
                 autoHeight = {true}
+                sx={{
+                    padding: "4 2 4 2",
+                    boxShadow: 1,
+                    border: 1,
+                    borderColor: '#DDD',
+                    '& .super-app-theme--header': {
+                        backgroundColor: '#EEE',
+                    },
+                }}
             />
         </div>
     );

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -80,7 +80,7 @@ export default function SubmittedTab({ rows }) {
             field: 'actions',
             type: 'actions',
             headerName: '',
-            width: 50,
+            width: 100,
             cellClassName: 'actions',
             renderCell: () => {
                 return <Button onClick={() => { }}>查看詳細</Button>;
@@ -105,7 +105,7 @@ export default function SubmittedTab({ rows }) {
 
     return (
         <>
-            <div style={{ height: 400, width: '100%' }}>
+            <div style={{ height: 400, width: '100%', padding: 4 }}>
                 <DataGrid
                     checkboxSelection
                     disableRowSelectionOnClick
@@ -123,6 +123,15 @@ export default function SubmittedTab({ rows }) {
                     onRowSelectionModelChange={(newSelection) => {
                         setSelectedRowItems(newSelection);
                     }}
+                    sx={{
+                        margin: "4 2 4 2",
+                        boxShadow: 1,
+                        border: 1,
+                        borderColor: '#DDD',
+                        '& .super-app-theme--header': {
+                            backgroundColor: '#EEE',
+                        },
+                    }}
                 />
                 <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
             </div>

src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js

@@ -21,8 +21,6 @@ export function getStatus(params) {
         default:
             return getStatusTag({ text: params.row.status })
     }
-
-    
 }
 
 export function getStatusByText(status) {
@@ -46,12 +44,33 @@ export function getStatusByText(status) {
         default:
             return getStatusTag({ text: params.row.status })
     }
-
+}
     
+export function getStatusEng(params) {
+    switch (params.row.status) {
+        case "submitted":
+            return getStatusTag({ color: "#f5a83d", text: "Submitted" })
+        case "rejected":
+            return getStatusTag({ color: "#d9372b", text: "Rejected" })
+        case "cancelled":
+            return getStatusTag({ color: "#757373", text: "Cancelled" })
+        case "accepted":
+            return getStatusTag({ color: "#22a13f", text: "Accepted" })
+        case "confirmed":
+            return getStatusTag({ color: "#22a13f", text: "Confirmed" })
+        case "paid":
+            return getStatusTag({ color: "#22a13f", text: "Paid" })
+        case "published":
+            return getStatusTag({ color: "#f5a83d", text: "Published" })
+        case "withdrawn":
+            return getStatusTag({ color: "#8a8784", text: "Withdrawn" })
+        default:
+            return getStatusTag({ text: params.row.status })
+    }
 }
 
 export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
     return (
-        <div style={{ "border-radius": "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
+        <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>
     )
 }

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -51,7 +51,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form
+                        搜尋
                     </Grid>
                 </CardContent>
 
@@ -144,7 +144,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Clear
+                            重置
                         </Button>
                     </Grid>
 
@@ -157,7 +157,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            Submit
+                            搜尋
                         </Button>
                     </Grid>
                 </Grid>

src/pages/PublicNoticeSearch_GLD/DataGrid.js

@@ -0,0 +1,116 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+} from "@mui/x-data-grid";
+import {
+    Button
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as StatusUtils from "pages/PublicNotice/ListPanel/PublicNoteStatusUtils";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const [rowModesModel] = React.useState({});
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: 'App No.',
+            flex: 1,
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Submit Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'contactPerson',
+            field: 'contactPerson',
+            headerName: 'Contact Person',
+            flex: 2,
+            renderCell: (params) => {
+                let phone = JSON.parse(params.row.contactTelNo);
+                let faxNo = JSON.parse(params.row.contactFaxNo);
+
+                let contact = "";
+                if (phone) {
+                    contact = "Phone No.: " + phone?.countryCode + " " + phone?.phoneNumber
+                }
+
+                if (faxNo) {
+                    if (contact != "")
+                        contact = contact + ", "
+                    contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber
+                }
+
+                return (<>
+                    {params?.value}<br />
+                    {contact}
+                </>);
+            }
+        },
+        {
+            id: 'remarks',
+            field: 'remarks',
+            headerName: 'Remarks',
+            flex: 3,
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: 'Status',
+            width: 100,
+            renderCell: (params) => {
+                return [StatusUtils.getStatusEng(params)]
+            },
+        },
+        {
+            field: 'actions',
+            headerName: '',
+            width: 100,
+            cellClassName: 'actions',
+            renderCell: () => {
+                return <Button onClick={() => { }}>Details</Button>;
+            },
+        }
+    ];
+
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+
+            <DataGrid
+                rows={rows}
+                columns={columns}
+                editMode="row"
+                rowModesModel={rowModesModel}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+                pageSizeOptions={[5, 10]}
+                autoHeight
+                sx={{
+                    boxShadow: 1,
+                    border: 1,
+                    borderColor: '#DDD',
+                    '& .super-app-theme--header': {
+                        backgroundColor: '#EEE',
+                    },
+                }}
+            />
+        </div>
+    );
+}

src/pages/PublicNoticeSearch_GLD/SearchForm.js

@@ -0,0 +1,203 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    Grid, TextField,
+    Autocomplete
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
+
+    const [type, setType] = React.useState([]);
+    const [status, setStatus] = React.useState();
+    const [orgLabel, setOrgLabel] = React.useState();
+    const [orgId, setOrgId] = React.useState();
+    const [orgCombo, setOrgCombo] = React.useState();
+
+
+    const { reset, register, handleSubmit } = useForm()
+    const onSubmit = (data) => {
+
+        let typeArray = [];
+
+        for (let i = 0; i < type.length; i++) {
+            typeArray.push(type[i].label);
+        }
+
+        const temp = {
+            appNo: data.appNo,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+            contact: data.contact,
+            status: status?.type,
+            orgId: orgId?.key,
+        };
+        applySearch(temp);
+    };
+
+    React.useEffect(() => {
+        if (orgComboData && orgComboData.length > 0) {
+            setOrgCombo(orgComboData);
+        }
+    }, [orgComboData]);
+
+    function resetForm() {
+        setType([]);
+        setStatus();
+        setOrgId();
+        setOrgLabel("");
+        //orgComboRef.current.clearValue();
+        reset();
+    }
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}>
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center">
+                        Search Form
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container alignItems={"center"}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("appNo")}
+                            id='appNo'
+                            label="App No."
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("dateFrom")}
+                            id="dateFrom"
+                            type="date"
+                            label="Submit Date(From)"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            id="dateTo"
+                            type="date"
+                            label="Submit Date(To)"
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("contact")}
+                            id="contact"
+                            label="Conact Person"
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Autocomplete
+                            {...register("status")}
+                            disablePortal
+                            id="status"
+                            options={ComboData.publicNoticeStaticEng}
+                            value={status}
+                            onChange={(event, newValue) => {
+                                if (newValue !== null) {
+                                    setStatus(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label="Status"
+                                />
+                            )}
+                        />
+                    </Grid>
+
+                    {
+                        orgCombo ?
+                            <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                <Autocomplete
+                                    {...register("orgId")}
+                                    disablePortal
+                                    id="orgId"
+                                    options={orgCombo}
+                                    inputValue={orgLabel}
+                                    onChange={(event, newValue) => {
+                                        if (newValue !== null) {
+                                            setOrgId(newValue);
+                                            setOrgLabel(newValue.label);
+                                        } else {
+                                            setOrgLabel("");
+                                        }
+                                    }}
+                                    renderInput={(params) => (
+                                        <TextField {...params}
+                                            label="Organization"
+                                        />
+                                    )}
+                                />
+                            </Grid>
+                            : <></>
+                    }
+
+
+                </Grid>
+
+
+                {/*last row*/}
+                <Grid container maxWidth justifyContent="flex-end">
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={resetForm}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            Clear
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Button
+                            size="large"
+                            variant="contained"
+                            type="submit"
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            Submit
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/PublicNoticeSearch_GLD/index.js

@@ -0,0 +1,90 @@
+// material-ui
+import {
+    Grid
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const UserSearchPage_Individual = () => {
+
+    const [record,setRecord] = React.useState([]);
+    const [orgCombo,setOrgCombo] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        getUserList();
+        getOrgCombo();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [orgCombo]);
+
+    React.useEffect(() => {
+        getUserList();
+    }, [searchCriteria]);
+
+    function getUserList(){
+        HttpUtils.get({
+            url: UrlUtils.GET_PUBLIC_NOTICE_LIST,
+            params: searchCriteria,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function getOrgCombo(){
+        HttpUtils.get({
+            url: UrlUtils.GET_ORG_COMBO,
+            onSuccess: function(responseData){
+                let combo = responseData;
+                setOrgCombo(combo);
+            }
+        });
+    }
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
+            {/*row 1*/}
+            <Grid item xs={12} md={12} lg={12}>
+                <SearchForm 
+                applySearch={applySearch}
+                orgComboData={orgCombo}
+                />
+            </Grid>
+            {/*row 2*/}
+            <Grid item xs={12} md={12} lg={12}>
+                <MainCard elevation={0}
+                          border={false}
+                          content={false}
+                >
+                    <EventTable
+                        recordList={record}
+                    />
+                </MainCard>
+            </Grid>
+
+        </Grid>
+
+    );
+};
+
+export default UserSearchPage_Individual;

src/routes/GLDUserRoutes.js

@@ -8,6 +8,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));
 const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage')));
+const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD')));
 // ==============================|| MAIN ROUTING ||============================== //
 
 const GLDUserRoutes = {
@@ -28,6 +29,10 @@ const GLDUserRoutes = {
         {
           path: '/application/:id',
           element: <ApplicationDetail/>
+        },
+        {
+          path: '/application/search',
+          element: <ApplicationSearch/>
         }
       ]
     },

src/utils/ApiPathConst.js

@@ -24,6 +24,8 @@ export const GET_ORG_USER_PATH = apiPath+'/user/org';
 export const GET_ORG_PATH = apiPath+'/org';
 export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user';
 export const POST_ORG_SAVE_PATH = apiPath+'/org/save';
+export const GET_ORG_COMBO = apiPath+'/org/combo';
+
 
 
 //File Up/Download

src/utils/ComboData.js

@@ -22,6 +22,17 @@ export const publicNoticeStatic = [
     { key: 8, label: '已撤銷',  type: 'withdrawn' },
 ];
 
+export const publicNoticeStaticEng = [
+    { key: 1, label: 'Submitted',  type: 'submitted' }, 
+    { key: 2, label: 'Rejected',  type: 'rejected' }, 
+    { key: 3, label: 'Cancelled',  type: 'cancelled' }, 
+    { key: 4, label: 'Accepted',  type: 'accepted' },
+    { key: 5, label: 'Confirmed',  type: 'confirmed' },
+    { key: 6, label: 'Paid',  type: 'paid' },
+    { key: 7, label: 'Published',  type: 'published' },
+    { key: 8, label: 'Withdrawn',  type: 'withdrawn' },
+];
+
 export const groupTitle = [
     { key: 1, label: 'Private Bill',  type: 'A' }, 
     { key: 2, label: 'Companies Ordinance',  type: 'B' },