laanc 승인 목록 상세보기 연결(승인 유형 추가 작업 필요)

src/components/laanc/LaancGrid.js

@@ -1,8 +1,10 @@
+import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Button, Spinner } from 'reactstrap';
+import { Row, Col, Card, Button, Spinner, Modal } from 'reactstrap';
 import * as LaancAction from '../../modules/laanc/actions/laancActions';
+import LaancStep2 from './LaancStep2';
 import moment from 'moment';
 
 const data = [
@@ -36,23 +38,33 @@ function LaancGrid() {
   const dispatch = useDispatch();
   const history = useHistory();
 
+  const [disabledAnimation, setDisabledAnimation] = useState(false);
+
   const { scheduleList } = useSelector(state => state.flightState);
   const { laancSearchData } = useSelector(state => state.laancState);
   const { loading } = useSelector(state => state.loadingReducer);
-
+  const { laancDetail } = useSelector(state => state.laancState);
   const fillZero = (width, str) => {
     return str.length >= width
       ? str
       : new Array(width - str.length + 1).join('0') + str; //남는 길이만큼 0으로 채움
   };
 
+  useEffect(() => {
+    if (laancDetail) setDisabledAnimation(true);
+  }, [laancDetail]);
+
   //상세보기
   const handleDetail = planSno => {
     dispatch(LaancAction.LAANC_DETAIL.request(planSno));
+
     //  history.push('/basis/flight/plan/create');
     // to={`/basis/flight/plan/detail/${row.planSno}?type=plan`}
   };
 
+  const handlerLaancClose = () => {
+    setDisabledAnimation(false);
+  };
   const columns = [
     {
       name: '비행계획서 일련 번호',
@@ -213,6 +225,23 @@ function LaancGrid() {
           </div>
         </Col>
       </Row>
+      <div className='disabled-animation-modal'>
+        <Modal
+          isOpen={disabledAnimation}
+          toggle={() => setDisabledAnimation(!disabledAnimation)}
+          className='modal-dialog-centered laanc-modal'
+          fade={false}
+          backdrop={false}
+        >
+          <LaancStep2
+            data={laancDetail}
+            type={'detail'}
+            disabledAnimation={disabledAnimation}
+            setDisabledAnimation={setDisabledAnimation}
+            handlerLaancClose={handlerLaancClose}
+          />
+        </Modal>
+      </div>
     </div>
   );
 }

src/components/laanc/LaancStep2.js

@@ -26,7 +26,8 @@ export default function LaancStep2({
   setDisabledAnimation,
   centeredModal,
   setCenteredModal,
-  handlerLaancClose
+  handlerLaancClose,
+  type
 }) {
   const obj = {
     commercial: {
@@ -147,7 +148,7 @@ export default function LaancStep2({
           취소
         </Button>
       </ModalHeader>
-      <ModalBody>
+      <ModalBody style={{ paddingBottom: type === 'detail' ? '30px' : '90px' }}>
         <div>
           <div className='ti'>유효성 검사 정보</div>
           <Row>
@@ -225,7 +226,8 @@ export default function LaancStep2({
                     <span className='ms-1'> 검토 결과 승인 대상입니다.</span>
                     <span className='cancel-txt'>
                       제출하신 비행계획은 자동승인 대상 입니다.
-                      <br /><br/>
+                      <br />
+                      <br />
                       자동승인을 위해 다음 스텝으로 진행하시기 바랍니다.
                     </span>
                   </>
@@ -240,8 +242,10 @@ export default function LaancStep2({
                         </span>
                         <span className='cancel-txt'>
                           유효성 검사에 실패하였습니다.
-                          <br /><br/>
+                          <br />
-                          아래 이전 버튼을 눌러 스텝1에서 기체번호를 확인해주시기 바랍니다.
+                          <br />
+                          아래 이전 버튼을 눌러 스텝1에서 기체번호를
+                          확인해주시기 바랍니다.
                         </span>
                       </>
                     ) : (
@@ -351,7 +355,11 @@ export default function LaancStep2({
                       id='arcrftWghtCd'
                       name='arcrftWghtCd'
                       size='sm'
-                      value={obj.arcrftWdth[data.arcrftList[0].arcrftWghtCd]}
+                      value={
+                        type === 'detail'
+                          ? data.arcrftWght
+                          : obj.arcrftWdth[data.arcrftList[0].arcrftWghtCd]
+                      }
                       placeholder=''
                       disabled
                     />
@@ -423,7 +431,8 @@ export default function LaancStep2({
                       className='terms-check'
                       id='exampleCustomCheckbox'
                       label='조종자 준수사항 미 준수 시 처벌에 동의합니다.'
-                      checked={isterms}
+                      checked={type === 'detail' ? true : isterms}
+                      disabled={type === 'detail' ? true : false}
                       onChange={() => setIsterms(!isterms)}
                     />
                   ) : null}
@@ -433,29 +442,31 @@ export default function LaancStep2({
           </Row>
         </div>
       </ModalBody>
-      <ModalFooter>
+      {type === 'detail' ? null : (
-        <Button outline color='danger' onClick={() => handlerStep(1)}>
+        <ModalFooter>
-          이전
+          <Button outline color='danger' onClick={() => handlerStep(1)}>
-        </Button>
+            이전
-        <ul className='step'>
+          </Button>
-          <li>
+          <ul className='step'>
-            <span></span>
+            <li>
-          </li>
+              <span></span>
-          <li>
+            </li>
-            <span className='on'></span>
+            <li>
-          </li>
+              <span className='on'></span>
-          <li>
+            </li>
-            <span></span>
+            <li>
-          </li>
+              <span></span>
-        </ul>
+            </li>
-        <Button
+          </ul>
-          disabled={!isterms || laancIsCheck}
+          <Button
-          outline
+            disabled={!isterms || laancIsCheck}
-          onClick={() => handlerCreate()}
+            outline
-        >
+            onClick={() => handlerCreate()}
-          다음
+          >
-        </Button>
+            다음
-      </ModalFooter>
+          </Button>
+        </ModalFooter>
+      )}
     </>
   );
 }