From cbada312d3c7cbe0cf8559b0467bb3519c8d74a1 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Wed, 13 Dec 2023 13:43:52 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=9D=B4=EB=A0=A5=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C,=20=EA=B3=A0=EA=B0=9D=EC=84=9C?= =?UTF-8?q?=EB=B9=84=EC=8A=A4=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/crud/grid/GridDatatable.js | 2 + .../history/AnalysisHistoryContainer.js | 57 ++++++++++++++----- .../history/AnalysisHistoryDetailContainer.js | 11 +++- .../cstmrService/faq/FaqContainer.js | 20 +++++++ .../inquiry/AdminInquiryContainer.js | 14 ++++- .../inquiry/UserInquiryContainer.js | 11 +++- src/views/cstmrService/InquiryView.js | 4 ++ 7 files changed, 98 insertions(+), 21 deletions(-) diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js index 633ad4f4..c477f166 100644 --- a/src/components/crud/grid/GridDatatable.js +++ b/src/components/crud/grid/GridDatatable.js @@ -9,6 +9,8 @@ import { } from 'react-feather'; import { selectableRowsComponent } from './selectableRowsComponent'; +// DataTable lib 참고 +// https://react-data-table-component.netlify.app/?path=/docs/api-props--page export const GridDatabase = props => { return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
diff --git a/src/containers/analysis/history/AnalysisHistoryContainer.js b/src/containers/analysis/history/AnalysisHistoryContainer.js index 1ec35e65..568b68b5 100644 --- a/src/containers/analysis/history/AnalysisHistoryContainer.js +++ b/src/containers/analysis/history/AnalysisHistoryContainer.js @@ -25,23 +25,45 @@ import { useHistory } from 'react-router-dom'; import { MessageErrorModal } from '../../../components/message/MessageErrorModal'; export const AnalysisHistoryContainer = props => { - const { data, count, searchParams, total, page } = useSelector( + /** + * data: 비행이력 현황 목록 + * count: 비행이력 현황 갯수 + * total: 비행이력 현황 총 갯수 + * page: 비행이력 현황 현재 페이지 + */ + const { data, count, total, page } = useSelector( state => state.analysisHistoryState ); - const { - list: aprvList, - aprvProc, - selectGroup - } = useSelector(state => state.flightState); + /** + * 선택한 그룹정보 및 검색조건 + * stDate: 시작일자 + * endDate: 종료일자 + * search1: 식별번호 + * groupId: 선택한 그룹의 ID + * groupNm: 선택한 그룹의 이름 + */ + const { selectGroup } = useSelector(state => state.flightState); + + /** + * groupList: SUPER, ADMIN 권한으로 전체 그룹 목록을 가져온다 + * groupListCount: SUPER, ADMIN 권한으로 전체 그룹 목록 갯수 + * joinList: 일반 USER 권한 자신이 포함된 그룹 목록 + * joinListCount: 일반 USER 권한 자신이 포함된 그룹 목록 갯수 + */ const { joinList, joinListCount, groupList, groupListCount } = useSelector( state => state.groupState ); + + // user: 로그인한 user 정보 const { user } = useSelector(state => state.authState, shallowEqual); // const [isClick, setIsClick] = useState(-1); // const [dateType, setDateType] = useState(1); + /** + * Modal 초기값 state + */ const [modal, setModal] = useState({ isOpen: false, title: '', @@ -49,6 +71,9 @@ export const AnalysisHistoryContainer = props => { color: '' }); + /** + * 검색조건 초기값 + */ const [params, setParams] = useState({ stDate: selectGroup.stDate ? moment(selectGroup.stDate).format('YYYY-MM-DD') @@ -60,11 +85,7 @@ export const AnalysisHistoryContainer = props => { groupId: selectGroup.groupId ? selectGroup.groupId : '' }); - useEffect(() => { - if (aprvProc && aprvProc.result > 0) { - handlerSearch(params); - } - }, [aprvProc]); + const dispatch = useDispatch(); useEffect(() => { if (user?.cstmrSno) { @@ -105,6 +126,8 @@ export const AnalysisHistoryContainer = props => { Actions.list.request({ searchParams: { ...params, groupId }, page: 1 }) ); }; + + // 그룹 선택 취소 handler const handlerGroupCancel = () => { dispatch( FlightAction.FLIGHT_PLAN_GROUP_SELECT({ @@ -119,8 +142,6 @@ export const AnalysisHistoryContainer = props => { // setIsClick(0); }; - const dispatch = useDispatch(); - const titleName = '비행이력 현황'; const excelHeaders = [ @@ -230,6 +251,7 @@ export const AnalysisHistoryContainer = props => { } ]; + // 검색 버튼 click handler const handlerSearch = () => { if (!params.stDate || !params.endDate) { setModal({ @@ -252,6 +274,7 @@ export const AnalysisHistoryContainer = props => { } }; + // 식별번호 Change handler const handlerInput = (type, val) => { if (type === 'search1') { setParams({ ...params, search1: val }); @@ -267,6 +290,8 @@ export const AnalysisHistoryContainer = props => { } } }; + + // 최근 1일, 최근 7일... 탭 click handler const handlerClickDate = val => { // setDateType(val); // setIsClick(val); @@ -277,6 +302,7 @@ export const AnalysisHistoryContainer = props => { })); }; + // 페이지 이동 handler const handlerPageChange = page => { dispatch(Actions.list.request({ searchParams: params, page })); }; @@ -296,6 +322,7 @@ export const AnalysisHistoryContainer = props => { /> */} {/* */} + {/* 그룹목록 */} {user ? ( <> @@ -318,7 +345,7 @@ export const AnalysisHistoryContainer = props => { <> )} - {/* */} + {/* 검색조건 */} {selectGroup.cstmrSno !== 0 ? ( <> @@ -341,7 +368,7 @@ export const AnalysisHistoryContainer = props => {
)} - {/* */} + {/* 비행이력 현황 목록 */} {selectGroup.cstmrSno !== 0 ? ( <> diff --git a/src/containers/analysis/history/AnalysisHistoryDetailContainer.js b/src/containers/analysis/history/AnalysisHistoryDetailContainer.js index ff525031..b574da1b 100644 --- a/src/containers/analysis/history/AnalysisHistoryDetailContainer.js +++ b/src/containers/analysis/history/AnalysisHistoryDetailContainer.js @@ -8,10 +8,11 @@ import { CustomDetailLayout } from '../../../components/layout/CustomDetailLayou import * as Actions from '../../../modules/analysis/history/actions/analysisHistoryAction'; export const AnalysisHistoryDetailContainer = () => { - const { log, detail } = useSelector(state => state.analysisHistoryState); - - const dispatch = useDispatch(); + // 비행이력 목록 + const { log } = useSelector(state => state.analysisHistoryState); + // 쿼리 파라미터 id const { id } = useParams(); + const dispatch = useDispatch(); const titleName = '비행이력'; @@ -19,6 +20,7 @@ export const AnalysisHistoryDetailContainer = () => { handlerSearch(); }, []); + // 비행이력 목록 불러오는 handler const handlerSearch = () => { dispatch(Actions.detail.request(id)); }; @@ -143,7 +145,10 @@ export const AnalysisHistoryDetailContainer = () => { // params={params} // setDateType={setDateType} /> */} + {/* 비행이력 로그 Chart */} + + {/* 비행이력 로그 Grid */} state.authState); + // 검색 state const [searchText, setSearchText] = useState(''); + // 질문 등록, 수정 Form const [formData, setFormData] = useState(initFormData); + // 질문 등록, 수정 flag state const [formMode, setFormMode] = useState('create'); + // 질문 등록, 수정 Form Modal const [isOpenFormModal, setIsOpenFormModal] = useState(false); + // validation Modal const [validationModal, setValidationModal] = useState({ errorType: { isOpen: false, @@ -75,12 +82,14 @@ export default function FaqContainer() { }); const dispatch = useDispatch(); + // 질문 목록 const { faqList } = useSelector(state => state.faqState); useEffect(() => { handlerGetFaqList(); }, [activeTab]); + // 질문 목록 가져오는 handler const handlerGetFaqList = () => { dispatch( LIST.request({ @@ -90,6 +99,7 @@ export default function FaqContainer() { ); }; + // 검색어 Change handler const handlerChangeSearchText = useCallback( e => { const { value } = e.target; @@ -98,15 +108,18 @@ export default function FaqContainer() { [searchText] ); + // 검색어 Enter key handler const handlerEnterSearchText = () => { handlerGetFaqList(); }; + // 등록, 수정 Form Modal handler const handlerOpenFormModal = () => { setFormData(initFormData); setIsOpenFormModal(!isOpenFormModal); }; + // 질문 카테고리 Tab handler const handlerChangeTab = useCallback( val => { setActiveTab(val); @@ -114,6 +127,7 @@ export default function FaqContainer() { [activeTab] ); + // 질문 등록, 수정 Form change handler const handlerChangeFormData = useCallback( (type, val) => { setFormData({ @@ -124,6 +138,7 @@ export default function FaqContainer() { [formData] ); + // 질문 등록, 수정 Submit handler const handlerSubmitForm = () => { if (!formData.title) { setValidationModal({ @@ -187,6 +202,7 @@ export default function FaqContainer() { }); }; + // 수정하기 button click handler const handlerFaqModify = val => { setFormMode('update'); setFormData({ @@ -200,6 +216,7 @@ export default function FaqContainer() { setIsOpenFormModal(true); }; + // 질문 삭제 confirm handler const handlerDeleteConfirmFaq = () => { setValidationModal({ ...validationModal, @@ -211,6 +228,7 @@ export default function FaqContainer() { }); }; + // 질문 삭제 handler const handlerDeleteFaq = () => { dispatch( DELETE.request({ @@ -225,6 +243,7 @@ export default function FaqContainer() { setFormData(initFormData); }; + // 질문 목록 formating const handlerFaqList = () => { if (faqList?.length <= 0 || !faqList) return []; return faqList.map(i => { @@ -238,6 +257,7 @@ export default function FaqContainer() { {i.title} + {/* User 권한일 경우 수정하기 버튼 미노출 */} {user?.authId !== 'USER' && (
state.qnaState ); @@ -98,8 +106,8 @@ export default function AdminInquiryContainer() { [adminDetailForm] ); + // 첨부파일 Download handler const handlerFileDownload = () => { - console.log(adminDetailForm.fileInfos); dispatch(ADMIN_FILE_DOWN.request(adminDetailForm.fileInfos)); }; @@ -149,6 +157,7 @@ export default function AdminInquiryContainer() { return ( + {/* 검색 영역 Component */} + {/* 문의 목록 Component */} - + {/* 상세보기 Modal Component */} state.qnaState ); const fileInputRef = useRef(null); + // 문의 하기 Form Modal state const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false); + // 문의 Form state const [inquiryForm, setInquiryForm] = useState({ category: '칭찬', contact: '', @@ -25,6 +31,7 @@ export default function UserInquiryContainer({ memberName }) { fileInfos: [] }); + // 등록 validation modal state const [validationModal, setValidationModal] = useState({ errorType: { isOpen: false, @@ -150,6 +157,7 @@ export default function UserInquiryContainer({ memberName }) { [inquiryForm] ); + // 파일 upload handler const handlerFileChange = e => { const file = e.target.files[0]; setInquiryForm({ @@ -158,6 +166,7 @@ export default function UserInquiryContainer({ memberName }) { }); }; + // 파일 취소 handler const handlerFileClear = () => { setInquiryForm({ ...inquiryForm, @@ -300,7 +309,7 @@ export default function UserInquiryContainer({ memberName }) { 1:1 문의하기
- + {/* 문의 등록 Form Modal */} + {/* 권한의 따른 페이지 분기 + Super, Admin : 전체 문의 목록 + User: 자신에 문의 목록 + */} {user?.authId !== 'USER' ? ( ) : (