pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행 승인 테이블 수정

master
sanguu516 4 months ago
parent
51e897060e
commit
7996c9503a
2 changed files with 184 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/components/crud/grid/GridDatatable.js
  2. 290
      src/components/flight/FlightApprovalsTable.js

12
src/components/crud/grid/GridDatatable.js
Unescape View File

@ -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 ? (
<div className='d-flex justify-content-center align-items-center h-100'>
<p>{EMPTY_MESSAGE}</p>
@ -33,13 +24,16 @@ export const GridDatabase = props => {
subHeader={false}
columns={props.columns}
responsive={true}
expandRow={props.expandRow}
sortIcon={<ChevronDown />}
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
}

290
src/components/flight/FlightApprovalsTable.js
Unescape View File

@ -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) {
</Button>
);
}
},
{
name: '더보기',
selector: row => row.areaList,
center: true,
width: '120px',
cell: row =>
row.areaList.length > 1 ? (
<Button color='flat-dark' onClick={() => toggleRow(row.applyNo)}>
{row.areaList.length}건 더 보기
{expandedRows[row.applyNo] ? <FaAngleDown /> : <FaAngleUp />}
</Button>
) : (
'-'
)
}
// {
// name: '더보기',
// selector: row => row.areaList,
// center: true,
// width: '120px',
// cell: row => {
// return row.areaList.length > 1 ? (
// <Button
// color='flat-dark'
// // onClick={() =>}
// >
// {row.areaList.length}건 더 보기
// </Button>
// ) : (
// '-'
// );
// }
// }
];
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 (
<Button
color='flat-dark'
onClick={() =>
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax)
}
>
사유보기
</Button>
);
}
}
];
const handleInRowClick = row => {
props.handlerDetail(row);
};
const handleRowClick = row => {
props.handlerDetail(row.areaList[0]);
// 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
};
const FlightInfoComponent = ({ data }) => {
return (
<>
{data.areaList?.map((area, index) => (
<div
className={`layer-content-list ${
area.planAreaSno === props.selected ? 'on' : ''
} ${
area.approvalCd === 'S'
? 'flight-approval-row'
: area.approvalCd === 'F'
? 'flight-not-approval-row'
: ''
} `}
onClick={() => {
props.handlerDetail(area);
}}
key={Math.random()}
>
<dl>
<dt>
<div className='list-left-txt'>
<strong>비행구역 {index + 1}번</strong>
</div>
</dt>
<dt>
<div className='list-left-txt'>중심좌표(위/경도)</div>
<div className='list-right-txt'>
{area.lat.toFixed(5)}/{area.lon.toFixed(5)}
</div>
</dt>
<dt>
<div className='list-left-txt'>반경(m)</div>
<div className='list-right-txt'>{area.bufferZone}</div>
</dt>
<dt>
<div className='list-left-txt'>고도(m)</div>
<div className='list-right-txt'>{area.fltElev}</div>
</dt>
<dt>
<div className='list-left-txt'>검토결과</div>
<div className='list-right-txt'>
{area.approvalCd === 'U'
? '비대상'
: area.approvalCd === 'S'
? '승인'
: '미승인'}
</div>
</dt>
<dt>
<div className='list-left-txt'>사유보기</div>
<div className='list-right-txt'>
<Button
color='flat-dark'
onClick={() =>
handlerOpenModal(
area.approvalCd,
area.fltElev,
area.fltElevMax
)
}
>
사유보기
</Button>
</div>
</dt>
</dl>
</div>
))}
<div>
<DataTable
noTableHead={true}
data={data.areaList.slice(1)}
columns={nestedColumns}
conditionalRowStyles={infoRowStyles}
onRowClicked={handleInRowClick}
/>
</div>
</>
);
};
// 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) {
<div className='layer-ti d-flex justify-content-between align-items-center'>
<h4>비행승인 신청 검토결과 목록</h4>
<span className='search-case'>
{props.startDate} 총 {laancAprvList?.length} 건 결과
{formatDate(props.startDate)} 총{' '}
{approvalCdValue.S + approvalCdValue.F + approvalCdValue.U}건
</span>
</div>
<div className='search-case-list'>
<div>
<ul>
<li className='approval'>승인 10건</li>
<li className='not-approved'>미승인 10건</li>
<li className='non-target'>비대상 10건</li>
<li className='approval'>승인 {approvalCdValue.S}건</li>
<li className='not-approved'>미승인 {approvalCdValue.F}건</li>
<li className='non-target'>비대상 {approvalCdValue.U}건</li>
</ul>
</div>
</div>
@ -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}
/>
) : (
<div

Write Preview
Loading…
Cancel
Save