From 27da351ca5f19e53f14915f5bcc00457f562ca43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 22 Sep 2022 15:47:17 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EB=B9=84=ED=96=89=EC=9D=B4=EB=A0=A5?= =?UTF-8?q?=ED=98=84=ED=99=A9=20=EA=B7=B8=EB=A3=B9=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EC=8B=9C=20=EB=B9=84=ED=96=89=EC=9D=B4=EB=A0=A5=20=ED=98=84?= =?UTF-8?q?=ED=99=A9=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../history/AnalysisHistoryContainer.js | 148 +++++++++--------- .../history/actions/analysisHistoryAction.ts | 7 +- .../history/reducers/analysisHitoryReducer.ts | 6 + 3 files changed, 85 insertions(+), 76 deletions(-) diff --git a/src/containers/analysis/history/AnalysisHistoryContainer.js b/src/containers/analysis/history/AnalysisHistoryContainer.js index a0f656e..7c9263c 100644 --- a/src/containers/analysis/history/AnalysisHistoryContainer.js +++ b/src/containers/analysis/history/AnalysisHistoryContainer.js @@ -8,12 +8,19 @@ import { CustomMainLayout } from '../../../components/layout/CustomMainLayout'; import * as Actions from '../../../modules/analysis/history/actions/analysisHistoryAction'; import FlightPlanGroupGrid from '../../../components/basis/flight/plan/FlightPlanGroupGrid'; import { JOIN_LIST } from '../../../modules/basis/group/actions/basisGroupAction'; -import { Col, Row, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; +import { + Col, + Row, + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter +} from 'reactstrap'; import * as FlightAction from '../../../modules/basis/flight/actions/basisFlightAction'; import { useHistory } from 'react-router-dom'; import { MessageErrorModal } from '../../../components/message/MessageErrorModal'; - export const AnalysisHistoryContainer = props => { const { data, count, searchParams } = useSelector( state => state.analysisHistoryState @@ -23,12 +30,15 @@ export const AnalysisHistoryContainer = props => { endDate: moment().subtract(0, 'day').format('YYYY-MM-DD'), // stDate: moment().set({ 'date': 1, 'h': 0, 'm': 0, 's': 0 }).format('YYYY-MM-DD HH:mm:ss'), // endDate: moment().set({ 'h': 23, 'm': 59, 's': 59 }).format('YYYY-MM-DD HH:mm:ss'), - groupId: '', - + groupId: '' }; const [searchData, setSearchData] = useState(initSearchData); - const { list: aprvList, aprvProc, selectGroup } = useSelector(state => state.flightState); + const { + list: aprvList, + aprvProc, + selectGroup + } = useSelector(state => state.flightState); const { joinList, joinListCount } = useSelector(state => state.groupState); const { user } = useSelector(state => state.authState, shallowEqual); @@ -42,6 +52,42 @@ export const AnalysisHistoryContainer = props => { color: '' }); + useEffect(() => { + if (aprvProc && aprvProc.result > 0) { + handleSearch(searchData); + } + }, [aprvProc]); + + useEffect(() => { + if (user?.cstmrSno) { + dispatch( + JOIN_LIST.request({ + cstmrSno: user?.cstmrSno + }) + ); + } + }, [user]); + + useEffect(() => { + setParams({ + ...params, + stDate: '', + endDate: '', + search1: '', + groupId: searchData.groupId + }); + }, [searchData.groupId]); + + useEffect(() => { + handlerGroupCancel(); + }, []); + + const onKeyPress = e => { + if (e.key == 'Enter') { + handlerSearch(); + } + }; + const handleGroupSelect = ({ groupId }) => { // 권한 상관 없이 모두 조회 가능 const param = searchData; @@ -54,47 +100,33 @@ export const AnalysisHistoryContainer = props => { sessionStorage.setItem('groupId', groupId); sessionStorage.setItem('cstmrSno', user.cstmrSno); - setIsClick(0) + setIsClick(0); setSearchData(prevState => { return { ...prevState, // cstmrSno: user.cstmrSno, groupId: groupId - } + }; }); - //dispatch(Actions.list.request({ searchParams: param })); - } + dispatch(Actions.LIST_INITAL()); + }; const handlerGroupCancel = () => { - dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT({ cstmrSno: 0, groupId: '', groupNm: '', endDate: '', stDate: '' })); - setIsClick(0) - - } - - - - useEffect(() => { - if (aprvProc && aprvProc.result > 0) { - handleSearch(searchData); - } - }, [aprvProc]) - - useEffect(() => { - if (user?.cstmrSno) { - dispatch( - JOIN_LIST.request({ - cstmrSno: user?.cstmrSno - }) - ); - } - }, [user]) - + dispatch( + FlightAction.FLIGHT_PLAN_GROUP_SELECT({ + cstmrSno: 0, + groupId: '', + groupNm: '', + endDate: '', + stDate: '' + }) + ); + setIsClick(0); + }; const dispatch = useDispatch(); const titleName = '비행이력 현황'; - - const excelHeaders = [ { label: '일자', key: 'cntrlStDt' }, { label: '식별번호', key: 'idntfNum' }, @@ -207,30 +239,7 @@ export const AnalysisHistoryContainer = props => { endDate: moment().subtract(-1, 'day').format('YYYY-MM-DD'), search1: '', groupId: searchData.groupId - }); - console.log(searchData.groupId); - - useEffect(() => { - setParams({ - ...params, - stDate: '', - endDate: '', - search1: '', - groupId: searchData.groupId - }); - }, [searchData.groupId]); - - - useEffect(() => { - if (data) return; - }, [searchParams]); - - const onKeyPress = e => { - if (e.key == 'Enter') { - handlerSearch(); - } - }; // useEffect(() => { }, [params]); @@ -241,18 +250,15 @@ export const AnalysisHistoryContainer = props => { title: '필수값 입력 오류', desc: '올바른 일자를 입력해 주세요.', color: 'modal-danger' - }) - } - else if (!params.groupId) { + }); + } else if (!params.groupId) { setModal({ isOpen: true, title: '필수값 입력 오류', desc: '그룹 선택 해주세요.', color: 'modal-danger' - }) - } - else - dispatch(Actions.list.request({ searchParams: params })); + }); + } else dispatch(Actions.list.request({ searchParams: params })); }; const handlerInput = (type, val) => { @@ -264,9 +270,9 @@ export const AnalysisHistoryContainer = props => { setParams({ ...params, stDate: moment(val[0]).format('YYYY-MM-DD'), - endDate: moment(val[1]).format('YYYY-MM-DD'), + endDate: moment(val[1]).format('YYYY-MM-DD') }); - setIsClick(-1) + setIsClick(-1); } } }; @@ -275,7 +281,6 @@ export const AnalysisHistoryContainer = props => { setIsClick(val); }; return ( -
@@ -303,13 +308,11 @@ export const AnalysisHistoryContainer = props => { searchData={searchData} /> - ) : (
나의 그룹 목록에서 상세보기를 클릭하세요.
)} - {selectGroup.cstmrSno !== 0 ? ( @@ -321,15 +324,11 @@ export const AnalysisHistoryContainer = props => { excelHeaders={excelHeaders} count={count} pagination={true} - /> - ) : ( -
-
+
)} -
@@ -358,6 +357,5 @@ export const AnalysisHistoryContainer = props => { - ); }; diff --git a/src/modules/analysis/history/actions/analysisHistoryAction.ts b/src/modules/analysis/history/actions/analysisHistoryAction.ts index 921616e..66532f2 100644 --- a/src/modules/analysis/history/actions/analysisHistoryAction.ts +++ b/src/modules/analysis/history/actions/analysisHistoryAction.ts @@ -20,6 +20,8 @@ const DETAIL_FAILURE = 'anls/hstry/DETAIL_FAILURE'; const DISPATCH_SEARCH = 'amls/hstry/DISPATCH_SEARCH'; +const LIST_INIT = 'anls/hstry/LIST_INIT'; + export const dispatchSearch = createAction(DISPATCH_SEARCH)<{ searchParams: string }>(); @@ -41,11 +43,14 @@ export const detail = createAsyncAction( DETAIL_FAILURE )(); +export const LIST_INITAL = createAction(LIST_INIT)(); + const actions = { list, detail, log, - dispatchSearch + dispatchSearch, + LIST_INITAL }; export type AnalysisHistoryAction = ActionType; diff --git a/src/modules/analysis/history/reducers/analysisHitoryReducer.ts b/src/modules/analysis/history/reducers/analysisHitoryReducer.ts index 53d0e82..f71d0e8 100644 --- a/src/modules/analysis/history/reducers/analysisHitoryReducer.ts +++ b/src/modules/analysis/history/reducers/analysisHitoryReducer.ts @@ -44,4 +44,10 @@ export const analysisHistoryReducer = createReducer< draft.log = log; }) + ) + .handleAction(Actions.LIST_INITAL, (state, action) => + produce(state, draft => { + draft.data = initResponseAnalysisHistoryData.data; + draft.count = initResponseAnalysisHistoryData.count; + }) ); From de3ea4350de1a5a29075fefa9e7f1c2e0ef2aca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 22 Sep 2022 15:55:55 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=EC=B6=A9=EB=8F=8C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../history/AnalysisHistoryContainer.js | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/src/containers/analysis/history/AnalysisHistoryContainer.js b/src/containers/analysis/history/AnalysisHistoryContainer.js index 1f79fe9..43a6a58 100644 --- a/src/containers/analysis/history/AnalysisHistoryContainer.js +++ b/src/containers/analysis/history/AnalysisHistoryContainer.js @@ -240,32 +240,6 @@ export const AnalysisHistoryContainer = props => { search1: '', groupId: searchData.groupId }); -<<<<<<< HEAD -======= - - useEffect(() => { - setParams({ - ...params, - stDate: '', - endDate: '', - search1: '', - groupId: searchData.groupId - }); - }, [searchData.groupId]); - - - useEffect(() => { - if (data) return; - }, [searchParams]); - - const onKeyPress = e => { - if (e.key == 'Enter') { - handlerSearch(); - } - }; ->>>>>>> 7b04365e79a46f1e9cf6d47485e22c3241da7b01 - - // useEffect(() => { }, [params]); const handlerSearch = () => { if (!params.stDate || !params.endDate) { From e50c143c8302dd1d88b6b72e9f7bd0f3e6d82dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Thu, 22 Sep 2022 16:42:23 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=EB=B9=84=EC=A0=95=EC=83=81=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=ED=91=9C=EC=B6=9C=20=EB=A1=9C=EC=A7=81=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/naver/dron/DronToast.js | 43 ++++++++----------- src/modules/control/gp/sagas/controlGpSaga.ts | 18 +++++++- src/views/control/alarm/ControlAlarmList.js | 27 +----------- 3 files changed, 34 insertions(+), 54 deletions(-) diff --git a/src/components/map/naver/dron/DronToast.js b/src/components/map/naver/dron/DronToast.js index 76e1fc1..de18578 100644 --- a/src/components/map/naver/dron/DronToast.js +++ b/src/components/map/naver/dron/DronToast.js @@ -6,34 +6,41 @@ import Avatar from '../../../../@core/components/avatar'; import { Bell, Check, X, AlertTriangle, Info } from 'react-feather' import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp'; import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions'; +import 'react-toastify/dist/ReactToastify.css'; const DronToast = () => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); const { controlGpList } = useSelector(state => state.controlGpState); + const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState); const [toastId, setToastId] = useState(); useEffect(() => { - if (controlGpList) { + if (controlGpArcrftWarnList) { + console.log("===================================") + console.log('tastID : ', toastId); if (!toastId) { - controlGpList.forEach(gps => { - // console.log("===================================") + controlGpArcrftWarnList.forEach(warn => { // console.log("Warn ==> ", gps.controlWarnCd); // console.log("Noti ==> ", gps.controlWarnNotyCd); - if (gps.controlWarnCd && gps.controlWarnNotyCd) { + if (warn.controlWarnCd) { + console.log('warn CD : ', warn.controlWarnCd); const id = toast.info( toastRender( - `${gps.objectId} 비정상 상황 알림`, + `${warn.idntfNum} 비정상 상황 알림`, `경로 상에 비행 구역을 이탈했습니다.` ), { autoClose: false, hideProgressBar: true, position: toast.POSITION.BOTTOM_RIGHT, - onClick: props => { + onClick: () => { + setToastId(null); + handleNotiClick(warn.controlId, warn.idntfNum); + }, + onClose: () => { setToastId(null); - handleNotiClick(gps.controlId, gps.objectId); } } ) @@ -43,7 +50,7 @@ const DronToast = () => { }) } } - }, [controlGpList]); + }, [controlGpArcrftWarnList]); const handleNotiClick = (controlId, idntfNum) => { dispatch(objectClickAction(controlId)); @@ -73,23 +80,7 @@ const DronToast = () => { ) } - return ( - // - //
- //
- // } /> - //
- // {/* {title} */} - //
- //
- //
- - //
- // - // {/* {message} */} - // - //
- // + return ( null ) diff --git a/src/modules/control/gp/sagas/controlGpSaga.ts b/src/modules/control/gp/sagas/controlGpSaga.ts index 87d0c08..136ffb5 100644 --- a/src/modules/control/gp/sagas/controlGpSaga.ts +++ b/src/modules/control/gp/sagas/controlGpSaga.ts @@ -43,14 +43,28 @@ function* getControlGpSaga( } // console.log('websocket data :: ', data); + yield put( - Actions.controlGpAction.success({ - //* + Actions.controlGpAction.success({ controlGpList: data }) ); + if (data.length > 0) { + const controlIds: any = []; + + data.forEach((gps) => { + controlIds.push(gps.controlId); + }); + + const param = controlIds.join(','); + + const rs = yield call(controlGpApi.getArcrftWarnList, param); + + yield put(Actions.controlGpArcrftWarnAction.success(rs)); + } + if (objectId && isClickObject) { let detailData; diff --git a/src/views/control/alarm/ControlAlarmList.js b/src/views/control/alarm/ControlAlarmList.js index 1aeb4c9..8701e72 100644 --- a/src/views/control/alarm/ControlAlarmList.js +++ b/src/views/control/alarm/ControlAlarmList.js @@ -55,32 +55,7 @@ const ControlAlarmList = props => { } }, [controlGpArcrftWarnList]); - - useEffect(() => { - if(controlGpList) { - const controlIds = []; - - if(controlGpList.length > 0) { - controlGpList.forEach(gps => { - controlIds.push(gps.controlId); - }); - - const param = controlIds.join(','); - - dispatch(controlGpArcrftWarnAction.request(param)); - } else { - setTotal(total => { - return { - totalDroneCnt: 0, - totalWarnCnt: 0, - warnList: [] - } - }) - } - } - - }, [controlGpList]); - + return (
From 4cf65335710f57699bcf5b48bad2ede2e1e4b578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 22 Sep 2022 17:15:34 +0900 Subject: [PATCH 4/6] =?UTF-8?q?prod=20mode=20console.log=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c719469..535ee4c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ // ** Router Import -import Router from './router/Router' +import Router from './router/Router'; +if (process.env.NODE_ENV === 'production') console.log = function () {}; +const App = props => ; -const App = props => - -export default App +export default App; From 58562a3b45ccf6bb642ebe271044d6eca5619721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 22 Sep 2022 17:42:54 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=EC=8B=9C=20=EC=82=AD=EC=A0=9C=EB=B2=84=ED=8A=BC=20=EB=B9=84?= =?UTF-8?q?=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 1735 +++++++++-------- 1 file changed, 889 insertions(+), 846 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 8c9ed0d..7df6a02 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -1,18 +1,21 @@ import React, { useEffect, useState } from 'react'; import { - Card, - CardBody, - Col, - FormGroup, - Input, - Label, - Row, - Button + Card, + CardBody, + Col, + FormGroup, + Input, + Label, + Row, + Button } from 'reactstrap'; import Flatpickr from 'react-flatpickr'; import '@styles/react/libs/flatpickr/flatpickr.scss'; import moment from 'moment'; -import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; +import { + initFlight, + initFlightBas +} from '../../../../modules/basis/flight/models/basisFlightModel'; import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer'; import { FlightPlanModal } from './FlightPlanModal'; import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; @@ -21,185 +24,190 @@ import { X } from 'react-feather'; import { useSelector } from 'react-redux'; import { shallowEqual } from 'react-redux'; +const FlightPlanForm = ({ + data, + handleModal, + handleChange, + handleSave, + handleDelete, + modal, + handleDeleteArray +}) => { + const { areaList, pilotList, arcrftList } = data; + + const [date, setDate] = useState(); + const [isFlightDone, setIsFlightDone] = useState(); + + const [test, setTest] = useState(); + const { user } = useSelector(state => state.authState, shallowEqual); + const { detail } = useSelector(state => state.flightState); + + useEffect(() => { + if (detail.createDt) { + setDate(detail.schFltStDt); + } -const FlightPlanForm = ({ data, handleModal, handleChange, handleSave, handleDelete, modal, handleDeleteArray }) => { - const { areaList, pilotList, arcrftList } = data; - - - const [date, setDate] = useState(); - const [isFlightDone, setIsFlightDone] = useState(); - - const [test, setTest] = useState(); - const { user } = useSelector(state => state.authState, shallowEqual); - const { detail } = useSelector(state => state.flightState); - - - useEffect(() => { - if (detail.createDt) { - setDate(detail.schFltStDt); - } - - if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) - setTest(false) - } else { - // console.log(false) - setTest(true) - } - }, [detail]) - - useEffect(() => { - setDate(''); - }, []) - - useEffect(() => { - if (date) { - let cTime = new Date(); - let pTime = new Date(date) - if (cTime > pTime) { - setIsFlightDone(true); - } else { - setIsFlightDone(false); - } - } - }, [date]) - - return ( - - + if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { + // console.log(true) + setTest(false); + } else { + // console.log(false) + setTest(true); + } + }, [detail]); + + useEffect(() => { + setDate(''); + }, []); + + useEffect(() => { + if (date) { + let cTime = new Date(); + let pTime = new Date(date); + if (cTime > pTime) { + setIsFlightDone(true); + } else { + setIsFlightDone(false); + } + } + }, [date]); + + return ( + + + + + + - - - - - -
-
-
-
-
- -
-
-
-

