feat: 관리자 - 컨텐츠관리 - 건설기준연구 관리 목록 구현 front-end
parent
2431425362
commit
e2e4c075b7
|
|
@ -28,7 +28,7 @@ const StyledDiv = styled.div`
|
|||
|
||||
`;
|
||||
|
||||
function PopupWriter(props) {
|
||||
function PopupEditor(props) {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
|
@ -373,4 +373,4 @@ function PopupWriter(props) {
|
|||
}
|
||||
|
||||
|
||||
export default PopupWriter;
|
||||
export default PopupEditor;
|
||||
|
|
@ -1,13 +1,85 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import Switch from '@mui/material/Switch';
|
||||
|
||||
import * as EgovNet from 'api/egovFetch';
|
||||
import URL from 'constants/url';
|
||||
import CODE from 'constants/code';
|
||||
|
||||
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
|
||||
import EgovPagingPaginationInfo from 'components/EgovPagingPaginationInfo';
|
||||
|
||||
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
.board_btn_area {
|
||||
margin: 12px 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const label = { inputProps: { 'aria-label': '사용여부' } };
|
||||
|
||||
function StandardResearch(props) {
|
||||
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [list, setList] = useState([]);
|
||||
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });
|
||||
const [paginationInfo, setPaginationInfo] = useState({});
|
||||
|
||||
useEffect(function () {
|
||||
getList(searchCondition);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
}
|
||||
}
|
||||
|
||||
const getList = (searchCondition) => {
|
||||
|
||||
EgovNet.requestFetch(`/contents/standard-research/list?page=${searchCondition.pageIndex-1}&size=10&sort=rsSeq,desc`,
|
||||
requestOptions,
|
||||
function (resp) {
|
||||
console.log('%o', resp);
|
||||
setList(resp.result.list);
|
||||
setPaginationInfo({...resp.result.paginationInfo});
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const onChangeActivationSwitch = (e, popupId) => {
|
||||
const checked = e.target.checked;
|
||||
const requestURL = `/contents/api/popup-manage/activation-switch/${popupId}?checked=${checked}`;
|
||||
|
||||
const requestOptions = {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
}
|
||||
}
|
||||
|
||||
EgovNet.requestFetch(requestURL,
|
||||
requestOptions,
|
||||
(resp) => {
|
||||
console.log("====>>> Schdule delete= ", resp);
|
||||
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
|
||||
navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
|
||||
} else {
|
||||
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const Location = React.memo(function Location() {
|
||||
return (
|
||||
<div className="location">
|
||||
|
|
@ -35,11 +107,51 @@ function StandardResearch(props) {
|
|||
|
||||
<div className="contents " id="contents">
|
||||
{/* <!-- 본문 --> */}
|
||||
<StyledDiv>
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">건설기준연구 관리</h1>
|
||||
</div>
|
||||
{/* <!-- 버튼영역 --> */}
|
||||
<div className="board_btn_area">
|
||||
<div className="right_col btn1">
|
||||
<Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">글 작성</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--// 버튼영역 --> */}
|
||||
|
||||
여기에 구현해주세요.
|
||||
{/* <!-- 게시판목록 --> */}
|
||||
<div className="board_list BRD008">
|
||||
<div className="head">
|
||||
<span>번호</span>
|
||||
<span>연구명</span>
|
||||
<span>연구기간</span>
|
||||
<span>연구책임자</span>
|
||||
</div>
|
||||
<div className="result">
|
||||
{/* <!-- case : 데이터 없을때 --> */}
|
||||
{list.length === 0 &&
|
||||
<p className="no_data" key="0">검색된 결과가 없습니다.</p>
|
||||
}
|
||||
{list.map((it)=>(
|
||||
<div className='list_item' key={it.id}>
|
||||
<div>{it.id}</div>
|
||||
<div className="al"><Link to={URL.ADMIN__CONTENTS__POP_UP__MODIFY} state={{popupId: it.id} } key={it.id}>{it.title}</Link></div>
|
||||
<div>{it.researchStartDate} ~ {it.researchEndDate}</div>
|
||||
<div>{it.director}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--// 게시판목록 --> */}
|
||||
|
||||
<div className="board_bot">
|
||||
{/* <!-- Paging --> */}
|
||||
<EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
|
||||
getList({ ...searchCondition, pageIndex: passedPage })
|
||||
}} />
|
||||
{/* <!--/ Paging --> */}
|
||||
</div>
|
||||
</StyledDiv>
|
||||
{/* <!--// 본문 --> */}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,376 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
import EgovAttachFile from 'components/EgovAttachFile';
|
||||
import RichTextEditor from "../../../../components/editor/RichTextEditor";
|
||||
import AlertDialogSlide from "../../../../components/alert/AlertDialogSlide";
|
||||
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;
|
||||
}
|
||||
|
||||
.board_btn_area {
|
||||
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
function StandardResearchEditor(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 [boardAttachFiles, setBoardAttachFiles] = 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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
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 (formValidator(formData)) {
|
||||
const requestOptions = {
|
||||
method: modeInfo.method,
|
||||
body: formData
|
||||
}
|
||||
|
||||
const requestTask = (callbackParams) => {
|
||||
EgovNet.requestFetch(callbackParams.requestUrl,
|
||||
requestOptions,
|
||||
(resp) => {
|
||||
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}});
|
||||
} else if (modeInfo.mode === CODE.MODE_MODIFY) {
|
||||
setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`}});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const onClickDelete = (popupId) => {
|
||||
const deleteBoardURL = `/contents/api/popup-manage/${popupId}`;
|
||||
|
||||
const requestOptions = {
|
||||
method: "DELETE",
|
||||
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});
|
||||
}
|
||||
|
||||
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 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>
|
||||
<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>
|
||||
<EgovAttachFile
|
||||
fnChangeFile={(attachfile) => {
|
||||
console.log("====>>> Changed attachfile file = ", attachfile);
|
||||
const arrayConcat = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
|
||||
for ( let i = 0; i < attachfile.length; i++) {
|
||||
arrayConcat[`file_${i}`] = attachfile[i];
|
||||
}
|
||||
setPopupDetail(arrayConcat);
|
||||
}}
|
||||
fnDeleteFile={(deletedFile) => {
|
||||
console.log("====>>> Delete deletedFile = ", deletedFile);
|
||||
setBoardAttachFiles(deletedFile);
|
||||
}}
|
||||
boardFiles={boardAttachFiles}
|
||||
mode={props.mode} />
|
||||
</div>
|
||||
{/* <!--// 상단 입력 form --> */}
|
||||
|
||||
{/* <!-- 게시판 --> */}
|
||||
<RichTextEditor item={text} setText={setText}/>
|
||||
{/* <!--// 게시판 --> */}
|
||||
|
||||
{/* <!-- 버튼영역 --> */}
|
||||
<div className="board_btn_area">
|
||||
<div className="left_col btn1">
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
onClick={() => createPopup()}
|
||||
> 저장</button>
|
||||
{modeInfo.mode === CODE.MODE_MODIFY &&
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
onClick={(e) => {
|
||||
onClickDelete(location.state?.popupId);
|
||||
}}>삭제</button>
|
||||
}
|
||||
</div>
|
||||
<div className="right_col btn1">
|
||||
<button className="btn btn_blue_h46 w_100"
|
||||
onClick={onClickList}>목록</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--// 버튼영역 --> */}
|
||||
|
||||
<AlertDialogSlide confirm={confirm} setConfirm={setConfirm} />
|
||||
</StyledDiv>
|
||||
{/* <!--// 본문 --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default StandardResearchEditor;
|
||||
|
|
@ -91,7 +91,7 @@ import AdminStandardsInfoDisclosure from 'pages/admin/standards/InfoDisclosure';
|
|||
// 관리자 - 컨텐츠 관리
|
||||
import AdminContentsSurvey from 'pages/admin/contents/Survey'; // 관리자 - 컨텐츠 관리/설문 관리
|
||||
import AdminContentsPopUp from 'pages/admin/contents/PopUp'; // 관리자 - 컨텐츠 관리/팝업 관리
|
||||
import AdminContentsPopUpWriter from 'pages/admin/contents/PopUp/PopupWriter'; // 관리자 - 컨텐츠 관리/팝업 관리/팝업 추가 또는 수정
|
||||
import AdminContentsPopUpWriter from 'pages/admin/contents/PopUp/PopupEditor'; // 관리자 - 컨텐츠 관리/팝업 관리/팝업 추가 또는 수정
|
||||
import AdminContentsStandardResearch from 'pages/admin/contents/StandardResearch'; // 관리자 - 컨텐츠 관리/건설기준연구 관리
|
||||
import AdminContentsTextMessages from 'pages/admin/contents/TextMessages'; // 관리자 - 컨텐츠 관리/문자 발송
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue