andrew.ng
/
ATC_SIMPLE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chức năng copy ở tất cả các view có PID, SN, full PID + SN

This commit is contained in:
Truong Vo 2025-12-02 14:59:48 +07:00
parent 68b217f769
commit e119d9c831
4 changed files with 139 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
FRONTEND/src/components/CardLine.tsx
View File

@ -10,6 +10,7 @@ import { notifications } from "@mantine/notifications";
import { listBaudDefault } from "../untils/constanst";
import { IconCaretRight } from "@tabler/icons-react";
import { motion } from "motion/react";
import CopyIcon from "./CopyIcon";
const CardLine = ({
line,
@ -220,14 +221,17 @@ const CardLine = ({
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!line?.inventory?.pid) return;
navigator.clipboard.writeText(
`PID: ${line?.inventory?.pid || ""} | SN: ${
line?.inventory?.sn || ""
}`
line?.inventory?.pid || ""
);
}}
className={`${classes.info_line} ${classes.buttonCopy}`}
fs={"italic"}
style={{
opacity: line?.inventory?.pid ? 1 : 0.5,
cursor: line?.inventory?.pid ? "pointer" : "default",
}}
>
{line?.inventory?.pid || ""}
</Text>
@ -238,6 +242,14 @@ const CardLine = ({
) : (
""
)}
{line?.inventory?.pid && (
<CopyIcon
value={line.inventory?.pid}
label="Copy PID"
copiedLabel="Copied PID"
ml={4}
/>
)}
</div>
<div
style={{
@ -259,17 +271,36 @@ const CardLine = ({
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!line?.inventory?.sn) return;
navigator.clipboard.writeText(
`PID: ${line?.inventory?.pid || ""} | SN: ${
line?.inventory?.sn || ""
}`
);
}}
className={`${classes.info_line} ${classes.buttonCopy}`}
fs={"italic"}
style={{
opacity: line?.inventory?.sn ? 1 : 0.5,
cursor: line?.inventory?.sn ? "pointer" : "default",
}}
>
{line?.inventory?.sn || ""}
</Text>
{line?.inventory?.sn && (
<CopyIcon
value={line.inventory?.sn}
label="Copy SN"
copiedLabel="Copied SN"
ml={4}
mr={4}
/>
)}
{line?.inventory?.pid && line?.inventory?.sn && (
<CopyIcon
value={`${line.inventory?.pid} ${line.inventory?.sn}`}
label="Copy PID + SN"
copiedLabel="Copied PID + SN"
/>
)}
</div>
{line?.connecting && (
<motion.div

46
FRONTEND/src/components/CopyIcon.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ActionIcon, Tooltip } from "@mantine/core";
import { IconCheck, IconCopy } from "@tabler/icons-react";
import { useState } from "react";
import type React from "react";
interface CopyIconProps {
value?: string;
label: string; // Tooltip khi chưa copy, ví dụ: "Copy PID"
copiedLabel?: string; // Tooltip khi đã copy, ví dụ: "Copied PID"
ml?: number;
mr?: number;
}
const CopyIcon = ({ value, label, copiedLabel, ml = 4, mr = 0 }: CopyIconProps) => {
const [copied, setCopied] = useState(false);
if (!value) return null;
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
navigator.clipboard.writeText(value);
setCopied(true);
setTimeout(() => setCopied(false), 1000);
};
const tooltipText = copied ? copiedLabel || label.replace("Copy", "Copied") : label;
return (
<Tooltip label={tooltipText} withArrow openDelay={200}>
<ActionIcon
size="xs"
variant={copied ? "filled" : "light"}
color={copied ? "teal" : "blue"}
onClick={handleClick}
style={{ marginLeft: ml, marginRight: mr }}
>
{copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
</ActionIcon>
</Tooltip>
);
};
export default CopyIcon;

2
FRONTEND/src/components/DragTabs.tsx
View File

@ -240,7 +240,7 @@ export default function DraggableTabs({
>
<IconSettings />
</ActionIcon>
</Flex>
</Flex>-
<Tabs.List className={classes.list}>
<SortableContext
items={tabs}

59
FRONTEND/src/components/ModalTerminal.tsx
View File

@ -28,6 +28,7 @@ import {
IconInfoCircle,
} from "@tabler/icons-react";
import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
import CopyIcon from "./CopyIcon";
import moment from "moment";
import axios from "axios";
import { notifications } from "@mantine/notifications";
@ -479,11 +480,25 @@ const ModalTerminal = ({
<strong>{line?.baud || ""}</strong>
</Text>
</Flex>
<Flex mt="4px">
<Flex mt="4px" align="center">
<Text size="md" mr="6px">
PID:
</Text>
<Text size="md">{line?.inventory?.pid || ""}</Text>
<Text
size="md"
style={{
opacity: line?.inventory?.pid ? 1 : 0.5,
cursor: line?.inventory?.pid ? "pointer" : "default",
}}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!line?.inventory?.pid) return;
navigator.clipboard.writeText(line.inventory?.pid || "");
}}
>
{line?.inventory?.pid || ""}
</Text>
{line?.inventory?.vid ? (
<Text size="md" ml={"sm"}>
{line?.inventory?.vid}
@ -491,12 +506,48 @@ const ModalTerminal = ({
) : (
""
)}
<CopyIcon
value={line?.inventory?.pid}
label="Copy PID"
copiedLabel="Copied PID"
ml={8}
/>
</Flex>
<Flex mt="4px">
<Flex mt="4px" align="center">
<Text size="md" mr="6px">
SN:
</Text>
<Text size="md">{line?.inventory?.sn || ""}</Text>
<Text
size="md"
style={{
opacity: line?.inventory?.sn ? 1 : 0.5,
cursor: line?.inventory?.sn ? "pointer" : "default",
}}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!line?.inventory?.sn) return;
navigator.clipboard.writeText(line.inventory?.sn || "");
}}
>
{line?.inventory?.sn || ""}
</Text>
<CopyIcon
value={line?.inventory?.sn}
label="Copy SN"
copiedLabel="Copied SN"
ml={8}
mr={8}
/>
<CopyIcon
value={
line?.inventory?.pid && line?.inventory?.sn
? `${line.inventory?.pid} ${line.inventory?.sn}`
: ""
}
label="Copy PID + SN"
copiedLabel="Copied PID + SN"
/>
</Flex>
<Flex mt="4px">
<Text size="md" mr={"6px"} fw={"bold"}>