비행 승인 테이블 수정

src/components/crud/grid/GridDatatable.js

@@ -6,15 +6,6 @@ import { EMPTY_MESSAGE } from '@src/configs/msgConst';
 // DataTable lib 참고
 // https://react-data-table-component.netlify.app/?path=/docs/api-props--page
 export const GridDatabase = props => {
-  // useEffect(() => {
-  //   const tableBody = document.querySelector('.rdt_TableBody').childNodes;
-
-  //   for (let i = 0; i < tableBody.length; i++) {
-  //     const el = document.querySelector(`#row-${i}`);
-  //     el.firstChild.id = 'expandableRows';
-  //   }
-  // }, [props.data]);
-
   return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='d-flex justify-content-center align-items-center h-100'>
       <p>{EMPTY_MESSAGE}</p>
@@ -33,13 +24,16 @@ export const GridDatabase = props => {
           subHeader={false}
           columns={props.columns}
           responsive={true}
+          expandRow={props.expandRow}
           sortIcon={<ChevronDown />}
+          expandOnRowClicked={props.expandOnRowClicked}
           className='react-dataTable pal-dateTable'
           paginationDefaultPage={props.page || 1}
           // defaultSortField='invoiceId'
           // paginationDefaultPage={currentPage}
           // paginationComponent={CustomPagination}
           data={props.data}
+          expandableRowExpanded={props.expandableRowExpanded}
           paginationServer={
             props.pagination && props.handlerPageChange ? true : false
           }

src/components/flight/FlightApprovalsTable.js

@@ -4,12 +4,28 @@ import { Card, Button } from '@component/ui';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
 import dayjs from 'dayjs';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
+import DataTable from 'react-data-table-component';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 
 export default function FlightApprovalsTable(props) {
   const dispatch = useDispatch();
 
   const { laancAprvList, laancElev } = useSelector(state => state.laancState);
 
+  const [approvalCdValue, setApprovalCdValue] = useState({
+    S: 0,
+    F: 0,
+    U: 0
+  });
+  const [expandedRows, setExpandedRows] = useState({});
+
+  const toggleRow = rowId => {
+    setExpandedRows({
+      ...expandedRows,
+      [rowId]: !expandedRows[rowId]
+    });
+  };
+
   const conditionalRowStyles = [
     {
       when: row => row.areaList[0].approvalCd === 'F',
@@ -25,6 +41,21 @@ export default function FlightApprovalsTable(props) {
     }
   ];
 
+  const infoRowStyles = [
+    {
+      when: row => row.approvalCd === 'F',
+      classNames: ['flight-not-approval-row']
+    },
+    {
+      when: row => row.approvalCd === 'S',
+      classNames: ['flight-approval-row']
+    },
+    {
+      when: row => row.planAreaSno === props.selected,
+      classNames: ['flight-approval-row-click']
+    }
+  ];
+
   const columns = [
     {
       name: '신청번호',
@@ -117,25 +148,22 @@ export default function FlightApprovalsTable(props) {
           </Button>
         );
       }
+    },
+    {
+      name: '더보기',
+      selector: row => row.areaList,
+      center: true,
+      width: '120px',
+      cell: row =>
+        row.areaList.length > 1 ? (
+          <Button color='flat-dark' onClick={() => toggleRow(row.applyNo)}>
+            {row.areaList.length}건 더 보기
+            {expandedRows[row.applyNo] ? <FaAngleDown /> : <FaAngleUp />}
+          </Button>
+        ) : (
+          '-'
+        )
     }
-    // {
-    //   name: '더보기',
-    //   selector: row => row.areaList,
-    //   center: true,
-    //   width: '120px',
-    //   cell: row => {
-    //     return row.areaList.length > 1 ? (
-    //       <Button
-    //         color='flat-dark'
-    //         // onClick={() =>}
-    //       >
-    //         {row.areaList.length}건 더 보기
-    //       </Button>
-    //     ) : (
-    //       '-'
-    //     );
-    //   }
-    // }
   ];
 
   const handlerOpenModal = (approval, fltElev, fltElevMax) => {
@@ -168,100 +196,139 @@ export default function FlightApprovalsTable(props) {
     }
   };
 
+  const nestedColumns = [
+    {
+      selector: row => row.applyNo,
+      center: true,
+      cell: row => {
+        return '240503-0001';
+      }
+    },
+    {
+      selector: row => row.applyDt,
+      center: true,
+      cell: row => {
+        return dayjs(row.applyDt).format('YYYY-MM-DD');
+      }
+    },
+    {
+      selector: row => row.zoneNo,
+      center: true,
+      sortable: true,
+      width: '80px',
+      cell: row => {
+        return row.zoneNo + '번';
+      }
+    },
+    {
+      selector: row => row.lat,
+      center: true,
+      sortable: true,
+      cell: row => {
+        return `${row.lat.toFixed(5)}/${row.lon.toFixed(5)}`;
+      }
+    },
+    {
+      selector: row => row.bufferZone,
+      center: true,
+      sortable: true,
+      cell: row => {
+        return row.bufferZone;
+      }
+    },
+    {
+      selector: row => row.fltElev,
+      center: true,
+      sortable: true,
+      cell: row => {
+        return row.fltElev;
+      }
+    },
+    {
+      selector: row => row.approvalCd,
+      center: true,
+      sortable: true,
+      cell: row => {
+        return row.approvalCd === 'U'
+          ? '비대상'
+          : row.approvalCd === 'S'
+          ? '승인'
+          : '미승인';
+      }
+    },
+    {
+      selector: row => row.approvalCd,
+      cell: row => {
+        return (
+          <Button
+            color='flat-dark'
+            onClick={() =>
+              handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax)
+            }
+          >
+            사유보기
+          </Button>
+        );
+      }
+    }
+  ];
+
+  const handleInRowClick = row => {
+    props.handlerDetail(row);
+  };
+  const handleRowClick = row => {
+    props.handlerDetail(row.areaList[0]);
+    // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
+  };
+
   const FlightInfoComponent = ({ data }) => {
     return (
       <>
-        {data.areaList?.map((area, index) => (
+        <div>
-          <div
+          <DataTable
-            className={`layer-content-list ${
+            noTableHead={true}
-              area.planAreaSno === props.selected ? 'on' : ''
+            data={data.areaList.slice(1)}
-            } ${
+            columns={nestedColumns}
-              area.approvalCd === 'S'
+            conditionalRowStyles={infoRowStyles}
-                ? 'flight-approval-row'
+            onRowClicked={handleInRowClick}
-                : area.approvalCd === 'F'
+          />
-                ? 'flight-not-approval-row'
+        </div>
-                : ''
-            } `}
-            onClick={() => {
-              props.handlerDetail(area);
-            }}
-            key={Math.random()}
-          >
-            <dl>
-              <dt>
-                <div className='list-left-txt'>
-                  <strong>비행구역 {index + 1}번</strong>
-                </div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>중심좌표(위/경도)</div>
-                <div className='list-right-txt'>
-                  {area.lat.toFixed(5)}/{area.lon.toFixed(5)}
-                </div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>반경(m)</div>
-                <div className='list-right-txt'>{area.bufferZone}</div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>고도(m)</div>
-                <div className='list-right-txt'>{area.fltElev}</div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>검토결과</div>
-                <div className='list-right-txt'>
-                  {area.approvalCd === 'U'
-                    ? '비대상'
-                    : area.approvalCd === 'S'
-                    ? '승인'
-                    : '미승인'}
-                </div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>사유보기</div>
-                <div className='list-right-txt'>
-                  <Button
-                    color='flat-dark'
-                    onClick={() =>
-                      handlerOpenModal(
-                        area.approvalCd,
-                        area.fltElev,
-                        area.fltElevMax
-                      )
-                    }
-                  >
-                    사유보기
-                  </Button>
-                </div>
-              </dt>
-            </dl>
-          </div>
-        ))}
       </>
     );
   };
 
-  // const customStyles = {
+  const formatDate = dateString => {
-  //   rows: {
+    const date = new Date(dateString);
-  //     style: {
+    const year = date.getFullYear();
-  //       minHeight: '70px'
+    const month = String(date.getMonth() + 1).padStart(2, '0');
-  //     }
+    const day = String(date.getDate()).padStart(2, '0');
-  //   },
+    return `${year} 년 ${month} 월 ${day} 일`;
-  //   header: {
+  };
-  //     style: {
+
-  //       width: '20px'
+  useEffect(() => {
-  //     }
+    resApprovalCd();
-  //   },
+  }, [laancAprvList]);
-  //   cells: {
-  //     style: {
-  //       width: '10px'
-  //     }
-  //   }
-  // };
 
-  const handleRowClick = row => {
+  const resApprovalCd = () => {
-    props.handlerDetail(row.areaList[0]);
+    let approvalCdValue = { S: 0, F: 0, U: 0 };
-    // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
+
+    laancAprvList?.map(item => {
+      item.areaList.map(area => {
+        if (area.approvalCd === 'S') {
+          approvalCdValue.S += 1;
+        } else if (area.approvalCd === 'F') {
+          approvalCdValue.F += 1;
+        } else {
+          approvalCdValue.U += 1;
+        }
+      });
+    });
+
+    setApprovalCdValue({
+      F: approvalCdValue.F,
+      S: approvalCdValue.S,
+      U: approvalCdValue.U
+    });
   };
 
   return (
@@ -269,15 +336,16 @@ export default function FlightApprovalsTable(props) {
       <div className='layer-ti d-flex justify-content-between align-items-center'>
         <h4>비행승인 신청 검토결과 목록</h4>
         <span className='search-case'>
-          {props.startDate} 총 {laancAprvList?.length} 건 결과
+          {formatDate(props.startDate)} 총{' '}
+          {approvalCdValue.S + approvalCdValue.F + approvalCdValue.U}건
         </span>
       </div>
       <div className='search-case-list'>
         <div>
           <ul>
-            <li className='approval'>승인 10건</li>
+            <li className='approval'>승인 {approvalCdValue.S}건</li>
-            <li className='not-approved'>미승인 10건</li>
+            <li className='not-approved'>미승인 {approvalCdValue.F}건</li>
-            <li className='non-target'>비대상 10건</li>
+            <li className='non-target'>비대상 {approvalCdValue.U}건</li>
           </ul>
         </div>
       </div>
@@ -295,8 +363,12 @@ export default function FlightApprovalsTable(props) {
                 pagination={true}
                 // customStyles={customStyles}
                 conditionalRowStyles={conditionalRowStyles}
-                // FlightInfoComponent={FlightInfoComponent}
+                FlightInfoComponent={FlightInfoComponent}
                 handleRowClick={handleRowClick}
+                expandableRowExpanded={row =>
+                  expandedRows[row.applyNo] || false
+                }
+                paginationPerPage={20}
               />
             ) : (
               <div