diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js index 6f79440c..58aa1171 100644 --- a/src/components/crud/grid/GridDatatable.js +++ b/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 ? (

{EMPTY_MESSAGE}

@@ -33,13 +24,16 @@ export const GridDatabase = props => { subHeader={false} columns={props.columns} responsive={true} + expandRow={props.expandRow} sortIcon={} + 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 } diff --git a/src/components/flight/FlightApprovalsTable.js b/src/components/flight/FlightApprovalsTable.js index 631269a3..878f3271 100644 --- a/src/components/flight/FlightApprovalsTable.js +++ b/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) { ); } + }, + { + name: '더보기', + selector: row => row.areaList, + center: true, + width: '120px', + cell: row => + row.areaList.length > 1 ? ( + + ) : ( + '-' + ) } - // { - // name: '더보기', - // selector: row => row.areaList, - // center: true, - // width: '120px', - // cell: row => { - // return row.areaList.length > 1 ? ( - // - // ) : ( - // '-' - // ); - // } - // } ]; 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 ( + + ); + } + } + ]; + + const handleInRowClick = row => { + props.handlerDetail(row); + }; + const handleRowClick = row => { + props.handlerDetail(row.areaList[0]); + // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요. + }; + const FlightInfoComponent = ({ data }) => { return ( <> - {data.areaList?.map((area, index) => ( -
{ - props.handlerDetail(area); - }} - key={Math.random()} - > -
-
-
- 비행구역 {index + 1}번 -
-
-
-
중심좌표(위/경도)
-
- {area.lat.toFixed(5)}/{area.lon.toFixed(5)} -
-
-
-
반경(m)
-
{area.bufferZone}
-
-
-
고도(m)
-
{area.fltElev}
-
-
-
검토결과
-
- {area.approvalCd === 'U' - ? '비대상' - : area.approvalCd === 'S' - ? '승인' - : '미승인'} -
-
-
-
사유보기
-
- -
-
-
-
- ))} +
+ +
); }; - // const customStyles = { - // rows: { - // style: { - // minHeight: '70px' - // } - // }, - // header: { - // style: { - // width: '20px' - // } - // }, - // cells: { - // style: { - // width: '10px' - // } - // } - // }; + const formatDate = dateString => { + const date = new Date(dateString); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year} 년 ${month} 월 ${day} 일`; + }; + + useEffect(() => { + resApprovalCd(); + }, [laancAprvList]); - const handleRowClick = row => { - props.handlerDetail(row.areaList[0]); - // 여기에 클릭 이벤트를 처리하는 코드를 작성하세요. + const resApprovalCd = () => { + 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) {

비행승인 신청 검토결과 목록

- {props.startDate} 총 {laancAprvList?.length} 건 결과 + {formatDate(props.startDate)} 총{' '} + {approvalCdValue.S + approvalCdValue.F + approvalCdValue.U}건
    -
  • 승인 10건
    • -
  • 미승인 10건
    • -
  • 비대상 10건
    • +
  • 승인 {approvalCdValue.S}건
    • +
  • 미승인 {approvalCdValue.F}건
    • +
  • 비대상 {approvalCdValue.U}건
@@ -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} /> ) : (