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

4
src/configs/constants.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save