laanc 승인 신청 목록 api 연결

src/components/basis/flight/aprv/FlightPlanAprvGroupGrid.js

@@ -2,7 +2,14 @@ import React from 'react';
 import { GridDatabase } from '../../../crud/grid/GridDatatable';
 import { Card, Button } from 'reactstrap';
 
-const FlightPlanAprvGroupGrid = ({ data, count, columns, pagination, paginationPerPage, paginationRowsPerPageOptions }) => {
+const FlightPlanAprvGroupGrid = ({
+  data,
+  count,
+  columns,
+  pagination,
+  paginationPerPage,
+  paginationRowsPerPageOptions
+}) => {
   return (
     <>
       <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
@@ -15,8 +22,14 @@ const FlightPlanAprvGroupGrid = ({ data, count, columns, pagination, paginationP
       <div className='invoice-list-wrapper'>
         <Card>
           <div className='invoice-list-dataTable'>
-            <GridDatabase data={data} count={count} columns={columns}
-              pagination={pagination} paginationPerPage={paginationPerPage} paginationRowsPerPageOptions={paginationRowsPerPageOptions} />
+            <GridDatabase
+              data={data}
+              count={count}
+              columns={columns}
+              pagination={pagination}
+              paginationPerPage={paginationPerPage}
+              paginationRowsPerPageOptions={paginationRowsPerPageOptions}
+            />
           </div>
         </Card>
       </div>

src/components/laanc/LaancGrid.js

@@ -1,5 +1,5 @@
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Button } from 'reactstrap';
+import { Row, Col, Card, Button, Spinner } from 'reactstrap';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 
@@ -32,6 +32,7 @@ const data = [
 
 function LaancGrid() {
   const { scheduleList } = useSelector(state => state.flightState);
+  const { laancSearchData } = useSelector(state => state.laancState);
   const { loading } = useSelector(state => state.loadingReducer);
 
   const fillZero = (width, str) => {
@@ -43,59 +44,59 @@ function LaancGrid() {
   const columns = [
     {
       name: '조종사 성명',
-      selector: row => row.name,
+      selector: row => row.memberName,
       minWidth: '150px',
       sortable: true,
       cell: row => {
-        return row.name;
+        return row.memberName;
       }
     },
 
     {
       name: '비행시작일시',
-      selector: row => row.flightStart,
+      selector: row => row.schFltStDt,
       minWidth: '150px',
       sortable: true,
       cell: row => {
-        return moment(row.flightStart).format('YYYY-MM-DD HH:mm');
+        return moment(row.schFltStDt).format('YYYY-MM-DD HH:mm');
       }
     },
 
     {
       name: '비행종료일시',
-      selector: row => row.flightEnd,
+      selector: row => row.schFltEndDt,
       minWidth: '150px',
       sortable: true,
       cell: row => {
-        return moment(row.flightEnd).format('YYYY-MM-DD HH:mm');
+        return moment(row.schFltEndDt).format('YYYY-MM-DD HH:mm');
       }
     },
 
     {
       name: '승인유형',
-      selector: row => row.apploveType,
-      minWidth: '150px',
+      selector: row => row.aprvlYn,
+      minWidth: '90px',
       sortable: true,
       cell: row => {
-        return row.apploveType;
+        return row.aprvlYn;
       }
     },
     {
       name: '기체중량',
-      selector: row => row.weight,
-      minWidth: '150px',
+      selector: row => row.arcrftWght,
+      minWidth: '260px',
       sortable: true,
       cell: row => {
-        return row.weight;
+        return row.arcrftWght;
       }
     },
     {
       name: '고도',
-      selector: row => row.altitude,
-      minWidth: '150px',
+      selector: row => row.elev,
+      minWidth: '80px',
       sortable: true,
       cell: row => {
-        return row.altitude;
+        return row.elev;
       }
     },
     {
@@ -150,28 +151,33 @@ function LaancGrid() {
             >
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <h4>LAANC 승인 신청 목록</h4>
-                <span className='search-case'>검색결과 총 {data.length}건</span>
+                <span className='search-case'>
+                  검색결과 총 {laancSearchData?.numberOfElements}건
+                </span>
               </div>
             </div>
           </div>
           <div className='invoice-list-wrapper'>
             <Card>
               <div className='invoice-list-dataTable'>
-                {/* {loading ? (
+                {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}
-                />
+                ) : null}
+                {laancSearchData?.numberOfElements > 0 ? (
+                  <GridDatabase
+                    title={'비행이력'}
+                    data={laancSearchData?.content}
+                    //   count={laancSearchData?.size}
+                    columns={columns}
+                    // handlerPageChange={props.handlerPageChange}
+                    pagination={false}
+                  />
+                ) : null}
               </div>
             </Card>
           </div>

src/components/laanc/LaancSearch.js

@@ -10,8 +10,8 @@ function LaancSearch() {
   const dispatch = useDispatch();
 
   const [date, setDate] = useState({
-    stDate: moment().subtract(0, 'day').format('YYYY-MM-DD'),
-    endDate: moment().subtract(-14, 'day').format('YYYY-MM-DD')
+    schFltStDate: moment().subtract(0, 'day').format('YYYY-MM-DD'),
+    schFltEndDate: moment().subtract(-14, 'day').format('YYYY-MM-DD')
   });
 
   useEffect(() => {
@@ -20,9 +20,9 @@ function LaancSearch() {
 
   const handlerChangeDate = selectedDates => {
     if (selectedDates.length === 2) {
-      const stDate = moment(selectedDates[0]).format('YYYY-MM-DD');
-      const endDate = moment(selectedDates[1]).format('YYYY-MM-DD');
-      setDate({ stDate, endDate });
+      const schFltStDate = moment(selectedDates[0]).format('YYYY-MM-DD');
+      const schFltEndDate = moment(selectedDates[1]).format('YYYY-MM-DD');
+      setDate({ schFltStDate, schFltEndDate });
     }
   };
 
@@ -66,10 +66,16 @@ function LaancSearch() {
                                 <Flatpickr
                                   placeholder='날짜를 선택해주세요'
                                   id='searchDate'
-                                  value={[date.stDate, date.endDate]}
+                                  value={[
+                                    date.schFltStDate,
+                                    date.schFltEndDate
+                                  ]}
                                   options={{
                                     mode: 'range',
-                                    defaultDate: [date.stDate, date.endDate]
+                                    defaultDate: [
+                                      date.schFltStDate,
+                                      date.schFltEndDate
+                                    ]
                                   }}
                                   onChange={selectedDates =>
                                     handlerChangeDate(selectedDates)