신청인 정보

-
-
- - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'plan', - name, - value, - }) - }} - - bsSize='sm' - placeholder='' - /> - - - - - -
- - { - const { name, value } = e.target; - handleChange({ - type: 'plan', - name, - value, - }) - }} - readOnly /> -
-
- { - const { name, value } = e.target; - handleChange({ - type: 'plan', - name, - value, - }) - }} - placeholder='010-0000-0000' - /> -
- - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'plan', - name, - value, - }) - }} - // innerRef={props.data} - placeholder='' - /> - - - -
-
-
-
-

비행 계획 정보

-
-
- - - - - {/* { + +
+
+
+
+ +
+
+
+

신청인 정보

+
+
+ + + + + { + const { name, value } = e.target; + handleChange({ + type: 'plan', + name, + value + }); + }} + bsSize='sm' + placeholder='' + /> + + + + +
+ + { + const { name, value } = e.target; + handleChange({ + type: 'plan', + name, + value + }); + }} + readOnly + /> +
+
+ { + const { name, value } = e.target; + handleChange({ + type: 'plan', + name, + value + }); + }} + placeholder='010-0000-0000' + /> +
+ + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'plan', + name, + value + }); + }} + // innerRef={props.data} + placeholder='' + /> + + + +
+
+
+
+

비행 계획 정보

+
+
+ + + + + {/* { (isFlightDone) ? ( ) } */} - { - const value = moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; - handleChange({ - type: 'plan', - name: 'schFltStDt', - value - }) - }} - placeholder='비행 시작일자 선택(클릭)' - // {...{options:{minDate: "today"}}} - /> - - - - - - {/* { + { + const value = + moment(date[0]).format( + 'YYYY-MM-DD HH:mm:ss' + ) || ''; + handleChange({ + type: 'plan', + name: 'schFltStDt', + value + }); + }} + placeholder='비행 시작일자 선택(클릭)' + // {...{options:{minDate: "today"}}} + /> + + + + + + {/* { (isFlightDone) ? ( ) } */} - { - const value = moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; - handleChange({ - type: 'plan', - name: 'schFltEndDt', - value - }) - }} - placeholder='비행 종료일자 선택(클릭)' - // {...{options:{minDate: "today"}}} - /> - - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'plan', - name, - value, - }) - }} - // innerRef={props.data} - // className={classnames({ - // 'is-invalid': props.errors.arcrftTypeCd - // })} - > - {/* TODO CDNOT 코드연동 필요 */} - - - - - - - - - - - -
-
-
- {/* TODO area 다건 표출 */} -
-

