조종사조회 수정

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

@@ -4,7 +4,7 @@ import {Search} from 'react-feather';
 import {GridDatabase} from '../../../crud/grid/GridDatatable';
 import { AiOutlineSearch } from 'react-icons/ai';
 
-const FlightPlanPilot = ({ pilotList, handleSelectPilot, returnPilot, onClickEvent, onChange, inputVal }) => {
+const FlightPlanPilot = ({ handleSelectPilot, returnPilot, onClickEvent, onChange,name}) => {
     
     const columns = [
         {id: 'groupNm', name: '그룹 명', cell: row => (<div>{row.groupNm}</div>)},
@@ -52,13 +52,13 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot, returnPilot, onClickEve
                                                 <div className='search-list-cont'>
                                                     <Row>
                                                         <Col className='list-input' xl='4' md='4' sm='12'>
-                                                        <FormGroup className='form-label-group'>
+                                                        <FormGroup className='form-label-group' >
                                                             <Input
                                                             type='text'
                                                             id='memberName'
                                                             name='memberName'
-                                                            value={inputVal}
+                                                            value = {name}
-                                                            onChange={onChange}
+                                                            onChange = {onChange}
                                                             bsSize='sm'
                                                             // onKeyPress={props.onKeyPress}
                                                             placeholder='성명을 입력하세요'
@@ -79,6 +79,30 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot, returnPilot, onClickEve
                 </Col>
             </Row>
         </div>
+        <div className='pal-card-box'>            
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>조종사 목록</h4>
+                    <span className='search-case'>검색결과 총 {!!returnPilot ? returnPilot.length : 0}건</span>
+                </div>      
+                <div className='d-flex align-items-center'></div>                  
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                            
+                            data={returnPilot}
+                            count={returnPilot ? returnPilot.length : 0}
+                            columns={columns}
+                            // pagination={props.pagination}
+                        />                                
+                    </div>
+                </Card>
+            </div>              
+        </div>
+
+
+        {/* {inputVal !== '' ?  (
         <div className='pal-card-box'>            
             <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
                 <div>
@@ -100,6 +124,29 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot, returnPilot, onClickEve
                 </Card>
             </div>              
         </div>
+        ):(
+            <div className='pal-card-box'>            
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>조종사 목록</h4>
+                    <span className='search-case'>검색결과 총 {!!pilotList ? pilotList.length : 0}건</span>
+                </div>      
+                <div className='d-flex align-items-center'></div>                  
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                            
+                            data={pilotList}
+                            count={pilotList ? pilotList.length : 0}
+                            columns={columns}
+                            // pagination={props.pagination}
+                        />                                
+                    </div>
+                </Card>
+            </div>              
+        </div>
+        )} */}
       </>
     )
 

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

@@ -1,82 +1,73 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
 import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot';
 
-const FlightPlanPilotContainer = ({handleModal, type}) => {
+const FlightPlanPilotContainer = ({ handleModal, type }) => {
     const dispatch = useDispatch();
     const { pilotList, selectGroup } = useSelector(state => state.flightState);
     const [returnPilot, setReturnPilot] = useState('');
-    const [inputVal , setInputVal] = useState('');
+    const [name , setName] = useState('');
-    const [text, setText] = useState('');
     
 
     /* 조종사 조회 */
-    const handleSearch = () => {            
+    const handleSearch = () => {
         const groupId = sessionStorage.getItem('groupId');
-        
+
-        if(groupId) {
+        if (groupId) {
             dispatch(Actions.FLIGHT_PLAN_PILOT_LIST.request(groupId));
-        }        
+        }
     }
 
     /* 조종사 선택 */
     const handleSelectPilot = (cstmrSno) => {
-        handleModal({target: 'pilot', isOpen: false});
+        handleModal({ target: 'pilot', isOpen: false });
 
         const pilot = pilotList.find(pilot => {
             return pilot.cstmrSno === cstmrSno;
-        });        
+        });
         /* 파일럿 정보 Redux 저장 */
         dispatch(Actions.PILOT_SELECT(pilot));
     }
-    
+
     useEffect(() => {
         handleSearch();
+        // setReturnPilot('');
     }, [])
 
-    useEffect(()=> {
-            if(pilotList) {
-                onTest();
-            }
-          },[pilotList])
 
+    useEffect(() => {
+        setReturnPilot(pilotList)
+    }, [pilotList])
 
-    const onChange = (e) => {
+    const onChange =(e) =>{
-            setInputVal(e.target.value);
+       setName(e.target.value);
-          };
-    const onClickEvent= (e)=> {
-        
-        
-        onTest();
-        setInputVal('');
     }
+    
+    const onClickEvent = () => {
+        
+        const filterPilot = pilotList.filter(pilot => pilot.memberName.includes(name));
+
+        if (name === '') {                        
+            const resetPilots = pilotList;
+            setReturnPilot(resetPilots)
+        } else {
+            setReturnPilot(filterPilot)
+        }
+    
+    };
+
 
-    const onTest = () => {
-        const [MATCHVALUE] = pilotList.filter((unit) =>
-        unit.memberName.toLowerCase().includes(inputVal));
-         pilotList.filter((unit) =>{
-            if(inputVal==''){
-             setReturnPilot(unit)
-            }else if(unit.memberName.includes(inputVal)){
-             setReturnPilot(MATCHVALUE)
-            }else if (inputVal != ''){
-             setReturnPilot('')
-            }
-         })
-    }
     return (
-        <FlightPlanPilot 
+        <FlightPlanPilot
             handleSelectPilot={handleSelectPilot}
             handleSearch={handleSearch}
             onClickEvent={onClickEvent}
-            onChange={onChange}
             pilotList={pilotList}
+            onChange={onChange}
             returnPilot={returnPilot}
-            setInputVal={setInputVal}
+            name={name}
-            inputVal={inputVal}
+        />
-            
-        />        
     )
 }