From 615134d14afbc98fb28be0859d1bd439fef9b79d Mon Sep 17 00:00:00 2001 From: anna Date: Sat, 16 Sep 2023 20:20:16 +0800 Subject: [PATCH] do search --- .../{SubmittedTab.js => BaseGrid.js} | 34 +++- .../PublicNotice/ListPanel/InProgressTab.js | 72 -------- .../ListPanel/PendingPaymentTab.js | 33 +++- .../ListPanel/PendingPublishTab.js | 78 -------- .../ListPanel/PublicNoteStatusUtils.js | 32 ++++ .../ListPanel/SearchPublicNoticeForm.js | 169 ++++++++++++++++++ .../ListPanel/SearchPublicNoticeTab.js | 66 +++++++ .../ListPanel/SearchPublicNoticeTable.js | 118 ++++++++++++ src/pages/PublicNotice/ListPanel/SearchTab.js | 107 ----------- src/pages/PublicNotice/ListPanel/index.js | 138 +++++++------- src/utils/ComboData.js | 11 ++ 11 files changed, 527 insertions(+), 331 deletions(-) rename src/pages/PublicNotice/ListPanel/{SubmittedTab.js => BaseGrid.js} (62%) delete mode 100644 src/pages/PublicNotice/ListPanel/InProgressTab.js delete mode 100644 src/pages/PublicNotice/ListPanel/PendingPublishTab.js create mode 100644 src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js create mode 100644 src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js create mode 100644 src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js create mode 100644 src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js delete mode 100644 src/pages/PublicNotice/ListPanel/SearchTab.js diff --git a/src/pages/PublicNotice/ListPanel/SubmittedTab.js b/src/pages/PublicNotice/ListPanel/BaseGrid.js similarity index 62% rename from src/pages/PublicNotice/ListPanel/SubmittedTab.js rename to src/pages/PublicNotice/ListPanel/BaseGrid.js index 333e4e2..f1c7d2a 100644 --- a/src/pages/PublicNotice/ListPanel/SubmittedTab.js +++ b/src/pages/PublicNotice/ListPanel/BaseGrid.js @@ -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}
+ {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', diff --git a/src/pages/PublicNotice/ListPanel/InProgressTab.js b/src/pages/PublicNotice/ListPanel/InProgressTab.js deleted file mode 100644 index d782af8..0000000 --- a/src/pages/PublicNotice/ListPanel/InProgressTab.js +++ /dev/null @@ -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 ; - }, - } - ]; - - return ( -
- -
- ); -} diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js index 07909d8..91ffc46 100644 --- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js +++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js @@ -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}
+ {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', diff --git a/src/pages/PublicNotice/ListPanel/PendingPublishTab.js b/src/pages/PublicNotice/ListPanel/PendingPublishTab.js deleted file mode 100644 index efbdf3b..0000000 --- a/src/pages/PublicNotice/ListPanel/PendingPublishTab.js +++ /dev/null @@ -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 ; - }, - } - ]; - - return ( -
- -
- ); -} diff --git a/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js new file mode 100644 index 0000000..6111c8d --- /dev/null +++ b/src/pages/PublicNotice/ListPanel/PublicNoteStatusUtils.js @@ -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 ( +
{text}
+ ) +} \ No newline at end of file diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js new file mode 100644 index 0000000..620579a --- /dev/null +++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js @@ -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 ( + + +
+ {/*row 1*/} + + + Search Form + + + + {/*row 2*/} + + + + + + + + + + + + + + + + + + + { + if (newValue !== null) { + setStatus(newValue); + } + }} + renderInput={(params) => ( + + )} + /> + + {/**/} + {/* */} + {/**/} + + + + + {/*last row*/} + + + + + + + + + + +
+ + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js new file mode 100644 index 0000000..6b7c73f --- /dev/null +++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js @@ -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 ( + + {/*row 1*/} + + + + {/*row 2*/} + + + + + + + + + ); +}; + +export default UserSearchPage_Individual; diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js new file mode 100644 index 0000000..3cb57ea --- /dev/null +++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js @@ -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}
+ {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 ; + }, + } + ]; + + + return ( +
+ + +
+ ); +} diff --git a/src/pages/PublicNotice/ListPanel/SearchTab.js b/src/pages/PublicNotice/ListPanel/SearchTab.js deleted file mode 100644 index 9119fa1..0000000 --- a/src/pages/PublicNotice/ListPanel/SearchTab.js +++ /dev/null @@ -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 [ - } - label="查看詳細" - className="textPrimary" - onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} - color="primary" - />] - }, - } - ]; - - const doSearch=()=>{ - - } - - return ( -
- -
-
- - -
-
- -
- ); -} diff --git a/src/pages/PublicNotice/ListPanel/index.js b/src/pages/PublicNotice/ListPanel/index.js index be46778..514b950 100644 --- a/src/pages/PublicNotice/ListPanel/index.js +++ b/src/pages/PublicNotice/ListPanel/index.js @@ -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 ? - + : - + 我的公共啟事 - - + + {/*col 2*/} - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js index fa1901d..16a41e3 100644 --- a/src/utils/ComboData.js +++ b/src/utils/ComboData.js @@ -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' }, +]; \ No newline at end of file