From e1c321d74ce90b7a0dacdcd213db8c7e9f1b893d Mon Sep 17 00:00:00 2001 From: sanguu516 Date: Tue, 2 Apr 2024 11:41:14 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8A=B9=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=20=EA=B2=B0=EA=B3=BC=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/custom.css | 3 + src/components/crud/grid/GridDatatable.js | 3 +- .../flight/FlightApprovalsReport.js | 8 ++ src/components/flight/FlightApprovalsTable.js | 89 ++++++++----------- .../flight/flightApprovalsContainer.js | 27 +++++- 5 files changed, 77 insertions(+), 53 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index a1e27696..b3f7ca8b 100644 --- a/src/assets/css/custom.css +++ b/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} \ No newline at end of file diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js index 608bebb9..6ca1cb13 100644 --- a/src/components/crud/grid/GridDatatable.js +++ b/src/components/crud/grid/GridDatatable.js @@ -31,7 +31,8 @@ export const GridDatabase = props => { columns={props.columns} responsive={true} sortIcon={} - className='react-dataTable pal-dateTable ' + className='react-dataTable pal-dateTable' + onRowClicked={props.handleRowClick} paginationDefaultPage={props.page || 1} // defaultSortField='invoiceId' // paginationDefaultPage={currentPage} diff --git a/src/components/flight/FlightApprovalsReport.js b/src/components/flight/FlightApprovalsReport.js index e621ed89..d6b78098 100644 --- a/src/components/flight/FlightApprovalsReport.js +++ b/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 (
@@ -34,6 +41,7 @@ export default function FlightApprovalsReport(props) { borderRadius: '12px', paddingRight: '30px' // Search 아이콘을 위한 공간 확보 }} + onKeyPress={handlerKeyPress} onChange={e => setFilterId(`${e.target.value}`)} /> { if (props.data) { @@ -26,16 +18,19 @@ export default function FlightApprovalsTable(props) { useEffect(() => { if (props.filter) { - const results = props.data.filter(item => - item.planSno - .toLowerCase() - .includes( - props.filter.toLowerCase() || - item.approval.toLowerCase().includes(props.filter.toLowerCase()) - ) + const results = props.data.filter( + item => + item.planSno.toLowerCase().includes(props.filter.toLowerCase()) || + (item.approval.toLowerCase() === '승인' && + 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 ( -
-
- {/*

비행승인 신청 결과 목록

- - 총 {0}건 결과 - */} -
- +
+
-

비행승인 신청 결과 현황

+

비행승인 신청 결과 목록

{dayjs().format('YYYY년 MM월 DD일')} 총 {results?.length} 건 결과 @@ -226,20 +213,20 @@ export default function FlightApprovalsTable(props) {
-
- +
+ {results?.length > 0 ? ( + + ) : null}
diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js index f7ec9828..77e4b8c0 100644 --- a/src/containers/flight/flightApprovalsContainer.js +++ b/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));