|
|
|
@ -4,9 +4,6 @@ import { useAlert } from 'react-alert';
|
|
|
|
|
// material-ui
|
|
|
|
|
import { Button, Divider, FormControl, Grid, MenuItem, Select, TextField } from '@mui/material';
|
|
|
|
|
|
|
|
|
|
// assets
|
|
|
|
|
|
|
|
|
|
// berry ui
|
|
|
|
|
import ReactQuill from 'react-quill';
|
|
|
|
|
import 'react-quill/dist/quill.snow.css';
|
|
|
|
|
|
|
|
|
@ -16,17 +13,18 @@ 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, inCode, inDept, inTitle, inHit, inName, inNalja, inFilename, inContents, setOpen, handleModalSave } = props;
|
|
|
|
|
const { create, setOpen, handleModalSave, rowData = {}, owner = false } = props;
|
|
|
|
|
const alert = useAlert();
|
|
|
|
|
const quillRef = useRef();
|
|
|
|
|
const [dept, setDept] = useState(create ? '주정차위반' : inDept);
|
|
|
|
|
const [subject, setSubject] = useState(create ? '' : inTitle);
|
|
|
|
|
const [contents, setContents] = useState(create ? '' : inContents);
|
|
|
|
|
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 ? '' : inFilename); // 파일
|
|
|
|
|
const [selectedFile, setSelectedFile] = useState(create ? '' : rowData.inFilename); // 파일
|
|
|
|
|
// const [fileData, setFileData] = useState();
|
|
|
|
|
|
|
|
|
|
const onList = () => {
|
|
|
|
@ -35,7 +33,7 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
const onSave = () => {
|
|
|
|
|
// TODO : validation check 추가
|
|
|
|
|
const formData = new FormData();
|
|
|
|
|
formData.append('inCode', inCode ?? '');
|
|
|
|
|
formData.append('inCode', rowData.inCode ?? '');
|
|
|
|
|
formData.append('inTitle', subject);
|
|
|
|
|
formData.append('inDept', dept);
|
|
|
|
|
formData.append('inContents', contents);
|
|
|
|
@ -49,70 +47,46 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onRemove = () => {
|
|
|
|
|
handleModalSave('DELETE', inCode);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const imageHandler = () => {
|
|
|
|
|
const input = document.createElement('input');
|
|
|
|
|
input.setAttribute('type', 'file');
|
|
|
|
|
input.setAttribute('accept', 'image/*');
|
|
|
|
|
input.click();
|
|
|
|
|
|
|
|
|
|
input.onchange = async () => {
|
|
|
|
|
if (input.files) {
|
|
|
|
|
const file = input.files[0];
|
|
|
|
|
const formData = new FormData();
|
|
|
|
|
formData.append('image', file);
|
|
|
|
|
|
|
|
|
|
console.log(formData);
|
|
|
|
|
|
|
|
|
|
// 파일이 input 태그에 담기면 실행 될 함수
|
|
|
|
|
input.onchange = async () => {
|
|
|
|
|
const file = input.files;
|
|
|
|
|
if (file !== null) {
|
|
|
|
|
formData.append('image', file[0]);
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 서저 저장
|
|
|
|
|
// const res = await axios.get('/');
|
|
|
|
|
//
|
|
|
|
|
const url = '/Users/minuk/Pictures/test.png';
|
|
|
|
|
|
|
|
|
|
// 이미지 태그 생성
|
|
|
|
|
const range = quillRef.current?.getEditor().getSelection()?.index;
|
|
|
|
|
if (range !== null && range !== undefined) {
|
|
|
|
|
const quill = quillRef.current?.getEditor();
|
|
|
|
|
|
|
|
|
|
quill?.setSelection(range, 1);
|
|
|
|
|
|
|
|
|
|
quill?.clipboard.dangerouslyPasteHTML(range, `<img src=${url} alt="이미지 태그가 삽입됩니다." />`);
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
handleModalSave('DELETE', rowData.inCode);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const modules = useMemo(
|
|
|
|
|
() => ({
|
|
|
|
|
toolbar: {
|
|
|
|
|
container: [
|
|
|
|
|
[{ header: [1, 2, false] }],
|
|
|
|
|
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
|
|
|
|
[{ size: ['small', false, 'large', 'huge'] }, { color: [] }],
|
|
|
|
|
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, { align: [] }]
|
|
|
|
|
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
|
|
|
|
['link'],
|
|
|
|
|
[{ align: [] }, { color: [] }, { background: [] }], // dropdown with defaults from theme
|
|
|
|
|
['clean']
|
|
|
|
|
// ['image', 'video']
|
|
|
|
|
],
|
|
|
|
|
handlers: {
|
|
|
|
|
image: imageHandler
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
[]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
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]);
|
|
|
|
@ -124,11 +98,11 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
const handleFileDownload = () => {
|
|
|
|
|
if (!inFilename) {
|
|
|
|
|
if (!rowData.inFilename) {
|
|
|
|
|
alert.show('등록된 파일이 없습니다.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
fileDownload(inCode, inFilename, alert).then(() => {});
|
|
|
|
|
fileDownload(rowData.inCode, rowData.inFilename, alert).then(() => {});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
@ -136,11 +110,19 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
<Grid mt={2}>
|
|
|
|
|
<Grid container spacing={1} item xs={12} mb={1}>
|
|
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
|
|
<TextField size="small" required label="제목" value={subject} onChange={(e) => setSubject(e.target.value)} fullWidth />
|
|
|
|
|
<TextField
|
|
|
|
|
size="small"
|
|
|
|
|
disabled={!owner}
|
|
|
|
|
required
|
|
|
|
|
label="제목"
|
|
|
|
|
value={subject}
|
|
|
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
|
|
|
fullWidth
|
|
|
|
|
/>
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid item xs={12} sm={3}>
|
|
|
|
|
<FormControl fullWidth>
|
|
|
|
|
<InputLabel required>진술유형</InputLabel>
|
|
|
|
|
<InputLabel required>업무구분</InputLabel>
|
|
|
|
|
<Select
|
|
|
|
|
size="small"
|
|
|
|
|
disabled={!create}
|
|
|
|
@ -157,18 +139,18 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
</FormControl>
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid item xs={12} sm={3}>
|
|
|
|
|
<TextField size="small" disabled label="작성자" value={inName} fullWidth />
|
|
|
|
|
<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={inNalja} fullWidth />
|
|
|
|
|
<TextField size="small" disabled label="등록일" value={rowData.inNalja} fullWidth />
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid item xs={12} sm={3}>
|
|
|
|
|
<TextField size="small" disabled label="번호" value={inCode} fullWidth />
|
|
|
|
|
<TextField size="small" disabled label="번호" value={rowData.inCode} fullWidth />
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid item xs={12} sm={3}>
|
|
|
|
|
<TextField size="small" disabled label="조회수" value={inHit} fullWidth />
|
|
|
|
|
<TextField size="small" disabled label="조회수" value={rowData.inHit} fullWidth />
|
|
|
|
|
</Grid>
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid container spacing={1} item xs={12} mt={1}>
|
|
|
|
@ -179,9 +161,11 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
quillRef.current = element;
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
readOnly={!owner}
|
|
|
|
|
value={contents}
|
|
|
|
|
onChange={setContents}
|
|
|
|
|
modules={modules}
|
|
|
|
|
formats={formats}
|
|
|
|
|
theme="snow"
|
|
|
|
|
placeholder="내용을 입력해주세요."
|
|
|
|
|
/>
|
|
|
|
@ -190,9 +174,10 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
<Grid container spacing={1} item xs={12} mt={1}>
|
|
|
|
|
<Grid item sm={6}>
|
|
|
|
|
<FileForm
|
|
|
|
|
isDownload={inFilename}
|
|
|
|
|
isDownload={rowData.inFilename}
|
|
|
|
|
isDisabled={!owner}
|
|
|
|
|
labelName="첨부파일"
|
|
|
|
|
savedFilename={inFilename}
|
|
|
|
|
savedFilename={rowData.inFilename}
|
|
|
|
|
selectedFile={selectedFile}
|
|
|
|
|
handleChangeFile={onChangeFile}
|
|
|
|
|
handleFileDownload={handleFileDownload}
|
|
|
|
@ -213,13 +198,13 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
</Button>
|
|
|
|
|
</Grid>
|
|
|
|
|
<Grid item style={{ marginLeft: 'auto' }}>
|
|
|
|
|
<Button variant="contained" size="small" startIcon={<Save />} onClick={onSave}>
|
|
|
|
|
<Button disabled={!owner} variant="contained" size="small" startIcon={<Save />} onClick={onSave}>
|
|
|
|
|
저장
|
|
|
|
|
</Button>
|
|
|
|
|
</Grid>
|
|
|
|
|
{!create && (
|
|
|
|
|
<Grid item>
|
|
|
|
|
<Button variant="contained" size="small" startIcon={<Delete />} onClick={onRemove}>
|
|
|
|
|
<Button disabled={!owner} variant="contained" size="small" startIcon={<Delete />} onClick={onRemove}>
|
|
|
|
|
삭제
|
|
|
|
|
</Button>
|
|
|
|
|
</Grid>
|
|
|
|
@ -228,4 +213,12 @@ const PublicBoardForm = (props) => {
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
PublicBoardForm.propTypes = {
|
|
|
|
|
rowData: PropTypes.object.isRequired,
|
|
|
|
|
handleModalSave: PropTypes.func.isRequired,
|
|
|
|
|
setOpen: PropTypes.func.isRequired,
|
|
|
|
|
owner: PropTypes.bool.isRequired
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default PublicBoardForm;
|
|
|
|
|