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

비행승인 페이지 검색영역 축소 작업

master
김장현 2 weeks ago
parent
348e93ec36
commit
c845148ae8
2 changed files with 294 additions and 267 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 557
      src/components/flight/NewFlightApprovalsReport.js
  2. 4
      src/configs/constants.ts

557
src/components/flight/NewFlightApprovalsReport.js
Unescape View File

@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import Flatpickr from 'react-flatpickr'; import Flatpickr from 'react-flatpickr';
import { Collapse, ConfigProvider } from 'antd';
import { import {
Button, Button,
Input, Input,
@ -53,276 +54,302 @@ export default function NewFlightApprovalsReport(props) {
}; };
return ( return (
<> <ConfigProvider
<div className='layer-content' onDragEnd={props.handleDragEnd} draggable> theme={{
<div className='layer-ti'> components: {
Collapse: {
headerPadding: 0
}
}
}}
>
<div onDragEnd={props.handleDragEnd} draggable>
<Collapse
size='middle'
bordered={false}
expandIconPosition='end'
items={[
{
key: '1',
label: (
<div className='layer-ti'>
<h4>비행승인 신청 검토결과 현황</h4>
</div>
),
children: (
<>
<div className='layer-content'>
{/* <div className='layer-ti'>
<h4>비행승인 신청 검토결과 현황</h4> <h4>비행승인 신청 검토결과 현황</h4>
</div> </div> */}
<div className='input-n'> <div className='input-n'>
<div className='list-input'> <div className='list-input'>
<div className='layer-content'> <div className='layer-content'>
<FormGroup> <FormGroup>
<Label for='searchDate'>신청일자</Label> <Label for='searchDate'>신청일자</Label>
<div className='calendar-flat'> <div className='calendar-flat'>
<Flatpickr <Flatpickr
ref={flatPickerRef} ref={flatPickerRef}
placeholder='날짜를 선택해주세요' placeholder='날짜를 선택해주세요'
id='searchDate' id='searchDate'
options={{ options={{
mode: 'range', mode: 'range',
defaultDate: [searchDate.startDate, searchDate.endDate] defaultDate: [
}} searchDate.startDate,
onChange={date => { searchDate.endDate
setSearchDate({ ]
startDate: dayjs(date[0]).format('YYYY-MM-DD'), }}
endDate: dayjs(date[1]).format('YYYY-MM-DD') onChange={date => {
}); setSearchDate({
}} startDate: dayjs(date[0]).format(
className='form-control flat-picker bg-transparent border-0 shadow-none' 'YYYY-MM-DD'
/> ),
<Calendar size={14} /> endDate: dayjs(date[1]).format('YYYY-MM-DD')
</div> });
</FormGroup> }}
</div> className='form-control flat-picker bg-transparent border-0 shadow-none'
</div> />
<Calendar size={14} />
</div>
</FormGroup>
</div>
</div>
<div className='list-input'> <div className='list-input'>
<div className='layer-content'> <div className='layer-content'>
<FormGroup> <FormGroup>
<Label for='filterId'>신청번호</Label> <Input
<Input type='text'
type='text' bsSize='sm'
bsSize='sm' placeholder='신청번호를 입력해주세요.'
placeholder='신청번호를 입력해주세요.' value={props.filterId}
value={props.filterId} onChange={e => props.setFilterId(e.target.value)}
onChange={e => props.setFilterId(e.target.value)} onKeyPress={handleKeyDown}
onKeyPress={handleKeyDown} />
/> </FormGroup>
</FormGroup> </div>
</div> </div>
</div>
<div className='list-input'> <div className='list-input'>
<div className='layer-content'> <div className='layer-content'>
<FormGroup> <FormGroup>
<Label for='limitZoneNm'>장애물 제한표면</Label> <CustomInput
<CustomInput type='select'
type='select' bsSize='sm'
bsSize='sm' id='limitzoneNm'
id='limitzoneNm' placeholder='장애물 제한표면을 선택 해 주세요.'
placeholder='장애물 제한표면을 선택 해 주세요.' onChange={e =>
onChange={e => props.setCheckState({
props.setCheckState({ ...props.checkState,
...props.checkState, limitZoneNm: e.target.value
limitZoneNm: e.target.value })
}) }
} onKeyPress={handleKeyDown}
onKeyPress={handleKeyDown} value={props.checkState.limitZoneNm}
value={props.checkState.limitZoneNm} >
> <option value={'전체'}>장애물 제한표면</option>
<option value={'전체'}>전체</option> <option value={'C'}>원추</option>
<option value={'C'}>원추</option> <option value={'H'}>수평</option>
<option value={'H'}>수평</option> </CustomInput>
</CustomInput> </FormGroup>
</FormGroup> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className='layer-content'>
<div className='layer-content'> <div className='input-n'>
<div className='layer-ti'> <div className='list-input'>
<h4>확인 결과</h4> <div className='layer-content'>
</div> <FormGroup>
<div className='input-n'> <CustomInput
<div className='list-input'> type='select'
<div className='layer-content'> bsSize='sm'
<FormGroup> id={
<Label for='searchDate'> props.pageName === 'control'
{props.pageName === 'control' ? '관제통신과' : '안전운항과'} ? 'reviewedProcType'
</Label> : 'reviewedType'
<CustomInput }
type='select' value={
bsSize='sm' props.pageName === 'control'
id={ ? props.checkState.reviewedProcType
props.pageName === 'control' : props.checkState.reviewedType
? 'reviewedProcType' }
: 'reviewedType' onChange={e => {
} props.pageName === 'control'
value={ ? props.setCheckState({
props.pageName === 'control' ...props.checkState,
? props.checkState.reviewedProcType reviewedProcType: e.target.value
: props.checkState.reviewedType })
} : props.setCheckState({
onChange={e => { ...props.checkState,
props.pageName === 'control' reviewedType: e.target.value
? props.setCheckState({ });
...props.checkState, }}
reviewedProcType: e.target.value onKeyPress={handleKeyDown}
}) >
: props.setCheckState({ {Object.entries(
...props.checkState, props.pageName === 'control'
reviewedType: e.target.value ? FlightCategory.Control
}); : FlightCategory.Operation
}} ).map(([key, value]) => (
onKeyPress={handleKeyDown} <option key={key} value={key}>
> {value}
{Object.entries( </option>
props.pageName === 'control' ))}
? FlightCategory.Control </CustomInput>
: FlightCategory.Operation </FormGroup>
).map(([key, value]) => ( </div>
<option key={key} value={key}> </div>
{value} {props.pageName !== 'control' && (
</option> <div className='list-input'>
))} <div className='layer-content'>
</CustomInput> <FormGroup>
</FormGroup> <CustomInput
</div> type='select'
</div> bsSize='sm'
{props.pageName !== 'control' && ( id={
<div className='list-input'> props.pageName === 'control'
<div className='layer-content'> ? 'reviewedType'
<FormGroup> : 'reviewedProcType'
<Label for='searchDate'> }
{props.pageName === 'control' ? '안전운항과' : '관제통신과'} value={
</Label> props.pageName === 'control'
<CustomInput ? props.checkState.reviewedType
type='select' : props.checkState.reviewedProcType
bsSize='sm' }
id={ onChange={e => {
props.pageName === 'control' props.pageName === 'control'
? 'reviewedType' ? props.setCheckState({
: 'reviewedProcType' ...props.checkState,
} reviewedType: e.target.value
value={ })
props.pageName === 'control' : props.setCheckState({
? props.checkState.reviewedType ...props.checkState,
: props.checkState.reviewedProcType reviewedProcType: e.target.value
} });
onChange={e => { }}
props.pageName === 'control' onKeyPress={handleKeyDown}
? props.setCheckState({ >
...props.checkState, {Object.entries(
reviewedType: e.target.value props.pageName === 'control'
}) ? FlightCategory.Operation
: props.setCheckState({ : FlightCategory.Control
...props.checkState, ).map(([key, value]) => (
reviewedProcType: e.target.value <option key={key} value={key}>
}); {value}
}} </option>
onKeyPress={handleKeyDown} ))}
> </CustomInput>
{Object.entries( </FormGroup>
props.pageName === 'control' </div>
? FlightCategory.Operation </div>
: FlightCategory.Control )}
).map(([key, value]) => (
<option key={key} value={key}>
{value}
</option>
))}
</CustomInput>
</FormGroup>
</div>
</div>
)}
<div className='list-input'> <div className='list-input'>
<div className='layer-content'> <div className='layer-content'>
<FormGroup> <FormGroup>
<Label for='searchDate'>전송 상태</Label> <CustomInput
<CustomInput type='select' bsSize='sm' id='searchDate'> type='select'
<option>전체</option> bsSize='sm'
<option>전송</option> id='searchDate'
<option>미전송</option> >
</CustomInput> <option>전송 상태</option>
</FormGroup> <option>전송</option>
</div> <option>미전송</option>
</div> </CustomInput>
</div> </FormGroup>
</div> </div>
<div className='layer-content'> </div>
<div className='layer-ti'> </div>
<h4>신청구역</h4> </div>
</div> <div className='layer-content'>
<div className='input-n'> <div className='layer-ti'>
<div className='list-input'> <h4>신청구역</h4>
<CustomInput </div>
type='select' <div className='input-n'>
id='filterArea' <div className='list-input'>
bsSize='sm' <CustomInput
value={props.filterArea.ctprvn} type='select'
onChange={e => id='filterArea'
props.setFilterArea({ bsSize='sm'
...props.filterArea, value={props.filterArea.ctprvn}
ctprvn: e.target.value, onChange={e =>
sig: '전체' props.setFilterArea({
}) ...props.filterArea,
} ctprvn: e.target.value,
> sig: '전체'
{Object.values(CityCategories).map(city => ( })
<option key={city} value={city}> }
{city} >
</option> {Object.values(CityCategories).map(city => (
))} <option key={city} value={city}>
</CustomInput> {city}
</div> </option>
<div className='list-input'> ))}
<CustomInput </CustomInput>
type='select' </div>
id='district' <div className='list-input'>
bsSize='sm' <CustomInput
value={props.filterArea.sig} type='select'
onChange={e => id='district'
props.setFilterArea({ bsSize='sm'
...props.filterArea, value={props.filterArea.sig}
sig: e.target.value onChange={e =>
}) props.setFilterArea({
} ...props.filterArea,
> sig: e.target.value
{DistrictCategories[props.pageName][props.filterArea.ctprvn]?.map( })
district => ( }
<option key={district} value={district}> >
{district} {DistrictCategories[props.pageName][
</option> props.filterArea.ctprvn
) ]?.map(district => (
)} <option key={district} value={district}>
</CustomInput> {district}
</div> </option>
<div className='list-input'> ))}
<Input </CustomInput>
type='text' </div>
bsSize='sm' <div className='list-input'>
placeholder='주소를 입력해주세요.' <Input
value={props.filterArea.address} type='text'
onChange={e => bsSize='sm'
props.setFilterArea({ placeholder='주소를 입력해주세요.'
...props.filterArea, value={props.filterArea.address}
address: e.target.value onChange={e =>
}) props.setFilterArea({
} ...props.filterArea,
onKeyPress={handleKeyDown} address: e.target.value
/> })
</div> }
<div className='list-input list-input-btn'> onKeyPress={handleKeyDown}
<Button />
color='primary' </div>
onClick={() => { <div className='list-input list-input-btn'>
props.handlerSearch( <Button
props.filterId, color='primary'
searchDate, onClick={() => {
props.filterArea, props.handlerSearch(
props.limitZoneNm props.filterId,
); searchDate,
}} props.filterArea,
size='sm' props.limitZoneNm
> );
검색 }}
</Button> size='sm'
</div> >
</div> 검색
</Button>
</div>
</div>
</div>
</>
)
}
]}
/>
</div> </div>
</> </ConfigProvider>
); );
} }

4
src/configs/constants.ts
Unescape View File

@ -237,7 +237,7 @@ export type DistrictCategory =
// 비행 확인 상태 // 비행 확인 상태
export const FlightCategory = { export const FlightCategory = {
Control: { Control: {
전체: '전체', 전체: '관제통신과',
W: '검토대기', W: '검토대기',
P: '검토완료' P: '검토완료'
// R: '재검토', // R: '재검토',
@ -245,7 +245,7 @@ export const FlightCategory = {
// P: '요청처리' // P: '요청처리'
}, },
Operation: { Operation: {
전체: '전체', 전체: '안전운항과',
P: '검토완료', P: '검토완료',
W: '검토대기', W: '검토대기',
Q: '검토요청' Q: '검토요청'

Write Preview
Loading…
Cancel
Save