|
|
|
@ -30,10 +30,13 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
}, [laancAprvList]); |
|
|
|
|
|
|
|
|
|
// 행 토글
|
|
|
|
|
const toggleRow = rowId => { |
|
|
|
|
const toggleRow = (e, row) => { |
|
|
|
|
const parent = e.target.parentElement.parentElement; |
|
|
|
|
parent.classList.add(`A${row.planSno}`); |
|
|
|
|
|
|
|
|
|
setExpandedRows({ |
|
|
|
|
...expandedRows, |
|
|
|
|
[rowId]: !expandedRows[rowId] |
|
|
|
|
[row.planSno]: !expandedRows[row.planSno] |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -178,7 +181,7 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
width: '83px', |
|
|
|
|
cell: row => |
|
|
|
|
row.areaList.length > 1 ? ( |
|
|
|
|
<Button color='flat-dark' onClick={() => toggleRow(row.planSno)}> |
|
|
|
|
<Button color='flat-dark' onClick={e => toggleRow(e, row)}> |
|
|
|
|
{row.areaList.length}건<br /> 더보기 |
|
|
|
|
{expandedRows[row.planSno] ? <FaAngleDown /> : <FaAngleUp />} |
|
|
|
|
</Button> |
|
|
|
@ -381,15 +384,44 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
|
|
|
|
|
// 데이터 테이블 내부 컴포넌트
|
|
|
|
|
const FlightInfoComponent = ({ data }) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
const expandeds = Object.keys(expandedRows); |
|
|
|
|
if (expandeds.length > 0) { |
|
|
|
|
expandeds.forEach(key => { |
|
|
|
|
const el = document.querySelectorAll(`.A${key}`); |
|
|
|
|
|
|
|
|
|
el.forEach((i, idx) => { |
|
|
|
|
expandedRows[key] |
|
|
|
|
? idx === 0 |
|
|
|
|
? (() => { |
|
|
|
|
i.style.borderTop = '2px solid blue'; |
|
|
|
|
i.style.borderRight = '2px solid blue'; |
|
|
|
|
i.style.borderLeft = '2px solid blue'; |
|
|
|
|
})() |
|
|
|
|
: (() => { |
|
|
|
|
i.style.borderBottom = '2px solid blue'; |
|
|
|
|
i.style.borderRight = '2px solid blue'; |
|
|
|
|
i.style.borderLeft = '2px solid blue'; |
|
|
|
|
})() |
|
|
|
|
: (() => { |
|
|
|
|
i.classList.remove(`A${key}`); |
|
|
|
|
i.style = ''; |
|
|
|
|
})(); |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<div |
|
|
|
|
// style={{
|
|
|
|
|
// borderBottom: '2px dashed #0000FF',
|
|
|
|
|
// borderLeft: '2px dashed #0000FF',
|
|
|
|
|
// borderRight: '2px dashed #0000FF',
|
|
|
|
|
// cursor: 'pointer'
|
|
|
|
|
// }}
|
|
|
|
|
className={`A${data.planSno}`} |
|
|
|
|
// style={{
|
|
|
|
|
// borderBottom: '2px dashed #0000FF',
|
|
|
|
|
// borderLeft: '2px dashed #0000FF',
|
|
|
|
|
// borderRight: '2px dashed #0000FF',
|
|
|
|
|
// cursor: 'pointer'
|
|
|
|
|
// }}
|
|
|
|
|
> |
|
|
|
|
<DataTable |
|
|
|
|
className='flight-approval-in-table' |
|
|
|
|