[비행계획서] 조종사 정보 작업

src/components/basis/flight/plan/FlightPlanForm.js

@@ -13,9 +13,11 @@ 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 FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer';
+import { FlightPlanModal } from './FlightPlanModal';
 
 
-const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete}) => {
+const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => {
     const {areaList, pilotList, arcrftList} = data;
     return (
         <Row>
@@ -258,7 +260,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele
                                                         <h4 className='ti'>조종사 정보</h4>
                                                         <Button.Ripple
                                                             color="primary"
-                                                            onChange={(e) => {
+                                                            onClick={(e) => {
                                                                 handleModal({target: 'pilot', isOpen: true})
                                                             }}
                                                         >
@@ -324,12 +326,56 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele
                     </CardBody>
                 </Card>
             </Col>
+            <SelectModal 
+                modal={modal}
+                handleModal={handleModal}
+            />
         </Row>
     )
 }
 
 export default FlightPlanForm;
 
+const SelectModal = ({handleModal, modal}) => {
+    let title = '';
+    let description = '';
+    let type = '';
+    let isOpen = false;
+
+    if(modal.pilot) {
+        isOpen = modal.pilot;
+        title = '조종사 조회';
+        type = 'pilot';
+        description = <FlightPlanPilotContainer handleModal={handleModal} type={type}/>
+    }
+
+    if(modal.arcrft) {
+        isOpen = modal.arcrft;
+        title = '기체 조회';
+        type = 'arcrft';
+        description = '';
+    }
+
+    if(modal.area) {
+        isOpen = modal.area;
+        title = '비행 구역 설정';
+        type = 'area';
+        description = '';
+    }
+
+    return (
+        <FlightPlanModal 
+            title = {title}
+            description = {description}
+            type = {type}
+            isOpen = {isOpen}    
+            handleModal={handleModal}    
+        />
+    )
+
+}
+
+
 const AreaForm = ({data, handleChange, index}) => {
 
     return (<div className='search-info-box'>

src/components/basis/flight/plan/FlightPlanModal.js

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer';
+
+export const FlightPlanModal = ({isOpen, title, description, type, handleModal}) => {     
+
+  return (
+    <div className='vertically-centered-modal'>
+      <Modal
+        isOpen={isOpen}
+        toggle={() =>
+            handleModal(({target: type, isOpen: false}))
+        }        
+        className='modal-dialog-centered modal-xl'
+      >
+        <ModalHeader
+          toggle={() =>
+            handleModal(({target: type, isOpen: false}))
+          }
+        >
+          {title}
+        </ModalHeader>
+        <ModalBody>
+          {description}
+        </ModalBody>        
+      </Modal>
+    </div>
+  );
+};

src/containers/basis/flight/plan/FlightPlanDetailContainer.js

@@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => {
     const location = useLocation();
     const urlParams = useParams();
     const flightState = useSelector(state => state.flightState);
-    const {detail} = flightState;
+    const {detail, pilotSelect} = flightState;
     const [modal, setModal] = useState(initModal);
     const [detailData, setDetailData] = useState(initFlightBas.initDetail);
 
@@ -32,6 +32,27 @@ const FlightPlanDetailContainer = () => {
         setDetailData(detail);
     }, [detail])
 
+    useEffect(() => {
+        if(pilotSelect !== undefined) {
+            const pilot = Object.assign({}, initFlightBas['pilot']);           
+
+            pilot.cstmrSno = pilotSelect.cstmrSno;
+            pilot.groupNm = pilotSelect.groupNm;
+            pilot.clncd = pilotSelect.clncd;
+            pilot.email = pilotSelect.email;
+            pilot.memberName = pilotSelect.memberName;
+            pilot.hpno = pilotSelect.hpno;     
+            
+            setDetailData(prevState => {
+                return {
+                    ...prevState,
+                    ['pilotList']: [...prevState['pilotList'], pilot]
+                }
+            })        
+        }
+        
+    }, [pilotSelect])
+
     const handleModal = (modal) => {
         setModal(prevState => ({
             ...initModal,
@@ -141,6 +162,13 @@ const FlightPlanDetailContainer = () => {
                 break;
             case 'area':
             case 'pilot':
+                setDetailData(prevState => {
+                    return {
+                        ...prevState,
+                        [arrName]: [...prevState[arrName], initFlightBas[type]]
+                    }
+                })
+                break;
             case 'arcrft':
                 setDetailData(prevState => {
                     return {
@@ -202,6 +230,7 @@ const FlightPlanDetailContainer = () => {
     return (
         <CustomDetailLayout title={"비행 계획 신청서"}>
             <FlightPlanForm
+                modal={modal}
                 data={detailData}
                 handleModal={handleModal}
                 handleSave={handleSave}

src/containers/basis/flight/plan/FlightPlanPilotContainer.js

@@ -16,7 +16,7 @@ const FlightPlanPilotContainer = ({handleModal, type}) => {
 
     /* 조종사 선택 */
     const handleSelectPilot = (cstmrSno) => {
-        handleModal({target: 'area', isOpen: false});
+        handleModal({target: 'poilot', isOpen: false});
 
         const pilot = pilotList.find(pilot => {
             return pilot.cstmrSno === cstmrSno;

src/modules/basis/flight/actions/basisFlightAction.ts

@@ -50,6 +50,9 @@ const FLIGHT_PLAN_PILOT_LIST_REQUEST = 'basis/flight/plan/pilot_list/PILOT_LIST_
 const FLIGHT_PLAN_PILOT_LIST_SUCCESS = 'basis/flight/plan/pilot_list/PILOT_LIST_SUCCESS';
 const FLIGHT_PLAN_PILOT_LIST_FAILURE = 'basis/flight/plan/pilot_list/PILOT_LIST_FAILURE';
 
+// 조종사 선택
+const FLIGHT_PLAN_PILOT_SELECT = 'basis/flight/plan/pilot_list/PILOT_SELECT';
+
 // 기체 조회
 const FLIGHT_PLAN_ARCRFT_LIST_REQUEST = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_REQUEST';
 const FLIGHT_PLAN_ARCRFT_LIST_SUCCESS = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_SUCCESS';
@@ -115,6 +118,9 @@ export const FLIGHT_PLAN_PILOT_LIST = createAsyncAction(
   FLIGHT_PLAN_PILOT_LIST_FAILURE
 )<string, FlightPlanPilotDataList, AxiosError>();
 
+// 조종사 조회
+export const PILOT_SELECT = createAction(FLIGHT_PLAN_PILOT_SELECT)<any>();
+
 // 기체 목록
 export const FLIGHT_PLAN_ARCRFT_LIST = createAsyncAction(
   FLIGHT_PLAN_ARCRFT_LIST_REQUEST,
@@ -133,7 +139,8 @@ const actions = {
     FLIGHT_PLAN_UPDATE,
     FLIGHT_PLAN_DELETE,
     FLIGHT_PLAN_PILOT_LIST,
-    FLIGHT_PLAN_ARCRFT_LIST
+    FLIGHT_PLAN_ARCRFT_LIST,
+    PILOT_SELECT
 };
 
 export type FlightAction = ActionType<typeof actions>;

src/modules/basis/flight/models/basisFlightModel.ts

@@ -7,6 +7,7 @@ export interface FlightState {
   detail: FlightPlanData | undefined
   pilotList: FlightPlanPilotDataList | undefined
   arcrftList: FlightPlanArcrftDataList | undefined
+  pilotSelect: PilotSelectData | undefined
 }
 
 export interface FlightAreaData {
@@ -142,6 +143,18 @@ export interface FlightPlanAprovRqData {
   aprvlYn: string
 }
 
+export interface PilotSelectData {
+  groupNm: string,
+  cstmrSno: string,
+  memberName: string,
+  email: string,
+  hpno: string,
+  clncd: string,
+  addr: string,
+  addrDtlCn: string,
+  zip: string
+}
+
 
 export const initFlight = {
   areaList: undefined,
@@ -236,6 +249,8 @@ export const initFlight = {
   },
   pilotList: undefined,
   arcrftList: undefined,
+  pilotSelect: undefined,
+  arcrftSelect: undefined
 };
 
 
@@ -262,7 +277,7 @@ export const initFlightBas = {
     updateDt: '',
     areaList: undefined,
     pilotList: undefined,
-    arcrftList: undefined
+    arcrftList: undefined,    
   },
   pilot: {
     planPilotSno: 0,

src/modules/basis/flight/reducers/basisFlightReducer.ts

@@ -45,6 +45,13 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(in
       draft.pilotList = data;
     })
   )
+  // 조종사 선택
+  .handleAction(Actions.PILOT_SELECT, (state, action) =>
+    produce(state, draft => {
+      const data = action.payload;
+      draft.pilotSelect = data;
+    })
+  )
   // 기체 조회
   .handleAction(Actions.FLIGHT_PLAN_ARCRFT_LIST.success, (state, action) =>
     produce(state, draft => {