parent
ff4955f351
commit
51bc985152
@ -1,224 +0,0 @@
|
||||
import { useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { useAlert } from 'react-alert';
|
||||
// material-ui
|
||||
import { Button, Divider, FormControl, Grid, MenuItem, Select, TextField } from '@mui/material';
|
||||
|
||||
import ReactQuill from 'react-quill';
|
||||
import 'react-quill/dist/quill.snow.css';
|
||||
|
||||
// project imports
|
||||
import InputLabel from 'ui-component/extended/Form/InputLabel';
|
||||
|
||||
import { Delete, List, Save } from '@mui/icons-material';
|
||||
import { fileDownload } from 'apis/common';
|
||||
import FileForm from 'views/cmm/file-ctl/FileForm';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const PublicBoardForm = (props) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const { create, setOpen, handleModalSave, rowData = {}, owner = false } = props;
|
||||
const alert = useAlert();
|
||||
const quillRef = useRef();
|
||||
const [dept, setDept] = useState(create ? '주정차위반' : rowData.inDept);
|
||||
const [subject, setSubject] = useState(create ? '' : rowData.inTitle);
|
||||
const [contents, setContents] = useState(create ? '' : rowData.inContents);
|
||||
const [filesInfo, setFilesInfo] = useState();
|
||||
const [selectedFile, setSelectedFile] = useState(create ? '' : rowData.inFilename); // 파일
|
||||
// const [fileData, setFileData] = useState();
|
||||
|
||||
const onList = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const onSave = () => {
|
||||
// TODO : validation check 추가
|
||||
const formData = new FormData();
|
||||
formData.append('inCode', rowData.inCode ?? '');
|
||||
formData.append('inTitle', subject);
|
||||
formData.append('inDept', dept);
|
||||
formData.append('inContents', contents);
|
||||
formData.append('inFilename', selectedFile ?? '');
|
||||
|
||||
if (filesInfo && filesInfo.length > 0) {
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (let i = 0; i < filesInfo.length; i++) formData.append('files', filesInfo[i]);
|
||||
}
|
||||
handleModalSave('SAVE', formData);
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
handleModalSave('DELETE', rowData.inCode);
|
||||
};
|
||||
|
||||
const modules = useMemo(
|
||||
() => ({
|
||||
toolbar: {
|
||||
container: [
|
||||
[{ header: [1, 2, false] }],
|
||||
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
||||
['link'],
|
||||
[{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
|
||||
['clean']
|
||||
// ['image', 'video']
|
||||
]
|
||||
}
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formats = useMemo(
|
||||
() => [
|
||||
// 'font',
|
||||
'header',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strike',
|
||||
'blockquote',
|
||||
'list',
|
||||
'bullet',
|
||||
'indent',
|
||||
'link',
|
||||
'align',
|
||||
'color',
|
||||
'background'
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const onChangeFile = (file) => {
|
||||
setSelectedFile(file.name);
|
||||
setFilesInfo([file]);
|
||||
};
|
||||
|
||||
// const onChangeFile = (e) => {
|
||||
// setSelectedFile(e.target.files[0].name);
|
||||
// setFilesInfo(e.target.files);
|
||||
// };
|
||||
|
||||
const handleFileDownload = () => {
|
||||
if (!rowData.inFilename) {
|
||||
alert.show('등록된 파일이 없습니다.');
|
||||
return;
|
||||
}
|
||||
fileDownload(rowData.inCode, rowData.inFilename, alert).then(() => {});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid mt={2}>
|
||||
<Grid container spacing={1} item xs={12} mb={1}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
size="small"
|
||||
disabled={!create}
|
||||
required
|
||||
label="제목"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel required>업무구분</InputLabel>
|
||||
<Select
|
||||
size="small"
|
||||
disabled={!create}
|
||||
label="업무구분"
|
||||
required
|
||||
value={dept}
|
||||
onChange={(e) => setDept(e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="주정차위반">주정차위반</MenuItem>
|
||||
<MenuItem value="장애인위반">장애인위반</MenuItem>
|
||||
<MenuItem value="기타">기타</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<TextField size="small" disabled label="작성자" value={rowData.inName} fullWidth />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} item xs={12} mt={1}>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<TextField size="small" disabled label="등록일" value={rowData.inNalja} fullWidth />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<TextField size="small" disabled label="번호" value={rowData.inCode} fullWidth />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<TextField size="small" disabled label="조회수" value={rowData.inHit} fullWidth />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} item xs={12} mt={1}>
|
||||
<Grid item xs={12}>
|
||||
<ReactQuill
|
||||
ref={(element) => {
|
||||
if (element !== null) {
|
||||
quillRef.current = element;
|
||||
}
|
||||
}}
|
||||
readOnly={!create}
|
||||
value={contents}
|
||||
onChange={setContents}
|
||||
modules={modules}
|
||||
formats={formats}
|
||||
theme="snow"
|
||||
placeholder="내용을 입력해주세요."
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} item xs={12} mt={1}>
|
||||
<Grid item sm={6}>
|
||||
<FileForm
|
||||
isDownload={rowData.inFilename}
|
||||
isDisabled={false}
|
||||
labelName="첨부파일"
|
||||
savedFilename={rowData.inFilename}
|
||||
selectedFile={selectedFile}
|
||||
handleChangeFile={onChangeFile}
|
||||
handleFileDownload={handleFileDownload}
|
||||
alert={alert}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} item xs={12} mt={1} mb={1}>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item container spacing={0.5} xs={12}>
|
||||
<Grid item>
|
||||
<Button variant="contained" size="small" startIcon={<List />} onClick={onList}>
|
||||
목록
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item style={{ marginLeft: 'auto' }}>
|
||||
<Button disabled={false} variant="contained" size="small" startIcon={<Save />} onClick={onSave}>
|
||||
저장
|
||||
</Button>
|
||||
</Grid>
|
||||
{!create && (
|
||||
<Grid item>
|
||||
<Button disabled={false} variant="contained" size="small" startIcon={<Delete />} onClick={onRemove}>
|
||||
삭제
|
||||
</Button>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
PublicBoardForm.propTypes = {
|
||||
rowData: PropTypes.object.isRequired,
|
||||
handleModalSave: PropTypes.func.isRequired,
|
||||
setOpen: PropTypes.func.isRequired,
|
||||
owner: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default PublicBoardForm;
|
||||
@ -0,0 +1,215 @@
|
||||
import { useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { useAlert } from 'react-alert';
|
||||
// material-ui
|
||||
import { Button, Divider, FormControl, Grid, MenuItem, Select, TextField } from '@mui/material';
|
||||
|
||||
import ReactQuill from 'react-quill';
|
||||
import 'react-quill/dist/quill.snow.css';
|
||||
|
||||
// project imports
|
||||
import InputLabel from 'ui-component/extended/Form/InputLabel';
|
||||
|
||||
import { Delete, List, Save } from '@mui/icons-material';
|
||||
import { fileDownload } from 'apis/common';
|
||||
import FileForm from 'views/cmm/file-ctl/FileForm';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ModifyPublicBoardForm = (props) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const { setOpen, handleModalSave, rowData = {}, owner } = props;
|
||||
const alert = useAlert();
|
||||
const quillRef = useRef();
|
||||
const [dept, setDept] = useState(rowData?.inDept);
|
||||
const [subject, setSubject] = useState(rowData?.inTitle);
|
||||
const [contents, setContents] = useState(rowData?.inContents);
|
||||
const [filesInfo, setFilesInfo] = useState();
|
||||
const [selectedFile, setSelectedFile] = useState(rowData?.inFilename); // 파일
|
||||
// const [fileData, setFileData] = useState();
|
||||
|
||||
const onList = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const onSave = () => {
|
||||
// TODO : validation check 추가
|
||||
const formData = new FormData();
|
||||
formData.append('inCode', rowData.inCode ?? '');
|
||||
formData.append('inTitle', subject);
|
||||
formData.append('inDept', dept);
|
||||
formData.append('inContents', contents);
|
||||
formData.append('inFilename', selectedFile ?? '');
|
||||
|
||||
if (filesInfo && filesInfo.length > 0) {
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (let i = 0; i < filesInfo.length; i++) formData.append('files', filesInfo[i]);
|
||||
}
|
||||
handleModalSave('SAVE', formData);
|
||||
};
|
||||
|
||||
const onRemove = () => {
|
||||
handleModalSave('DELETE', rowData.inCode);
|
||||
};
|
||||
|
||||
const modules = useMemo(
|
||||
() => ({
|
||||
toolbar: {
|
||||
container: [
|
||||
[{ header: [1, 2, false] }],
|
||||
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
||||
['link'],
|
||||
[{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
|
||||
['clean']
|
||||
// ['image', 'video']
|
||||
]
|
||||
}
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formats = useMemo(
|
||||
() => [
|
||||
// 'font',
|
||||
'header',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strike',
|
||||
'blockquote',
|
||||
'list',
|
||||
'bullet',
|
||||
'indent',
|
||||
'link',
|
||||
'align',
|
||||
'color',
|
||||
'background'
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const onChangeFile = (file) => {
|
||||
setSelectedFile(file.name);
|
||||
setFilesInfo([file]);
|
||||
};
|
||||
|
||||
const handleFileDownload = () => {
|
||||
if (!rowData.inFilename) {
|
||||
alert.show('등록된 파일이 없습니다.');
|
||||
return;
|
||||
}
|
||||
fileDownload(rowData.inCode, rowData.inFilename, alert).then(() => {});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container spacing={1} mt={1.5}>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
size="small"
|
||||
disabled={!owner}
|
||||
required
|
||||
label="제목"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel required>업무구분</InputLabel>
|
||||
<Select
|
||||
size="small"
|
||||
disabled={!owner}
|
||||
label="업무구분"
|
||||
required
|
||||
value={dept}
|
||||
onChange={(e) => setDept(e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="주정차위반">주정차위반</MenuItem>
|
||||
<MenuItem value="장애인위반">장애인위반</MenuItem>
|
||||
<MenuItem value="기타">기타</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<TextField size="small" disabled label="작성자" value={rowData.inName} fullWidth />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1}>
|
||||
<Grid item xs={3}>
|
||||
<TextField size="small" disabled label="등록일" value={rowData.inNalja} fullWidth />
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<TextField size="small" disabled label="번호" value={rowData.inCode} fullWidth />
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<TextField size="small" disabled label="조회수" value={rowData.inHit} fullWidth />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1}>
|
||||
<Grid item xs={12}>
|
||||
<ReactQuill
|
||||
ref={(element) => {
|
||||
if (element !== null) {
|
||||
quillRef.current = element;
|
||||
}
|
||||
}}
|
||||
readOnly={!owner}
|
||||
value={contents}
|
||||
onChange={setContents}
|
||||
modules={modules}
|
||||
formats={formats}
|
||||
theme="snow"
|
||||
placeholder="내용을 입력해주세요."
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1}>
|
||||
<Grid item xs={8}>
|
||||
<FileForm
|
||||
isDownload={typeof rowData?.inFilename === 'undefined'}
|
||||
isDisabled={!owner}
|
||||
labelName="첨부파일"
|
||||
savedFilename={rowData.inFilename}
|
||||
selectedFile={selectedFile}
|
||||
handleChangeFile={onChangeFile}
|
||||
handleFileDownload={handleFileDownload}
|
||||
alert={alert}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1} mb={1}>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item container spacing={0.5}>
|
||||
<Grid item>
|
||||
<Button variant="contained" size="small" startIcon={<List />} onClick={onList}>
|
||||
목록
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item style={{ marginLeft: 'auto' }}>
|
||||
<Button disabled={!owner} variant="contained" size="small" startIcon={<Save />} onClick={onSave}>
|
||||
저장
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button disabled={!owner} variant="contained" size="small" startIcon={<Delete />} onClick={onRemove}>
|
||||
삭제
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ModifyPublicBoardForm.propTypes = {
|
||||
rowData: PropTypes.object.isRequired,
|
||||
handleModalSave: PropTypes.func.isRequired,
|
||||
setOpen: PropTypes.func.isRequired,
|
||||
owner: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default ModifyPublicBoardForm;
|
||||
@ -0,0 +1,167 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { useAlert } from 'react-alert';
|
||||
// material-ui
|
||||
import { Button, Divider, FormControl, Grid, MenuItem, Select, TextField } from '@mui/material';
|
||||
|
||||
import ReactQuill from 'react-quill';
|
||||
import 'react-quill/dist/quill.snow.css';
|
||||
|
||||
// project imports
|
||||
import InputLabel from 'ui-component/extended/Form/InputLabel';
|
||||
|
||||
import { List, Save } from '@mui/icons-material';
|
||||
import FileForm from 'views/cmm/file-ctl/FileForm';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const NewPublicBoardForm = (props) => {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const { setOpen, handleModalSave, rowData = {} } = props;
|
||||
const alert = useAlert();
|
||||
const quillRef = useRef();
|
||||
const [dept, setDept] = useState('');
|
||||
const [subject, setSubject] = useState('');
|
||||
const [contents, setContents] = useState('');
|
||||
const [filesInfo, setFilesInfo] = useState();
|
||||
const [selectedFile, setSelectedFile] = useState(''); // 파일
|
||||
// const [fileData, setFileData] = useState();
|
||||
|
||||
const onList = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const onSave = () => {
|
||||
// TODO : validation check 추가
|
||||
const formData = new FormData();
|
||||
formData.append('inTitle', subject);
|
||||
formData.append('inDept', dept);
|
||||
formData.append('inContents', contents);
|
||||
formData.append('inFilename', selectedFile ?? '');
|
||||
|
||||
if (filesInfo && filesInfo.length > 0) {
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (let i = 0; i < filesInfo.length; i++) formData.append('files', filesInfo[i]);
|
||||
}
|
||||
handleModalSave('SAVE', formData);
|
||||
};
|
||||
|
||||
const modules = useMemo(
|
||||
() => ({
|
||||
toolbar: {
|
||||
container: [
|
||||
[{ header: [1, 2, false] }],
|
||||
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
||||
['link'],
|
||||
[{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
|
||||
['clean']
|
||||
// ['image', 'video']
|
||||
]
|
||||
}
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formats = useMemo(
|
||||
() => [
|
||||
// 'font',
|
||||
'header',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strike',
|
||||
'blockquote',
|
||||
'list',
|
||||
'bullet',
|
||||
'indent',
|
||||
'link',
|
||||
'align',
|
||||
'color',
|
||||
'background'
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const onChangeFile = (file) => {
|
||||
setSelectedFile(file.name);
|
||||
setFilesInfo([file]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDept('주정차위반');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container spacing={1} mt={1.5}>
|
||||
<Grid item xs={8}>
|
||||
<TextField size="small" required label="제목" value={subject} onChange={(e) => setSubject(e.target.value)} fullWidth />
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel required>업무구분</InputLabel>
|
||||
<Select size="small" label="업무구분" required value={dept} onChange={(e) => setDept(e.target.value)} fullWidth>
|
||||
<MenuItem value="주정차위반">주정차위반</MenuItem>
|
||||
<MenuItem value="장애인위반">장애인위반</MenuItem>
|
||||
<MenuItem value="기타">기타</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1}>
|
||||
<Grid item xs={12}>
|
||||
<ReactQuill
|
||||
ref={(element) => {
|
||||
if (element !== null) {
|
||||
quillRef.current = element;
|
||||
}
|
||||
}}
|
||||
value={contents}
|
||||
onChange={setContents}
|
||||
modules={modules}
|
||||
formats={formats}
|
||||
theme="snow"
|
||||
placeholder="내용을 입력해주세요."
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1}>
|
||||
<Grid item xs={8}>
|
||||
<FileForm
|
||||
isDownload={rowData.inFilename}
|
||||
isDisabled={false}
|
||||
labelName="첨부파일"
|
||||
savedFilename={rowData.inFilename}
|
||||
selectedFile={selectedFile}
|
||||
handleChangeFile={onChangeFile}
|
||||
alert={alert}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={1} mt={1} mb={1}>
|
||||
<Grid item xs={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item container spacing={0.5} xs={12}>
|
||||
<Grid item>
|
||||
<Button variant="contained" size="small" startIcon={<List />} onClick={onList}>
|
||||
목록
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item style={{ marginLeft: 'auto' }}>
|
||||
<Button disabled={false} variant="contained" size="small" startIcon={<Save />} onClick={onSave}>
|
||||
저장
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
NewPublicBoardForm.propTypes = {
|
||||
rowData: PropTypes.object.isRequired,
|
||||
handleModalSave: PropTypes.func.isRequired,
|
||||
setOpen: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default NewPublicBoardForm;
|
||||
Loading…
Reference in New Issue