450 lines
18 KiB
JavaScript
450 lines
18 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import DatePicker from "react-datepicker";
|
|
import LinearProgress from '@mui/material/LinearProgress';
|
|
import AttachFile from "../../../../components/file/AttachFile";
|
|
import RichTextEditor from "../../../../components/editor/RichTextEditor";
|
|
import AlertDialogSlide from "../../../../components/alert/AlertDialogSlide";
|
|
import LoadingProgress from "../../../../components/progress/LoadingProgress";
|
|
import Col from "react-bootstrap/Col";
|
|
import Row from "react-bootstrap/Row";
|
|
|
|
import CODE from 'constants/code';
|
|
|
|
|
|
import * as EgovNet from 'api/egovFetch';
|
|
import URL from 'constants/url';
|
|
|
|
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
|
|
|
|
import styled from "styled-components";
|
|
|
|
const StyledDiv = styled.div`
|
|
|
|
.board_view2 {
|
|
margin-bottom: 30px;
|
|
dl.file-attach-wrapper dd {
|
|
padding: 14px;
|
|
|
|
.file_attach {
|
|
width: 100%;
|
|
label {
|
|
width: 100%;
|
|
padding: 0px 0px;
|
|
div {
|
|
padding: 30px 10px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.right_col {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
text-align: right;
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
function PopupEditor(props) {
|
|
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
|
|
const [text, setText] = useState("");
|
|
const [textOriginal, setTextOriginal] = useState("");
|
|
const [popupDetail, setPopupDetail] = useState({ startDate: new Date(), endDate: new Date() });
|
|
|
|
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
|
|
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
|
|
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
|
|
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
|
|
|
|
|
|
const [confirm, setConfirm] = React.useState();
|
|
|
|
|
|
|
|
useEffect(function () {
|
|
initMode();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const formValidator = (formData) => {
|
|
if (formData.get('title') === null || formData.get('title') === "") {
|
|
alert("제목은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
|
|
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
|
|
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('contents') === null || formData.get('contents') === "") {
|
|
alert("내용은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const initMode = () => {
|
|
|
|
// props.mode 값이 없으면 에러가 발생한다.
|
|
switch (props.mode) {
|
|
case CODE.MODE_CREATE:
|
|
setModeInfo({
|
|
...modeInfo,
|
|
modeTitle: "등록",
|
|
method : "POST",
|
|
editURL: '/contents/api/popup-manage'
|
|
});
|
|
break;
|
|
case CODE.MODE_MODIFY:
|
|
setModeInfo({
|
|
...modeInfo,
|
|
modeTitle: "수정",
|
|
method : "PUT",
|
|
editURL: '/contents/api/popup-manage'
|
|
});
|
|
break;
|
|
default:
|
|
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
|
|
}
|
|
retrieveDetail();
|
|
}
|
|
|
|
const retrieveDetail = () => {
|
|
|
|
if (modeInfo.mode === CODE.MODE_CREATE) {// 조회/등록이면 조회 안함
|
|
return;
|
|
}
|
|
|
|
const retrieveDetailURL = `/contents/api/popup-manage/${location.state?.popupId}`;
|
|
const requestOptions = {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-type': 'application/json'
|
|
}
|
|
}
|
|
EgovNet.requestFetch(retrieveDetailURL,
|
|
requestOptions,
|
|
function (resp) {
|
|
let rawDetail = resp.result;
|
|
//기본값 설정
|
|
setPopupDetail({
|
|
...popupDetail,
|
|
...rawDetail,
|
|
startDate: convertDate(rawDetail.schdulBgnde),
|
|
endDate: convertDate(rawDetail.schdulEndde),
|
|
});
|
|
setText(rawDetail.contents);
|
|
setTextOriginal(rawDetail.contents);
|
|
|
|
if( rawDetail.files ) {
|
|
setServerFiles(rawDetail.files);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
|
|
const createPopup = () => {
|
|
const formData = new FormData();
|
|
|
|
for (let key in popupDetail) {
|
|
if ( key === 'startDate' ) {
|
|
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
|
|
} else if( key === 'endDate' ) {
|
|
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
|
|
} else {
|
|
formData.append(key, popupDetail[key]);
|
|
}
|
|
}
|
|
|
|
//게시글 내용
|
|
formData.delete("contents");
|
|
formData.append("contents", text);
|
|
|
|
//첨부파일
|
|
if( files ) {
|
|
for(let i=0; i<files.length; i++) {
|
|
if( files[i].seq ) {
|
|
// 살아남은 file의 seq 목록 서버로 보내면 서버가 알아서 기존파일을 정리해준다.
|
|
formData.append("survivingFiles", files[i].seq);
|
|
continue;
|
|
}
|
|
formData.append("files", files[i]);
|
|
}
|
|
}
|
|
|
|
if (formValidator(formData)) {
|
|
const requestOptions = {
|
|
method: modeInfo.method,
|
|
body: formData
|
|
}
|
|
|
|
const requestTask = (callbackParams) => {
|
|
setOpenLoadingProgress(true);
|
|
EgovNet.requestFetch(callbackParams.requestUrl,
|
|
requestOptions,
|
|
(resp) => {
|
|
setOpenLoadingProgress(false);
|
|
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
|
|
if (modeInfo.mode === CODE.MODE_MODIFY) {
|
|
//alert("게시글이 수정 되었습니다.");
|
|
}
|
|
navigate({ pathname: URL.ADMIN__CONTENTS__POP_UP });
|
|
} else {
|
|
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
|
|
if (modeInfo.mode === CODE.MODE_CREATE) {
|
|
//setConfirm({...confirm, open: true, body: "추가하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:modeInfo.editURL}});
|
|
requestTask({requestUrl:modeInfo.editURL});
|
|
} else if (modeInfo.mode === CODE.MODE_MODIFY) {
|
|
//setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`}});
|
|
requestTask({requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`});
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const onClickDelete = (popupId) => {
|
|
const deleteBoardURL = `/contents/api/popup-manage/${popupId}`;
|
|
|
|
const requestOptions = {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
}
|
|
}
|
|
|
|
const requestTask = () => {
|
|
EgovNet.requestFetch(deleteBoardURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
|
|
alert("삭제 되었습니다.");
|
|
navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
|
|
} else {
|
|
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
setConfirm({...confirm, open: true, body: "삭제하시겠습니까?", yesCallback: requestTask});
|
|
}
|
|
|
|
|
|
// 첨부된 file을 삭제하는 요청
|
|
const deleteFile = (fileSeq) => {
|
|
const deleteFileURL = `/contents/api/popup-manage/file/${fileSeq}`;
|
|
|
|
const requestOptions = {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
}
|
|
}
|
|
|
|
EgovNet.requestFetch(deleteFileURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
|
|
const onClickList = (e) => {
|
|
|
|
const requestTask = () => {
|
|
navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
|
|
};
|
|
if( text !== textOriginal ) {
|
|
setConfirm({...confirm, open: true, body: "작업 내용을 취소하시겠습니까?", yesCallback: requestTask});
|
|
} else {
|
|
requestTask();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const convertDate = (str) => {
|
|
let year = str.substring(0, 4);
|
|
let month = str.substring(4, 6);
|
|
let date = str.substring(6, 8);
|
|
let hour = str.substring(8, 10);
|
|
let minute = str.substring(10, 12);
|
|
return new Date(year, month - 1, date, hour, minute)
|
|
}
|
|
const getDateFourteenDigit = (date) => {
|
|
return `${getYYYYMMDD(date).toString()}${makeTwoDigit(date.getHours())}${makeTwoDigit(date.getMinutes())}${makeTwoDigit(date.getSeconds())}`;
|
|
}
|
|
const getYYYYMMDD = (date) => {
|
|
return date.getFullYear().toString() + makeTwoDigit(Number(date.getMonth() + 1)) + makeTwoDigit(date.getDate());
|
|
}
|
|
const makeTwoDigit = (number) => {
|
|
return number < 10 ? "0" + number : number.toString();
|
|
}
|
|
|
|
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
|
|
|
|
const [serverFiles, setServerFiles] = useState();
|
|
const [files, setFiles] = useState();
|
|
|
|
|
|
|
|
const [openLoadingProgress, setOpenLoadingProgress] = React.useState(false);
|
|
|
|
|
|
const Location = React.memo(function Location() {
|
|
return (
|
|
<div className="location">
|
|
<ul>
|
|
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
|
<li><Link to={URL.ADMIN}>사이트 관리</Link></li>
|
|
<li>컨텐츠 관리</li>
|
|
<li>팝업 관리</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
});
|
|
|
|
return (
|
|
<div className="container">
|
|
<div className="c_wrap">
|
|
{/* <!-- Location --> */}
|
|
<Location />
|
|
{/* <!--// Location --> */}
|
|
|
|
<div className="layout">
|
|
{/* <!-- Navigation --> */}
|
|
<EgovLeftNav></EgovLeftNav>
|
|
{/* <!--// Navigation --> */}
|
|
|
|
<div className="contents " id="contents">
|
|
{/* <!-- 본문 --> */}
|
|
<StyledDiv>
|
|
<div className="top_tit">
|
|
<h1 className="tit_1">팝업 관리</h1>
|
|
</div>
|
|
{/* <!-- 상단 입력 form --> */}
|
|
<div className='board_view2'>
|
|
<dl>
|
|
<dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
|
|
<dd>
|
|
{modeInfo.mode === CODE.MODE_MODIFY && typeof popupDetail.title === 'undefined' && <LinearProgress /> }
|
|
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
|
|
value={popupDetail.title}
|
|
onChange={(e) => setPopupDetail({ ...popupDetail, title: e.target.value })}
|
|
/>
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>기간<span className="req">필수</span></dt>
|
|
<dd className="datetime">
|
|
<span className="line_break">
|
|
<DatePicker
|
|
selected={popupDetail.startDate}
|
|
name="schdulBgnde"
|
|
className="f_input"
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
showTimeInput
|
|
onChange={(date) => {
|
|
console.log("setStartDate : ", date);
|
|
setPopupDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
|
|
setSchdulBgndeHH(date.getHours());
|
|
setSchdulBgndeMM(date.getMinutes());
|
|
}} />
|
|
<input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
|
|
<input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
|
|
<span className="f_inn_txt">~</span>
|
|
</span>
|
|
<span className="line_break">
|
|
<DatePicker
|
|
selected={popupDetail.endDate}
|
|
name="schdulEndde"
|
|
className="f_input"
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
showTimeInput
|
|
minDate={popupDetail.startDate}
|
|
onChange={(date) => {
|
|
console.log("setEndDate: ", date);
|
|
setPopupDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
|
|
setSchdulEnddeHH(date.getHours());
|
|
setSchdulEnddeMM(date.getMinutes());
|
|
}
|
|
} />
|
|
<input type="hidden" name="schdulEnddeHH" defaultValue={schdulEnddeHH} readOnly />
|
|
<input type="hidden" name="schdulEnddeMM" defaultValue={schdulEnddeMM} readOnly />
|
|
</span>
|
|
</dd>
|
|
</dl>
|
|
<dl className="file-attach-wrapper">
|
|
<dt>첨부파일</dt>
|
|
<dd>
|
|
<AttachFile name="preDataFile" multiple={true} files={files} setFiles={setFiles} serverFiles={serverFiles} fileTypes={fileTypes} deleteFile={deleteFile} />
|
|
</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
{/* <!--// 상단 입력 form --> */}
|
|
|
|
{/* <!-- 게시판 --> */}
|
|
{modeInfo.mode === CODE.MODE_MODIFY && typeof text === 'undefined'
|
|
?
|
|
<LinearProgress />
|
|
:
|
|
<RichTextEditor item={text} setText={setText}/>
|
|
}
|
|
|
|
{/* <!--// 게시판 --> */}
|
|
|
|
{/* <!-- 버튼영역 --> */}
|
|
<Row>
|
|
<Col xs={6}>
|
|
<button className="btn btn_skyblue_h32 w_100" onClick={onClickList}>목록</button>
|
|
{modeInfo.mode === CODE.MODE_MODIFY &&
|
|
<button className="btn btn_red_h32 w_100 ms-2"
|
|
onClick={(e) => {
|
|
onClickDelete(location.state?.popupId);
|
|
}}>삭제</button>
|
|
}
|
|
</Col>
|
|
<Col xs={6} className="text-end">
|
|
<button className="btn btn_blue_h32 w_100"
|
|
onClick={() => createPopup()}
|
|
> 저장</button>
|
|
</Col>
|
|
</Row>
|
|
{/* <!--// 버튼영역 --> */}
|
|
|
|
<AlertDialogSlide confirm={confirm} setConfirm={setConfirm} />
|
|
<LoadingProgress open={openLoadingProgress} setOpen={setOpenLoadingProgress} />
|
|
</StyledDiv>
|
|
{/* <!--// 본문 --> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export default PopupEditor; |