김장현
3 months ago
11 changed files with 398 additions and 79 deletions
@ -0,0 +1,137 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import dayjs from 'dayjs'; |
||||
import { useDispatch } from '@src/redux/store'; |
||||
import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk'; |
||||
import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable'; |
||||
import FlightApprovalsReport from '@src/components/flight/FlightApprovalsReport'; |
||||
|
||||
function RightMenuContainer() { |
||||
const [filter, setFilter] = useState(''); |
||||
const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); |
||||
const [endDate, setEndDate] = useState(); |
||||
const [selected, setSelected] = useState(null); |
||||
|
||||
const dispatch = useDispatch(); |
||||
|
||||
useEffect(() => { |
||||
handlerOpnerPostMessage('initalState', null); |
||||
window.addEventListener('message', opnerMessage); |
||||
|
||||
return () => { |
||||
window.removeEventListener('message', opnerMessage); |
||||
}; |
||||
}, []); |
||||
|
||||
const opnerMessage = e => { |
||||
const { type } = e.data; |
||||
const { payload } = e.data; |
||||
|
||||
switch (type) { |
||||
case 'initalState': |
||||
setFilter(payload.filter); |
||||
setSelected(payload.selected); |
||||
setStartDate(payload.startDate); |
||||
setEndDate(payload.endDate); |
||||
|
||||
return; |
||||
case 'handlerSearchRs': |
||||
console.log(payload.filter); |
||||
setFilter(payload.filter); |
||||
|
||||
return; |
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
const handlerOpnerPostMessage = (type, payload) => { |
||||
switch (type) { |
||||
case 'initalState': |
||||
window.opener.postMessage({ type, payload }); |
||||
return; |
||||
case 'search': |
||||
window.opener.postMessage({ type, payload }); |
||||
return; |
||||
case 'detail': |
||||
window.opener.postMessage({ type, payload }); |
||||
return; |
||||
case 'closedSync': |
||||
window.opener.postMessage({ type, payload }); |
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
const handlerSearch = (search, searchDate, filterArea) => { |
||||
if ( |
||||
search != '' && |
||||
(search === '승인' || search === '미승인' || search === '비대상') |
||||
) { |
||||
dispatch( |
||||
getLaancAprvList({ |
||||
searchStDt: searchDate.startDate, |
||||
searchEndDt: searchDate.endDate, |
||||
selectZone: filterArea, |
||||
approvalCd: search === '승인' ? 'S' : search === '미승인' ? 'F' : 'U' |
||||
}) |
||||
); |
||||
} else if (search != '') { |
||||
dispatch( |
||||
getLaancAprvList({ |
||||
searchStDt: searchDate.startDate, |
||||
searchEndDt: searchDate.endDate, |
||||
selectZone: filterArea, |
||||
applyNo: search |
||||
}) |
||||
); |
||||
} else { |
||||
dispatch( |
||||
getLaancAprvList({ |
||||
searchStDt: searchDate.startDate, |
||||
searchEndDt: searchDate.endDate, |
||||
selectZone: filterArea |
||||
}) |
||||
); |
||||
} |
||||
localStorage.setItem( |
||||
'popupState', |
||||
JSON.stringify({ |
||||
filter: search, |
||||
selected: filterArea, |
||||
startDate: searchDate.startDate, |
||||
endDate: searchDate.endDate |
||||
}) |
||||
); |
||||
handlerOpnerPostMessage('search', { search, searchDate, filterArea }); |
||||
}; |
||||
|
||||
const handlerDetail = area => { |
||||
handlerOpnerPostMessage('detail', { area }); |
||||
}; |
||||
|
||||
const handleBeforeUnload = () => { |
||||
handlerOpnerPostMessage('closedSync', ''); |
||||
}; |
||||
|
||||
return ( |
||||
<div className='right-menu active'> |
||||
<div |
||||
className='right-layer active flight-approval-layer' |
||||
style={{ width: '100vw' }} |
||||
> |
||||
<div className='layer-content'> |
||||
<FlightApprovalsReport handlerSearch={handlerSearch} /> |
||||
<FlightApprovalsTable |
||||
filter={filter} |
||||
startDate={startDate} |
||||
endDate={endDate} |
||||
selected={selected} |
||||
handlerDetail={handlerDetail} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default RightMenuContainer; |
@ -0,0 +1,13 @@
|
||||
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||
import '@styles/react/libs/tables/react-dataTable-component.scss'; |
||||
import '../assets/css/custom.css'; |
||||
import RightMenuContainer from '../containers/rightMenuContainer'; |
||||
import FlightApprovalsContainer from '../containers/flight/flightApprovalsContainer'; |
||||
|
||||
export default function rightMenuView() { |
||||
return ( |
||||
<div className='pal-container'> |
||||
<RightMenuContainer /> |
||||
</div> |
||||
); |
||||
} |
Loading…
Reference in new issue