137 lines
4.0 KiB
JavaScript
137 lines
4.0 KiB
JavaScript
import styled from 'styled-components';
|
|
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 { mailReceiveType, mailSendStatus, mailSendType, mailType } from '../../../assets/data';
|
|
|
|
const MailListSearchBar = ({ handleSearch, setResultData }) => {
|
|
const [searchData, setSearchData] = useState({
|
|
mailTitle: '',
|
|
content: '',
|
|
sendType: 'ALL',
|
|
sendStatus: 'ALL',
|
|
mailType: 'ALL',
|
|
receiveType: 'ALL',
|
|
sendDate: '',
|
|
endDate: '',
|
|
});
|
|
|
|
const handleSubmit = event => {
|
|
event.preventDefault();
|
|
|
|
handleSearch(
|
|
searchData.mailTitle,
|
|
searchData.content,
|
|
searchData.sendType ? searchData.sendType : 'ALL',
|
|
searchData.sendStatus ? searchData.sendStatus : 'ALL',
|
|
searchData.mailType ? searchData.mailType : 'ALL',
|
|
searchData.receiveType ? searchData.receiveType : 'ALL',
|
|
searchData.sendDate ? searchData.sendDate : '',
|
|
searchData.endDate ? searchData.endDate : new Date(),
|
|
(searchData.sendDate && searchData.endDate === '') && setSearchData({ sendDate : searchData.sendDate ,endDate : new Date()}),
|
|
);
|
|
|
|
setResultData(searchData);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setSearchData({
|
|
mailTitle: '',
|
|
content: '',
|
|
sendType: 'ALL',
|
|
sendStatus: 'ALL',
|
|
mailType: 'ALL',
|
|
receiveType: 'ALL',
|
|
sendDate: '',
|
|
endDate: '',
|
|
order: 'DESC',
|
|
});
|
|
|
|
handleSearch('', '', 'ALL', 'ALL', 'ALL', 'ALL', '', '');
|
|
setResultData('', '', 'ALL', 'ALL', 'ALL', 'ALL', '', '');
|
|
|
|
window.location.reload();
|
|
};
|
|
|
|
// console.log("searchData.endDate", searchData.endDate)
|
|
|
|
const searchList = [
|
|
<>
|
|
<InputLabel>우편 제목</InputLabel>
|
|
<TextInput
|
|
type="text"
|
|
placeholder="우편 제목"
|
|
value={searchData.mailTitle}
|
|
onChange={e => setSearchData({ ...searchData, mailTitle: e.target.value })}
|
|
/>
|
|
</>,
|
|
<>
|
|
<InputLabel>조회 일자</InputLabel>
|
|
<SearchPeriod
|
|
startDate={searchData.sendDate}
|
|
handleStartDate={data => {
|
|
setSearchData({ ...searchData, sendDate: data });
|
|
}}
|
|
endDate={searchData.endDate}
|
|
handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
|
|
maxDate={new Date()}
|
|
/>
|
|
</>,
|
|
<>
|
|
<InputLabel>우편 내용</InputLabel>
|
|
<TextInput
|
|
type="text"
|
|
placeholder="우편 내용(공백으로 구분)"
|
|
value={searchData.content}
|
|
onChange={e => setSearchData({ ...searchData, content: e.target.value })}
|
|
/>
|
|
</>
|
|
];
|
|
|
|
const optionList = [
|
|
<>
|
|
<InputLabel>발송 방식</InputLabel>
|
|
<SelectInput value={searchData.sendType} onChange={e => setSearchData({ ...searchData, sendType: e.target.value })}>
|
|
{mailSendType.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
<>
|
|
<InputLabel>발송 상태</InputLabel>
|
|
<SelectInput value={searchData.sendStatus} onChange={e => setSearchData({ ...searchData, sendStatus: e.target.value })}>
|
|
{mailSendStatus.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
<>
|
|
<InputLabel>우편 타입</InputLabel>
|
|
<SelectInput value={searchData.mailType} onChange={e => setSearchData({ ...searchData, mailType: e.target.value })}>
|
|
{mailType.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
<>
|
|
<InputLabel>수신 대상</InputLabel>
|
|
<SelectInput value={searchData.receiveType} onChange={e => setSearchData({ ...searchData, receiveType: e.target.value })}>
|
|
{mailReceiveType.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 MailListSearchBar; |