비행 승인 신청 결과 목록 선택 기능

src/assets/css/custom.css

@@ -1165,3 +1165,6 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .fsm-ti h5{font-weight:500}
 .fsm-ti .btn-wrap button + button{margin-left:0.5rem}
 .fsm-box .list-input label{font-size:0.875rem}
+.flight-not-approval-row {background-color: rgba(252, 90, 3,0.1); }
+.flight-approval-row{background-color:rgba(3, 44, 252,0.1);}
+.flight-approval-row-click{border:2px solid rgba(252, 90, 3) !important; margin-top: -1px}

src/components/crud/grid/GridDatatable.js

@@ -31,7 +31,8 @@ export const GridDatabase = props => {
           columns={props.columns}
           responsive={true}
           sortIcon={<ChevronDown />}
-          className='react-dataTable pal-dateTable '
+          className='react-dataTable pal-dateTable'
+          onRowClicked={props.handleRowClick}
           paginationDefaultPage={props.page || 1}
           // defaultSortField='invoiceId'
           // paginationDefaultPage={currentPage}

src/components/flight/FlightApprovalsReport.js

@@ -7,6 +7,13 @@ export default function FlightApprovalsReport(props) {
   // 식별번호
   const [filterId, setFilterId] = useState('');
 
+  // 키보드 enter 입력시 검색
+  const handlerKeyPress = e => {
+    if (e.key === 'Enter') {
+      props.handlerSearch(filterId);
+    }
+  };
+
   return (
     <div>
       <div className='layer-ti'>
@@ -34,6 +41,7 @@ export default function FlightApprovalsReport(props) {
                 borderRadius: '12px',
                 paddingRight: '30px' // Search 아이콘을 위한 공간 확보
               }}
+              onKeyPress={handlerKeyPress}
               onChange={e => setFilterId(`${e.target.value}`)}
             />
             <Search

src/components/flight/FlightApprovalsTable.js

@@ -9,14 +9,6 @@ export default function FlightApprovalsTable(props) {
   const dispatch = useDispatch();
 
   const [results, setSearchResults] = useState([]);
-  // 모달
-  const [isLaancModal, setIsLaancModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: '',
-    type: '',
-    url: ''
-  });
 
   useEffect(() => {
     if (props.data) {
@@ -26,16 +18,19 @@ export default function FlightApprovalsTable(props) {
 
   useEffect(() => {
     if (props.filter) {
-      const results = props.data.filter(item =>
+      const results = props.data.filter(
-        item.planSno
+        item =>
-          .toLowerCase()
+          item.planSno.toLowerCase().includes(props.filter.toLowerCase()) ||
-          .includes(
+          (item.approval.toLowerCase() === '승인' &&
-            props.filter.toLowerCase() ||
+            props.filter.toLowerCase() === '승인') ||
-              item.approval.toLowerCase().includes(props.filter.toLowerCase())
+          (item.approval.toLowerCase() === '미승인' &&
-          )
+            props.filter.toLowerCase() === '미승인')
       );
       setSearchResults(results);
+    } else if (props.filter === '') {
+      setSearchResults(props.data);
     }
+    console.log('>>>', results);
   }, [props.filter]);
 
   const handlerOpenModal = (approval, reason) => {
@@ -66,6 +61,12 @@ export default function FlightApprovalsTable(props) {
     }
   };
 
+  const handleRowClick = row => {
+    console.log('Clicked row: ', row);
+    props.handlerDetail(row.planSno);
+    // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
+  };
+
   const conditionalRowStyles = [
     {
       when: row => row.approval === '미승인',
@@ -74,11 +75,11 @@ export default function FlightApprovalsTable(props) {
     {
       when: row => row.approval === '승인',
       classNames: ['flight-approval-row']
+    },
+    {
+      when: row => row.planSno === props.selected,
+      classNames: ['flight-approval-row-click']
     }
-    // {
-    //   when: row => row.approval === '비대상',
-    //   classNames: ['flight-noapproval-row']
-    // }
   ];
   const columns = [
     {
@@ -167,11 +168,6 @@ export default function FlightApprovalsTable(props) {
     rows: {
       style: {
         minHeight: '70px'
-        // '&:not(:last-of-type)': {
-        //   borderBottomStyle: 'solid',
-        //   borderWidth: '1px',
-        //   borderColor: '#ff0000'
-        // }
       }
     },
     header: {
@@ -181,23 +177,14 @@ export default function FlightApprovalsTable(props) {
     },
     cells: {
       style: {
-        minHeight: '94px'
+        minHeight: '76px'
       }
     }
   };
 
   return (
-    <div
+    <div className='layer-content drone-list' style={{ width: '100%' }}>
-      className='layer-content drone-list'
+      <Row>
-      style={{ width: '100%', height: '400px' }}
-    >
-      <div className='layer-ti'>
-        {/* <h4>비행승인 신청 결과 목록 </h4>
-        <Badge color='light-primary' className='badge-glow'>
-          총 {0}건 결과
-        </Badge> */}
-      </div>
-      <Row style={{ width: '100%' }}>
         <Col>
           <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
             <div
@@ -216,7 +203,7 @@ export default function FlightApprovalsTable(props) {
                   width: '100%'
                 }}
               >
-                <h4>비행승인 신청 결과 현황</h4>
+                <h4>비행승인 신청 결과 목록</h4>
                 <span className='search-case'>
                   {dayjs().format('YYYY년 MM월 DD일')} 총 {results?.length} 건
                   결과
@@ -226,20 +213,20 @@ export default function FlightApprovalsTable(props) {
           </div>
           <div className='invoice-list-wrapper'>
             <Card>
-              <div
+              <div className='invoice-list-dataTable' style={{ width: '100%' }}>
-                className='invoice-list-dataTable'
+                {results?.length > 0 ? (
-                style={{ width: '100%', height: '500px' }}
+                  <GridDatabase
-              >
+                    title={'비행이력'}
-                <GridDatabase
+                    data={results}
-                  title={'비행이력'}
+                    //   count={laancSearchData?.size}
-                  data={results}
+                    columns={columns}
-                  //   count={laancSearchData?.size}
+                    // handlerPageChange={props.handlerPageChange}
-                  columns={columns}
+                    pagination={true}
-                  // handlerPageChange={props.handlerPageChange}
+                    customStyles={customStyles}
-                  pagination={true}
+                    conditionalRowStyles={conditionalRowStyles}
-                  customStyles={customStyles}
+                    handleRowClick={handleRowClick}
-                  conditionalRowStyles={conditionalRowStyles}
+                  />
-                />
+                ) : null}
               </div>
             </Card>
           </div>

src/containers/flight/flightApprovalsContainer.js

@@ -136,6 +136,32 @@ export default function FlightApprovalsContainer() {
       stArea: ' 인천광역시 부평구 청천동 372',
       cntrlStDt: '2023-11-22 13:14:12',
       cntrlEndDt: '2023-11-22 13:16:29'
+    },
+    {
+      planSno: '351',
+      complaint: '15000',
+      radius: '100',
+      coord: '37.33395/126.59298',
+      elev: '100',
+      approval: '미승인',
+      reason: '관제권 내 허용 고도(50m/80m)',
+      Representative: '김포항공관리사무소',
+      stArea: ' 인천광역시 부평구 청천동 372',
+      cntrlStDt: '2023-11-22 13:14:12',
+      cntrlEndDt: '2023-11-22 13:16:29'
+    },
+    {
+      planSno: '350',
+      complaint: '15000',
+      radius: '100',
+      coord: '37.33395/126.59298',
+      elev: '100',
+      approval: '승인',
+      reason: '관제권 내 허용 고도(50m/80m)',
+      Representative: '김포항공관리사무소',
+      stArea: ' 인천광역시 부평구 청천동 372',
+      cntrlStDt: '2023-11-22 13:14:12',
+      cntrlEndDt: '2023-11-22 13:16:29'
     }
   ]);
   const [selected, setSelected] = useState(null);
@@ -175,7 +201,6 @@ export default function FlightApprovalsContainer() {
     // );
   };
 
-  // 상세보기
   const handlerDetail = async id => {
     setSelected(id);
     const res = await dispatch(getLaancDetail(id));