167 lines
4.6 KiB
TypeScript
167 lines
4.6 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
Modal,
|
|
Box,
|
|
Text,
|
|
Flex,
|
|
Button,
|
|
ScrollArea,
|
|
Checkbox,
|
|
} from "@mantine/core";
|
|
import type { TLine, TStation } from "../../untils/types";
|
|
import type { Socket } from "socket.io-client";
|
|
|
|
interface Props {
|
|
listLines: TLine[];
|
|
setListLines: (lines: React.SetStateAction<TLine[]>) => void;
|
|
socket: Socket | null;
|
|
station: TStation | undefined;
|
|
}
|
|
|
|
interface PropsLines {
|
|
id: number | undefined;
|
|
checked: boolean;
|
|
pid?: string;
|
|
sn?: string;
|
|
vid?: string;
|
|
lineNumber?: number;
|
|
}
|
|
|
|
export default function ModalConfirmRunPhysical({
|
|
listLines,
|
|
setListLines,
|
|
socket,
|
|
station,
|
|
}: Props) {
|
|
const user = useMemo(() => {
|
|
return localStorage.getItem("user") &&
|
|
typeof localStorage.getItem("user") === "string"
|
|
? JSON.parse(localStorage.getItem("user") || "")
|
|
: null;
|
|
}, []);
|
|
const [dataLines, setDataLines] = useState<PropsLines[]>([]);
|
|
const [isDisabled, setIsDisabled] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
if (listLines) {
|
|
setDataLines(() =>
|
|
listLines
|
|
.filter((line) => line.id)
|
|
.map((line) => ({
|
|
id: line.id,
|
|
lineNumber: line?.lineNumber,
|
|
pid: line?.inventory?.pid,
|
|
sn: line?.inventory?.sn,
|
|
vid: line?.inventory?.vid,
|
|
checked: true,
|
|
})),
|
|
);
|
|
}
|
|
}, [listLines]);
|
|
|
|
return (
|
|
<Modal
|
|
size={"xl"}
|
|
style={{ position: "absolute", left: 0 }}
|
|
opened={dataLines.length > 0}
|
|
onClose={() => {
|
|
setListLines([]);
|
|
setDataLines([]);
|
|
}}
|
|
closeOnClickOutside={false}
|
|
closeOnEscape={false}
|
|
centered
|
|
title="Confirm Run Test Ports"
|
|
>
|
|
<Box>
|
|
<ScrollArea h={"30vh"}>
|
|
{dataLines.map((line, i) => (
|
|
<Box
|
|
key={i}
|
|
style={{
|
|
border: "1px #ccc solid",
|
|
borderTop:
|
|
i < dataLines.length - 1 || dataLines.length <= 2
|
|
? "1px solid #ccc"
|
|
: 0,
|
|
borderBottom:
|
|
i !== 0 || dataLines.length === 1 ? "1px solid #ccc" : 0,
|
|
}}
|
|
>
|
|
<Flex
|
|
p={"xs"}
|
|
align={"center"}
|
|
style={{
|
|
fontWeight: 600,
|
|
}}
|
|
gap={"lg"}
|
|
>
|
|
<Checkbox
|
|
checked={line.checked}
|
|
onChange={(e) =>
|
|
setDataLines(
|
|
dataLines.map((el) =>
|
|
el.id === line.id
|
|
? {
|
|
...el,
|
|
checked: e.target.checked,
|
|
}
|
|
: el,
|
|
),
|
|
)
|
|
}
|
|
/>
|
|
<Text size="lg" fw={600}>
|
|
Line: {line.lineNumber}
|
|
</Text>
|
|
<Text size="lg" fw={600}>
|
|
PID: {line.pid || ""}
|
|
</Text>
|
|
<Text size="lg" fw={600}>
|
|
SN: {line.sn || ""}
|
|
</Text>
|
|
<Text size="lg" fw={600}>
|
|
VID: {line.vid || ""}
|
|
</Text>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
<Flex justify={"end"} mt={"xs"}>
|
|
<Button
|
|
disabled={
|
|
isDisabled || dataLines.filter((el) => el.checked).length === 0
|
|
}
|
|
color={"green"}
|
|
onClick={() => {
|
|
const listChecked = dataLines.filter((el) => el.checked);
|
|
const listNotChecked = dataLines.filter((el) => !el.checked);
|
|
listChecked.forEach((line) => {
|
|
socket?.emit("run_physical_test", {
|
|
lineId: line?.id,
|
|
stationId: Number(station?.id),
|
|
userName: user?.firstName
|
|
? `${user.firstName} ${user.lastName || ""}`
|
|
: user?.userName || "Unknown User",
|
|
});
|
|
});
|
|
setDataLines(listNotChecked);
|
|
setListLines(
|
|
listLines.filter((el) =>
|
|
listNotChecked.find((li) => li.id === el.id),
|
|
),
|
|
);
|
|
setIsDisabled(true);
|
|
setTimeout(() => {
|
|
setIsDisabled(false);
|
|
}, 1000);
|
|
}}
|
|
>
|
|
Run
|
|
</Button>
|
|
</Flex>
|
|
</ScrollArea>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|