File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from 'react-router-dom';
import Icon from "@mdi/react";
import {
mdiCalendarMonth,
mdiHandshakeOutline,
mdiFileCheckOutline,
mdiAccountOutline,
mdiChatOutline,
} from "@mdi/js";
import CommentItem from "../../component/comment/CommentItem.jsx";
import axios from "axios";
function HomeSelectOne(props) {
const [comments, setComments] = useState([]);
const [data, setData] = useState([]);
const [notecd, setNotecd] = useState(null);
const [showReplyInput, setShowReplyInput] = useState(null);
const [editInput, setEditInput] = useState(null);
const [comment, setComment] = useState("");
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
if (props.SABNHO) {
const queryParams = new URLSearchParams(location.search);
setNotecd(queryParams.get('notecd'));
}
}, [props.SABNHO]);
useEffect(() => {
if (notecd) {
selectNoteDetail();
}
}, [notecd]);
// 삭제 버튼 연결
React.useEffect(() => {
if (props.deleteTrigger) {
deleteNote();
sessionStorage.removeItem("data");
sessionStorage.removeItem("index");
sessionStorage.removeItem("scrollPosition");
sessionStorage.removeItem("searchScroll");
sessionStorage.removeItem("searchData");
sessionStorage.removeItem("searchState");
setTimeout(() => {
props.setDeleteTrigger(false);
navigate("/");
}, 1000);
}
}, [props.deleteTrigger, props.setDeleteTrigger]);
React.useEffect(() => {
if (props.updateTrigger) {
props.setUpdateTrigger(false);
navigate(`/homeUpdate?notecd=${notecd}`, { state: { data: data[0].NOTELIST } });
}
}, [props.updateTrigger, props.setUpdateTrigger]);
// 영업 일지 상세 조회 API
const selectNoteDetail = () => {
if (!props.SABNHO) {
return;
}
let url = "https://api.ajinpaper.app/ajin_API/note.do/" + notecd
axios({
method: "post",
url: url,
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
const transformedData = response.data.resultData.map(item => {
const vsdate = item.NOTELIST.VSDATE;
const formattedVsdate = `${vsdate.slice(0, 4)}.${vsdate.slice(4, 6)}.${vsdate.slice(6, 8)}`;
const tags = item.NOTELIST.HASTAG ? item.NOTELIST.HASTAG.split('#').filter(tag => tag) : [];
return {
...item,
NOTELIST: {
...item.NOTELIST,
VSDATE: formattedVsdate,
HASTAG: tags,
}
};
});
setData(transformedData);
selectComment();
} else {
props.onModal(response.data.resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
};
// 영업 일지 삭제 API
const deleteNote = () => {
if (!props.SABNHO) {
return;
}
let url = "https://api.ajinpaper.app/ajin_API/noteDelete.do/" + notecd
axios({
method: "post",
url: url,
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
props.onModal("해당 일지를 삭제했습니다");
} else {
props.onModal(response.data.resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
};
// 댓글 조회 API
const selectComment = () => {
if (!props.SABNHO) {
return;
}
let url = "https://api.ajinpaper.app/ajin_API/comment/" + notecd
axios({
method: "post",
url: url,
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
var comments = response.data.resultData;
for (var i = 0; i < comments.length; i++) {
var input = comments[i].CRTYMD;
var year = input.slice(0, 4);
var month = input.slice(4, 6);
var day = input.slice(6, 8);
var hour = input.slice(8, 10);
var minute = input.slice(10, 12);
comments[i].CRTYMD = year + ". " + month + ". " + day + " " + hour + ":" + minute + " 등록됨";
if (comments[i].MDFYMD) {
var input = comments[i].MDFYMD;
var year = input.slice(0, 4);
var month = input.slice(4, 6);
var day = input.slice(6, 8);
var hour = input.slice(8, 10);
var minute = input.slice(10, 12);
comments[i].MDFYMD = year + ". " + month + ". " + day + " " + hour + ":" + minute + " 수정됨";
}
}
setComments(comments);
} else {
props.onModal(response.data[0].resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
}
// 댓글 등록 API
const insertComment = (pcmncd, comment) => {
if (!props.SABNHO) {
return;
}
if (!comment || comment.trim() === '') {
props.onModal("댓글을 입력해주세요.");
return;
}
axios({
method: "post",
url: "https://api.ajinpaper.app/ajin_API/comment/save.do",
data: {
sabnho: props.SABNHO,
notecd: notecd,
pcmncd: pcmncd,
cmntct: comment,
},
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
setComment("");
selectComment();
} else {
props.onModal(response.data[0].resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
}
// 댓글 삭제 API
const deleteComment = (cmntcd) => {
if (!props.SABNHO) {
return;
}
let url = "https://api.ajinpaper.app/ajin_API/comment/delete/" + cmntcd
axios({
method: "post",
url: url,
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
selectComment();
} else {
props.onModal(response.data[0].resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
}
// 댓글 수정 API
const modifyComment = (cmntcd, comment) => {
if (!props.SABNHO) {
return;
}
axios({
method: "post",
url: "https://api.ajinpaper.app/ajin_API/comment/modify",
data: {
cmntcd: cmntcd,
cmntct: comment,
},
})
.then((response) => {
if (response.data && response.data.resultCode === 200) {
selectComment();
} else {
props.onModal(response.data[0].resultDesc);
}
})
.catch((error) => {
props.onModal("오류 발생. 관리자에 문의해주세요");
});
}
return (
<div className="detail-page page">
{data.length > 0 && data[0].NOTELIST.FLPATHLIST.length > 0 && data[0].NOTELIST.FLPATHLIST.map((img, i) => (
<div className="img-zone mb10" key={i}>
<img src={img.FLPATH} alt="" />
</div>
))}
<div className="tag-zone mb10">
</div>
<div className="text-zone mb10">
<table className="item-table">
<tr>
<th className="item-title col-4 text-lf">
<Icon path={mdiCalendarMonth} size={1} /> 방문일자
</th>
<td>{data.length > 0 && data[0].NOTELIST.VSDATE}</td>
</tr>
<tr>
<th className="item-title col-4 text-lf">
<Icon path={mdiHandshakeOutline} size={1} /> 거래처
</th>
<td>{data.length > 0 && data[0].NOTELIST.JSNAME}</td>
</tr>
<tr>
<th className="item-title col-4 text-lf">
<Icon path={mdiFileCheckOutline} size={1} /> 특이사항
</th>
<td>{data.length > 0 && data[0].NOTELIST.NOTECN.split('\n').map((line, i) => <React.Fragment key={i}>{line}<br /></React.Fragment>)}</td>
</tr>
<tr>
<th className="item-title col-4 text-lf">
<Icon path={mdiAccountOutline} size={1} /> 담당자
</th>
<td>{data.length > 0 && data[0].NOTELIST.CUSTMN}</td>
</tr>
</table>
</div>
<div className="tag-zone mb10">
{data.length > 0 && data[0].NOTELIST.HASTAG && data[0].NOTELIST.HASTAG.length > 0 && data[0].NOTELIST.HASTAG.map((tag, i) => <><span className="tag" key={i}>{tag}</span>{' '}</>)}
</div>
<div className="comment-zone">
<div className="comment-top pb10">
<Icon path={mdiChatOutline} size={1} horizontal />
<span className="ml5">{comments.length}</span>
</div>
<CommentItem
class={"comment-item"}
comments={comments}
insertComment={insertComment}
deleteComment={deleteComment}
modifyComment={modifyComment}
showReplyInput={showReplyInput}
setShowReplyInput={setShowReplyInput}
editInput={editInput}
setEditInput={setEditInput}
/>
<div className="comment-bottom">
<div className="comment-input flex justify-between align-center">
<input
type="text"
placeholder="댓글을 입력해주세요."
value={comment}
onChange={e => setComment(e.target.value)}
/>
<button className="comment-btn darkg-btn" onClick={() => insertComment("", comment)}>등록</button>
</div>
</div>
</div>
</div>
);
}
export default HomeSelectOne;