@@ -74,62 +74,66 @@ function Header(props) { | |||||
isGLDLoggedIn() ? | isGLDLoggedIn() ? | ||||
<div id="adminContent"> | <div id="adminContent"> | ||||
<li> | <li> | ||||
<Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:1}} >Dashboard</Typography></Link> | |||||
<Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 1 }} >Dashboard</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="application" to='/application/search'><Typography variant={"headerTitle1"} sx={{ml:1}}>Application</Typography></Link> | |||||
<Link className="application" to='/application/search'><Typography variant={"headerTitle1"} sx={{ ml: 1 }}>Application</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ml:2}}>Proof</Typography></Link> | |||||
<Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Proof</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="payment" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>Payment</Typography></Link> | |||||
<Link className="payment" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="client" ><Typography variant={"headerTitle1"} sx={{ml:2}}>Client</Typography><KeyboardArrowDownIcon /></Link> | |||||
<Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon /></Link> | |||||
<ul className='dropdown'> | <ul className='dropdown'> | ||||
<li> | <li> | ||||
<Link className="userSearchview" to='/userSearchview'><Typography variant={"headerTitle1"} sx={{ml:2}}>Users (GLD)</Typography></Link> | |||||
<Link className="userSearchview" to='/userSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (GLD)</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="indUser" to='/indUser'><Typography variant={"headerTitle1"} sx={{ml:2}}>Users (Individual)</Typography></Link> | |||||
<Link className="indUser" to='/indUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Individual)</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ml:2}}>Users (Organization)</Typography></Link> | |||||
<Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Organization)</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ml:2}}>Organization</Typography></Link> | |||||
<Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Organization</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="usergroupSearchview" to='/usergroupSearchview'><Typography variant={"headerTitle1"} sx={{ml:2}}>User Group</Typography></Link> | |||||
<Link className="usergroupSearchview" to='/usergroupSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>User Group</Typography></Link> | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ml:2}}>Logout</Typography></Link> | |||||
<Link className="emailTemplate" to='/emailTemplate'><Typography variant={"headerTitle1"} sx={{ ml: 0 }}>Email Template</Typography></Link> | |||||
</li> | |||||
<li> | |||||
<Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Logout</Typography></Link> | |||||
</li> | </li> | ||||
</div> | </div> | ||||
: | : | ||||
<div id="individualUserContent"> | <div id="individualUserContent"> | ||||
<li> | <li> | ||||
<Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>主頁</Typography></Link> | |||||
<Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>主頁</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="myDocumet" to='/publicNotice'><Typography variant={"headerTitle1"} sx={{ml:0.5}}>我的公共啟事</Typography></Link> | |||||
<Link className="myDocumet" to='/publicNotice'><Typography variant={"headerTitle1"} sx={{ ml: 0.5 }}>我的公共啟事</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ml:1.5}}>校對記錄</Typography></Link> | |||||
<Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ml:1.5}}>付款記錄</Typography></Link> | |||||
<Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ml:2}}>設定</Typography><KeyboardArrowDownIcon /></Link> | |||||
<Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon /></Link> | |||||
{isPrimaryLoggedIn() ? | {isPrimaryLoggedIn() ? | ||||
<ul className='dropdown'> | <ul className='dropdown'> | ||||
<li> | <li> | ||||
<Link className="manageOrgUser" to='setting/manageUser'><Typography variant={"headerTitle1"} sx={{ml:2}}>公司/機構用戶記錄</Typography></Link> | |||||
<Link className="manageOrgUser" to='setting/manageUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>公司/機構用戶記錄</Typography></Link> | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
: | : | ||||
@@ -137,7 +141,7 @@ function Header(props) { | |||||
} | } | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ml:2}}>登出</Typography></Link> | |||||
<Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登出</Typography></Link> | |||||
</li> | </li> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -145,10 +149,10 @@ function Header(props) { | |||||
const logoutContent = ( | const logoutContent = ( | ||||
<div> | <div> | ||||
<li> | <li> | ||||
<Link className="login" to='/login'><Typography variant={"headerTitle1"} sx={{ml:2}}>登入</Typography></Link> | |||||
<Link className="login" to='/login'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登入</Typography></Link> | |||||
</li> | </li> | ||||
<li> | <li> | ||||
<Link className="register" to='/register'><Typography variant={"headerTitle1"} sx={{ml:2}}>申請</Typography></Link> | |||||
<Link className="register" to='/register'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>申請</Typography></Link> | |||||
</li> | </li> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -0,0 +1,311 @@ | |||||
// material-ui | |||||
import { | |||||
FormControl, | |||||
Grid, | |||||
Typography, | |||||
FormLabel, | |||||
OutlinedInput, | |||||
Button, | |||||
// TextField, | |||||
// Autocomplete, | |||||
} from '@mui/material'; | |||||
// import { useFormik } from 'formik'; | |||||
import * as React from "react"; | |||||
import Loadable from 'components/Loadable'; | |||||
const MainCard = Loadable(React.lazy(() => import('components/MainCard'))); | |||||
import { useForm } from 'react-hook-form'; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const ApplicationDetailCard = ({ | |||||
formData, | |||||
_onSubmit, | |||||
handleDelete | |||||
}) => { | |||||
// const [data, setData] = React.useState({}); | |||||
// React.useEffect(() => { | |||||
// if (formData) { | |||||
// setData(formData); | |||||
// } | |||||
// }, [formData]); | |||||
// const formik = useFormik({ | |||||
// enableReinitialize: true, | |||||
// initialValues: data, | |||||
// }); | |||||
const DisplayField = ({ name, width, value, rows = 1, disabled = false }) => { | |||||
return <OutlinedInput | |||||
fullWidth | |||||
multiline | |||||
disabled={disabled} | |||||
size="small" | |||||
// onChange={formik.handleChange} | |||||
{...register(name, | |||||
{ | |||||
value: value, | |||||
})} | |||||
id={name} | |||||
name={name} | |||||
variant="outlined" | |||||
maxRows={6} | |||||
rows={rows} | |||||
sx={ | |||||
{ | |||||
"& .Mui-disabled": { | |||||
WebkitTextFillColor: "#000000", | |||||
background: "#f8f8f8", | |||||
}, | |||||
// "& .MuiInputBase-input.Mui-disabled": { | |||||
// WebkitTextFillColor: "#000000", | |||||
// background: "#f8f8f8", | |||||
// }, | |||||
width: width ? width : '100%' | |||||
} | |||||
} | |||||
/>; | |||||
} | |||||
const { register, handleSubmit } = useForm() | |||||
// const DisplaySelection = ({ name = "test", value = "", onChange }) => { | |||||
// return <Autocomplete | |||||
// {...register(name)} | |||||
// disablePortal | |||||
// id={name} | |||||
// options={formData} | |||||
// vale={value} | |||||
// onChange={onChange} | |||||
// renderInput={(params) => ( | |||||
// <TextField {...params} | |||||
// InputLabelProps={{ | |||||
// shrink: true | |||||
// }} | |||||
// /> | |||||
// )} | |||||
// /> | |||||
// } | |||||
return ( | |||||
<MainCard | |||||
id={"emailTemplateMainCard"} | |||||
border={false} | |||||
content={false} | |||||
> | |||||
<Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||||
Maintain Email Template | |||||
</Typography> | |||||
<form onSubmit={handleSubmit(_onSubmit)}> | |||||
<Grid container direction="column"> | |||||
<Grid item xs={12} md={12} lg={12}> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
{/* <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Email Key:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<DisplaySelection | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> */} | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel required>Key:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<DisplayField | |||||
name={"tempKey"} | |||||
value={formData?.tempKey} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Description:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<FormControl variant="outlined" fullWidth disabled > | |||||
<DisplayField | |||||
name="description" | |||||
value={formData?.description} | |||||
/> | |||||
</FormControl> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={1.5} lg={1.5} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Params:</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={10.5} lg={10.5}> | |||||
<DisplayField | |||||
name="params" | |||||
value={formData?.params} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Subject (Cht):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<DisplayField | |||||
name="subjectCht" | |||||
value={formData?.subjectCht} | |||||
rows={2} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center" sx={{ mb: 1 }}> | |||||
<Grid item xs={12} md={1.5} lg={1.5} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Content (Cht):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={10.5} lg={10.5}> | |||||
<DisplayField | |||||
name="contentCht" | |||||
value={formData?.contentCht} | |||||
rows={4} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Subject (Chs):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<DisplayField | |||||
name="subjectChs" | |||||
value={formData?.subjectChs} | |||||
rows={2} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center" sx={{ mb: 1 }}> | |||||
<Grid item xs={12} md={1.5} lg={1.5} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Content (Chs):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={10.5} lg={10.5}> | |||||
<DisplayField | |||||
name="contentChs" | |||||
value={formData?.contentChs} | |||||
rows={4} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}> | |||||
<Grid container alignItems={"center"}> | |||||
<Grid item xs={12} md={3} lg={3} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Subject (Eng):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={9} lg={9}> | |||||
<DisplayField | |||||
name="subjectEng" | |||||
value={formData?.subjectEng} | |||||
rows={2} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center" sx={{ mb: 1 }}> | |||||
<Grid item xs={12} md={1.5} lg={1.5} | |||||
sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<FormLabel>Content (Eng):</FormLabel> | |||||
</Grid> | |||||
<Grid item xs={12} md={10.5} lg={10.5}> | |||||
<DisplayField | |||||
name="contentEng" | |||||
value={formData?.contentEng} | |||||
rows={4} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
{/*bottom button*/} | |||||
<Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center"> | |||||
<Grid container maxWidth justifyContent="flex-end"> | |||||
<Grid item sx={{ ml: 3, mr: 3 }}> | |||||
<Button | |||||
size="large" | |||||
color="error" | |||||
variant="contained" | |||||
onClick={handleDelete} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}} | |||||
> | |||||
<Typography variant="h5">Delete</Typography> | |||||
</Button> | |||||
</Grid> | |||||
<Grid item sx={{ ml: 3, mr: 3 }}> | |||||
<Button | |||||
size="large" | |||||
variant="contained" | |||||
type="submit" | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}} | |||||
> | |||||
<Typography variant="h5">Save</Typography> | |||||
</Button> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</form> | |||||
</MainCard> | |||||
); | |||||
}; | |||||
export default ApplicationDetailCard; |
@@ -0,0 +1,155 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Box, | |||||
Button | |||||
} from '@mui/material'; | |||||
import * as UrlUtils from "utils/ApiPathConst"; | |||||
import * as React from "react"; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import Loadable from 'components/Loadable'; | |||||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||||
const EmailTemplate = Loadable(React.lazy(() => import('pages/EmailTemplate/Detail_GLD/EmailTemplateDetails'))) | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
import { useParams } from 'react-router-dom'; | |||||
import { useNavigate } from 'react-router-dom'; | |||||
import axios from 'axios'; | |||||
import { notifyDeleteSuccess, notifySaveSuccess } from 'utils/CommonFunction'; | |||||
const BackgroundHead = { | |||||
backgroundImage: `url(${titleBackgroundImg})`, | |||||
width: '100%', | |||||
height: '100%', | |||||
backgroundSize: 'contain', | |||||
backgroundRepeat: 'no-repeat', | |||||
backgroundColor: '#0C489E', | |||||
backgroundPosition: 'right' | |||||
} | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const Index = () => { | |||||
const [record, setRecord] = React.useState(null); | |||||
const [onReady, setOnReady] = React.useState(false); | |||||
const params = useParams() | |||||
const navigate = useNavigate() | |||||
React.useLayoutEffect(() => { | |||||
loadForm(); | |||||
}, []); | |||||
React.useLayoutEffect(() => { | |||||
if(record !== null || params.id <= 0) setOnReady(true); | |||||
}, [record]); | |||||
const loadForm = () => { | |||||
if (params.id > 0) { | |||||
axios.get(`${UrlUtils.GET_EMAIL}/${params.id}`) | |||||
.then((response) => { | |||||
if (response.status === 200) { | |||||
console.log(response) | |||||
setRecord(response.data.data) | |||||
} | |||||
}) | |||||
.catch(error => { | |||||
console.log(error); | |||||
return false; | |||||
}); | |||||
} | |||||
// HttpUtils.get({ | |||||
// url: UrlUtils.GET_EMAIL, | |||||
// params: { | |||||
// id: params.id | |||||
// }, | |||||
// onSuccess: (responseData) => { | |||||
// setRecord(responseData); | |||||
// } | |||||
// }); | |||||
} | |||||
const onSubmit = (data) => { | |||||
axios.post(`${UrlUtils.POST_EMAIL_SAVE}`, | |||||
{ | |||||
id: params.id > 0 ? params.id : null, | |||||
contentChs: data?.contentChs, | |||||
contentCht: data?.contentCht, | |||||
contentEng: data?.contentEng, | |||||
description: data?.description, | |||||
tempKey: data?.tempKey, | |||||
params: data?.params, | |||||
subjectChs: data?.subjectChs, | |||||
subjectCht: data?.subjectCht, | |||||
subjectEng: data?.subjectEng | |||||
} | |||||
).then((response) => { | |||||
if (response.status === 200) { | |||||
// location.reload(); | |||||
navigate('/emailTemplate') | |||||
notifySaveSuccess() | |||||
} | |||||
}) | |||||
.catch(error => { | |||||
console.log(error); | |||||
return false; | |||||
}); | |||||
console.log(data) | |||||
} | |||||
const handleDelete = () => { | |||||
axios.delete(`${UrlUtils.DELETE_EMAIL}/${params.id}`, | |||||
) | |||||
.then((response) => { | |||||
console.log(response) | |||||
if (response.status === 204) { | |||||
// location.reload(); | |||||
navigate('/emailTemplate'); | |||||
notifyDeleteSuccess() | |||||
} | |||||
}) | |||||
.catch(error => { | |||||
console.log(error); | |||||
return false; | |||||
}); | |||||
} | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent /> | |||||
: | |||||
( | |||||
<Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid item xs={12} width="100%"> | |||||
<div style={BackgroundHead} width="100%"> | |||||
<Stack direction="row" height='70px'> | |||||
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Email Template</Typography> | |||||
</Stack> | |||||
</div> | |||||
</Grid> | |||||
<Grid item xs={12} width="100%"> | |||||
<Button title="Back" sx={{ ml: 6, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/emailTemplate") }}> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | |||||
</Grid> | |||||
{/*row 1*/} | |||||
<Grid item xs={12} md={12} width="100%"> | |||||
<Grid item xs={12} md={12} sx={{ pt: 2, ml: 6, mr: 6, mb: 6}}> | |||||
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||||
<EmailTemplate | |||||
formData={record} | |||||
_onSubmit={onSubmit} | |||||
handleDelete={handleDelete} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -0,0 +1,100 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { GridActionsCellItem, } from "@mui/x-data-grid"; | |||||
import { FiDataGrid } from "components/FiDataGrid"; | |||||
import EditIcon from '@mui/icons-material/Edit'; | |||||
import { useEffect } from "react"; | |||||
import { useNavigate } from "react-router-dom"; | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function EmailTemplateTable({ recordList }) { | |||||
const [rows, setRows] = React.useState(recordList); | |||||
const navigate = useNavigate() | |||||
useEffect(() => { | |||||
setRows(recordList); | |||||
}, [recordList]); | |||||
const handleEditClick = (id) => () => { | |||||
navigate('/emailTemplate/' + id); | |||||
}; | |||||
const columns = [ | |||||
{ | |||||
field: 'actions', | |||||
type: 'actions', | |||||
headerName: 'Actions', | |||||
width: 100, | |||||
cellClassName: 'actions', | |||||
getActions: ({ id }) => { | |||||
return [ | |||||
<GridActionsCellItem | |||||
key="OutSave" | |||||
icon={<EditIcon />} | |||||
label="Edit" | |||||
className="textPrimary" | |||||
onClick={handleEditClick(id)} | |||||
color="primary" | |||||
/>] | |||||
}, | |||||
}, | |||||
{ | |||||
id: 'tempKey', | |||||
field: 'tempKey', | |||||
headerName: 'Key', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'description', | |||||
field: 'description', | |||||
headerName: 'Description', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'params', | |||||
field: 'params', | |||||
headerName: 'Params', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'subjectCht', | |||||
field: 'subjectCht', | |||||
headerName: 'SubjectCht', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'subjectChs', | |||||
field: 'subjectChs', | |||||
headerName: 'SubjectChs', | |||||
flex: 1, | |||||
}, | |||||
{ | |||||
id: 'subjectEng', | |||||
field: 'subjectEng', | |||||
headerName: 'SubjectEng', | |||||
flex: 1, | |||||
}, | |||||
]; | |||||
function handleRowDoubleClick(params) { | |||||
navigate('/emailTemplate/' + params.id); | |||||
} | |||||
return ( | |||||
<div style={{ height: "fit-content", width: '100%' }}> | |||||
<FiDataGrid | |||||
rows={rows} | |||||
columns={columns} | |||||
initialState={{ | |||||
pagination: { | |||||
paginationModel: { page: 0, pageSize: 5 }, | |||||
}, | |||||
}} | |||||
onRowDoubleClick={handleRowDoubleClick} | |||||
getRowHeight={() => 'auto'} | |||||
/> | |||||
</div> | |||||
); | |||||
} |
@@ -0,0 +1,100 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Button, | |||||
} from '@mui/material'; | |||||
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 EmailTemplateTable = Loadable(React.lazy(() => import('pages/EmailTemplate/Search_GLD/DataGrid'))) | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; | |||||
import MainCard from 'components/MainCard'; | |||||
const BackgroundHead = { | |||||
backgroundImage: `url(${titleBackgroundImg})`, | |||||
width: '100%', | |||||
height: '100%', | |||||
backgroundSize: 'contain', | |||||
backgroundRepeat: 'no-repeat', | |||||
backgroundColor: '#0C489E', | |||||
backgroundPosition: 'right' | |||||
} | |||||
import { useNavigate } from "react-router"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const Index = () => { | |||||
const [record, setRecord] = React.useState([]); | |||||
const [onReady, setOnReady] = React.useState(false); | |||||
const navigate = useNavigate() | |||||
React.useLayoutEffect(() => { | |||||
loadForm(); | |||||
}, []); | |||||
React.useLayoutEffect(() => { | |||||
setOnReady(true); | |||||
}, [record]); | |||||
const loadForm = () => { | |||||
HttpUtils.get({ | |||||
url: UrlUtils.GET_EMAIL_LIST, | |||||
onSuccess: (responseData) => { | |||||
setRecord(responseData); | |||||
} | |||||
}); | |||||
} | |||||
return ( | |||||
!onReady ? | |||||
<LoadingComponent /> | |||||
: | |||||
( | |||||
<Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid item xs={12} width="100%"> | |||||
<div style={BackgroundHead} width="100%"> | |||||
<Stack direction="row" height='70px'> | |||||
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Email Template</Typography> | |||||
</Stack> | |||||
</div> | |||||
</Grid> | |||||
{/*row 1*/} | |||||
<Grid item xs={12} md={12} lg={12} width="100%"> | |||||
<MainCard elevation={0} | |||||
border={false} | |||||
content={false} | |||||
> | |||||
<EmailTemplateTable | |||||
recordList={record} | |||||
/> | |||||
</MainCard> | |||||
</Grid> | |||||
<Grid container direction="row" | |||||
justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}> | |||||
<Button | |||||
size="large" | |||||
variant="contained" | |||||
onClick={()=>{navigate('/emailTemplate/-1')}} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end' | |||||
}}> | |||||
<AddCircleOutlineIcon sx={{ mb: 0.5 }} /> | |||||
<Typography sx={{ ml: 1 }} variant="h5">New Email Template</Typography> | |||||
</Button> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid > | |||||
) | |||||
); | |||||
}; | |||||
export default Index; |
@@ -17,6 +17,8 @@ import Checkbox from "@mui/material/Checkbox"; | |||||
import * as React from "react"; | import * as React from "react"; | ||||
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; | import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; | ||||
import { useNavigate } from "react-router"; | import { useNavigate } from "react-router"; | ||||
import axios from "axios"; | |||||
import { GET_EMAIL_LIST } from 'utils/ApiPathConst'; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
@@ -53,6 +55,13 @@ const UserSearchForm = ({ applySearch }) => { | |||||
setType([]); | setType([]); | ||||
setLocked(false); | setLocked(false); | ||||
reset(); | reset(); | ||||
axios.get(`${GET_EMAIL_LIST}`) | |||||
.then(r => { | |||||
console.log(r) | |||||
}) | |||||
.catch(err => { | |||||
console.log(err) | |||||
}) | |||||
} | } | ||||
const handleNewUserClick = () => { | const handleNewUserClick = () => { | ||||
@@ -4,8 +4,8 @@ import axios from 'axios'; | |||||
import { apiPath } from 'auth/utils'; | import { apiPath } from 'auth/utils'; | ||||
const TestMailPage = () => { | const TestMailPage = () => { | ||||
const [host, setHost] = useState(apiPath+'/test'); | |||||
const [mail, setMail] = useState(''); | |||||
const [host, setHost] = useState(apiPath+'/email/test'); | |||||
const [mail, setMail] = useState('register'); | |||||
const hostChange = (event) => { | const hostChange = (event) => { | ||||
setHost(event.target.value); | setHost(event.target.value); | ||||
@@ -16,8 +16,8 @@ const TestMailPage = () => { | |||||
}; | }; | ||||
const doMailTest = () => { | const doMailTest = () => { | ||||
axios.post(host, { | |||||
email: mail | |||||
axios.get(host, { | |||||
tempKey: mail | |||||
}) | }) | ||||
.then((response) => { | .then((response) => { | ||||
console.log(response.data); | console.log(response.data); | ||||
@@ -20,6 +20,8 @@ const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDeta | |||||
const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); | const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage'))); | ||||
const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); | const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage'))); | ||||
const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage_FromUser'))); | const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage_FromUser'))); | ||||
const EmailTemplatePage = Loadable(lazy(() => import('pages/EmailTemplate/Search_GLD'))); | |||||
const EmailTemplateDetailPage = Loadable(lazy(() => import('pages/EmailTemplate/Detail_GLD'))); | |||||
// ==============================|| AUTH ROUTING ||============================== // | // ==============================|| AUTH ROUTING ||============================== // | ||||
@@ -80,6 +82,14 @@ const SettingRoutes = { | |||||
path: 'passwordpolicy', | path: 'passwordpolicy', | ||||
element: <PasswordPolicyPage /> | element: <PasswordPolicyPage /> | ||||
}, | }, | ||||
{ | |||||
path: 'emailTemplate', | |||||
element: <EmailTemplatePage/> | |||||
}, | |||||
{ | |||||
path: '/emailTemplate/:id', | |||||
element: <EmailTemplateDetailPage/> | |||||
}, | |||||
] | ] | ||||
}; | }; | ||||
@@ -91,4 +91,11 @@ export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST | |||||
//User Group | //User Group | ||||
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; | |||||
export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save'; | |||||
export const GET_EMAIL_LIST = apiPath+'/email/list'; | |||||
export const GET_EMAIL_COMBO = apiPath+'/email/combo'; | |||||
export const GET_EMAIL = apiPath+'/email/load'; | |||||
export const POST_EMAIL_SAVE = apiPath+'/email/save'; | |||||
export const DELETE_EMAIL = apiPath+'/email/delete'; |