0Ry5/n39librarian
1
0
Fork 0
Code Issues2 Pull requests Projects Releases Packages Wiki Activity

move to git.n39.euall books in the bag ...

Browse source
This commit is contained in:
0ry5 2024-09-09 20:41:15 +02:00
commit 8cc2662092
64 changed files with 134252 additions and 0 deletions
frontend/src/pages/Library/components
Actions.tsx

151
frontend/src/pages/Library/components/Actions.tsx Normal file
View file

@ -0,0 +1,151 @@
import { Badge, Dropdown } from "react-bootstrap";
import { Book } from "../../../types/Book";
import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
import { useMutation } from "@tanstack/react-query";
import { secondary } from "../../../colors";
import { ModalContextType } from "../../../App";
import { modalTypes } from "../../../shared/components/modals/types";
import { useCallback } from "react";
const { book: bookModal, checkout, del } = modalTypes;
export const Actions = ({
refetch,
book,
authenticated,
setActiveModal,
}: {
refetch: () => void;
book: Book;
authenticated: boolean;
} & Pick<ModalContextType, "setActiveModal">): React.JSX.Element => {
const { mutate: re } = useMutation({
mutationFn: async () => {
await fetch(`/api/books/return`, {
method: "POST",
body: JSON.stringify({
checkoutBy: "admin",
contact: "admin",
uuid: book.uuid,
}),
headers: {
"Content-Type": "application/json",
},
});
refetch();
},
});
const onClose = useCallback(() => {
refetch();
setActiveModal();
}, [refetch, setActiveModal]);
return (
<>
<Dropdown>
<Dropdown.Toggle
variant='success'
id='dropdown-basic'
style={{ backgroundColor: secondary, border: "2px solid black" }}
>
<ImMenu size={25} color='black' />
</Dropdown.Toggle>
<Dropdown.Menu>
{authenticated && (
<Dropdown.Item
id='moveToShelf'
className='d-flex'
onClick={() => setActiveModal({ type: bookModal, book, onClose })}
>
<Badge
pill
className='ml-2 d-flex mr-2'
style={{
border: "2px solid black",
backgroundColor: "transparent",
}}
>
<ImBook size={25} color='black' className='m-auto' />
</Badge>
<p className='m-auto' style={{ paddingLeft: "10px" }}>
Edit Book
</p>
</Dropdown.Item>
)}
{!book.checkoutBy || book.checkoutBy === "null" ? (
<Dropdown.Item
id='checkout'
className='d-flex'
onClick={() =>
setActiveModal({
type: checkout,
title: book.title,
uuid: book.uuid,
onClose,
})
}
>
<Badge
pill
className='ml-2 d-flex mr-2'
style={{
border: "2px solid black",
}}
>
<ImBoxRemove size={25} color='black' className='m-auto' />
</Badge>{" "}
<p className='m-auto' style={{ paddingLeft: "10px" }}>
Checkout
</p>
</Dropdown.Item>
) : (
<Dropdown.Item
id='return'
className='d-flex'
onClick={() =>
authenticated
? re()
: setActiveModal({ type: checkout, ...book, onClose })
}
>
<Badge
pill
className='ml-2 d-flex mr-2'
style={{ border: "2px solid black" }}
>
<ImBoxAdd size={25} color='black' className='m-auto' />
</Badge>{" "}
<p className='m-auto' style={{ paddingLeft: "10px" }}>
Return
</p>
</Dropdown.Item>
)}
{authenticated && (
<Dropdown.Item
id='delete'
className='d-flex'
onClick={() =>
setActiveModal({ type: del, uuid: book.uuid, onClose })
}
>
<Badge
pill
className='ml-2 d-flex danger mr-2'
style={{
border: "2px solid black",
}}
>
<ImBin size={25} color='black' className='m-auto' />
</Badge>{" "}
<p className='m-auto' style={{ paddingLeft: "10px" }}>
Delete
</p>
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
</>
);
};