sanguu(박상현)
2 years ago
13 changed files with 372 additions and 294 deletions
@ -1,172 +1,171 @@
|
||||
import React, {useState} from 'react'; |
||||
import {Button, Card, CardBody, Col, CustomInput, Row} from 'reactstrap'; |
||||
import {Search} from 'react-feather'; |
||||
import React, { useState } from 'react'; |
||||
import { Button, Card, CardBody, Col, CustomInput, Row } from 'reactstrap'; |
||||
import { Search } from 'react-feather'; |
||||
import Flatpickr from 'react-flatpickr'; |
||||
import moment from 'moment'; |
||||
|
||||
|
||||
const FlightPlanSearch = ({searchData, handleChangeSearchData, handleSearch}) => { |
||||
|
||||
const {schFltStDt, schFltEndDt, aprvlYn} = searchData; |
||||
const initCheckState = { |
||||
'all': aprvlYn == 'A', |
||||
'yes': (aprvlYn == 'Y' || aprvlYn == 'A'), |
||||
'no': (aprvlYn == 'N' || aprvlYn == 'A'), |
||||
} |
||||
const [checkState, setCheckState] = useState(initCheckState); |
||||
const handleClickSearch = (e) => { |
||||
handleSearch(searchData); |
||||
} |
||||
const handleChangeInput = (dates, value, config) => { |
||||
if (dates.length === 2) { |
||||
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); |
||||
const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'); |
||||
handleChangeSearchData({schFltStDt, schFltEndDt}) |
||||
} |
||||
const FlightPlanSearch = ({ |
||||
searchData, |
||||
handleChangeSearchData, |
||||
handleSearch |
||||
}) => { |
||||
const { schFltStDt, schFltEndDt, aprvlYn } = searchData; |
||||
const initCheckState = { |
||||
all: aprvlYn == 'A', |
||||
yes: aprvlYn == 'Y' || aprvlYn == 'A', |
||||
no: aprvlYn == 'N' || aprvlYn == 'A' |
||||
}; |
||||
const [checkState, setCheckState] = useState(initCheckState); |
||||
const handleClickSearch = e => { |
||||
handleSearch(searchData); |
||||
}; |
||||
const handleChangeInput = (dates, value, config) => { |
||||
if (dates.length === 2) { |
||||
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); |
||||
const schFltEndDt = moment(dates[1]) |
||||
.set({ h: 23, m: 59, s: 59 }) |
||||
.format('YYYY-MM-DD HH:mm:ss'); |
||||
handleChangeSearchData({ schFltStDt, schFltEndDt }); |
||||
} |
||||
const handleChangeCheckbox = (e) => { |
||||
const {name, value, checked} = e.target; |
||||
let val; |
||||
switch (value) { |
||||
case 'A': |
||||
val = checked ? 'A' : ''; |
||||
handleChangeSearchData({[name]: val}) |
||||
setCheckState({ |
||||
'all': checked, |
||||
'yes': checked, |
||||
'no': checked |
||||
}) |
||||
break; |
||||
case 'Y': |
||||
if (checked && checkState.no) val = 'A' |
||||
else if (checked && !checkState.no) val = 'Y' |
||||
else if (!checked && checkState.no) val = 'N' |
||||
else if (!checked && !checkState.no) val = '' |
||||
handleChangeSearchData({[name]: val}) |
||||
setCheckState(prevState => ({ |
||||
'all': prevState.no && checked, |
||||
'yes': checked, |
||||
'no': prevState.no |
||||
})) |
||||
break; |
||||
case 'N': |
||||
if (checked && checkState.yes) val = 'A' |
||||
else if (checked && !checkState.yes) val = 'N' |
||||
else if (!checked && checkState.yes) val = 'Y' |
||||
else if (!checked && !checkState.yes) val = '' |
||||
handleChangeSearchData({[name]: val}) |
||||
setCheckState(prevState => ({ |
||||
'all': prevState.yes && checked, |
||||
'yes': prevState.yes, |
||||
'no': checked |
||||
})) |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
const handleChangeCheckbox = e => { |
||||
const { name, value, checked } = e.target; |
||||
let val; |
||||
switch (value) { |
||||
case 'A': |
||||
val = checked ? 'A' : ''; |
||||
handleChangeSearchData({ [name]: val }); |
||||
setCheckState({ |
||||
all: checked, |
||||
yes: checked, |
||||
no: checked |
||||
}); |
||||
break; |
||||
case 'Y': |
||||
if (checked && checkState.no) val = 'A'; |
||||
else if (checked && !checkState.no) val = 'Y'; |
||||
else if (!checked && checkState.no) val = 'N'; |
||||
else if (!checked && !checkState.no) val = ''; |
||||
handleChangeSearchData({ [name]: val }); |
||||
setCheckState(prevState => ({ |
||||
all: prevState.no && checked, |
||||
yes: checked, |
||||
no: prevState.no |
||||
})); |
||||
break; |
||||
case 'N': |
||||
if (checked && checkState.yes) val = 'A'; |
||||
else if (checked && !checkState.yes) val = 'N'; |
||||
else if (!checked && checkState.yes) val = 'Y'; |
||||
else if (!checked && !checkState.yes) val = ''; |
||||
handleChangeSearchData({ [name]: val }); |
||||
setCheckState(prevState => ({ |
||||
all: prevState.yes && checked, |
||||
yes: prevState.yes, |
||||
no: checked |
||||
})); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
return ( |
||||
<div> |
||||
<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={handleClickSearch} |
||||
> |
||||
<Search size={16}/> |
||||
검색 |
||||
</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
<Card> |
||||
<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 |
||||
id='searchDate' |
||||
value={[ |
||||
schFltStDt, |
||||
schFltEndDt |
||||
]} |
||||
options={{ |
||||
mode: 'range', |
||||
// defaultDate: [
|
||||
// props.params.stDate,
|
||||
// props.params.endDate
|
||||
// ]
|
||||
}} |
||||
onChange={handleChangeInput} |
||||
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||
/> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
<dt> |
||||
<div className='search-box'> |
||||
<div className='search-list-ti'>승인여부</div> |
||||
<div className='search-list'> |
||||
<div className='search-list-cont'> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox' |
||||
label='전체' |
||||
name="aprvlYn" |
||||
value="A" |
||||
// checked={true}
|
||||
checked={checkState.all} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox2' |
||||
label='승인' |
||||
name="aprvlYn" |
||||
value="Y" |
||||
checked={checkState.yes} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox3' |
||||
label='미승인' |
||||
name="aprvlYn" |
||||
value="N" |
||||
checked={checkState.no} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
}; |
||||
return ( |
||||
<div> |
||||
<Row> |
||||
<Col> |
||||
<div className='mt-2 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={handleClickSearch} |
||||
> |
||||
<Search size={16} /> |
||||
검색 |
||||
</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
<Card> |
||||
<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 |
||||
id='searchDate' |
||||
value={[schFltStDt, schFltEndDt]} |
||||
options={{ |
||||
mode: 'range' |
||||
// defaultDate: [
|
||||
// props.params.stDate,
|
||||
// props.params.endDate
|
||||
// ]
|
||||
}} |
||||
onChange={handleChangeInput} |
||||
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||
/> |
||||
</div> |
||||
</Card> |
||||
|
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
) |
||||
} |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
<dt> |
||||
<div className='search-box'> |
||||
<div className='search-list-ti'>승인여부</div> |
||||
<div className='search-list'> |
||||
<div className='search-list-cont'> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox' |
||||
label='전체' |
||||
name='aprvlYn' |
||||
value='A' |
||||
// checked={true}
|
||||
checked={checkState.all} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox2' |
||||
label='승인' |
||||
name='aprvlYn' |
||||
value='Y' |
||||
checked={checkState.yes} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
<CustomInput |
||||
inline |
||||
type='checkbox' |
||||
id='exampleCustomCheckbox3' |
||||
label='미승인' |
||||
name='aprvlYn' |
||||
value='N' |
||||
checked={checkState.no} |
||||
onChange={handleChangeCheckbox} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
</div> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default FlightPlanSearch; |
||||
|
||||
Loading…
Reference in new issue