361 lines
17 KiB
JavaScript
361 lines
17 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import DatePicker from "react-datepicker";
|
|
|
|
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 'react-datepicker/dist/react-datepicker.css';
|
|
|
|
import styled from "styled-components";
|
|
|
|
const StyledDiv = styled.div`
|
|
.org-under-id {
|
|
margin-left: 20px;
|
|
@media only screen and (max-width: 768px) {
|
|
display: block;
|
|
margin-left: 0px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
function SchedulesEdit(props) {
|
|
console.group("EgovAdminScheduleEdit");
|
|
console.log("[Start] EgovAdminScheduleEdit ------------------------------");
|
|
console.log("EgovAdminScheduleEdit [props] : ", props);
|
|
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
console.log("EgovAdminScheduleEdit [location] : ", location);
|
|
|
|
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
|
|
const [scheduleDetail, setScheduleDetail] = useState({ startDate: new Date(), endDate: new Date() });
|
|
|
|
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
|
|
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
|
|
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
|
|
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
|
|
|
|
|
|
const initMode = () => {
|
|
|
|
// props.mode 값이 없으면 에러가 발생한다.
|
|
switch (props.mode) {
|
|
case CODE.MODE_CREATE:
|
|
setModeInfo({
|
|
...modeInfo,
|
|
modeTitle: "등록",
|
|
method : "POST",
|
|
editURL: '/schedule'
|
|
});
|
|
break;
|
|
case CODE.MODE_MODIFY:
|
|
setModeInfo({
|
|
...modeInfo,
|
|
modeTitle: "수정",
|
|
method : "PUT",
|
|
editURL: '/schedule'
|
|
});
|
|
break;
|
|
default:
|
|
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
|
|
}
|
|
retrieveDetail();
|
|
}
|
|
|
|
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 retrieveDetail = () => {
|
|
|
|
const requestOptions = {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-type': 'application/json'
|
|
}
|
|
}
|
|
|
|
EgovNet.requestFetch("/schedule/init",
|
|
requestOptions,
|
|
function (resp) {
|
|
let rawScheduleDetail = resp;
|
|
console.log( 'kimtheho kimtheho kimtheho kimtheho kimtheho kimtheho kimtheho kimtheho' + rawScheduleDetail );
|
|
}
|
|
);
|
|
|
|
if (modeInfo.mode === CODE.MODE_CREATE) {// 조회/등록이면 조회 안함
|
|
setScheduleDetail({
|
|
...scheduleDetail
|
|
});
|
|
return;
|
|
}
|
|
|
|
const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
|
|
|
|
EgovNet.requestFetch(retrieveDetailURL,
|
|
requestOptions,
|
|
function (resp) {
|
|
let rawScheduleDetail = resp.result.scheduleDetail;
|
|
//기본값 설정
|
|
setScheduleDetail({
|
|
...scheduleDetail,
|
|
...rawScheduleDetail,
|
|
startDate: convertDate(rawScheduleDetail.schdulBgnde),
|
|
endDate: convertDate(rawScheduleDetail.schdulEndde),
|
|
atchFileId : rawScheduleDetail.atchFileId.trim(),
|
|
schdulIpcrCode : "B",
|
|
});
|
|
}
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
const updateSchedule = () => {
|
|
const formData = new FormData();
|
|
|
|
for (let key in scheduleDetail) {
|
|
formData.append(key, scheduleDetail[key]);
|
|
console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
|
|
}
|
|
|
|
if (formValidator(formData)) {
|
|
const requestOptions = {
|
|
method: modeInfo.method,
|
|
body: formData
|
|
}
|
|
|
|
if (modeInfo.mode === CODE.MODE_MODIFY) {
|
|
modeInfo.editURL = `${modeInfo.editURL}/${location.state?.schdulId}`;
|
|
}
|
|
EgovNet.requestFetch(modeInfo.editURL,
|
|
requestOptions,
|
|
(resp) => {
|
|
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
|
|
navigate({ pathname: URL.ADMIN_SCHEDULE });
|
|
} else {
|
|
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
const formValidator = (formData) => {
|
|
if (formData.get('schdulNm') === null || formData.get('schdulNm') === "") {
|
|
alert("일정명은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('schdulCn') === null || formData.get('schdulCn') === "") {
|
|
alert("일정내용은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('schdulSe') === null || formData.get('schdulSe') === "") {
|
|
alert("일정구분은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('schdulIpcrCode') === null || formData.get('schdulIpcrCode') === "") {
|
|
alert("중요도는 필수 값입니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('reptitSeCode') === null ||formData.get('reptitSeCode') === "") {
|
|
alert("반복구분은 필수 값입니다.");
|
|
return false;
|
|
}
|
|
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
|
|
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
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();
|
|
}
|
|
|
|
useEffect(function () {
|
|
initMode();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
console.log("------------------------------EgovAdminScheduleEdit [End]");
|
|
console.groupEnd("EgovAdminScheduleEdit");
|
|
return (
|
|
<div className="container">
|
|
<div className="c_wrap">
|
|
{/* <!-- Location --> */}
|
|
<div className="location">
|
|
<ul>
|
|
<li><Link to={URL.MAIN} className="home">Home</Link></li>
|
|
<li><Link to={URL.ADMIN}>사이트 관리</Link></li>
|
|
<li>위원회 관리</li>
|
|
</ul>
|
|
</div>
|
|
{/* <!--// Location --> */}
|
|
|
|
<div className="layout">
|
|
{/* <!-- Navigation --> */}
|
|
<EgovLeftNav></EgovLeftNav>
|
|
{/* <!--// Navigation --> */}
|
|
|
|
<div className="contents SITE_SCHDULE_REG" id="contents">
|
|
{/* <!-- 본문 --> */}
|
|
|
|
<div className="top_tit">
|
|
<h1 className="tit_1">위원회 일정 관리</h1>
|
|
</div>
|
|
|
|
{/* <!-- <h2 className="tit_2">위원회 일정 추가</h2> --> */}
|
|
|
|
{/* <!-- 게시판 상세보기 --> */}
|
|
<StyledDiv className="board_view2">
|
|
<dl>
|
|
<dt>구분<span className="req">필수</span></dt>
|
|
<dd>
|
|
<label className="f_select w_130" htmlFor="schdulSe">
|
|
<select id="schdulSe" name="schdulSe" title="일정구분"
|
|
value={scheduleDetail.schdulSe}
|
|
onChange={(e) => setScheduleDetail({ ...scheduleDetail, schdulSe: e.target.value })}>
|
|
<option value="">선택</option>
|
|
<option value="1">일반회의</option>
|
|
<option value="2">기준기획</option>
|
|
<option value="3">제개정검토</option>
|
|
<option value="4">기준심의</option>
|
|
</select>
|
|
</label>
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>심의위원회<span className="req">필수</span></dt>
|
|
<dd>
|
|
<label className="f_select w_150 org-group-id" htmlFor="orgGroupId">
|
|
<select id="orgGroupId" name="orgGroupId" title="중요도"
|
|
value={scheduleDetail.orgGroupId}
|
|
onChange={(e) => setScheduleDetail({ ...scheduleDetail, orgGroupId: e.target.value })}>
|
|
<option value="">선택</option>
|
|
<option value="A">높음</option>
|
|
<option value="B">보통</option>
|
|
<option value="C">낮음</option>
|
|
</select>
|
|
</label>
|
|
<label className="f_select w_150 org-under-id" htmlFor="orgUnderId">
|
|
<select id="orgUnderId" name="orgUnderId" title="중요도"
|
|
value={scheduleDetail.orgUnderId}
|
|
onChange={(e) => setScheduleDetail({ ...scheduleDetail, orgUnderId: e.target.value })}>
|
|
<option value="">선택</option>
|
|
<option value="A">높음</option>
|
|
<option value="B">보통</option>
|
|
<option value="C">낮음</option>
|
|
</select>
|
|
</label>
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt><label htmlFor="schdulDeptName">제목</label><span className="req">필수</span></dt>
|
|
<dd>
|
|
<input className="f_input2 w_full" type="text" name="schdulDeptName" title="부서" id="schdulDeptName"
|
|
value={scheduleDetail.schdulDeptName} readOnly
|
|
/>
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt><label htmlFor="schdulNm">장소</label><span className="req">필수</span></dt>
|
|
<dd>
|
|
<input className="f_input2 w_full" type="text" name="schdulNm" title="부서" id="schdulNm" placeholder="일정 테스트"
|
|
defaultValue={scheduleDetail.schdulNm}
|
|
onChange={(e) => setScheduleDetail({ ...scheduleDetail, schdulNm: e.target.value })} />
|
|
</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>날짜/시간<span className="req">필수</span></dt>
|
|
<dd className="datetime">
|
|
<span className="line_break">
|
|
<DatePicker
|
|
selected={scheduleDetail.startDate}
|
|
name="schdulBgnde"
|
|
className="f_input"
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
showTimeInput
|
|
onChange={(date) => {
|
|
console.log("setStartDate : ", date);
|
|
setScheduleDetail({ ...scheduleDetail, 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={scheduleDetail.endDate}
|
|
name="schdulEndde"
|
|
className="f_input"
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
showTimeInput
|
|
minDate={scheduleDetail.startDate}
|
|
onChange={(date) => {
|
|
console.log("setEndDate: ", date);
|
|
setScheduleDetail({ ...scheduleDetail, 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>
|
|
<dt><label htmlFor="schdulCn">내용</label><span className="req">필수</span></dt>
|
|
<dd>
|
|
<textarea className="f_txtar w_full h_100" name="schdulCn" id="schdulCn" cols="30" rows="10" placeholder="일정내용"
|
|
defaultValue={scheduleDetail.schdulCn}
|
|
onChange={(e) => setScheduleDetail({ ...scheduleDetail, schdulCn: e.target.value })}
|
|
></textarea>
|
|
</dd>
|
|
</dl>
|
|
|
|
{/* <!-- 버튼영역 --> */}
|
|
<div className="board_btn_area">
|
|
<div className="left_col btn1">
|
|
<button className="btn btn_skyblue_h46 w_100"
|
|
onClick={() => updateSchedule()}
|
|
> 저장</button>
|
|
<a href="#!" className="btn btn_skyblue_h46 w_100">삭제</a>
|
|
</div>
|
|
|
|
<div className="right_col btn1">
|
|
<Link to={URL.ADMIN_SCHEDULE} className="btn btn_blue_h46 w_100">목록</Link>
|
|
</div>
|
|
</div>
|
|
{/* <!--// 버튼영역 --> */}
|
|
</StyledDiv>
|
|
{/* <!-- 게시판 상세보기 --> */}
|
|
|
|
{/* <!--// 본문 --> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
);
|
|
}
|
|
|
|
export default SchedulesEdit; |