I just made a multi-select box. Selecting one of the upper categories changes the lower category and table. I have made changes, but they should not be changed immediately, but should be modified to change when the search button is pressed. I’m attaching the code below. I wonder where to add the code. Please Help me. ….
import ~
const cx = className.bind(style);
const TableCard = styled(Card)`
padding: 0;
border-radius: 6px;
table {
border-radius: 6px;
tr {
border-radius: 6px;
}
}
`;
export default function ManageLog() {
const [userInfo] = useUserInfo();
const [userInfoLog, setUserInfoLog] = useState({
name: "User Info",
userSeq: 0
});
const [memberType, setMemberType] = useState({
name: "Member Type",
memberSeq: 0
});
const [connectType, setConnectType] = useState({
name: "Connect Type",
connectSeq: 0
});
const [errorLog, setErrorLog] = useState({
name: "Error Log",
errorSeq: 0
});
const userInfoLogDefaultValue = useMemo(() => {
return {
name: "User Info",
userSeq: 0
};
}, []);
const memberTypeDefaultValue = useMemo(() => {
return {
name: "Member Type",
memberSeq: 0
};
}, [userInfoLog.userSeq]);
const connectTypeDefaultValue = useMemo(() => {
return {
name: "Connect Type",
connectSeq: 0
};
}, [userInfoLog.userSeq]);
const errorLogDefaultValue = useMemo(() => {
return {
name: "Error Log",
errorSeq: 0
};
}, [userInfoLog.userSeq]);
const col: ICol[] = [
{
title: "NO",
dataIndex: 'no',
width: "80px"
},{
title: "User ID",
dataIndex: 'userId'
},{
title: "Member Type",
dataIndex: 'memberType'
},{
title: "Company Name",
dataIndex: 'companyName'
},{
title: "Change Type",
dataIndex: 'changeForm',
width: "148px"
},{
title: "Change Time",
dataIndex: 'changeTime'
}
];
const loginCol: ICol[] = [
{
width: "80px",
title: "NO",
dataIndex: "no"
}, {
title: "User ID",
dataIndex: "userId"
}, {
title: "Company Name",
dataIndex: "companyName"
}, {
title: "IP Address",
dataIndex: "ipAddress"
}, {
title: "Connect Time",
dataIndex: "connectTime"
}, {
title: "Connect Type",
dataIndex: "connectType",
render: value => {
if (value === "Login")
return <span className={cx('loginText')}>{"Login"}</span>;
else if (value === "Logout")
return <span className={cx('logoutText')}>{"Logout"}</span>;
else if (value === "LoginFail")
return <span className={cx('loginFail')}>{"LoginFail"}</span>;
else if (value === "session")
return <span className={cx('sessionText')}>{"session"}</span>;
else
return
}
}
];
const errorCol: ICol[] = [
{
width: "80px",
title: "NO",
dataIndex: "no"
}, {
title: "Error Time",
dataIndex: "errorTime"
}, {
title: "Error Page",
dataIndex: "errorPage"
}, {
title: "Error Type",
dataIndex: "errorType"
}
];
const [searchValue, setSearchValue] = useState("");
const [filterDate, setFilterDate] = useState([new Date(), new Date()]);
const [searchOptions, setSearchOptions] = useState(null);
const { isLoading, list, pagination } = useCondDate(searchOptions);
const { page, setPage, setSize, total } = pagination;
const handleSearchData = () => {
console.log(userInfoLog, memberType, connectType, errorLog, filterDate, searchValue)
setSearchOptions({
userInfoLog: userInfoLog.userSeq,
memberType: memberType.memberSeq,
connectType: connectType.connectSeq,
errorKind: errorLog.errorSeq,
startDate: dateFormat(filterDate[0], "yyyy.MM.dd HH:mm:ss"),
endDate: dateFormat(filterDate[1], "yyyy.MM.dd HH:mm:ss")
})
}
return (
<div>
<Row justifyContent="flex-start">
{(userInfo?.type === "aggregator_member" || userInfo?.type === "aggregator") &&
<Col width={180} mr={10}>
<Select
onSelect={v => setUserInfoLog(v)}
options={[
{ name: "User Info", userSeq: 0},
{ name: "Login Log", userSeq: 1},
{ name: "Error Log", userSeq: 2}
]}
defaultValue={userInfoLogDefaultValue}
selectKey="userSeq"
labelKey='name'
/>
</Col>
}
<Col width={105} mr={10}>
{userInfoLog.userSeq === 0 ?
<>
<Select
onSelect={v => setMemberType(v)}
options={[
{ name: "Member Type", memberSeq: 0},
{ name: "Member", memberSeq: 1},
{ name: "Manager", memberSeq: 2}
]}
defaultValue={memberTypeDefaultValue}
selectKey="memberSeq"
labelKey='name'
/>
</>: null}
{userInfoLog.userSeq === 1 ?
<>
<Select
onSelect={v => setConnectType(v)}
options={[
{ name: "User ID", connectSeq: 0},
{ name: "Connect Time", connectSeq: 1},
{ name: "Connect Type", connectSeq: 2}
]}
defaultValue={connectTypeDefaultValue}
selectKey="connectSeq"
labelKey='name'
/>
</> : null}
{userInfoLog.userSeq === 2 ?
<>
<Select
onSelect={v => setErrorLog(v)}
options={[
{ name: "Error Type", errorSeq: 0},
{ name: "404", errorSeq: 1},
{ name: "500", errorSeq: 2}
]}
defaultValue={errorLogDefaultValue}
selectKey="errorSeq"
labelKey='name'
/>
</> : null}
</Col>
<Col width={333} mr={10}>
<DatePicker onChangeDate={date => setFilterDate(date as [Date, Date])}
disabled={false}
isRange={true}
format={"yyyy.MM.dd HH:mm:ss"} />
</Col>
<Col width={150} mr={5}>
<BorderedMiniInput
value={searchValue}
onChange={setSearchValue}
placeholder=" ID"
/>
</Col>
<Col>
<Button
primary={true}
label={""}
size="large"
icon={"icon_input_search2"}
iconSize={18}
bgColor={"#98A3C7"}
hoverColor={"#C7C7E8"}
onClick={() => handleSearchData()}
/>
</Col>
<Col style={{marginLeft: 'auto'}}>
<Button
label={"excel"}
size="large"
icon={"icon_xls"}
iconSize={18}
bgColor={'#fff'}
borderColor={"#24D0AF"}
/>
</Col>
</Row>
{!isLoading && <>
{userInfoLog.userSeq === 0 ?
<>
<Row>
<Col width={'100%'}>
<TableCard>
<Table
data={[
{
no : 1,
userId : "admin001",
memberType : "ann",
companyName : "ann",
changeForm : "ann",
changeTime : "2021.11.06 17:30:00"
},{
no : 2,
userId : "admin002",
memberType : "ann",
companyName : "ann",
changeForm : "ann",
changeTime : "2021.01.06 17:30:00"
},{
no : 3,
userId : "admin003",
memberType : "ann",
companyName : "ann(ann,
changeForm : "ann",
changeTime : "2021.01.31 17:30:00"
},{
no : 4,
userId : "admin004",
memberType : "ann",
companyName : "ann)",
changeForm : "ann",
changeTime : "2021.02.06 17:30:00"
},{
no : 5,
userId : "admin005",
memberType : "ann",
companyName : "ann",
changeForm : "ann",
changeTime : "2021.02.09 17:30:00"
}
]}
col={col}
keyItem="no"
pagination />
</TableCard>
</Col>
</Row>
</>
: null }
{userInfoLog.userSeq === 1 ?
<>
<Row>
<Col width={'100%'}>
<TableCard>
<Table
data={[
{
no : 1,
userId : "admin001",
companyName : "ann",
ipAddress : "123.12.1.0",
connectType : "ann",
connectTime : "2021.11.06 17:30:00"
}
]}
col={loginCol}
keyItem="no"
onPageChange={(page, perPage) => {
setPage(page - 1);
setSize(perPage);
}
}
totalCount={total}
/>
</TableCard>
</Col>
</Row>
</> : null}
{userInfoLog.userSeq === 2 ?
<>
<Row>
<Col width={"100%"}>
<TableCard>
<Table
data={[
{
no : 1,
errorTime : "2022.01.31 17:30:00",
errorPage : "http://localhost8081/order/ordPwTrdList.do",
errorType : "500"
}, {
no : 2,
errorTime : "2022.02.06 17:30:00",
errorPage : "http://localhost8081/order/ordPwTrdList.do",
errorType : "404"
}, {
no : 3,
errorTime : "2022.02.11 17:30:00",
errorPage : "http://localhost8081/order/ordPwTrdList.do",
errorType : "500"
}, {
no : 4,
errorTime : "2022.02.13 17:30:00",
errorPage : "http://localhost8081/order/ordPwTrdList.do",
errorType : "500"
}, {
no : 5,
errorTime : "2022.02.14 17:30:00",
errorPage : "http://localhost8081/order/ordPwTrdList.do",
errorType : "404"
}
]}
col={errorCol}
keyItem="no"
onPageChange={(page, perPage) => {
setPage(page - 1);
setSize(perPage);
}}
totalCount={total}
/>
</TableCard>
</Col>
</Row>
</> : null}
</>}
</div>
)
}