비행이력 현황(최종본)

2 years ago · de6a83c526
2 changed files with 106 additions and 48 deletions
--- a/src/components/analysis/history/AnalysisHistorySearch.js
+++ b/src/components/analysis/history/AnalysisHistorySearch.js
@ -1,5 +1,5 @@
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Calendar, Search } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import {
@ -13,21 +13,25 @@ import {
 } from 'reactstrap';

 export const AnalysisHistorySearch = props => {
-  const [isClick, setIsClick] = useState(1);
-  const [dateType, setDateType] = useState(1);
+ 
  useEffect(() => {
+    if(props.isClick!=0){
    props.setParams({
      ...props.params,
-      stDate: moment().subtract(dateType, 'day').format('YYYY-MM-DD')
+      stDate: moment().subtract(props.dateType, 'day').format('YYYY-MM-DD'),
+      endDate: moment().subtract(0, 'day').format('YYYY-MM-DD'),
+      groupId: props.searchData.groupId
    });
-  
-  }, [dateType,props.params.groupId]);
-
-  const handlerClickDate = val => {
-    setDateType(val);
-    setIsClick(val);
-  };
-
+    }
+    else{
+      props.setParams({
+        ...props.params,
+        stDate: '',
+        endDate: '',
+        groupId: props.searchData.groupId
+      });
+    }
+  }, [props.dateType,props.isClick]);


  return (
@ -63,6 +67,7 @@ export const AnalysisHistorySearch = props => {
                            <Col className='list-input' xl='4' md='6' sm='12'>
                              <div className='d-flex align-items-center calendar-flat'>
                                <Flatpickr
+                                  placeholder="날짜를 선택해주세요"
                                  id='searchDate'
                                  value={[
                                    props.params.stDate,
@ -89,32 +94,32 @@ export const AnalysisHistorySearch = props => {
                                <Button
                                  outline
                                  size='sm'
-                                  className={isClick == 1 ? 'active' : ''}
-                                  onClick={e => handlerClickDate(1)}
+                                  className={props.isClick == 1 ? 'active' : ''}
+                                  onClick={e => props.handlerClickDate(1)}
                                >
                                  최근1일
                                </Button>
                                <Button
                                  outline
-                                  className={isClick == 7 ? 'active' : ''}
+                                  className={props.isClick == 7 ? 'active' : ''}
                                  size='sm'
-                                  onClick={e => handlerClickDate(7)}
+                                  onClick={e => props.handlerClickDate(7)}
                                >
                                  최근7일
                                </Button>
                                <Button
                                  outline
-                                  className={isClick == 15 ? 'active' : ''}
+                                  className={props.isClick == 15 ? 'active' : ''}
                                  size='sm'
-                                  onClick={e => handlerClickDate(15)}
+                                  onClick={e => props.handlerClickDate(15)}
                                >
                                  최근 15일
                                </Button>
                                <Button
                                  outline
-                                  className={isClick == 30 ? 'active' : ''}
+                                  className={props.isClick == 30 ? 'active' : ''}
                                  size='sm'
-                                  onClick={e => handlerClickDate(30)}
+                                  onClick={e => props.handlerClickDate(30)}
                                >
                                  최근 30일
                                </Button>
--- a/src/containers/analysis/history/AnalysisHistoryContainer.js
+++ b/src/containers/analysis/history/AnalysisHistoryContainer.js
@ -8,11 +8,10 @@ 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 } from 'reactstrap';
+import { Col, Row, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import * as FlightAction from '../../../modules/basis/flight/actions/basisFlightAction';
-import FlightPlanAprvSearch from '../../../components/basis/flight/aprv/FlightPlanAprvSearch';
-import FlightPlanAprvGrid from '../../../components/basis/flight/aprv/FlightPlanAprvGrid';
 import { useHistory } from 'react-router-dom';
+import { MessageErrorModal } from '../../../components/message/MessageErrorModal';


 export const AnalysisHistoryContainer = props => {
@ -28,14 +27,22 @@ export const AnalysisHistoryContainer = props => {

  };

-  const history = useHistory();
  const [searchData, setSearchData] = useState(initSearchData);
-  const [selPlanSnoList, setSelPlanSnoList] = useState([]);
  const { list: aprvList, aprvProc, selectGroup } = useSelector(state => state.flightState);
  const { joinList, joinListCount } = useSelector(state => state.groupState);
  const { user } = useSelector(state => state.authState, shallowEqual);

-  const handleGroupSelect = ({ groupId, groupNm, groupAuthCd }) => {
+  const [isClick, setIsClick] = useState(0);
+  const [dateType, setDateType] = useState(1);
+
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: '',
+    color: ''
+  });
+
+  const handleGroupSelect = ({ groupId }) => {
    // 권한 상관 없이 모두 조회 가능
    const param = searchData;
    // param.cstmrSno = user.cstmrSno;
@ -47,6 +54,7 @@ export const AnalysisHistoryContainer = props => {
    sessionStorage.setItem('groupId', groupId);
    sessionStorage.setItem('cstmrSno', user.cstmrSno);

+    setIsClick(0)
    setSearchData(prevState => {
      return {
        ...prevState,
@ -54,19 +62,13 @@ export const AnalysisHistoryContainer = props => {
        groupId: groupId
      }
    });
-    dispatch(Actions.list.request({ searchParams: param }));
+    //dispatch(Actions.list.request({ searchParams: param }));
  }
  const handlerGroupCancel = () => {
-    dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT({ cstmrSno: 0, groupId: '', groupNm: '' }));
-  }
-  const handleSearch = (data) => {
-    dispatch(FlightAction.FLIGHT_APRV_LIST.request(data));
+    dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT({ cstmrSno: 0, groupId: '', groupNm: '', endDate: '', stDate: '' }));
+    setIsClick(0)

  }
-  const handleChangeSelected = ({ selectedRows }) => {
-    setSelPlanSnoList(selectedRows.map(item => item.planSno))
-  }
-



@ -205,20 +207,20 @@ export const AnalysisHistoryContainer = props => {
    endDate: moment().subtract(-1, 'day').format('YYYY-MM-DD'),
    search1: '',
    groupId: searchData.groupId
+
  });
+  console.log(searchData.groupId);

  useEffect(() => {
-
-    if (searchParams) {
    setParams({
-        stDate: searchParams.stDate,
-        endDate: searchParams.endDate,
+      ...params,
+      stDate: '',
+      endDate: '',
      search1: '',
      groupId: searchData.groupId
    });
-    }
-    //   handlerSearch();
-  }, [searchData]);
+  }, [searchData.groupId]);
+

  useEffect(() => {
    if (data) return;
@ -230,9 +232,26 @@ export const AnalysisHistoryContainer = props => {
    }
  };

-  useEffect(() => { }, [params]);
+  // useEffect(() => { }, [params]);

  const handlerSearch = () => {
+    if (!params.stDate || !params.endDate) {
+      setModal({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '올바른 일자를 입력해 주세요.',
+        color: 'modal-danger'
+      })
+    }
+    else if (!params.groupId) {
+      setModal({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '그룹 선택 해주세요.',
+        color: 'modal-danger'
+      })
+    }
+    else
      dispatch(Actions.list.request({ searchParams: params }));
  };

@ -247,10 +266,14 @@ export const AnalysisHistoryContainer = props => {
          stDate: moment(val[0]).format('YYYY-MM-DD'),
          endDate: moment(val[1]).format('YYYY-MM-DD'),
        });
-        
+        setIsClick(-1)
      }
    }
  };
