김장현
1 year ago
3 changed files with 258 additions and 62 deletions
@ -0,0 +1,170 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { GridDatabase } from '@src/components/crud/grid/GridDatatable'; |
||||||
|
import { Row, Col, Card, Spinner, Button } from 'reactstrap'; |
||||||
|
|
||||||
|
import { useSelector } from 'react-redux'; |
||||||
|
import moment from 'moment'; |
||||||
|
|
||||||
|
const data = [ |
||||||
|
{ |
||||||
|
name: '김장현', |
||||||
|
flightStart: '2023-09-26', |
||||||
|
flightEnd: '2023-09-26', |
||||||
|
apploveType: '승인', |
||||||
|
weight: '2kg', |
||||||
|
altitude: '100' |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
function LaancGrid() { |
||||||
|
const { scheduleList } = useSelector(state => state.flightState); |
||||||
|
const { loading } = useSelector(state => state.loadingReducer); |
||||||
|
|
||||||
|
const fillZero = (width, str) => { |
||||||
|
return str.length >= width |
||||||
|
? str |
||||||
|
: new Array(width - str.length + 1).join('0') + str; //남는 길이만큼 0으로 채움
|
||||||
|
}; |
||||||
|
|
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
name: '조종사 성명', |
||||||
|
selector: row => row.name, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.name; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
name: '비행시작일시', |
||||||
|
selector: row => row.flightStart, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return moment(row.flightStart).format('YYYY-MM-DD'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
name: '비행종료일시', |
||||||
|
selector: row => row.flightEnd, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return moment(row.flightEnd).format('YYYY-MM-DD'); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
name: '승인유형', |
||||||
|
selector: row => row.apploveType, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.apploveType; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '기체중량', |
||||||
|
selector: row => row.weight, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.weight; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '고도', |
||||||
|
selector: row => row.altitude, |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.altitude; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '신청기관', |
||||||
|
// selector: row => row.altitude,
|
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return '원스톱'; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
// selector: row => row.altitude,
|
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return ( |
||||||
|
<Button.Ripple color='primary' size='sm' onClick={() => {}}> |
||||||
|
상세보기 |
||||||
|
</Button.Ripple> |
||||||
|
); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
// selector: row => row.altitude,
|
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return ( |
||||||
|
<Button.Ripple color='primary' size='sm' onClick={() => {}}> |
||||||
|
공문 다운로드 |
||||||
|
</Button.Ripple> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='pal-card-box'> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
width: '100%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
||||||
|
<h4>LAANC 승인 신청 목록</h4> |
||||||
|
<span className='search-case'>검색결과 총 {data.length}건</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='invoice-list-wrapper'> |
||||||
|
<Card> |
||||||
|
<div className='invoice-list-dataTable'> |
||||||
|
{loading ? ( |
||||||
|
<div className='grid-loading'> |
||||||
|
<div> |
||||||
|
<Spinner color='primary' /> |
||||||
|
<span>Loading...</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
<GridDatabase |
||||||
|
title={'비행이력'} |
||||||
|
data={data} |
||||||
|
count={data.length} |
||||||
|
columns={columns} |
||||||
|
pagination={false} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default LaancGrid; |
@ -0,0 +1,71 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { Row, Col, Button, Card, CardBody } from 'reactstrap'; |
||||||
|
import { Search, Calendar } from 'react-feather'; |
||||||
|
import Flatpickr from 'react-flatpickr'; |
||||||
|
import moment from 'moment'; |
||||||
|
|
||||||
|
function LaancSearch() { |
||||||
|
const [date, setDate] = useState( |
||||||
|
moment().subtract('day').format('YYYY-MM-DD') |
||||||
|
); |
||||||
|
|
||||||
|
const handlerChangeDate = val => { |
||||||
|
setDate(moment(val[0]).format('YYYY-MM-DD')); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='pal-card-box'> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
|
<div> |
||||||
|
<h4>검색조건</h4> |
||||||
|
</div> |
||||||
|
<div className='d-flex align-items-center'> |
||||||
|
<Button.Ripple color='primary' size='sm' onClick={() => {}}> |
||||||
|
<Search size={16} /> |
||||||
|
검색 |
||||||
|
</Button.Ripple> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Card> |
||||||
|
<CardBody className='pal-card-body'> |
||||||
|
<div className='search-cont'> |
||||||
|
<dl> |
||||||
|
<dt> |
||||||
|
<div className='search-box'> |
||||||
|
<div className='search-list-ti'>신청일</div> |
||||||
|
<div className='search-list'> |
||||||
|
<div className='search-list-cont'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' xl='4' md='6' sm='12'> |
||||||
|
<div className='d-flex align-items-center calendar-flat'> |
||||||
|
<Flatpickr |
||||||
|
placeholder='날짜를 선택해주세요' |
||||||
|
id='searchDate' |
||||||
|
value={date} |
||||||
|
options={{ |
||||||
|
mode: 'single' |
||||||
|
}} |
||||||
|
onChange={handlerChangeDate} |
||||||
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||||
|
/> |
||||||
|
<Calendar size={14} /> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default LaancSearch; |
Loading…
Reference in new issue