mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-16 12:23:12 +00:00
feat: add generate qrcode dialog
This commit is contained in:
Steven
parent
96d44bd651
commit
7ca5c92769
@ -17,6 +17,7 @@
|
||||
"i18next": "^23.2.3",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lucide-react": "^0.252.0",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
|
||||
11
web/pnpm-lock.yaml
generated
11
web/pnpm-lock.yaml
generated
@ -35,6 +35,9 @@ dependencies:
|
||||
lucide-react:
|
||||
specifier: ^0.252.0
|
||||
version: 0.252.0(react@18.2.0)
|
||||
qrcode.react:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react@18.2.0)
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
@ -2513,6 +2516,14 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/qrcode.react@3.1.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/queue-microtask@1.2.3:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
|
||||
|
||||
61
web/src/components/GenerateQRCodeDialog.tsx
Normal file
61
web/src/components/GenerateQRCodeDialog.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { Button, Modal, ModalDialog } from "@mui/joy";
|
||||
import { useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { QRCodeCanvas } from "qrcode.react";
|
||||
import { absolutifyLink } from "../helpers/utils";
|
||||
import Icon from "./Icon";
|
||||
|
||||
interface Props {
|
||||
shortcut: Shortcut;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
|
||||
const { shortcut, onClose } = props;
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const shortifyLink = absolutifyLink(`/s/${shortcut.name}`);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDownloadQRCodeClick = () => {
|
||||
const canvas = containerRef.current?.querySelector("canvas");
|
||||
if (!canvas) {
|
||||
toast.error("Failed to get qr code canvas");
|
||||
return;
|
||||
}
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.download = "filename.png";
|
||||
link.href = canvas.toDataURL();
|
||||
link.click();
|
||||
handleCloseBtnClick();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={true}>
|
||||
<ModalDialog>
|
||||
<div className="flex flex-row justify-between items-center w-64 mb-4">
|
||||
<span className="text-lg font-medium">Download QR Code</span>
|
||||
<Button variant="plain" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="w-5 h-auto text-gray-600" />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div ref={containerRef} className="w-full flex flex-row justify-center items-center mt-2 mb-6">
|
||||
<QRCodeCanvas value={shortifyLink} size={128} bgColor={"#ffffff"} fgColor={"#000000"} includeMargin={false} level={"L"} />
|
||||
</div>
|
||||
<div className="w-full flex flex-row justify-center items-center px-4">
|
||||
<Button className="w-full" color="primary" onClick={handleDownloadQRCodeClick}>
|
||||
<Icon.Download className="w-4 h-auto mr-1" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalDialog>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default GenerateQRCodeDialog;
|
||||
@ -11,6 +11,7 @@ import { showCommonDialog } from "./Alert";
|
||||
import Icon from "./Icon";
|
||||
import Dropdown from "./common/Dropdown";
|
||||
import VisibilityIcon from "./VisibilityIcon";
|
||||
import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
|
||||
|
||||
interface Props {
|
||||
shortcut: Shortcut;
|
||||
@ -23,6 +24,7 @@ const ShortcutView = (props: Props) => {
|
||||
const user = useAppSelector((state) => state.user.user as User);
|
||||
const faviconStore = useFaviconStore();
|
||||
const [favicon, setFavicon] = useState<string | undefined>(undefined);
|
||||
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
|
||||
const havePermission = user.role === "ADMIN" || shortcut.creatorId === user.id;
|
||||
const shortifyLink = absolutifyLink(`/s/${shortcut.name}`);
|
||||
|
||||
@ -34,10 +36,6 @@ const ShortcutView = (props: Props) => {
|
||||
});
|
||||
}, [shortcut.link]);
|
||||
|
||||
const gotoShortcutLink = () => {
|
||||
window.open(shortifyLink, "_blank");
|
||||
};
|
||||
|
||||
const handleCopyButtonClick = () => {
|
||||
copy(shortifyLink);
|
||||
toast.success("Shortcut link copied to clipboard.");
|
||||
@ -55,87 +53,104 @@ const ShortcutView = (props: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<div className="group flex flex-row justify-start items-center mr-1 shrink-0">
|
||||
<div className="w-6 h-6 mr-1.5 flex justify-center items-center overflow-clip">
|
||||
{favicon ? (
|
||||
<img className="w-[90%] h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.Globe2 className="w-5 h-auto text-gray-500" />
|
||||
<>
|
||||
<div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
|
||||
<div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
|
||||
{favicon ? (
|
||||
<img className="w-[90%] h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.Globe2 className="w-5 h-auto text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
className="flex flex-row px-2 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
|
||||
target="_blank"
|
||||
href={shortifyLink}
|
||||
>
|
||||
<span className="text-gray-400">s/</span>
|
||||
{shortcut.name}
|
||||
<span className="hidden group-hover:block ml-1 cursor-pointer">
|
||||
<Icon.ExternalLink className="w-4 h-auto text-gray-600" />
|
||||
</span>
|
||||
</a>
|
||||
<button
|
||||
className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
|
||||
onClick={() => handleCopyButtonClick()}
|
||||
>
|
||||
<Icon.Clipboard className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
<button
|
||||
className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
|
||||
onClick={() => setShowQRCodeDialog(true)}
|
||||
>
|
||||
<Icon.QrCode className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center space-x-2">
|
||||
{havePermission && (
|
||||
<Dropdown
|
||||
actionsClassName="!w-24"
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => handleEdit()}
|
||||
>
|
||||
<Icon.Edit className="w-4 h-auto mr-2" /> Edit
|
||||
</button>
|
||||
<button
|
||||
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => {
|
||||
handleDeleteShortcutButtonClick(shortcut);
|
||||
}}
|
||||
>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" /> Delete
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
></Dropdown>
|
||||
)}
|
||||
</div>
|
||||
<button className="items-center cursor-pointer hover:opacity-80 hover:underline" onClick={() => gotoShortcutLink()}>
|
||||
<span className="text-gray-400">s/</span>
|
||||
{shortcut.name}
|
||||
</button>
|
||||
<button className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
|
||||
<Icon.Clipboard className="w-4 h-auto text-gray-500" />
|
||||
</button>
|
||||
<a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortifyLink}>
|
||||
<Icon.ExternalLink className="w-4 h-auto text-gray-500" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center space-x-2">
|
||||
{havePermission && (
|
||||
<Dropdown
|
||||
actionsClassName="!w-24"
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => handleEdit()}
|
||||
>
|
||||
<Icon.Edit className="w-4 h-auto mr-2" /> Edit
|
||||
</button>
|
||||
<button
|
||||
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => {
|
||||
handleDeleteShortcutButtonClick(shortcut);
|
||||
}}
|
||||
>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" /> Delete
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
></Dropdown>
|
||||
)}
|
||||
{shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
|
||||
{shortcut.tags.length > 0 && (
|
||||
<div className="mt-1 flex flex-row justify-start items-start gap-2">
|
||||
<Icon.Tag className="text-gray-400 w-4 h-auto" />
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span key={tag} className="text-gray-400 text-sm font-mono leading-4">
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full flex mt-2 gap-2">
|
||||
<Tooltip title="Creator" variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<Icon.User className="w-4 h-auto mr-1" />
|
||||
{shortcut.creator.nickname}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
|
||||
{t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title="View count" variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-1" />
|
||||
{shortcut.view} visits
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
|
||||
{shortcut.tags.length > 0 && (
|
||||
<div className="mt-1 flex flex-row justify-start items-start gap-2">
|
||||
<Icon.Tag className="text-gray-400 w-4 h-auto" />
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span key={tag} className="text-gray-400 text-sm font-mono leading-4">
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full flex mt-2 gap-2">
|
||||
<Tooltip title="Creator" variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<Icon.User className="w-4 h-auto mr-1" />
|
||||
{shortcut.creator.nickname}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
|
||||
{t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title="View count" variant="solid" placement="top" arrow>
|
||||
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-1" />
|
||||
{shortcut.view} visits
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user