feat: 관리자 - 팝업 관리 > 특정 글 수정 시, 파일 여러개 일 경우 파일 목록이 안 나타나는 문제 수정

thkim
thkim 2024-03-18 10:41:54 +09:00
parent 44b2507d99
commit cbefc9f74f
6 changed files with 444 additions and 260 deletions

View File

@ -6,6 +6,7 @@
"@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.7.0",
"@babel/runtime": "^7.23.9",
"@base2/pretty-print-object": "^1.0.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",

View File

@ -0,0 +1,214 @@
import React, { useState, useEffect } from 'react';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import styled from "styled-components";
import FileDragDrop from "./FileDragDrop";
const StyledDiv = styled.div`
label {
//background: red;
width: 100%;
height: auto;
border: 2px dashed #888;
border-radius: 6px;
& > div {
height: 100%;
line-height: 37px;
padding: 20px;
color: #999999;
}
}
`;
function AttachFile(props) {
const multiple = props.multiple ? props.multiple : false;
// dialog
let oldTagName;
useEffect(function () {
const labelEle = document.querySelectorAll("label[for='preDataFile']")[0];
console.log(labelEle); // NodeList(3) [li, li, li]
// event
const onClickLabel = (e) => {
const tagName = String(e.target.tagName).toLowerCase();
if( tagName !== 'input' ) {
// eslint-disable-next-line react-hooks/exhaustive-deps
oldTagName = tagName;
e.preventDefault();
return false;
} else {
if(
oldTagName === 'path' ||
oldTagName === 'svg' ||
oldTagName === 'button'
) {
oldTagName = undefined;
e.preventDefault();
return false;
}
}
}
// remove Event
labelEle.removeEventListener("click", onClickLabel);
labelEle.addEventListener("click", onClickLabel);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// server upload file props.serverFiles file
useEffect(function () {
if( !props.serverFiles ) {
return;
}
let items = [];
let nNewIndex = 0;
for( let idx in props.serverFiles ) {
props.serverFiles[idx].index=nNewIndex++;
items.push( props.serverFiles[idx] );
}
setFileItem(items);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.serverFiles]);
const [disabled, setDisabled] = useState( props.disabled ? props.disabled : false );
useEffect(function () {
if( !props.disabled ) {
return;
}
setDisabled(props.disabled);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.disabled]);
const [maxSize, setMaxSize] = useState(props.maxSize ? props.maxSize : 100);
useEffect(function () {
if( !props.maxSize ) {
return;
}
setMaxSize(props.maxSize);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.maxSize]);
const [fileItem, setFileItem] = useState();
const onDrop = (e) => {
//alert('ddd');
};
const handleChange = (files) => {
if( !files ) {
return;
}
let items = [];
let nNewIndex = 0;
// .
for( let idx in fileItem ) {
fileItem[idx].index=nNewIndex++;
items.push( fileItem[idx] );
}
Object.keys(files).forEach(function(key, index) {
//console.log(key, props.files[key]);
if( typeof files[key].name === 'undefined' ) {
return;
}
files[key].index=nNewIndex++;
items.push( files[key] );
});
console.log('%o\n%o', files, items);
setFileItem(items);
props.setFiles(items);
};
const onClickDeleteItem = (e, targetEle) => {
const dataIndex = Number(targetEle.getAttribute('data-index'));
let items = [];
let nNewIndex = 0;
Object.keys(fileItem).forEach(function(key, index) {
if( dataIndex !== index ) {
fileItem[key].index=nNewIndex++;
items.push( fileItem[key] );
}
});
setFileItem(items);
props.setFiles(items);
}
return (
<StyledDiv>
<FileDragDrop
className="file-drag-drop"
multiple={multiple}
name={props.name}
fileTypes={props.fileTypes}
onDrop={onDrop}
handleChange={handleChange}
dropMessageStyle={{backgroundColor: '#cfe2ff'}}
maxSize={maxSize}
disabled={disabled}
>
<div>
{fileItem && fileItem.length > 0
?
fileItem.map((item) => (
<span key={item.index} data-index={item.index}>
<IconButton aria-label="delete" size="small"
onClick={(e)=> {
e = e || window.event;
const target = e.target || e.srcElement;
console.log('%o', target);
const tagName = String(target.tagName).toLowerCase();
// target
let targetEle = target.parentNode.parentNode.parentNode;
if( tagName === 'svg' ) {
targetEle = target.parentNode.parentNode;
} else if( tagName === 'button' ) {
targetEle = target.parentNode;
}
onClickDeleteItem(e, targetEle);
}}
>
<DeleteIcon fontSize="small" />
</IconButton>
{item.name}<br />
</span>
))
:
<span><AttachFileIcon /> 파일을 마우스로 끌어놓으세요.</span>
}
</div>
</FileDragDrop>
</StyledDiv>
);
}
export default AttachFile;

View File

@ -7,17 +7,25 @@ import { FileUploader } from "react-drag-drop-files";
* @param {fileTypes} const fileTypes = ["JPG", "PNG", "GIF"];
* @returns
*/
function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle, name}) {
function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle, name, maxSize, disabled}) {
const temp = 0;
return (
<FileUploader
hoverTitle="여기에 파일을 놓아주세요"
handleChange={handleChange}
name={name}
types={fileTypes ? fileTypes : "*"}
multiple={multiple && false}
multiple={multiple ? multiple : false}
label={label}
onDrop={onDrop}
dropMessageStyle={dropMessageStyle}
maxSize={maxSize}
disabled={disabled}
onSelect={(e)=> {
e = e || window.event;
}}
>
{children && children}
</FileUploader>

View File

@ -1,21 +1,13 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";
import AttachFileIcon from '@mui/icons-material/AttachFile';
import FileDragDrop from "components/file/FileDragDrop";
import AttachFile from "components/file/AttachFile";
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";
import { makeStyles } from "@mui/styles";
@ -35,15 +27,6 @@ const useStyles = makeStyles(() => ({
}));
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;
}
}
.f_select.w_250 {
@media only screen and (max-width: 768px) {
width: 100%;
@ -55,40 +38,17 @@ const StyledDiv = styled.div`
width: 100%;
}
}
.org-group-id-1 {
margin: 0px 29px;
@media only screen and (max-width: 768px) {
margin: 0px;
}
}
`;
function AttachFile(props) {
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
const onDrop = (e) => {
//alert('ddd');
};
const handleChange = (file) => {
props.setFile(file);
};
return (
<FileDragDrop
className="file-drag-drop"
multiple={false}
name={props.name}
fileTypes={fileTypes}
onDrop={onDrop}
handleChange={handleChange}
dropMessageStyle={{backgroundColor: '#cfe2ff'}}
>
<div>
<AttachFileIcon />
{props.file ? props.file.name : props.fileName ? props.fileName : "파일을 마우스로 끌어놓으세요."}
</div>
</FileDragDrop>
);
}
function SchedulesEdit(props) {
function ProgressStatusEdit(props) {
console.group("EgovAdminScheduleEdit");
console.log("[Start] EgovAdminScheduleEdit ------------------------------");
console.log("EgovAdminScheduleEdit [props] : ", props);
@ -117,16 +77,16 @@ function SchedulesEdit(props) {
const [requestItems, setRequestItems] = useState
(
{
orgGroupId: 1,
startDate: new Date(),
eventId : 0,
}
);
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
const [drftDatetimeHH, setDrftDatetimeHH] = useState();
const [drftDatetimeMM, setDrftDatetimeMM] = useState();
const [scheduleInit, setScheduleInit] = useState({});
const [scheduleApiOrgApiDepthList, setScheduleApiOrgApiDepthList] = useState({ });
const initMode = () => {
@ -152,7 +112,8 @@ function SchedulesEdit(props) {
default:
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
}
retrieveDetail();
getList(orgSearchCondition);
}
const convertDate = (str) => {
@ -171,36 +132,107 @@ function SchedulesEdit(props) {
}
}
const retrieveDetail = () => {
EgovNet.requestFetch("/schedule/init",
const [orgSearchCondition, setOrgSearchCondition] = useState({ paramCodeGroup: null, paramCodeLevel: 'LV_01' });
const [orgArray, setOrgArray] = useState([]);
const [orgSelectedIndex, setOrgSelectedIndex] = useState([]);
useEffect(function () {
getList(orgSearchCondition);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [orgSearchCondition]);
useEffect(function () {
if ( typeof orgArray[0] === 'undefined' || typeof orgSelectedIndex[0] === 'undefined' ) {
return;
}
if( orgSelectedIndex[0] === 0) {
orgArray[1] = undefined;
orgArray[2] = undefined;
let forChangeObject = [...orgArray];
setOrgArray(forChangeObject);
setOrgSelectedIndex([orgSelectedIndex[0], undefined, undefined]);
return;
}
if ( typeof orgArray[0][orgSelectedIndex[0]-1] === 'undefined' ) {
return;
}
const paramCodeLevel = 'LV_02';
const paramCodeGroup = orgArray[0][orgSelectedIndex[0]-1].orgId;
setOrgSearchCondition({ paramCodeGroup, paramCodeLevel });
orgArray[1] = undefined;
orgArray[2] = undefined;
let forChangeObject = [...orgArray];
setOrgArray(forChangeObject);
setOrgSelectedIndex([orgSelectedIndex[0], undefined, undefined]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [orgSelectedIndex[0]]);
useEffect(function () {
if ( typeof orgArray[1] === 'undefined' || typeof orgSelectedIndex[1] === 'undefined' ) {
return;
}
if( orgSelectedIndex[1] === 0) {
orgArray[2] = undefined;
let forChangeObject = [...orgArray];
setOrgArray(forChangeObject);
setOrgSelectedIndex([orgSelectedIndex[0], orgSelectedIndex[1], undefined]);
return;
}
if ( typeof orgArray[0][orgSelectedIndex[1]-1] === 'undefined' ) {
return;
}
const paramCodeLevel = 'LV_03';
const paramCodeGroup = orgArray[1][orgSelectedIndex[1]-1].orgId;
setOrgSearchCondition({ paramCodeGroup, paramCodeLevel });
orgArray[2] = undefined;
let forChangeObject = [...orgArray];
setOrgArray(forChangeObject);
setOrgSelectedIndex([orgSelectedIndex[0], orgSelectedIndex[1], undefined]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [orgSelectedIndex[1]]);
useEffect(function () {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [orgSelectedIndex[2]]);
const getList = (orgSearchCondition) => {
EgovNet.requestFetch(`/admin/config/committee-code-management?paramCodeGroup=${orgSearchCondition.paramCodeGroup}&paramCodeLevel=${orgSearchCondition.paramCodeLevel}`,
requestOptions,
function (resp) {
setScheduleInit(
resp
);
if (modeInfo.mode === CODE.MODE_CREATE) {
return;
}
const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
const requestOptions = {
method: "GET",
headers: {
'Content-type': 'application/json'
}
}
EgovNet.requestFetch(retrieveDetailURL,
requestOptions,
function (resp) {
}
);
const myIndex = Number(String(orgSearchCondition.paramCodeLevel).replace('LV_','')) - 1;
const forCopy = [...orgArray];
forCopy[myIndex] = resp.result.list;
setOrgArray(forCopy);
}
);
);
}
const updateSchedule = () => {
const formData = new FormData();
@ -282,47 +314,8 @@ function SchedulesEdit(props) {
console.log("------------------------------EgovAdminScheduleEdit [%o]", requestItems);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [requestItems]);
useEffect(function () {
EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${requestItems.upCommittee}`,
requestOptions,
function (resp) {
setScheduleApiOrgApiDepthList(
resp
);
}
);
console.log("------------------------------EgovAdminScheduleEdit [%o]", requestItems);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [requestItems && requestItems.upCommittee]);
const onClickDeleteSchedule = (schdulId) => {
const deleteBoardURL = `/schedule/${schdulId}`;
const requestOptions = {
method: "DELETE",
headers: {
'Content-type': 'application/json',
}
}
EgovNet.requestFetch(deleteBoardURL,
requestOptions,
(resp) => {
console.log("====>>> Schdule delete= ", resp);
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
alert("게시글이 삭제되었습니다.")
navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
//
const [preDataFile, setPreDataFile] = useState(null);
const [preDataFileName, setPreDataFileName] = useState(null);
@ -333,11 +326,11 @@ function SchedulesEdit(props) {
const [partnerFile, setPartnerFile] = useState(null);
const [partnerFileName, setPartnerFileName] = useState(null);
//
//const [preDataFile, setPreDataFile] = useState(null);
//const [preDataFileName, setPreDataFileName] = useState(null);
const [actionPlanFile, setActionPlanFile] = useState(null);
const [actionPlanFileName, setActionPlanFileName] = useState(null);
//
//const [preDataFile, setPreDataFile] = useState(null);
//const [preDataFileName, setPreDataFileName] = useState(null);
const [actionResultReportFile, setActionResultReportFile] = useState(null);
const [actionResultReportFileName, setActionResultReportFileName] = useState(null);
@ -372,30 +365,30 @@ function SchedulesEdit(props) {
{/* <!-- 게시판 상세보기 --> */}
<StyledDiv className="board_view2">
<dl>
<dt><label htmlFor="title">안건</label><span className="req">필수</span></dt>
<dt><label>안건</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="안건" id="title" placeholder="안건을 입력하세요."
<input className="f_input2 w_full" type="text" name="title" title="안건" placeholder="안건을 입력하세요"
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">기준코드</label><span className="req">필수</span></dt>
<dt><label>기준코드</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
<input className="f_input2 w_full" type="text" name="categoryId" title="기준코드" placeholder="여기를 눌러 기준코드를 선택하세요"
value={requestItems.categoryId}
onChange={(e) => setRequestItems({ ...requestItems, categoryId: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">구분</label><span className="req">필수</span></dt>
<dt><label>구분</label><span className="req">필수</span></dt>
<dd>
<label className="f_select w_150" htmlFor="div-meet">
<select id="div-meet" name="div-meet" title="일정구분"
value={requestItems.divMeet}
onChange={(e) => setRequestItems({ ...requestItems, divMeet: e.target.value })}>
<label className="f_select w_150" >
<select name="div-meet" title="재정 개정 재개정 선택"
value={requestItems.drftTypeCode}
onChange={(e) => setRequestItems({ ...requestItems, drftTypeCode: e.target.value })}>
<option key={"none"} value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listCodes
&& scheduleInit.result.listCodes.map((item) => (
@ -406,60 +399,70 @@ function SchedulesEdit(props) {
</dd>
</dl>
<dl>
<dt><label htmlFor="title">회의일자</label><span className="req">필수</span></dt>
<dt><label>회의일자</label><span className="req">필수</span></dt>
<dd className="datetime">
<span className="line_break">
<DatePicker
selected={requestItems.startDate}
name="schdulBgnde"
selected={requestItems.drftDatetime}
name="drftDatetime"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
dateFormat="yyyy-MM-dd"
onChange={(date) => {
console.log("setStartDate : ", date);
setRequestItems({ ...requestItems, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
setSchdulBgndeHH(date.getHours());
setSchdulBgndeMM(date.getMinutes());
setRequestItems({ ...requestItems, schdulBgnde: getDateFourteenDigit(date), drftDatetimeYYYMMDD: getYYYYMMDD(date), drftDatetime: date });
setDrftDatetimeHH(date.getHours());
setDrftDatetimeMM(date.getMinutes());
}} />
<input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
<input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
<input type="hidden" name="drftDatetimeMM" defaultValue={drftDatetimeMM} readOnly />
</span>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">위원회</label><span className="req">필수</span></dt>
<dt><label>위원회</label><span className="req">필수</span></dt>
<dd>
{/** top org */}
<label className="f_select w_250 org-group-id" htmlFor="org-group-id">
<select id="org-group-id" name="orgGroupId" title="심의위원회-상위"
value={requestItems.upCommittee}
onChange={(e) => setRequestItems({ ...requestItems, upCommittee: e.target.value })}>
<option value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
&& scheduleInit.result.listTopOrg.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
<select id="org-group-id" name="orgGroupId" title="중앙건설기술심의 선택"
value={requestItems.orgGroupId}
onChange={(e) => {
setRequestItems({ ...requestItems, orgGroupId: e.target.value });
orgSelectedIndex[0] = e.target.options.selectedIndex;
let forChangeObject = [...orgSelectedIndex];
setOrgSelectedIndex(forChangeObject);
}}>
<option value="">중앙건설기술심의 선택</option>
{orgArray && orgArray[0] && orgArray[0].map && orgArray[0].map((item, index) => (
<option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
))}
</select>
</label>
<label className="f_select w_250 org-group-id-1" htmlFor="org-group-id-1">
<select id="org-group-id-1" name="orgGroupId1" title="심의위원회-상위"
value={requestItems.upCommittee}
onChange={(e) => setRequestItems({ ...requestItems, upCommittee: e.target.value })}>
<option value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
&& scheduleInit.result.listTopOrg.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
<select id="org-group-id-1" name="orgGroupId1" title="총괄건설기준위원회 선택"
value={requestItems.orgGroupId1}
defaultValue='1'
onChange={(e) => {
setRequestItems({ ...requestItems, orgGroupId1: e.target.value });
orgSelectedIndex[1] = e.target.options.selectedIndex;
let forChangeObject = [...orgSelectedIndex];
setOrgSelectedIndex(forChangeObject);
}}>
<option value="">총괄건설기준위원회 선택</option>
{orgArray && orgArray[1] && orgArray[1].map((item, index) => (
<option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
))}
</select>
</label>
<label className="f_select w_250 org-group-id-2" htmlFor="org-group-id-2">
<select id="org-group-id-2" name="orgGroupId2" title="심의위원회-하위"
value={requestItems.committee}
onChange={(e) => setRequestItems({ ...requestItems, committee: e.target.value })}>
<option value="">선택</option>
{scheduleApiOrgApiDepthList && scheduleApiOrgApiDepthList.result && scheduleApiOrgApiDepthList.result.list
&& scheduleApiOrgApiDepthList.result.list.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
<select id="org-group-id-2" name="orgGroupId2" title="기준위원회 선택"
value={requestItems.orgGroupId2}
onChange={(e) => {
setRequestItems({ ...requestItems, orgGroupId2: e.target.value });
orgSelectedIndex[2] = e.target.options.selectedIndex;
let forChangeObject = [...orgSelectedIndex];
setOrgSelectedIndex(forChangeObject);
}}>
<option value="">기준위원회 선택</option>
{orgArray && orgArray[2] && orgArray[2].map((item, index) => (
<option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
))}
</select>
</label>
@ -468,81 +471,57 @@ function SchedulesEdit(props) {
<dl>
<dt><label htmlFor="title">사전검토자료</label><span className="req">필수</span></dt>
<dd>
<AttachFile name="preDataFile" file={preDataFile} setFile={setPreDataFile} fileName={preDataFileName} />
</dd>
<AttachFile name="preDataFile" file={preDataFile} setFile={setPreDataFile} fileName={preDataFileName} fileTypes={fileTypes} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">사전검토양식</label><span className="req">필수</span></dt>
<dd>
<dd>
<AttachFile name="preFormFile" file={preFormFile} setFile={setPreFormFile} fileName={preFormFileName} fileTypes={fileTypes} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">관계기관의견</label><span className="req">필수</span></dt>
<dd>
<dd>
<AttachFile name="partnerFile" file={partnerFile} setFile={setPartnerFile} fileName={partnerFileName} fileTypes={fileTypes} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">조치계획서</label><span className="req">필수</span></dt>
<dd>
<dd>
<AttachFile name="actionPlanFile" file={actionPlanFile} setFile={setActionPlanFile} fileName={actionPlanFileName} fileTypes={fileTypes} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">조치결과서</label><span className="req">필수</span></dt>
<dt><label>조치결과서</label><span className="req">필수</span></dt>
<dd>
<AttachFile name="actionResultReportFile" file={actionResultReportFile} setFile={setActionResultReportFile} fileName={actionResultReportFileName} fileTypes={fileTypes} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">회의담당자</label><span className="req">필수</span></dt>
<dt><label>회의담당자</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
<input className="f_input2 w_full" type="text" name="drftConfeCharger" title="회의 담당자" placeholder="여기를 눌러 회의담당자를 선택하세요"
value={requestItems.drftConfeCharger}
onChange={(e) => setRequestItems({ ...requestItems, drftConfeCharger: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">회의실 비밀번호</label><span className="req">필수</span></dt>
<dt><label>회의실 비밀번호</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
<input className="f_input2 w_full" type="text" name="drftConfePw" title="제목" placeholder="회의실 비밀번호를 입력하세요"
value={requestItems.drftConfePw}
onChange={(e) => setRequestItems({ ...requestItems, drftConfePw: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">회의 안건</label><span className="req">필수</span></dt>
<dt><label>회의 안건</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</dd>
</dl>
<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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="location">장소</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="location" title="장소" id="location" placeholder="장소를 입력하세요."
defaultValue={requestItems.location}
onChange={(e) => setRequestItems({ ...requestItems, location: e.target.value })} />
</dd>
</dl>
<dl>
<dt><label htmlFor="contents">내용</label><span className="req">필수</span></dt>
<dd>
<textarea className="f_txtar w_full h_100" name="contents" id="contents" cols="30" rows="10" placeholder="일정 내용을 입력하세요."
defaultValue={requestItems.contents}
onChange={(e) => setRequestItems({ ...requestItems, contents: e.target.value })}
<textarea className="f_txtar w_full h_100" name="drftSummery" cols="30" rows="10" placeholder="회의 안건 내용을 입력하세요."
defaultValue={requestItems.drftSummery}
onChange={(e) => setRequestItems({ ...requestItems, drftSummery: e.target.value })}
></textarea>
</dd>
</dl>
@ -552,13 +531,7 @@ function SchedulesEdit(props) {
<div className="left_col btn1">
<button className="btn btn_skyblue_h46 w_100"
onClick={() => updateSchedule()}
> 저장</button>
{modeInfo.mode === CODE.MODE_MODIFY &&
<button className="btn btn_skyblue_h46 w_100"
onClick={(e) => {
onClickDeleteSchedule(location.state?.schdulId);
}}>삭제</button>
}
> 저장</button>
</div>
@ -578,4 +551,4 @@ function SchedulesEdit(props) {
);
}
export default SchedulesEdit;
export default ProgressStatusEdit;

View File

@ -1,10 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";
import FileDragDrop from "../../../../components/file/FileDragDrop";
import AttachFileIcon from '@mui/icons-material/AttachFile';
import EgovAttachFile from 'components/EgovAttachFile';
import AttachFile from "../../../../components/file/AttachFile";
import RichTextEditor from "../../../../components/editor/RichTextEditor";
import AlertDialogSlide from "../../../../components/alert/AlertDialogSlide";
import CODE from 'constants/code';
@ -59,7 +56,7 @@ function PopupEditor(props) {
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
const [fileName, setFileName] = useState();
const [confirm, setConfirm] = React.useState();
@ -140,11 +137,11 @@ function PopupEditor(props) {
setText(rawDetail.contents);
setTextOriginal(rawDetail.contents);
if( rawDetail.fileName ) {
setFileName(rawDetail.fileName);
if( rawDetail.files ) {
setServerFiles(rawDetail.files);
}
}
);
);
}
@ -167,7 +164,14 @@ function PopupEditor(props) {
formData.append("contents", text);
//
formData.append("file", file);
//formData.append("files", files);
for(let i=0; i<files.length; i++) {
// seq server upload file continue
if( files[i].seq ) {
continue;
}
formData.append("files", files[i]);
}
if (formValidator(formData)) {
const requestOptions = {
@ -264,22 +268,15 @@ function PopupEditor(props) {
}
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
const onDrop = (e) => {
//alert('ddd');
};
const [file, setFile] = useState(null);
const handleChange = (file) => {
setFile(file);
const [serverFiles, setServerFiles] = useState();
const [files, setFiles] = useState();
/*
let files = null;
const setFiles = (myFiles) => {
files = myFiles;
};
useEffect(function () {
if( file ) {
console.log('%o', file);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [file]);
*/
const Location = React.memo(function Location() {
@ -367,21 +364,7 @@ function PopupEditor(props) {
<dl className="file-attach-wrapper">
<dt>첨부파일</dt>
<dd>
<span className="file_attach">
<FileDragDrop
className="file-drag-drop"
multiple={false}
fileTypes={fileTypes}
onDrop={onDrop}
handleChange={handleChange}
dropMessageStyle={{backgroundColor: '#cfe2ff'}}
>
<div>
<AttachFileIcon />
{file ? file.name : fileName ? fileName : "파일을 마우스로 끌어놓으세요."}
</div>
</FileDragDrop>
</span>
<AttachFile name="preDataFile" multiple={true} files={files} setFiles={setFiles} serverFiles={serverFiles} fileTypes={fileTypes} />
</dd>
</dl>

View File

@ -1135,6 +1135,11 @@
resolved "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz"
integrity sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==
"@base2/pretty-print-object@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.2.tgz#e30192222fd13e3c1e97040163d6628a95f70844"
integrity sha512-rBha0UDfV7EmBRjWrGG7Cpwxg8WomPlo0q+R2so47ZFf9wy4YKJzLuHcVa0UGFjdcLZj/4F/1FNC46GIQhe7sA==
"@bcoe/v8-coverage@^0.2.3":
version "0.2.3"
resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@ -8623,7 +8628,7 @@ react-drag-drop-files@^2.3.10:
react-element-to-jsx-string@^15.0.0:
version "15.0.0"
resolved "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz"
resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
integrity sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==
dependencies:
"@base2/pretty-print-object" "1.0.1"