112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import { useState } from 'react';
|
|
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
|
|
import Button from '../../common/button/Button';
|
|
import { SearchBarLayout } from '../../common/SearchBar';
|
|
import { blockPeriod, blockSanctions, blockSearchType, blockStatus } from '../../../assets/data';
|
|
import { userSearchType } from '../../../assets/data/options';
|
|
|
|
const UserBlockSearchBar = ({ handleSearch, setResultData }) => {
|
|
const [searchData, setSearchData] = useState({
|
|
searchType: 'GUID',
|
|
data: '',
|
|
email: '',
|
|
status: 'ALL',
|
|
sanctions: 'ALL',
|
|
period: 'ALL',
|
|
});
|
|
|
|
const handleSubmit = event => {
|
|
event.preventDefault();
|
|
|
|
handleSearch(
|
|
searchData.searchType ? searchData.searchType : 'GUID',
|
|
searchData.data,
|
|
searchData.email,
|
|
searchData.status ? searchData.status : 'ALL',
|
|
searchData.sanctions ? searchData.sanctions : 'ALL',
|
|
searchData.period ? searchData.period : 'ALL',
|
|
);
|
|
|
|
setResultData(searchData);
|
|
};
|
|
|
|
// 초기화 버튼
|
|
const handleReset = () => {
|
|
setSearchData({
|
|
searchType: 'GUID',
|
|
data: '',
|
|
email: '',
|
|
status: 'ALL',
|
|
sanctions: 'ALL',
|
|
period: 'ALL',
|
|
});
|
|
handleSearch('GUID', '', '', 'ALL', 'ALL', 'ALL');
|
|
setResultData('GUID', '', '', 'ALL', 'ALL', 'ALL');
|
|
window.location.reload();
|
|
};
|
|
|
|
// console.log(searchData);
|
|
|
|
const searchList = [
|
|
<>
|
|
<InputLabel>대상</InputLabel>
|
|
<InputGroup>
|
|
<SelectInput value={searchData.searchType} onChange={e => setSearchData({ ...searchData, searchType: e.target.value })}>
|
|
{userSearchType.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
<TextInput
|
|
type="text"
|
|
placeholder={searchData.searchType === 'GUID' ? 'GUID 입력' : '닉네임 입력'}
|
|
value={searchData.data}
|
|
width="600px"
|
|
onChange={e => setSearchData({ ...searchData, data: e.target.value })}
|
|
/>
|
|
</InputGroup>
|
|
</>,
|
|
<>
|
|
<InputLabel>등록자</InputLabel>
|
|
<TextInput type="text" placeholder="이메일 입력" width="600px" value={searchData.email} onChange={e => setSearchData({ ...searchData, email: e.target.value })} />
|
|
</>,
|
|
];
|
|
|
|
const optionList = [
|
|
<>
|
|
<InputLabel>상태</InputLabel>
|
|
<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
|
|
{blockStatus.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
<>
|
|
<InputLabel>제재 사유</InputLabel>
|
|
<SelectInput value={searchData.sanctions} onChange={e => setSearchData({ ...searchData, sanctions: e.target.value })}>
|
|
{blockSanctions.map((data, index) => (
|
|
<option key={index} value={data.value}>
|
|
{data.name}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
</>,
|
|
<>
|
|
<InputLabel>제재 기간</InputLabel>
|
|
<SelectInput value={searchData.period} onChange={e => setSearchData({ ...searchData, period: e.target.value })}>
|
|
{blockPeriod.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 UserBlockSearchBar;
|