비행 구역 정보

- { - handleModal({ target: 'area', isOpen: true }) - }} - > - 비행 구역 설정 - -
- {areaList - ? areaList.map((item, i) => - ) - : } -
-
-
-

조종사 정보

- { - handleModal({ target: 'pilot', isOpen: true }) - }} - > - 조종사 조회 - -
- {pilotList - ? pilotList.map((item, i) => - ) - : } -
-
-
-

기체 정보

- { - handleModal({ target: 'arcrft', isOpen: true }); - }} - > - 기체 조회 - -
- {arcrftList - ? arcrftList.map((item, i) => - ) - - : } -
- -
- - 저장 - - - 삭제 - -
- -
-
- - + { + const value = + moment(date[0]).format( + 'YYYY-MM-DD HH:mm:ss' + ) || ''; + handleChange({ + type: 'plan', + name: 'schFltEndDt', + value + }); + }} + placeholder='비행 종료일자 선택(클릭)' + // {...{options:{minDate: "today"}}} + /> + + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'plan', + name, + value + }); + }} + // innerRef={props.data} + // className={classnames({ + // 'is-invalid': props.errors.arcrftTypeCd + // })} + > + {/* TODO CDNOT 코드연동 필요 */} + + + + + + + + + + + +
+
+
+ {/* TODO area 다건 표출 */} +
+

