alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

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

# Conflicts:
#	src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js
master
Alex Cheung 2 年之前
父節點
3fae7a6ada 688f0e36d3
當前提交
c15333f1c7
共有 11 個檔案被更改，包括 476 行新增 和 13 行删除
統一視圖
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/pages/ManageOrgUserPage/index.js
  2. +11
    -3
      src/pages/PublicNotice/ListPanel/BaseGrid.js
  3. +11
    -2
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  4. +23
    -4
      src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js
  5. +3
    -3
      src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
  6. +116
    -0
      src/pages/PublicNoticeSearch_GLD/DataGrid.js
  7. +203
    -0
      src/pages/PublicNoticeSearch_GLD/SearchForm.js
  8. +90
    -0
      src/pages/PublicNoticeSearch_GLD/index.js
  9. +5
    -0
      src/routes/GLDUserRoutes.js
  10. +2
    -0
      src/utils/ApiPathConst.js
  11. +11
    -0
      src/utils/ComboData.js

+ 1
- 1
src/pages/ManageOrgUserPage/index.js 查看文件

@@ -73,7 +73,7 @@ const ManageOrgUserPage = () => {


function getStatusTag({color="#000", textColor="#FFF",text=""}){ function getStatusTag({color="#000", textColor="#FFF",text=""}){
return ( 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>
) )
} }




+ 11
- 3
src/pages/PublicNotice/ListPanel/BaseGrid.js 查看文件

@@ -72,9 +72,8 @@ export default function BaseGrid({rows}) {
}, },
{ {
field: 'actions', field: 'actions',
type: 'actions',
headerName: '', headerName: '',
width: 50,
width: 80,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => { renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>; return <Button onClick={()=>{}}>查看詳細</Button>;
@@ -83,7 +82,7 @@ export default function BaseGrid({rows}) {
]; ];


return ( return (
<div style={{height: 400, width: '100%'}}>
<div style={{height: 400, width: '100%', padding: 4}}>
<DataGrid <DataGrid
rows={rows} rows={rows}
columns={columns} columns={columns}
@@ -96,6 +95,15 @@ export default function BaseGrid({rows}) {
}} }}
pageSizeOptions={[5, 10]} pageSizeOptions={[5, 10]}
autoHeight = {true} autoHeight = {true}
sx={{
padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .super-app-theme--header': {
backgroundColor: '#EEE',
},
}}
/> />
</div> </div>
); );


+ 11
- 2
src/pages/PublicNotice/ListPanel/PendingPaymentTab.js 查看文件

@@ -80,7 +80,7 @@ export default function SubmittedTab({ rows }) {
field: 'actions', field: 'actions',
type: 'actions', type: 'actions',
headerName: '', headerName: '',
width: 50,
width: 100,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: () => { renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>; return <Button onClick={() => { }}>查看詳細</Button>;
@@ -105,7 +105,7 @@ export default function SubmittedTab({ rows }) {


return ( return (
<> <>
<div style={{ height: 400, width: '100%' }}>
<div style={{ height: 400, width: '100%', padding: 4 }}>
<DataGrid <DataGrid
checkboxSelection checkboxSelection
disableRowSelectionOnClick disableRowSelectionOnClick
@@ -123,6 +123,15 @@ export default function SubmittedTab({ rows }) {
onRowSelectionModelChange={(newSelection) => { onRowSelectionModelChange={(newSelection) => {
setSelectedRowItems(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> <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
</div> </div>


+ 23
- 4
src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js 查看文件

@@ -21,8 +21,6 @@ export function getStatus(params) {
default: default:
return getStatusTag({ text: params.row.status }) return getStatusTag({ text: params.row.status })
} }

} }


export function getStatusByText(status) { export function getStatusByText(status) {
@@ -46,12 +44,33 @@ export function getStatusByText(status) {
default: default:
return getStatusTag({ text: params.row.status }) 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 = "" }) { export function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
return ( 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>
) )
} }

+ 3
- 3
src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js 查看文件

@@ -51,7 +51,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
{/*row 1*/} {/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}> <CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center"> <Grid item justifyContent="space-between" alignItems="center">
Search Form
搜尋
</Grid> </Grid>
</CardContent> </CardContent>


@@ -144,7 +144,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}}> }}>
Clear
重置
</Button> </Button>
</Grid> </Grid>


@@ -157,7 +157,7 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
textTransform: 'capitalize', textTransform: 'capitalize',
alignItems: 'end' alignItems: 'end'
}}> }}>
Submit
搜尋
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>


+ 116
- 0
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>
);
}

+ 203
- 0
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;

+ 90
- 0
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;

+ 5
- 0
src/routes/GLDUserRoutes.js 查看文件

@@ -8,6 +8,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
// render - dashboard // render - dashboard
const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard'))); const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));
const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage'))); const ApplicationDetail = Loadable(lazy(() => import('pages/gldApplicationDetailPage')));
const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD')));
// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


const GLDUserRoutes = { const GLDUserRoutes = {
@@ -28,6 +29,10 @@ const GLDUserRoutes = {
{ {
path: '/application/:id', path: '/application/:id',
element: <ApplicationDetail/> element: <ApplicationDetail/>
},
{
path: '/application/search',
element: <ApplicationSearch/>
} }
] ]
}, },


+ 2
- 0
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_PATH = apiPath+'/org';
export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user'; export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user';
export const POST_ORG_SAVE_PATH = apiPath+'/org/save'; export const POST_ORG_SAVE_PATH = apiPath+'/org/save';
export const GET_ORG_COMBO = apiPath+'/org/combo';





//File Up/Download //File Up/Download


+ 11
- 0
src/utils/ComboData.js 查看文件

@@ -22,6 +22,17 @@ export const publicNoticeStatic = [
{ key: 8, label: '已撤銷', type: 'withdrawn' }, { 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 = [ export const groupTitle = [
{ key: 1, label: 'Private Bill', type: 'A' }, { key: 1, label: 'Private Bill', type: 'A' },
{ key: 2, label: 'Companies Ordinance', type: 'B' }, { key: 2, label: 'Companies Ordinance', type: 'B' },


Write Preview
Loading…
取消
儲存