Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 33x 1654x 1654x 1654x 1654x 1654x 1654x 1654x 1x 1x 1x 1654x 1x 5x 1x | import { Button } from "@/ahuora-design-system/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/ahuora-design-system/ui/dialog";
import { Input } from "@/ahuora-design-system/ui/input";
import { Share2 } from "lucide-react";
import {
useCoreFlowsheetsListSharedUsersRetrieveQuery,
useCoreFlowsheetsShareFlowsheetCreateMutation,
useCoreFlowsheetsRemoveUserCreateMutation,
} from "@/api/apiStore.gen";
import { useProjectId } from "@/hooks/project";
import { useState } from "react";
import { Separator } from "@/ahuora-design-system/ui/separator";
import { defineCommand, useRegisterCommand } from "just-search-it";
const ShareFlowsheetCommand = defineCommand<[], void>("shareFlowsheet");
export default function ShareFlowsheet() {
const [email, setEmail] = useState("");
const { data: emailList } = useCoreFlowsheetsListSharedUsersRetrieveQuery(undefined, {
refetchOnMountOrArgChange: true,
});
const [shareFlowsheet] = useCoreFlowsheetsShareFlowsheetCreateMutation();
const [clearFlowsheetShares] = useCoreFlowsheetsRemoveUserCreateMutation();
const flowsheetId = useProjectId();
const [open, setOpen] = useState(false);
useRegisterCommand(
ShareFlowsheetCommand,
{
name: "Share Flowsheet",
description: "Share your flowsheet with other users",
group: "Sharing",
icon: <Share2 size={18} />,
},
() => {
setOpen(true);
},
);
function share() {
shareFlowsheet({
flowsheetSharing: {
user_email: email,
flowsheet: flowsheetId,
},
});
setEmail("");
}
function handleRemove(email: string) {
clearFlowsheetShares({
flowsheetSharing: {
user_email: email,
flowsheet: flowsheetId,
},
});
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button size="sm" variant="secondary" aria-label="share-flowsheet-dialog">
<Share2 size={18} />
</Button>
</DialogTrigger>
<DialogContent className="flex flex-col gap-5 sm:max-w-[425px]">
<DialogHeader className="flex flex-col gap-2">
<DialogTitle>Share Your Flowsheet</DialogTitle>
<DialogDescription>
Share your flowsheet with other users by entering an email address
in the box below.
</DialogDescription>
</DialogHeader>
<div className="flex gap-2">
<Input
id="email"
placeholder="Enter the email you want to share with"
className="flex rounded-md border h-9"
onChange={(e) => setEmail(e.target.value)}
value={email}
aria-label="share-flowsheet-email-input"
/>
<Button onClick={share}>Share</Button>
</div>
<div className="flex flex-col gap-2">
{emailList?.users.length !== 0 && (
<div className="flex flex-col gap-3" aria-label="shared-users">
<Separator />
<h3>Shared with</h3>
</div>
)}
{emailList?.users.map((email) => (
<div className="flex justify-between items-center" key={email} aria-label={`shared-user-${email}`}>
<p>{email}</p>
<Button
variant="secondary"
size="sm"
onClick={() => handleRemove(email)}
aria-label={`remove-user-${email}`}
>
Remove
</Button>
</div>
))}
</div>
</DialogContent>
</Dialog>
);
}; |