+  const handlerClickDate = val => {
+    setDateType(val);
+    setIsClick(val);
+  };
  return (

    <CustomMainLayout title={titleName}>
@ -274,6 +297,10 @@ export const AnalysisHistoryContainer = props => {
                  params={params}
                  onKeyPress={onKeyPress}
                  setParams={setParams}
+                  isClick={isClick}
+                  dateType={dateType}
+                  handlerClickDate={handlerClickDate}
+                  searchData={searchData}
                />
              </>

@ -294,6 +321,7 @@ export const AnalysisHistoryContainer = props => {
                  excelHeaders={excelHeaders}
                  count={count}
                  pagination={true}
+
                />
              </>

@ -305,6 +333,31 @@ export const AnalysisHistoryContainer = props => {
          </Col>
        </Row>
      </div>
+      <div className='vertically-centered-modal'>
+        <Modal
+          isOpen={modal.isOpen}
+          toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+          modalClassName={modal.color}
+          className='modal-dialog-centered'
+        >
+          <ModalHeader
+            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+          >
+            {modal.title}
+          </ModalHeader>
+          <ModalBody>{modal.desc}</ModalBody>
+          <ModalFooter>
+            <Button
+              color='danger'
+              onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            >
+              확인
+            </Button>{' '}
+          </ModalFooter>
+        </Modal>
+      </div>
+      <MessageErrorModal />
    </CustomMainLayout>
+
  );
 };