keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed search terms being limitted to 20 characters and added search functionality to logs page

Browse source
This commit is contained in:
keannu125 2023-03-09 17:48:58 +08:00
parent 46ddb25709
commit e4507493f4
2 changed files with 85 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/Components/ProductsPage/ViewManager.tsx
View file

@ -89,7 +89,6 @@ export default function ViewManager(props: ProductList) {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
}}
maxLength={20}
/>
</div>
</div>

105
src/Routes/Logs/Logs.tsx
View file

@ -2,6 +2,7 @@ import * as React from "react";
import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
import styles from "../../styles";
import {
Switch,
Table,
TableBody,
TableCell,
@ -13,7 +14,11 @@ import { SampleLogData } from "../../Components/SampleData/SampleData";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
import { useQuery } from "react-query";
import { GetLogs, UserInfo } from "../../Components/Api/Api";
import { OldSessionState, ProductLog } from "../../Interfaces/Interfaces";
import {
OldSessionState,
ProductLog,
ProductLogEntry,
} from "../../Interfaces/Interfaces";
import { useState } from "react";
import { useSelector } from "react-redux";
@ -22,6 +27,19 @@ export default function Logs() {
const old_session_checked = useSelector(
(state: OldSessionState) => state.old_session_checked.value
);
const [searchTerm, setSearchTerm] = useState("");
const [searchToday, setSearchToday] = useState(true);
function getToday() {
const current = new Date();
const date =
("0" + (current.getMonth() + 1)).slice(-2) +
"-" +
("0" + current.getDate()).slice(-2) +
"-" +
current.getFullYear();
console.log("Today is " + date);
return date;
}
if (logs.isLoading || !old_session_checked) {
return (
<div>
@ -60,6 +78,46 @@ export default function Logs() {
<LogsIcon size={64} color="white" />
<p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
</div>
<div style={styles.content_row}>
<div style={{ ...{ flex: 2 }, ...styles.content_row }}>
<p style={{ ...styles.text_white, ...styles.text_S }}>Show today</p>
<Switch
style={{ flex: 1 }}
onClick={() => {
setSearchToday(!searchToday);
if (searchTerm != getToday()) {
setSearchTerm(getToday());
} else {
setSearchTerm("");
}
}}
/>
</div>
<div style={{ flex: 6 }} />
<div
style={{
...styles.content_row,
...{ flex: 2, justifyContent: "flex-end" },
}}
>
<p style={{ ...styles.text_white, ...styles.text_S }}>Search&nbsp;</p>
<input
style={{
...{
flex: 5,
height: "2rem",
},
...styles.text_S,
}}
value={searchTerm}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchToday(false);
setSearchTerm(e.target.value);
}}
/>
</div>
</div>
<TableContainer
style={{
backgroundColor: "#1d3b33",
@ -84,25 +142,32 @@ export default function Logs() {
</TableRow>
</TableHead>
<TableBody>
{logs.data.map((row: ProductLog, index: number) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.quantity}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.history_user}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.history_date}
</TableCell>
</TableRow>
))}
{logs.data
.filter(
(Log: ProductLog) =>
Log.name.toLowerCase().includes(searchTerm) ||
Log.history_user.toLowerCase().includes(searchTerm) ||
Log.history_date.toLowerCase().includes(searchTerm)
)
.map((row: ProductLog, index: number) => (
<TableRow
key={index}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.quantity}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.history_user}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.history_date}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>