96 lines
2.6 KiB
JavaScript
96 lines
2.6 KiB
JavaScript
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../styles/Components';
|
|
import Button from '../common/button/Button';
|
|
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';
|
|
import { useState } from 'react';
|
|
import { eventStatus } from '../../assets/data';
|
|
|
|
const EventListSearchBar = ({ handleSearch, setResultData }) => {
|
|
const [searchData, setSearchData] = useState({
|
|
title: '',
|
|
content: '',
|
|
status: 'ALL',
|
|
startDate: '',
|
|
endDate: '',
|
|
});
|
|
|
|
const handleSubmit = event => {
|
|
event.preventDefault();
|
|
|
|
handleSearch(
|
|
searchData.title,
|
|
searchData.content,
|
|
searchData.status ? searchData.status : 'ALL',
|
|
searchData.startDate ? searchData.startDate : '',
|
|
searchData.endDate ? searchData.endDate : new Date(),
|
|
(searchData.startDate && searchData.endDate === '') && setSearchData({ startDate : searchData.startDate ,endDate : new Date()}),
|
|
);
|
|
|
|
setResultData(searchData);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setSearchData({
|
|
title: '',
|
|
content: '',
|
|
status: 'ALL',
|
|
startDate: '',
|
|
endDate: '',
|
|
order: 'DESC',
|
|
});
|
|
|
|
handleSearch('', '', 'ALL', '', '');
|
|
setResultData('', '', 'ALL', '', '');
|
|
|
|
window.location.reload();
|
|
};
|
|
|
|
// console.log("searchData.endDate", searchData.endDate)
|
|
|
|
const searchList = [
|
|
<>
|
|
<InputLabel>우편 제목</InputLabel>
|
|
<TextInput
|
|
type="text"
|
|
placeholder="우편 제목"
|
|
value={searchData.title}
|
|
onChange={e => setSearchData({ ...searchData, title: e.target.value })}
|
|
/>
|
|
</>,
|
|
<>
|
|
<InputLabel>조회 일자</InputLabel>
|
|
<SearchPeriod
|
|
startDate={searchData.startDate}
|
|
handleStartDate={data => {
|
|
setSearchData({ ...searchData, startDate: data });
|
|
}}
|
|
endDate={searchData.endDate}
|
|
handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
|
|
/>
|
|
</>,
|
|
<>
|
|
<InputLabel>우편 내용</InputLabel>
|
|
<TextInput
|
|
type="text"
|
|
placeholder="우편 내용(공백으로 구분)"
|
|
value={searchData.content}
|
|
onChange={e => setSearchData({ ...searchData, content: e.target.value })}
|
|
/>
|
|
</>
|
|
];
|
|
|
|
const optionList = [
|
|
<>
|
|
<InputLabel>이벤트 상태</InputLabel>
|
|
<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
|
|
{eventStatus.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
];
|
|
return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
|
|
};
|
|
|
|
export default EventListSearchBar; |