| @@ -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' }, | |||
| ]; | |||