118 lines
3.0 KiB
JavaScript
118 lines
3.0 KiB
JavaScript
import { useState } from 'react';
|
|
import { styled } from 'styled-components';
|
|
import Button from '../common/button/Button';
|
|
|
|
import DatePickerComponent from '../common/Date/DatePickerComponent';
|
|
|
|
import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';
|
|
|
|
const InstanceSearchBar = ({ fetchData }) => {
|
|
let d = new Date();
|
|
const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
|
|
const END_DATE = new Date();
|
|
|
|
const [resultData, setResultData] = useState({
|
|
search_key: '',
|
|
send_dt: START_DATE,
|
|
end_dt: END_DATE,
|
|
});
|
|
|
|
// 발송 날짜 세팅 로직
|
|
const handleSelectedDate = data => {
|
|
const sendDate = new Date(data);
|
|
const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate());
|
|
|
|
setResultData({ ...resultData, send_dt: resultSendData });
|
|
};
|
|
|
|
// 발송 날짜 세팅 로직
|
|
const handleEndDate = data => {
|
|
const endDate = new Date(data);
|
|
const resultSendData = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
|
|
|
|
setResultData({ ...resultData, end_dt: resultSendData });
|
|
};
|
|
|
|
const handleReset = e => {
|
|
e.preventDefault();
|
|
setResultData({ search_key: '', send_dt: START_DATE, end_dt: END_DATE });
|
|
|
|
fetchData('', START_DATE, END_DATE);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<FormWrapper>
|
|
<SearchbarStyle>
|
|
<SearchItem>
|
|
<InputLabel>인스턴스 ID</InputLabel>
|
|
<TextInput type="text" placeholder="ID 입력" onChange={e => setResultData({ ...resultData, search_key: e.target.value })} />
|
|
</SearchItem>
|
|
<SearchItem>
|
|
<InputLabel>집계 기간</InputLabel>
|
|
<InputGroup>
|
|
<DatePickerWrapper>
|
|
<DatePickerComponent
|
|
name="시작 일자" selectedDate={resultData.send_dt}
|
|
handleSelectedDate={data => handleSelectedDate(data)}
|
|
maxDate={new Date()} />
|
|
<span>~</span>
|
|
<DatePickerComponent
|
|
name="종료 일자" selectedDate={resultData.end_dt}
|
|
handleSelectedDate={data => handleEndDate(data)}
|
|
pastDate = {resultData.send_dt}
|
|
maxDate={new Date()} />
|
|
</DatePickerWrapper>
|
|
</InputGroup>
|
|
</SearchItem>
|
|
<BtnWrapper $gap="8px">
|
|
<Button
|
|
theme="reset"
|
|
handleClick={e => {
|
|
handleReset(e);
|
|
}}
|
|
/>
|
|
<Button
|
|
theme="search"
|
|
text="집계"
|
|
handleClick={e => {
|
|
e.preventDefault();
|
|
fetchData(resultData.search_key, resultData.send_dt, resultData.end_dt);
|
|
}}
|
|
/>
|
|
</BtnWrapper>
|
|
</SearchbarStyle>
|
|
</FormWrapper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default InstanceSearchBar;
|
|
|
|
const SearchbarStyle = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px 0;
|
|
font-size: 14px;
|
|
padding: 20px;
|
|
border-top: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
margin-bottom: 40px;
|
|
`;
|
|
|
|
const SearchItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-right: 50px;
|
|
|
|
${TextInput}, ${SelectInput} {
|
|
height: 35px;
|
|
}
|
|
${TextInput} {
|
|
padding: 0 10px;
|
|
max-width: 400px;
|
|
}
|
|
`;
|