laanc 페이지 문구 추가, 검색조건 및 신청 목록 그리드 추가

src/components/laanc/LaancGrid.js

@@ -0,0 +1,170 @@
+import { useState } from 'react';
+import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
+import { Row, Col, Card, Spinner, Button } from 'reactstrap';
+
+import { useSelector } from 'react-redux';
+import moment from 'moment';
+
+const data = [
+  {
+    name: '김장현',
+    flightStart: '2023-09-26',
+    flightEnd: '2023-09-26',
+    apploveType: '승인',
+    weight: '2kg',
+    altitude: '100'
+  }
+];
+
+function LaancGrid() {
+  const { scheduleList } = useSelector(state => state.flightState);
+  const { loading } = useSelector(state => state.loadingReducer);
+
+  const fillZero = (width, str) => {
+    return str.length >= width
+      ? str
+      : new Array(width - str.length + 1).join('0') + str; //남는 길이만큼 0으로 채움
+  };
+
+  const columns = [
+    {
+      name: '조종사 성명',
+      selector: row => row.name,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.name;
+      }
+    },
+
+    {
+      name: '비행시작일시',
+      selector: row => row.flightStart,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return moment(row.flightStart).format('YYYY-MM-DD');
+      }
+    },
+
+    {
+      name: '비행종료일시',
+      selector: row => row.flightEnd,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return moment(row.flightEnd).format('YYYY-MM-DD');
+      }
+    },
+
+    {
+      name: '승인유형',
+      selector: row => row.apploveType,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.apploveType;
+      }
+    },
+    {
+      name: '기체중량',
+      selector: row => row.weight,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.weight;
+      }
+    },
+    {
+      name: '고도',
+      selector: row => row.altitude,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return row.altitude;
+      }
+    },
+    {
+      name: '신청기관',
+      // selector: row => row.altitude,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return '원스톱';
+      }
+    },
+    {
+      name: '',
+      // selector: row => row.altitude,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return (
+          <Button.Ripple color='primary' size='sm' onClick={() => {}}>
+            상세보기
+          </Button.Ripple>
+        );
+      }
+    },
+    {
+      name: '',
+      // selector: row => row.altitude,
+      minWidth: '150px',
+      sortable: true,
+      cell: row => {
+        return (
+          <Button.Ripple color='primary' size='sm' onClick={() => {}}>
+            공문 다운로드
+          </Button.Ripple>
+        );
+      }
+    }
+  ];
+
+  return (
+    <div className='pal-card-box'>
+      <Row>
+        <Col>
+          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%'
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <h4>LAANC 승인 신청 목록</h4>
+                <span className='search-case'>검색결과 총 {data.length}건</span>
+              </div>
+            </div>
+          </div>
+          <div className='invoice-list-wrapper'>
+            <Card>
+              <div className='invoice-list-dataTable'>
+                {loading ? (
+                  <div className='grid-loading'>
+                    <div>
+                      <Spinner color='primary' />
+                      <span>Loading...</span>
+                    </div>
+                  </div>
+                ) : null}
+                <GridDatabase
+                  title={'비행이력'}
+                  data={data}
+                  count={data.length}
+                  columns={columns}
+                  pagination={false}
+                />
+              </div>
+            </Card>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default LaancGrid;

src/components/laanc/LaancSearch.js

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { Row, Col, Button, Card, CardBody } from 'reactstrap';
+import { Search, Calendar } from 'react-feather';
+import Flatpickr from 'react-flatpickr';
+import moment from 'moment';
+
+function LaancSearch() {
+  const [date, setDate] = useState(
+    moment().subtract('day').format('YYYY-MM-DD')
+  );
+
+  const handlerChangeDate = val => {
+    setDate(moment(val[0]).format('YYYY-MM-DD'));
+  };
+
+  return (
+    <div className='pal-card-box'>
+      <Row>
+        <Col>
+          <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+            <div>
+              <h4>검색조건</h4>
+            </div>
+            <div className='d-flex align-items-center'>
+              <Button.Ripple color='primary' size='sm' onClick={() => {}}>
+                <Search size={16} />
+                검색
+              </Button.Ripple>
+            </div>
+          </div>
+          <Card>
+            <CardBody className='pal-card-body'>
+              <div className='search-cont'>
+                <dl>
+                  <dt>
+                    <div className='search-box'>
+                      <div className='search-list-ti'>신청일</div>
+                      <div className='search-list'>
+                        <div className='search-list-cont'>
+                          <Row>
+                            <Col className='list-input' xl='4' md='6' sm='12'>
+                              <div className='d-flex align-items-center calendar-flat'>
+                                <Flatpickr
+                                  placeholder='날짜를 선택해주세요'
+                                  id='searchDate'
+                                  value={date}
+                                  options={{
+                                    mode: 'single'
+                                  }}
+                                  onChange={handlerChangeDate}
+                                  className='form-control flat-picker bg-transparent border-0 shadow-none'
+                                />
+                                <Calendar size={14} />
+                              </div>
+                            </Col>
+                          </Row>
+                        </div>
+                      </div>
+                    </div>
+                  </dt>
+                </dl>
+              </div>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default LaancSearch;

src/containers/laanc/LaancContainer.js

@@ -1,18 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import { Row, Col, Button, Badge } from 'reactstrap';
 import moment from 'moment';
-import FlightPlanGrid from '../../components/basis/flight/plan/FlightPlanGrid';
-import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
-import FlightPlanSearch from '../../components/basis/flight/plan/FlightPlanSearch';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
 import * as FlightAction from '../../modules/basis/flight/actions/basisFlightAction';
-import { Row, Col, Button } from 'reactstrap';
 import {
   JOIN_LIST,
   GROUP_LIST
 } from '../../modules/basis/group/actions/basisGroupAction';
-import FlightPlanGroupGrid from '../../components/basis/flight/plan/FlightPlanGroupGrid';
 import LaancPlanContainer from './LaancPlanContainer';
+import LaancSearch from '../../../src/components/laanc/LaancSearch';
+import LaancGrid from '../../../src/components/laanc/LaancGrid';
+
 const initSearchData = {
   schFltStDt: moment()
     .set({ date: 1, h: 0, m: 0, s: 0 })
@@ -30,7 +30,7 @@ export default function LaancContainer() {
   const history = useHistory();
   const [open, setOpen] = useState(false);
   const [currentParm, setCurrentParm] = useState(false);
-  const [disabledAnimation, setDisabledAnimation] = useState(true);
+  const [disabledAnimation, setDisabledAnimation] = useState(false);
   const [searchData, setSerchData] = useState(initSearchData);
   const {
     list: planListData,
@@ -57,8 +57,7 @@ export default function LaancContainer() {
 
   useEffect(() => {
     // URL 쿼리 파라미터 중 'map' 값을 가져옵니다.
-    setOpen(mapParam);
-    console.log('여기타니????????');
+    setDisabledAnimation(mapParam);
   }, [location]);
 
   useEffect(() => {
@@ -197,6 +196,13 @@ export default function LaancContainer() {
 
   return (
     <CustomMainLayout title={'LAANC 신청 목록'}>
+      <div className='sub-text'>
+        상업용 또는 비 상업용이며, 기체최대이륙중량이 2KG 초과 시 기체등록은
+        필수입니다.{' '}
+        <a href='/laanc/report'>
+          <Badge color='light-primary'>기체신고대상 및 기준 자세히보기</Badge>
+        </a>
+      </div>
       <div className='disabled-animation-modal'>
         <Button
           color='primary'
@@ -215,59 +221,8 @@ export default function LaancContainer() {
         ) : null}
       </div>
 
-      <div className='pal-card-box'>
-        <Row>
-          {/* <Col sm='12' lg='12'>
-            {user ? (
-              <>
-                <FlightPlanGroupGrid
-                  {...(user?.authId === 'SUPER' || user?.authId === 'ADMIN'
-                    ? { data: groupList }
-                    : { data: joinList })}
-                  {...(user?.authId === 'SUPER' || user?.authId === 'ADMIN'
-                    ? { count: groupListCount }
-                    : { count: joinListCount })}
-                  // selectGroup={selectGroup}
-                  selectGroup={listSelect}
-                  handleGroupSelect={handleGroupSelect}
-                  handlerGroupCancel={handlerGroupCancel}
-                  pagination={true}
-                  paginationRowsPerPageOptions={[5, 10, 15, 20]}
-                />
-              </>
-            ) : (
-              <></>
-            )}
-          </Col> */}
-          <Col sm='12' lg='12'>
-            {/* {selectGroup.cstmrSno !== 0 ? ( */}
-            {listSelect.cstmrSno !== 0 ? (
-              <>
-                <FlightPlanSearch
-                  searchData={searchData}
-                  handleChangeSearchData={handleChangeSearchData}
-                  handleSearch={handleSearch}
-                />
-                <FlightPlanGrid
-                  movePage={moveFlightPlanDetailPage}
-                  planListData={planListData}
-                  pagination={true}
-                  paginationPerPage={10}
-                  paginationRowsPerPageOptions={[10, 20, 30, 40]}
-                  isMyGroup={isMyGroup}
-                  user={user}
-                  total={total}
-                  handlerPageChange={onChangePage}
-                />
-              </>
-            ) : (
-              <div className='mt-2 no-dataTable'>
-                그룹 목록에서 상세보기를 클릭하세요.
-              </div>
-            )}
-          </Col>
-        </Row>
-      </div>
+      <LaancSearch />
+      <LaancGrid />
     </CustomMainLayout>
   );
 }