@@ -7,9 +7,10 @@ import { | |||
Button | |||
} from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({rows}) { | |||
export default function BaseGrid({rows}) { | |||
const [rowModesModel] = React.useState({}); | |||
const columns = [ | |||
@@ -28,17 +29,46 @@ export default function SubmittedTab({rows}) { | |||
return DateUtils.datetimeStr(params?.value); | |||
} | |||
}, | |||
{ | |||
id: 'contactPerson', | |||
field: 'contactPerson', | |||
headerName: '聯絡人', | |||
flex: 2, | |||
renderCell: (params) => { | |||
let phone = JSON.parse(params.row.contactTelNo); | |||
let faxNo = JSON.parse(params.row.contactFaxNo); | |||
let contact = ""; | |||
if (phone) { | |||
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber | |||
} | |||
if (faxNo) { | |||
if (contact != "") | |||
contact = contact + ", " | |||
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber | |||
} | |||
return (<> | |||
{params?.value}<br /> | |||
{contact} | |||
</>); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 1, | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '狀態', | |||
flex: 1, | |||
renderCell: (params) => { | |||
return [StatusUtils.getStatus(params)] | |||
}, | |||
}, | |||
{ | |||
field: 'actions', |
@@ -1,72 +0,0 @@ | |||
// 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" | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({ rows }) { | |||
const [rowModesModel] = React.useState({}); | |||
const columns = [ | |||
{ | |||
id: 'appNo', | |||
field: 'appNo', | |||
headerName: '申請編號', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: '提交日期', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '狀態', | |||
flex: 1, | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={() => { }}>查看詳細</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={true} | |||
/> | |||
</div> | |||
); | |||
} |
@@ -10,7 +10,7 @@ import { | |||
Dialog, DialogTitle, DialogContent, DialogActions | |||
} from '@mui/material'; | |||
import * as DateUtils from "utils/DateUtils" | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({ rows }) { | |||
@@ -34,11 +34,37 @@ export default function SubmittedTab({ rows }) { | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'contactPerson', | |||
field: 'contactPerson', | |||
headerName: '聯絡人', | |||
flex: 2, | |||
renderCell: (params) => { | |||
let phone = JSON.parse(params.row.contactTelNo); | |||
let faxNo = JSON.parse(params.row.contactFaxNo); | |||
let contact = ""; | |||
if (phone) { | |||
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber | |||
} | |||
if (faxNo) { | |||
if (contact != "") | |||
contact = contact + ", " | |||
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber | |||
} | |||
return (<> | |||
{params?.value}<br /> | |||
{contact} | |||
</>); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 1, | |||
flex: 3, | |||
}, | |||
{ | |||
@@ -46,6 +72,9 @@ export default function SubmittedTab({ rows }) { | |||
field: 'status', | |||
headerName: '狀態', | |||
flex: 1, | |||
renderCell: (params) => { | |||
return [StatusUtils.getStatus(params)] | |||
}, | |||
}, | |||
{ | |||
field: 'actions', | |||
@@ -1,78 +0,0 @@ | |||
// 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" | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({rows}) { | |||
const [rowModesModel] = React.useState({}); | |||
const columns = [ | |||
{ | |||
id: 'appNo', | |||
field: 'appNo', | |||
headerName: '申請編號', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: '提交日期', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '狀態', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={()=>{}}>查看詳細</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 = {true} | |||
/> | |||
</div> | |||
); | |||
} |
@@ -0,0 +1,32 @@ | |||
export function getStatus(params) { | |||
switch (params.row.status) { | |||
case "submitted": | |||
return getStatusTag({ color: "#f5a83d", text: "已提交" }) | |||
case "rejected": | |||
return getStatusTag({ color: "#d9372b", text: "已拒絕" }) | |||
case "cancelled": | |||
return getStatusTag({ color: "#757373", text: "已取消" }) | |||
case "accepted": | |||
return getStatusTag({ color: "#22a13f", text: "已接受" }) | |||
case "confirmed": | |||
return getStatusTag({ color: "#22a13f", text: "已確認" }) | |||
case "paid": | |||
return getStatusTag({ color: "#22a13f", text: "已付費" }) | |||
case "published": | |||
return getStatusTag({ color: "#f5a83d", text: "已發表" }) | |||
case "withdrawn": | |||
return getStatusTag({ color: "#8a8784", text: "已撤銷" }) | |||
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> | |||
) | |||
} |
@@ -0,0 +1,169 @@ | |||
// 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 }) => { | |||
const [type, setType] = React.useState([]); | |||
const [status, setStatus] = 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, | |||
}; | |||
applySearch(temp); | |||
}; | |||
function resetForm() { | |||
setType([]); | |||
setStatus(); | |||
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="申請編號" | |||
/> | |||
</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="提交日期(從)" | |||
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="提交日期(到)" | |||
/> | |||
</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="聯絡人" | |||
/> | |||
</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.publicNoticeStatic} | |||
value={status} | |||
onChange={(event, newValue) => { | |||
if (newValue !== null) { | |||
setStatus(newValue); | |||
} | |||
}} | |||
renderInput={(params) => ( | |||
<TextField {...params} | |||
label="狀態" | |||
/> | |||
)} | |||
/> | |||
</Grid> | |||
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | |||
{/* <TextField*/} | |||
{/* fullWidth*/} | |||
{/* {...register("subDivisionId")}*/} | |||
{/* id="subDivision"*/} | |||
{/* label="Sub-Division"*/} | |||
{/* />*/} | |||
{/*</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; |
@@ -0,0 +1,66 @@ | |||
// material-ui | |||
import { | |||
Grid | |||
} from '@mui/material'; | |||
import MainCard from "components/MainCard"; | |||
import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "utils/HttpUtils"; | |||
import Loadable from 'components/Loadable'; | |||
const SearchForm = Loadable(React.lazy(() => import('./SearchPublicNoticeForm'))); | |||
const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable'))); | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const UserSearchPage_Individual = () => { | |||
const [record,setRecord] = React.useState([]); | |||
const [searchCriteria, setSearchCriteria] = React.useState({}); | |||
React.useEffect(() => { | |||
getUserList(); | |||
}, []); | |||
React.useEffect(() => { | |||
getUserList(); | |||
}, [searchCriteria]); | |||
function getUserList(){ | |||
HttpUtils.get({ | |||
url: GET_PUBLIC_NOTICE_LIST, | |||
params: searchCriteria, | |||
onSuccess: function(responseData){ | |||
setRecord(responseData); | |||
} | |||
}); | |||
} | |||
function applySearch(input) { | |||
setSearchCriteria(input); | |||
} | |||
return ( | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
{/*row 1*/} | |||
<Grid item xs={12} md={12} lg={12}> | |||
<SearchForm applySearch={applySearch}/> | |||
</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; |
@@ -0,0 +1,118 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
DataGrid, | |||
} from "@mui/x-data-grid"; | |||
import { | |||
Button | |||
} from '@mui/material'; | |||
import { useEffect } from "react"; | |||
import * as DateUtils from "utils/DateUtils"; | |||
import * as StatusUtils from "./PublicNoteStatusUtils"; | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SearchPublicNoticeTable({ recordList }) { | |||
const [rows, setRows] = React.useState(recordList); | |||
const [rowModesModel] = React.useState({}); | |||
useEffect(() => { | |||
setRows(recordList); | |||
}, [recordList]); | |||
const columns = [ | |||
{ | |||
id: 'appNo', | |||
field: 'appNo', | |||
headerName: '申請編號', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: '提交日期', | |||
flex: 1, | |||
valueGetter: (params) => { | |||
return DateUtils.datetimeStr(params?.value); | |||
} | |||
}, | |||
{ | |||
id: 'contactPerson', | |||
field: 'contactPerson', | |||
headerName: '聯絡人', | |||
flex: 2, | |||
renderCell: (params) => { | |||
let phone = JSON.parse(params.row.contactTelNo); | |||
let faxNo = JSON.parse(params.row.contactFaxNo); | |||
let contact = ""; | |||
if (phone) { | |||
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber | |||
} | |||
if (faxNo) { | |||
if (contact != "") | |||
contact = contact + ", " | |||
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber | |||
} | |||
return (<> | |||
{params?.value}<br /> | |||
{contact} | |||
</>); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 3, | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '狀態', | |||
width: 100, | |||
renderCell: (params) => { | |||
return [StatusUtils.getStatus(params)] | |||
}, | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 100, | |||
cellClassName: 'actions', | |||
renderCell: () => { | |||
return <Button onClick={() => { }}>查看詳細</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> | |||
); | |||
} |
@@ -1,107 +0,0 @@ | |||
// material-ui | |||
import * as React from 'react'; | |||
import { | |||
OutlinedInput, | |||
Button | |||
} from '@mui/material'; | |||
import { | |||
DataGrid, | |||
GridActionsCellItem, | |||
} from "@mui/x-data-grid"; | |||
import * as Icon from '../../../utils/IconUtils'; | |||
import * as DateUtils from "../../../utils/DateUtils" | |||
// ==============================|| EVENT TABLE ||============================== // | |||
export default function SubmittedTab({rows}) { | |||
const [rowModesModel] = React.useState({}); | |||
const columns = [ | |||
{ | |||
id: 'appNo', | |||
field: 'appNo', | |||
headerName: '申請編號', | |||
flex: 1, | |||
}, | |||
{ | |||
id: 'created', | |||
field: 'created', | |||
headerName: '提交日期', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'remarks', | |||
field: 'remarks', | |||
headerName: '我的備註', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
id: 'status', | |||
field: 'status', | |||
headerName: '狀態', | |||
flex: 1, | |||
valueGetter:(params)=>{ | |||
return DateUtils.datetimeStr(params.value); | |||
} | |||
}, | |||
{ | |||
field: 'actions', | |||
type: 'actions', | |||
headerName: '', | |||
width: 50, | |||
cellClassName: 'actions', | |||
getActions: (params) => { | |||
return [ | |||
<GridActionsCellItem | |||
key="OutSave" | |||
icon={<Icon.Download/>} | |||
label="查看詳細" | |||
className="textPrimary" | |||
onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||
color="primary" | |||
/>] | |||
}, | |||
} | |||
]; | |||
const doSearch=()=>{ | |||
} | |||
return ( | |||
<div style={{height: 400, width: '100%'}}> | |||
<center> | |||
<div> | |||
<OutlinedInput | |||
style={{width: 400}} | |||
id="chName-signup" | |||
type="text" | |||
name="chName" | |||
placeholder="搜尋..." | |||
/> | |||
<Button variant="contained" onClick={()=>{doSearch()}}>搜尋</Button> | |||
</div> | |||
</center> | |||
<DataGrid | |||
rows={rows} | |||
columns={columns} | |||
editMode="row" | |||
rowModesModel={rowModesModel} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: {page: 0, pageSize: 5}, | |||
}, | |||
}} | |||
pageSizeOptions={[5, 10]} | |||
autoHeight = {true} | |||
/> | |||
</div> | |||
); | |||
} |
@@ -1,54 +1,52 @@ | |||
// material-ui | |||
import { | |||
Grid, | |||
Typography, | |||
Tab, | |||
Grid, | |||
Typography, | |||
Tab, | |||
Box, | |||
Button | |||
} from '@mui/material'; | |||
import {TabPanel, TabContext, TabList } from '@mui/lab'; | |||
import {useEffect, useState} from "react"; | |||
import {useNavigate} from "react-router-dom"; | |||
import { TabPanel, TabContext, TabList } from '@mui/lab'; | |||
import { useEffect, useState } from "react"; | |||
import { useNavigate } from "react-router-dom"; | |||
import * as React from "react"; | |||
import * as HttpUtils from "../../../utils/HttpUtils"; | |||
import * as UrlUtils from "../../../utils/ApiPathConst"; | |||
import Loadable from 'components/Loadable'; | |||
import { lazy } from 'react'; | |||
const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab'))); | |||
const InProgressTab = Loadable(lazy(() => import('./InProgressTab'))); | |||
const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab'))); | |||
const PendingPublishTab = Loadable(lazy(() => import('./PendingPublishTab'))); | |||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||
const SearchTab = Loadable(lazy(() => import('./SearchTab'))); | |||
const BaseGrid = Loadable(lazy(() => import('./BaseGrid'))); | |||
const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab'))); | |||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||
const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab'))); | |||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
const PublicNotice = () => { | |||
const [submittedList, setSubmittedList] = useState([]); | |||
const [inProgressList, setInProgressList] = useState([]); | |||
const [pendingPaymentList, setPendingPaymentList] = useState([]); | |||
const [pendingPublishList, setPendingPublishList] = useState([]); | |||
const [submittedList, setSubmittedList] = useState([]); | |||
const [inProgressList, setInProgressList] = useState([]); | |||
const [pendingPaymentList, setPendingPaymentList] = useState([]); | |||
const [pendingPublishList, setPendingPublishList] = useState([]); | |||
const [isLoading, setLoding] = useState(true); | |||
const [selectedTab, setSelectedTab] = useState("1"); | |||
const navigate=useNavigate(); | |||
const navigate = useNavigate(); | |||
useEffect(()=>{ | |||
useEffect(() => { | |||
loadData(); | |||
},[]); | |||
}, []); | |||
const reloadPage=()=>{ | |||
const reloadPage = () => { | |||
window.location.reload(false); | |||
} | |||
const loadData = ()=>{ | |||
const loadData = () => { | |||
setLoding(true); | |||
HttpUtils.get({ | |||
url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`, | |||
onSuccess: function(response){ | |||
onSuccess: function (response) { | |||
setSubmittedList(response["submitted"]); | |||
setInProgressList(response["inProgress"]); | |||
setPendingPaymentList(response["pendingPayment"]); | |||
@@ -58,71 +56,71 @@ const PublicNotice = () => { | |||
}; | |||
useEffect(() => { | |||
setLoding(false); | |||
setLoding(false); | |||
}, [submittedList]); | |||
const handleChange = (event, newValue)=>{ | |||
const handleChange = (event, newValue) => { | |||
setSelectedTab(newValue); | |||
} | |||
const onBtnClick=()=>{ | |||
const onBtnClick = () => { | |||
navigate('/publicNotice/apply') | |||
} | |||
return ( | |||
isLoading ? | |||
<LoadingComponent/> | |||
<LoadingComponent /> | |||
: | |||
<Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||
<Grid item xs={12} sx={{mb: -2.25}}> | |||
<Grid item xs={12} sx={{ mb: -2.25 }}> | |||
<Typography variant="h5">我的公共啟事</Typography> | |||
</Grid> | |||
<Grid item xs={12} sx={{mb: -2.25}}> | |||
<Button variant="contained" onClick={()=>{onBtnClick()}}>申請公共啟事</Button> | |||
<Grid item xs={12} sx={{ mb: -2.25 }}> | |||
<Button variant="contained" onClick={() => { onBtnClick() }}>申請公共啟事</Button> | |||
</Grid> | |||
{/*col 2*/} | |||
<Grid item xs={12}> | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
<Tab label={"已提交("+submittedList.length+")"} value="1" /> | |||
<Tab label={"處理中("+inProgressList.length+")"} value="2" /> | |||
<Tab label={"待付款("+pendingPaymentList.length+")"} value="3" /> | |||
<Tab label={"待發佈("+pendingPublishList.length+")"} value="4" /> | |||
<Tab label="搜尋申請記錄" value="5" /> | |||
</TabList> | |||
</Box> | |||
<TabPanel value="1"> | |||
<SubmittedTab | |||
rows={submittedList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="2"> | |||
<InProgressTab | |||
rows={inProgressList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="3"> | |||
<PendingPaymentTab | |||
rows={pendingPaymentList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="4"> | |||
<PendingPublishTab | |||
rows={pendingPublishList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="5"> | |||
<SearchTab | |||
rows={pendingPublishList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
</TabContext> | |||
<TabContext value={selectedTab}> | |||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
<Tab label={"已提交(" + submittedList.length + ")"} value="1" /> | |||
<Tab label={"處理中(" + inProgressList.length + ")"} value="2" /> | |||
<Tab label={"待付款(" + pendingPaymentList.length + ")"} value="3" /> | |||
<Tab label={"待發佈(" + pendingPublishList.length + ")"} value="4" /> | |||
<Tab label="搜尋申請記錄" value="5" /> | |||
</TabList> | |||
</Box> | |||
<TabPanel value="1"> | |||
<BaseGrid | |||
rows={submittedList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="2"> | |||
<BaseGrid | |||
rows={inProgressList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="3"> | |||
<PendingPaymentTab | |||
rows={pendingPaymentList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="4"> | |||
<BaseGrid | |||
rows={pendingPublishList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
<TabPanel value="5"> | |||
<SearchTab | |||
rows={pendingPublishList} | |||
reloadFunction={reloadPage} | |||
/> | |||
</TabPanel> | |||
</TabContext> | |||
</Grid> | |||
</Grid> | |||
); | |||
@@ -10,3 +10,14 @@ export const district = ['北區', '長洲區', '大埔區', '大嶼山區', ' | |||
export const country = ["香港","內地","澳門"]; | |||
export const accountFilter = [{ id: 1, key: 1, label: 'Active', type: 'active' }, { id: 2, key: 2, label: 'Locked', type: 'locked' }, { id: 3, key: 3, label: 'Not verified', type: 'notVerified' }]; | |||
export const publicNoticeStatic = [ | |||
{ key: 1, label: '已提交', type: 'submitted' }, | |||
{ key: 2, label: '已拒絕', type: 'rejected' }, | |||
{ key: 3, label: '已取消', type: 'cancelled' }, | |||
{ key: 4, label: '已接受', type: 'accepted' }, | |||
{ key: 5, label: '已確認', type: 'confirmed' }, | |||
{ key: 6, label: '已付費', type: 'paid' }, | |||
{ key: 7, label: '已發表', type: 'published' }, | |||
{ key: 8, label: '已撤銷', type: 'withdrawn' }, | |||
]; |