비행 구역 정보

+ { + handleModal({ target: 'area', isOpen: true }); + }} + > + 비행 구역 설정 + +
+ {areaList ? ( + areaList.map((item, i) => ( + + )) + ) : ( + + )} +
+
+
+

조종사 정보

+ { + handleModal({ target: 'pilot', isOpen: true }); + }} + > + 조종사 조회 + +
+ {pilotList ? ( + pilotList.map((item, i) => ( + + )) + ) : ( + + )} +
+
+
+

기체 정보

+ { + handleModal({ target: 'arcrft', isOpen: true }); + }} + > + 기체 조회 + +
+ {arcrftList ? ( + arcrftList.map((item, i) => ( + + )) + ) : ( + + )} +
- - - +
+ + 저장 + + {data.planSno ? ( + + 삭제 + + ) : null} +
+
+
+ - - - - ) -} + + + + + + + + ); +}; export default FlightPlanForm; const SelectModal = ({ handleModal, modal, test }) => { - let title = ''; - let description = ''; - let type = ''; - let isOpen = false; - - if (modal.pilot) { - isOpen = modal.pilot; - title = '조종사 조회'; - type = 'pilot'; - description = - } - - if (modal.arcrft) { - isOpen = modal.arcrft; - title = '기체 조회'; - type = 'arcrft'; - description = ; - } - - if (modal.area) { - isOpen = modal.area; - title = '비행 구역 설정'; - type = 'area'; - description = ; - } - - return ( - - ) - -} - + let title = ''; + let description = ''; + let type = ''; + let isOpen = false; + + if (modal.pilot) { + isOpen = modal.pilot; + title = '조종사 조회'; + type = 'pilot'; + description = ( + + ); + } + + if (modal.arcrft) { + isOpen = modal.arcrft; + title = '기체 조회'; + type = 'arcrft'; + description = ( + + ); + } + + if (modal.area) { + isOpen = modal.area; + title = '비행 구역 설정'; + type = 'area'; + description = ( + + ); + } + + return ( + + ); +}; const AreaForm = ({ data, handleChange, index }) => { - - return (
- - - - - {data && data.coordList && data.coordList.length > 0 - ? data.coordList.map((item, i) => { - return { - // const {name, value} = e.target; - // handleChange({ - // type: 'coord', - // name, - // value, - // index: i, - // pIndex: index - // }) - // }} - // style={{marginBottom: 5}} - readOnly - /> - }) : { - const { name, value } = e.target; - handleChange({ - type: 'coord', - name, - value, - index: 0, - pIndex: index - }) - }} - readOnly - />} - - - - - - -
- - { - const { name, value } = e.target; - handleChange({ - type: 'area', - name, - value, - index - }) - }} - readOnly - /> -
-
- { - const { name, value } = e.target; - handleChange({ - type: 'area', - name, - value, - index - }) - }} - readOnly - /> -
- - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'area', - name, - value, - index - }) - }} - readOnly - /> - - - -
) -} + return ( +
+ + + + + {data && data.coordList && data.coordList.length > 0 ? ( + data.coordList.map((item, i) => { + return ( + { + // const {name, value} = e.target; + // handleChange({ + // type: 'coord', + // name, + // value, + // index: i, + // pIndex: index + // }) + // }} + // style={{marginBottom: 5}} + readOnly + /> + ); + }) + ) : ( + { + const { name, value } = e.target; + handleChange({ + type: 'coord', + name, + value, + index: 0, + pIndex: index + }); + }} + readOnly + /> + )} + + + + +
+ + { + const { name, value } = e.target; + handleChange({ + type: 'area', + name, + value, + index + }); + }} + readOnly + /> +
+
+ { + const { name, value } = e.target; + handleChange({ + type: 'area', + name, + value, + index + }); + }} + readOnly + /> +
+ + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'area', + name, + value, + index + }); + }} + readOnly + /> + + + +
+ ); +}; const PilotForm = ({ data, handleChange, index, handleDeleteArray }) => { - const [test, setTest] = useState(); - const { user } = useSelector(state => state.authState, shallowEqual); - const { detail } = useSelector(state => state.flightState); - - useEffect(() => { - - if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) - setTest(false) - } else { - // console.log(false) - setTest(true) - } - - - }, [detail]) - - return (
- - - - - { - const { name, value } = e.target; - handleChange({ - type: 'pilot', - name, - value, - index - }) - }} - readOnly - /> - - - - -
- - { - const { name, value } = e.target; - handleChange({ - type: 'pilot', - name, - value, - index - }) - }} - readOnly - /> -
-
- { - const { name, value } = e.target; - handleChange({ - type: 'pilot', - name, - value, - index - }) - }} - readOnly - - /> -
- - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'pilot', - name, - value, - index - }) - }} - readOnly - - /> - - - - {data.groupNm ? - ( - - handleDeleteArray({ type: 'pilot', index }) - } - > - - - - ) - : - ( - <> - ) - } - - -
) -} - + const [test, setTest] = useState(); + const { user } = useSelector(state => state.authState, shallowEqual); + const { detail } = useSelector(state => state.flightState); + + useEffect(() => { + if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { + // console.log(true) + setTest(false); + } else { + // console.log(false) + setTest(true); + } + }, [detail]); + + return ( +
+ + + + + { + const { name, value } = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }); + }} + readOnly + /> + + + + +
+ + { + const { name, value } = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }); + }} + readOnly + /> +
+
+ { + const { name, value } = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }); + }} + readOnly + /> +
+ + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }); + }} + readOnly + /> + + + + {data.groupNm ? ( + handleDeleteArray({ type: 'pilot', index })} + > + + + ) : ( + <> + )} + + +
+ ); +}; const ArcrftForm = ({ data, handleChange, index, handleDeleteArray }) => { - const [test, setTest] = useState(); - const { user } = useSelector(state => state.authState, shallowEqual); - const { detail } = useSelector(state => state.flightState); - - useEffect(() => { - - if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) - setTest(false) - } else { - // console.log(false) - setTest(true) - } - - }, [detail]) - - return (
- - - - - { - const { name, value } = e.target; - handleChange({ - type: 'arcrft', - name, - value, - index - }) - }} - readOnly - /> - - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'arcrft', - name, - value, - index - }) - }} - readOnly - /> - - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'arcrft', - name, - value, - index - }) - }} - readOnly - /> - - - - - - { - const { name, value } = e.target; - handleChange({ - type: 'arcrft', - name, - value, - index - }) - }} - readOnly - /> - - - {data.groupNm ? - ( - - - handleDeleteArray({ type: 'arcrft', index }) - } - > - - - - ) - : - ( - <> - ) - } - -
) -} + const [test, setTest] = useState(); + const { user } = useSelector(state => state.authState, shallowEqual); + const { detail } = useSelector(state => state.flightState); + + useEffect(() => { + if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { + // console.log(true) + setTest(false); + } else { + // console.log(false) + setTest(true); + } + }, [detail]); + + return ( +
+ + + + + { + const { name, value } = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }); + }} + readOnly + /> + + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }); + }} + readOnly + /> + + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }); + }} + readOnly + /> + + + + + + { + const { name, value } = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }); + }} + readOnly + /> + + + {data.groupNm ? ( + + handleDeleteArray({ type: 'arcrft', index })} + > + + + + ) : ( + <> + )} + +
+ ); +}; From 27a7409f39dab43df9c45a77f207686f4fd5385a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Thu, 22 Sep 2022 17:44:11 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=EA=B7=B8=EB=A3=B9=EB=AA=85=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1/=EC=88=98=EC=A0=95=20=EC=8B=9C=20validation=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/basis/group/BaisGroupForm.js | 222 ++++++++++-------- .../basis/group/BasisGroupDetailContainer.js | 62 +++-- 2 files changed, 168 insertions(+), 116 deletions(-) diff --git a/src/components/basis/group/BaisGroupForm.js b/src/components/basis/group/BaisGroupForm.js index 1dd73a7..d6a2594 100644 --- a/src/components/basis/group/BaisGroupForm.js +++ b/src/components/basis/group/BaisGroupForm.js @@ -1,87 +1,113 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; +import * as yup from 'yup'; +import { useForm } from 'react-hook-form'; +import classnames from 'classnames'; import { Row, Col, - Table, - Badge, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle, Card, - CardHeader, CardBody, - CardTitle, - CardSubtitle, - ButtonGroup, Button, Input, - CustomInput, FormGroup, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - Label + Label, + FormFeedback, + Form } from 'reactstrap'; -import { Link, useHistory } from 'react-router-dom'; +import { yupResolver } from '@hookform/resolvers/yup'; export const BasisGroupForm = props => { + useEffect(() => { + if (props.groupData?.groupId) { + setValue('groupNm', props.groupData?.groupNm); + } + }, [props.groupData]); + + const Schema = yup.object().shape({ + groupNm: yup + .string() + .required('그룹명을 입력해 주세요') + .matches( + /^[ㄱ-힣A-Za-z0-9]{2,12}$/, + '2 자 이상, 12 자 이하 영문자/숫자만 입력 가능합니다.' + ) + }); + + const { register, getValues, setValue, errors, handleSubmit } = useForm({ + defaultValues: { + groupNm: '' + }, + resolver: yupResolver(Schema) + }); + + const onSumbit = async data => { + props.handlerSave(data); + }; + return ( - - - - -
-
-
-

{props.title} 상세정보

-
-
- {props.groupData.type === 'update' ? ( - 최종 수정일자 : {props.groupData.updateDt} - ) : null} +
+ + + + +
+
+
+

{props.title} 상세정보

+
+
+ {props.groupData.type === 'update' ? ( + 최종 수정일자 : {props.groupData.updateDt} + ) : null} +
-
-
-
-
- - - - - - - - - - - - - +
+
+
+ + + + + + + + + + + + {errors && errors.groupNm && ( + + {errors.groupNm.message} + + )} + + - {/* + {/* { */} - -
-
-
+ +
+
+
-
- - 저장 - - {/* - 목록 - */} - {props.groupData.type != 'create' ? ( +
props.handlerWidthrow()} + // onClick={props.handlerSave} + type='submit' > - 삭제 + 저장 - ) : ( - <> - )} + {/* + 목록 + */} + {props.groupData.type != 'create' ? ( + props.handlerWidthrow()} + > + 삭제 + + ) : ( + <> + )} +
-
- - - - + + + + + ); }; diff --git a/src/containers/basis/group/BasisGroupDetailContainer.js b/src/containers/basis/group/BasisGroupDetailContainer.js index 6fa4f1f..8239212 100644 --- a/src/containers/basis/group/BasisGroupDetailContainer.js +++ b/src/containers/basis/group/BasisGroupDetailContainer.js @@ -61,12 +61,32 @@ export const BasisGroupDetailContainer = () => { dispatch(Actions.GROUP_DETAIL.request(id)); }; - const handlerCreate = () => { - dispatch(Actions.GROUP_CREATE.request(groupData)); + const handlerCreate = data => { + const saveData = { + createDt: '', + cstmrSno: groupData.cstmrSno, + groupId: groupData.groupId, + groupNm: data.groupNm, + groupTypeCd: groupData.groupTypeCd, + type: groupData.type, + updateDt: '' + }; + // dispatch(Actions.GROUP_CREATE.request(groupData)); + dispatch(Actions.GROUP_CREATE.request(saveData)); }; - const handlerUpdate = () => { - dispatch(Actions.GROUP_UPDATE.request(groupData)); + const handlerUpdate = data => { + const saveData = { + createDt: groupData.createDt, + cstmrSno: groupData.cstmrSno, + groupId: groupData.groupId, + groupNm: data.groupNm, + groupTypeCd: groupData.groupTypeCd, + type: groupData.type, + updateDt: groupData.updateDt + }; + // dispatch(Actions.GROUP_UPDATE.request(groupData)); + dispatch(Actions.GROUP_UPDATE.request(saveData)); }; const handlerDelete = () => { dispatch(Actions.GROUP_DELETE.request(groupData.groupId)); @@ -81,29 +101,33 @@ export const BasisGroupDetailContainer = () => { return; }; - const handlerInput = e => { - const { name, value } = e.target; - if (name == 'groupNm') { - const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/; - if (regex.test(value)) { - setGroupData({ - ...groupData, - [name]: value - }); - } - } + const handlerSave = data => { + groupData.type === 'create' ? handlerCreate(data) : handlerUpdate(data); }; + // const handlerInput = e => { + // const { name, innerRef } = e.target; + // if (name == 'groupNm') { + // // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/; + // // if (regex.test(innerRef)) { + // console.log(innerRef); + // setGroupData({ + // ...groupData, + // [name]: innerRef + // }); + // // } + // } + // }; + return (