Compare commits
3 commits
cff1ddf005
...
22ab06f395
Author | SHA1 | Date | |
---|---|---|---|
22ab06f395 | |||
c03aa30cfd | |||
65e9aa2e0b |
19 changed files with 2273 additions and 491 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,3 +1,4 @@
|
||||||
.env
|
.env
|
||||||
n39env
|
n39env
|
||||||
|
.n39env
|
||||||
.vscode
|
.vscode
|
2251
frontend/package-lock.json
generated
2251
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -16,6 +16,7 @@
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
"fast-xml-parser": "^4.5.0",
|
||||||
"history": "^5.3.0",
|
"history": "^5.3.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-bootstrap": "^2.10.4",
|
"react-bootstrap": "^2.10.4",
|
||||||
|
|
|
@ -45,12 +45,17 @@ body {
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tbody > tr > td {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||||
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||||
|
"Helvetica Neue", sans-serif !important;
|
||||||
|
}
|
||||||
.table > :not(caption) > * > * {
|
.table > :not(caption) > * > * {
|
||||||
background-color: #f2f2e8 !important;
|
background-color: #f2f2e8 !important;
|
||||||
color: #5e6268 !important;
|
color: #5e6268 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table > thead {
|
||||||
letter-spacing: 0.25em;
|
letter-spacing: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -151,6 +156,11 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
tbody > td > div {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||||
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||||
|
"Helvetica Neue", sans-serif !important;
|
||||||
|
}
|
||||||
letter-spacing: 0.25em;
|
letter-spacing: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useCallback, useContext, useMemo } from "react";
|
import React, { useCallback, useContext, useMemo, useState } from "react";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { Book } from "../../types/Book";
|
import { Book } from "../../types/Book";
|
||||||
import { Pagination, Table } from "react-bootstrap";
|
import { Button, Form, Table } from "react-bootstrap";
|
||||||
import {
|
import {
|
||||||
createColumnHelper,
|
createColumnHelper,
|
||||||
flexRender,
|
flexRender,
|
||||||
|
@ -15,12 +15,13 @@ import {
|
||||||
} from "@tanstack/react-table";
|
} from "@tanstack/react-table";
|
||||||
import { Actions } from "./components/Actions";
|
import { Actions } from "./components/Actions";
|
||||||
import { ImArrowDown, ImArrowUp } from "react-icons/im";
|
import { ImArrowDown, ImArrowUp } from "react-icons/im";
|
||||||
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
|
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
import { useAuth } from "../../shared/utils/useAuthentication";
|
import { useAuth } from "../../shared/utils/useAuthentication";
|
||||||
import { ModalSelector } from "../../shared/components/modals/Modals";
|
import { ModalSelector } from "../../shared/components/modals/Modals";
|
||||||
import { ModalContext } from "../../App";
|
import { ModalContext } from "../../App";
|
||||||
|
import { Pagination } from "./components/Pagination";
|
||||||
|
import { modalTypes } from "../../shared/components/modals/types";
|
||||||
|
|
||||||
export const Library = (): React.JSX.Element => {
|
export const Library = (): React.JSX.Element => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
@ -31,9 +32,21 @@ export const Library = (): React.JSX.Element => {
|
||||||
[location]
|
[location]
|
||||||
);
|
);
|
||||||
|
|
||||||
const auth = useAuth();
|
const { authenticated } = useAuth();
|
||||||
const modalContext = useContext(ModalContext);
|
const modalContext = useContext(ModalContext);
|
||||||
|
|
||||||
|
const [selectedBooks, setSelectedBooks] = useState<Book["uuid"][]>([]);
|
||||||
|
|
||||||
|
const toggleBookSelection = useCallback(
|
||||||
|
(uuid: Book["uuid"]) =>
|
||||||
|
setSelectedBooks((prev) =>
|
||||||
|
prev.includes(uuid)
|
||||||
|
? prev.filter((current) => current !== uuid)
|
||||||
|
: [...prev, uuid]
|
||||||
|
),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const { data: books, refetch } = useQuery<Book[]>({
|
const { data: books, refetch } = useQuery<Book[]>({
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
if (
|
if (
|
||||||
|
@ -50,10 +63,48 @@ export const Library = (): React.JSX.Element => {
|
||||||
queryKey: ["books"],
|
queryKey: ["books"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const shelf = params.get("shelf");
|
||||||
|
const year = params.get("year");
|
||||||
|
|
||||||
|
const data = useMemo(
|
||||||
|
() =>
|
||||||
|
books?.filter(
|
||||||
|
(b) =>
|
||||||
|
(!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
|
||||||
|
(!year || b.published.toString() === year)
|
||||||
|
) ?? [],
|
||||||
|
[books, year, shelf]
|
||||||
|
);
|
||||||
|
|
||||||
const columnHelper = createColumnHelper<Book>();
|
const columnHelper = createColumnHelper<Book>();
|
||||||
const columns: ColumnDef<Book, any>[] = useMemo(
|
const columns: ColumnDef<Book, any>[] = useMemo(
|
||||||
() =>
|
() =>
|
||||||
[
|
[
|
||||||
|
authenticated
|
||||||
|
? columnHelper.display({
|
||||||
|
id: "selection",
|
||||||
|
header: () => (
|
||||||
|
<Form.Check
|
||||||
|
type='checkbox'
|
||||||
|
checked={selectedBooks.length === data?.length}
|
||||||
|
id={`select-all-books`}
|
||||||
|
onChange={() =>
|
||||||
|
setSelectedBooks((prev) =>
|
||||||
|
prev.length || !data ? [] : data.map((b) => b.uuid)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: (props) => (
|
||||||
|
<Form.Check
|
||||||
|
type='checkbox'
|
||||||
|
checked={selectedBooks.includes(props.row.original.uuid)}
|
||||||
|
id={`select-book-${props.row.original.uuid}`}
|
||||||
|
onChange={() => toggleBookSelection(props.row.original.uuid)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
: undefined,
|
||||||
columnHelper.accessor((book) => book.isbn, {
|
columnHelper.accessor((book) => book.isbn, {
|
||||||
id: "isbn",
|
id: "isbn",
|
||||||
header: "ISBN",
|
header: "ISBN",
|
||||||
|
@ -108,7 +159,7 @@ export const Library = (): React.JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
auth.authenticated
|
authenticated
|
||||||
? columnHelper.accessor(
|
? columnHelper.accessor(
|
||||||
(book) => (!book.contact ? "" : book.contact),
|
(book) => (!book.contact ? "" : book.contact),
|
||||||
{
|
{
|
||||||
|
@ -133,26 +184,21 @@ export const Library = (): React.JSX.Element => {
|
||||||
<Actions
|
<Actions
|
||||||
book={props.row.original}
|
book={props.row.original}
|
||||||
refetch={refetch}
|
refetch={refetch}
|
||||||
authenticated={auth.authenticated}
|
authenticated={authenticated}
|
||||||
setActiveModal={modalContext.setActiveModal}
|
setActiveModal={modalContext.setActiveModal}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
].filter((c) => typeof c !== "undefined") as ColumnDef<Book, any>[],
|
].filter((c) => typeof c !== "undefined") as ColumnDef<Book, any>[],
|
||||||
[auth.authenticated, columnHelper, modalContext.setActiveModal, refetch]
|
[
|
||||||
);
|
authenticated,
|
||||||
|
columnHelper,
|
||||||
const shelf = params.get("shelf");
|
selectedBooks,
|
||||||
const year = params.get("year");
|
data,
|
||||||
|
toggleBookSelection,
|
||||||
const data = useMemo(
|
refetch,
|
||||||
() =>
|
modalContext.setActiveModal,
|
||||||
books?.filter(
|
]
|
||||||
(b) =>
|
|
||||||
(!shelf || b.shelf?.toLowerCase() === shelf?.toLowerCase()) &&
|
|
||||||
(!year || b.published.toString() === year)
|
|
||||||
) ?? [],
|
|
||||||
[books, year, shelf]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
|
@ -179,19 +225,6 @@ export const Library = (): React.JSX.Element => {
|
||||||
[table.getState().pagination.pageIndex]
|
[table.getState().pagination.pageIndex]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getPage = useCallback(
|
|
||||||
(n: number) => (
|
|
||||||
<Pagination.Item
|
|
||||||
key={`${n}th-page`}
|
|
||||||
active={n === currentPage}
|
|
||||||
onClick={() => table.setPageIndex(n)}
|
|
||||||
>
|
|
||||||
{n + 1}
|
|
||||||
</Pagination.Item>
|
|
||||||
),
|
|
||||||
[table, currentPage]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='m-auto p-2' style={{ width: "100%", maxHeight: "100vh" }}>
|
<div className='m-auto p-2' style={{ width: "100%", maxHeight: "100vh" }}>
|
||||||
<ModalSelector {...modalContext} />
|
<ModalSelector {...modalContext} />
|
||||||
|
@ -249,32 +282,32 @@ export const Library = (): React.JSX.Element => {
|
||||||
</div>
|
</div>
|
||||||
{table.getPageCount() ? (
|
{table.getPageCount() ? (
|
||||||
<div className='d-flex w-100'>
|
<div className='d-flex w-100'>
|
||||||
<Pagination className='d-flex m-auto'>
|
<Pagination
|
||||||
<Pagination.Item
|
currentPage={currentPage}
|
||||||
key='prev'
|
setPageIndex={table.setPageIndex}
|
||||||
disabled={currentPage === 0}
|
getPageCount={table.getPageCount}
|
||||||
onClick={() => table.setPageIndex(currentPage - 1)}
|
/>
|
||||||
|
{authenticated && (
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
marginLeft: "0px",
|
||||||
|
marginRight: "auto",
|
||||||
|
}}
|
||||||
|
className='my-auto'
|
||||||
|
onClick={() =>
|
||||||
|
modalContext.setActiveModal({
|
||||||
|
type: modalTypes.moveShelf,
|
||||||
|
books: selectedBooks,
|
||||||
|
onClose: () => {
|
||||||
|
refetch();
|
||||||
|
modalContext.setActiveModal();
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<AiOutlineLeft />
|
Move selection
|
||||||
</Pagination.Item>
|
</Button>
|
||||||
{getPage(0)}
|
)}
|
||||||
{currentPage > 3 && <Pagination.Ellipsis />}
|
|
||||||
{currentPage === 3 && getPage(currentPage - 2)}
|
|
||||||
{currentPage > 1 && getPage(currentPage - 1)}
|
|
||||||
{currentPage > 0 && getPage(currentPage)}
|
|
||||||
{currentPage < table.getPageCount() - 2 && getPage(currentPage + 1)}
|
|
||||||
{currentPage < table.getPageCount() - 3 &&
|
|
||||||
table.getPageCount() > 4 && <Pagination.Ellipsis />}
|
|
||||||
{currentPage < table.getPageCount() - 1 &&
|
|
||||||
getPage(table.getPageCount() - 1)}
|
|
||||||
<Pagination.Item
|
|
||||||
key='next'
|
|
||||||
onClick={() => table.setPageIndex(currentPage + 1)}
|
|
||||||
disabled={currentPage >= table.getPageCount() - 1}
|
|
||||||
>
|
|
||||||
<AiOutlineRight />
|
|
||||||
</Pagination.Item>
|
|
||||||
</Pagination>
|
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
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 { useMutation } from "@tanstack/react-query";
|
||||||
import * as colors from "../../../colors";
|
import { useCallback } from "react";
|
||||||
import * as dark from "../../../darkmodeColors";
|
import { Badge, Dropdown } from "react-bootstrap";
|
||||||
|
import { ImBin, ImBook, ImBoxAdd, ImBoxRemove, ImMenu } from "react-icons/im";
|
||||||
import { ModalContextType } from "../../../App";
|
import { ModalContextType } from "../../../App";
|
||||||
import { modalTypes } from "../../../shared/components/modals/types";
|
import { modalTypes } from "../../../shared/components/modals/types";
|
||||||
import { useCallback } from "react";
|
import { Book } from "../../../types/Book";
|
||||||
|
|
||||||
const { book: bookModal, checkout, del } = modalTypes;
|
const { book: bookModal, checkout, del } = modalTypes;
|
||||||
|
|
||||||
|
@ -110,9 +108,7 @@ export const Actions = ({
|
||||||
<Dropdown.Item
|
<Dropdown.Item
|
||||||
id='delete'
|
id='delete'
|
||||||
className='d-flex'
|
className='d-flex'
|
||||||
onClick={() =>
|
onClick={() => setActiveModal({ type: del, onClose, ...book })}
|
||||||
setActiveModal({ type: del, uuid: book.uuid, onClose })
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Badge pill className='ml-2 d-flex danger mr-2'>
|
<Badge pill className='ml-2 d-flex danger mr-2'>
|
||||||
<ImBin size={25} color='black' className='m-auto' />
|
<ImBin size={25} color='black' className='m-auto' />
|
||||||
|
|
61
frontend/src/pages/Library/components/Pagination.tsx
Normal file
61
frontend/src/pages/Library/components/Pagination.tsx
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
import React, { useCallback } from "react";
|
||||||
|
import { Pagination as BP } from "react-bootstrap";
|
||||||
|
import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
|
||||||
|
|
||||||
|
export const Pagination = ({
|
||||||
|
currentPage,
|
||||||
|
getPageCount,
|
||||||
|
setPageIndex,
|
||||||
|
}: {
|
||||||
|
currentPage: number;
|
||||||
|
getPageCount: () => number;
|
||||||
|
setPageIndex: (index: number) => void;
|
||||||
|
}): React.JSX.Element => {
|
||||||
|
const getPage = useCallback(
|
||||||
|
(n: number) => (
|
||||||
|
<BP.Item
|
||||||
|
key={`${n}th-page`}
|
||||||
|
active={n === currentPage}
|
||||||
|
onClick={() => setPageIndex(n)}
|
||||||
|
>
|
||||||
|
{n + 1}
|
||||||
|
</BP.Item>
|
||||||
|
),
|
||||||
|
[setPageIndex, currentPage]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BP
|
||||||
|
className='d-flex'
|
||||||
|
style={{
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "10px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BP.Item
|
||||||
|
key='prev'
|
||||||
|
disabled={currentPage === 0}
|
||||||
|
onClick={() => setPageIndex(currentPage - 1)}
|
||||||
|
>
|
||||||
|
<AiOutlineLeft />
|
||||||
|
</BP.Item>
|
||||||
|
{getPage(0)}
|
||||||
|
{currentPage > 3 && <BP.Ellipsis />}
|
||||||
|
{currentPage === 3 && getPage(currentPage - 2)}
|
||||||
|
{currentPage > 1 && getPage(currentPage - 1)}
|
||||||
|
{currentPage > 0 && getPage(currentPage)}
|
||||||
|
{currentPage < getPageCount() - 2 && getPage(currentPage + 1)}
|
||||||
|
{currentPage < getPageCount() - 3 && getPageCount() > 4 && (
|
||||||
|
<BP.Ellipsis />
|
||||||
|
)}
|
||||||
|
{currentPage < getPageCount() - 1 && getPage(getPageCount() - 1)}
|
||||||
|
<BP.Item
|
||||||
|
key='next'
|
||||||
|
onClick={() => setPageIndex(currentPage + 1)}
|
||||||
|
disabled={currentPage >= getPageCount() - 1}
|
||||||
|
>
|
||||||
|
<AiOutlineRight />
|
||||||
|
</BP.Item>
|
||||||
|
</BP>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { XMLParser } from "fast-xml-parser";
|
||||||
|
import { Book } from "../../../types/Book";
|
||||||
|
|
||||||
|
export const tryDeutscheNationalBibliothekApi = async (
|
||||||
|
isbn: string
|
||||||
|
): Promise<Pick<Book, "published" | "title"> | undefined> => {
|
||||||
|
const parser = new XMLParser();
|
||||||
|
|
||||||
|
const foundBooks = parser.parse(
|
||||||
|
await (
|
||||||
|
await fetch(
|
||||||
|
"https://services.dnb.de/sru/dnb?version=1.1&operation=searchRetrieve&query=" +
|
||||||
|
isbn
|
||||||
|
)
|
||||||
|
).text()
|
||||||
|
);
|
||||||
|
const foundBook =
|
||||||
|
foundBooks.searchRetrieveResponse?.records?.record?.recordData?.[
|
||||||
|
"rdf:RDF"
|
||||||
|
]?.["rdf:Description"];
|
||||||
|
|
||||||
|
if (!!foundBook) {
|
||||||
|
return {
|
||||||
|
published: foundBook["dcterms:issued"],
|
||||||
|
title: foundBook["dc:title"],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
};
|
16
frontend/src/pages/Main/utils/tryGoogleBooksApi.ts
Normal file
16
frontend/src/pages/Main/utils/tryGoogleBooksApi.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { Book } from "../../../types/Book";
|
||||||
|
|
||||||
|
export const tryGoogleBooksApi = async (
|
||||||
|
isbn: string
|
||||||
|
): Promise<Pick<Book, "published" | "title"> | undefined> => {
|
||||||
|
const googleBooks = await (
|
||||||
|
await fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:" + isbn)
|
||||||
|
).json();
|
||||||
|
if ("items" in googleBooks) {
|
||||||
|
return {
|
||||||
|
published: googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4),
|
||||||
|
title: googleBooks.items[0].volumeInfo.title,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
};
|
|
@ -6,6 +6,8 @@ import { useForm, useWatch } from "react-hook-form";
|
||||||
import { Book, bookShelfs } from "../../../types/Book";
|
import { Book, bookShelfs } from "../../../types/Book";
|
||||||
import { useScanner } from "../../utils/useScanner";
|
import { useScanner } from "../../utils/useScanner";
|
||||||
import { BookModalProps } from "./types";
|
import { BookModalProps } from "./types";
|
||||||
|
import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
|
||||||
|
import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
|
||||||
|
|
||||||
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
|
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
|
||||||
|
|
||||||
|
@ -27,24 +29,33 @@ export const BookModal = ({
|
||||||
reset(book);
|
reset(book);
|
||||||
}, [book, reset]);
|
}, [book, reset]);
|
||||||
|
|
||||||
const { scannerError, setScannerRef } = useScanner({
|
const [processingDetection, setProcessingDetection] = useState(false);
|
||||||
onDetected: async (result) => {
|
|
||||||
const googleBooks = await (
|
const onDetected = useCallback(
|
||||||
await fetch(
|
async (result: string) => {
|
||||||
"https://www.googleapis.com/books/v1/volumes?q=isbn:" + result
|
if (!processingDetection) {
|
||||||
)
|
setProcessingDetection(true);
|
||||||
).json();
|
const apiResponses = (
|
||||||
if ("items" in googleBooks) {
|
await Promise.all([
|
||||||
console.log(googleBooks);
|
tryDeutscheNationalBibliothekApi(result),
|
||||||
setValue(
|
tryGoogleBooksApi(result),
|
||||||
"published",
|
])
|
||||||
googleBooks.items[0].volumeInfo.publishedDate.substring(0, 4)
|
).filter((b) => !!b) as Pick<Book, "published" | "title">[];
|
||||||
);
|
if (apiResponses.length) {
|
||||||
setValue("title", googleBooks.items[0].volumeInfo.title);
|
Object.entries(apiResponses[0]).forEach(([key, value]) => {
|
||||||
|
setValue(key as keyof BookForm, value);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
setValue("isbn", result);
|
setValue("isbn", result);
|
||||||
setShowScanner(false);
|
setShowScanner(false);
|
||||||
|
setProcessingDetection(false);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
[processingDetection, setValue]
|
||||||
|
);
|
||||||
|
|
||||||
|
const { scannerError, setScannerRef } = useScanner({
|
||||||
|
onDetected,
|
||||||
});
|
});
|
||||||
|
|
||||||
const values = useWatch({ control });
|
const values = useWatch({ control });
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import React, { useCallback, useState } from "react";
|
import React, { useCallback, useState } from "react";
|
||||||
import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
|
import { Alert, Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||||
import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
|
|
||||||
import { useForm, useWatch } from "react-hook-form";
|
import { useForm, useWatch } from "react-hook-form";
|
||||||
|
import { AiOutlineExclamationCircle } from "react-icons/ai";
|
||||||
|
import { ImBoxAdd, ImBoxRemove } from "react-icons/im";
|
||||||
import { Book } from "../../../types/Book";
|
import { Book } from "../../../types/Book";
|
||||||
import { primary, secondary } from "../../../colors";
|
|
||||||
import { ModalHeader } from "./ModalHeader";
|
import { ModalHeader } from "./ModalHeader";
|
||||||
import { CheckoutBookModalProps } from "./types";
|
import { CheckoutBookModalProps } from "./types";
|
||||||
import { AiOutlineExclamationCircle } from "react-icons/ai";
|
|
||||||
|
|
||||||
type BookCheckoutForm = Pick<Book, "checkoutBy" | "contact">;
|
type BookCheckoutForm = Pick<Book, "checkoutBy" | "contact">;
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import { Button, Modal } from "react-bootstrap";
|
|
||||||
import { primary, secondary } from "../../../colors";
|
|
||||||
import { ModalHeader } from "./ModalHeader";
|
|
||||||
import { ImBin } from "react-icons/im";
|
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { Button, Modal } from "react-bootstrap";
|
||||||
|
import { ImBin } from "react-icons/im";
|
||||||
|
import { ModalHeader } from "./ModalHeader";
|
||||||
import { DeleteBookModalProps } from "./types";
|
import { DeleteBookModalProps } from "./types";
|
||||||
|
|
||||||
export const DeleteBookModal = ({
|
export const DeleteBookModal = ({
|
||||||
uuid,
|
uuid,
|
||||||
|
title,
|
||||||
open,
|
open,
|
||||||
onClose,
|
onClose,
|
||||||
}: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
|
}: Omit<DeleteBookModalProps, "type">): React.JSX.Element => {
|
||||||
|
@ -27,7 +27,7 @@ export const DeleteBookModal = ({
|
||||||
<Modal show={open} onHide={onClose} centered>
|
<Modal show={open} onHide={onClose} centered>
|
||||||
<ModalHeader
|
<ModalHeader
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
title={"Move to Shelf"}
|
title={`Delete Book "${title}"`}
|
||||||
icon={<ImBin size={50} className='ml-0 mr-auto' />}
|
icon={<ImBin size={50} className='ml-0 mr-auto' />}
|
||||||
/>
|
/>
|
||||||
<Modal.Body
|
<Modal.Body
|
||||||
|
@ -35,6 +35,7 @@ export const DeleteBookModal = ({
|
||||||
borderTop: "none",
|
borderTop: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
Do you really want to delete this book?
|
||||||
<div className='d-flex mx-auto mb-auto mt-2 w-100'>
|
<div className='d-flex mx-auto mb-auto mt-2 w-100'>
|
||||||
<Button
|
<Button
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -6,8 +6,9 @@ import { CheckoutBookModal } from "./CheckoutModal";
|
||||||
import { ScannerModal } from "./ScannerModal";
|
import { ScannerModal } from "./ScannerModal";
|
||||||
import { DeleteBookModal } from "./DeleteBookModal";
|
import { DeleteBookModal } from "./DeleteBookModal";
|
||||||
import { ModalContextType } from "../../../App";
|
import { ModalContextType } from "../../../App";
|
||||||
|
import { MoveShelfModal } from "./MoveShelfModal";
|
||||||
|
|
||||||
const { auth, book, checkout, scanner, del } = modalTypes;
|
const { auth, book, checkout, scanner, del, moveShelf } = modalTypes;
|
||||||
|
|
||||||
export const ModalSelector = ({
|
export const ModalSelector = ({
|
||||||
activeModal,
|
activeModal,
|
||||||
|
@ -48,7 +49,15 @@ export const ModalSelector = ({
|
||||||
<DeleteBookModal
|
<DeleteBookModal
|
||||||
open={activeModal?.type === del}
|
open={activeModal?.type === del}
|
||||||
onClose={activeModal?.type === del ? activeModal.onClose : setActiveModal}
|
onClose={activeModal?.type === del ? activeModal.onClose : setActiveModal}
|
||||||
uuid={activeModal?.type === checkout ? activeModal.uuid : ""}
|
uuid={activeModal?.type === del ? activeModal.uuid : ""}
|
||||||
|
title={activeModal?.type === del ? activeModal.title : ""}
|
||||||
|
/>
|
||||||
|
<MoveShelfModal
|
||||||
|
books={activeModal?.type === moveShelf ? activeModal.books : []}
|
||||||
|
open={activeModal?.type === moveShelf}
|
||||||
|
onClose={
|
||||||
|
activeModal?.type === moveShelf ? activeModal.onClose : setActiveModal
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
100
frontend/src/shared/components/modals/MoveShelfModal.tsx
Normal file
100
frontend/src/shared/components/modals/MoveShelfModal.tsx
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
|
||||||
|
import { ImBook } from "react-icons/im";
|
||||||
|
import { ModalHeader } from "./ModalHeader";
|
||||||
|
import { MoveShelfAction, MoveShelfModalProps } from "./types";
|
||||||
|
import { useForm, useWatch } from "react-hook-form";
|
||||||
|
import { bookShelfs } from "../../../types/Book";
|
||||||
|
|
||||||
|
export const MoveShelfModal = ({
|
||||||
|
books,
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
}: Omit<MoveShelfModalProps, "type">): React.JSX.Element => {
|
||||||
|
const { control, register, formState, setError } = useForm<MoveShelfAction>({
|
||||||
|
mode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const values = useWatch({ control });
|
||||||
|
|
||||||
|
const { mutate: mv } = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
if (!values.target) {
|
||||||
|
setError("target", { message: "Taget shelf is required" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetch(`/api/shelf/move`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ...values, books }),
|
||||||
|
});
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal show={open} onHide={onClose} centered>
|
||||||
|
<ModalHeader
|
||||||
|
onClose={onClose}
|
||||||
|
title={"Move to Shelf"}
|
||||||
|
icon={<ImBook size={50} className='ml-0 mr-auto' />}
|
||||||
|
/>
|
||||||
|
<Modal.Body
|
||||||
|
style={{
|
||||||
|
borderTop: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form.Group as={Row} className='mb-2'>
|
||||||
|
<Col sm='2'>
|
||||||
|
<Form.Label>Shelf</Form.Label>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Form.Select
|
||||||
|
{...register("target", { required: true })}
|
||||||
|
isInvalid={!!formState.errors.target}
|
||||||
|
>
|
||||||
|
{Object.keys(bookShelfs).map((key) => (
|
||||||
|
<option
|
||||||
|
key='key'
|
||||||
|
value={bookShelfs[key as keyof typeof bookShelfs]}
|
||||||
|
>
|
||||||
|
{key}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Form.Select>
|
||||||
|
<Form.Control.Feedback type='invalid'>
|
||||||
|
{!values.target
|
||||||
|
? "Target shelf is required"
|
||||||
|
: formState.errors.target?.message}
|
||||||
|
</Form.Control.Feedback>
|
||||||
|
</Col>
|
||||||
|
</Form.Group>
|
||||||
|
<div className='d-flex mx-auto mb-auto mt-2 w-100'>
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
borderRadius: "5px",
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "10px",
|
||||||
|
}}
|
||||||
|
onClick={() => onClose()}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
borderRadius: "5px",
|
||||||
|
marginLeft: "0px",
|
||||||
|
marginRight: "10px",
|
||||||
|
}}
|
||||||
|
onClick={() => mv()}
|
||||||
|
>
|
||||||
|
Move
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Modal.Body>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useContext } from "react";
|
import React from "react";
|
||||||
import { Modal } from "react-bootstrap";
|
import { Modal } from "react-bootstrap";
|
||||||
import { ImCamera } from "react-icons/im";
|
import { ImCamera } from "react-icons/im";
|
||||||
import { useScanner } from "../../utils/useScanner";
|
import { useScanner } from "../../utils/useScanner";
|
||||||
|
|
|
@ -11,6 +11,7 @@ export const modalTypes = {
|
||||||
checkout: "checkout",
|
checkout: "checkout",
|
||||||
scanner: "scanner",
|
scanner: "scanner",
|
||||||
del: "del",
|
del: "del",
|
||||||
|
moveShelf: "moveShelf",
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export type ModalTypes = keyof typeof modalTypes;
|
export type ModalTypes = keyof typeof modalTypes;
|
||||||
|
@ -37,11 +38,21 @@ export type ScannnerModal = {
|
||||||
} & BaseModalProps;
|
} & BaseModalProps;
|
||||||
|
|
||||||
export type DeleteBookModalProps = { type: "del" } & BaseModalProps &
|
export type DeleteBookModalProps = { type: "del" } & BaseModalProps &
|
||||||
Pick<Book, "uuid">;
|
Pick<Book, "uuid" | "title">;
|
||||||
|
|
||||||
|
export type MoveShelfModalProps = { type: "moveShelf" } & BaseModalProps & {
|
||||||
|
books: Book["uuid"][];
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface MoveShelfAction {
|
||||||
|
target: Book["shelf"];
|
||||||
|
books: Book["uuid"][];
|
||||||
|
}
|
||||||
|
|
||||||
export type ActiveModalProps =
|
export type ActiveModalProps =
|
||||||
| Omit<AuthModalProps, "open" | "onClose">
|
| Omit<AuthModalProps, "open" | "onClose">
|
||||||
| Omit<BookModalProps, "open">
|
| Omit<BookModalProps, "open">
|
||||||
| Omit<CheckoutBookModalProps, "open">
|
| Omit<CheckoutBookModalProps, "open">
|
||||||
| Omit<ScannnerModal, "open" | "onClose">
|
| Omit<ScannnerModal, "open" | "onClose">
|
||||||
| Omit<DeleteBookModalProps, "open">;
|
| Omit<DeleteBookModalProps, "open">
|
||||||
|
| Omit<MoveShelfModalProps, "open">;
|
||||||
|
|
|
@ -2,7 +2,7 @@ import express, { Request, Response, Application } from "express";
|
||||||
import dotenv from "dotenv";
|
import dotenv from "dotenv";
|
||||||
|
|
||||||
import { createPool } from "mariadb";
|
import { createPool } from "mariadb";
|
||||||
import { Book } from "./types/Book";
|
import { Book, MoveShelfAction } from "./types/Book";
|
||||||
import {
|
import {
|
||||||
checkoutBook,
|
checkoutBook,
|
||||||
findBook,
|
findBook,
|
||||||
|
@ -19,6 +19,7 @@ import session from "express-session";
|
||||||
import { censorBookData } from "./utils/censorBookData";
|
import { censorBookData } from "./utils/censorBookData";
|
||||||
import * as fs from "fs";
|
import * as fs from "fs";
|
||||||
import { checkForThreads } from "./utils/passesSQLInjectionCheck";
|
import { checkForThreads } from "./utils/passesSQLInjectionCheck";
|
||||||
|
import { moveShelf } from "./queries/moveShelf";
|
||||||
|
|
||||||
dotenv.config();
|
dotenv.config();
|
||||||
|
|
||||||
|
@ -199,6 +200,31 @@ app.post(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
app.post(
|
||||||
|
"/api/shelf/move",
|
||||||
|
async (
|
||||||
|
req: Request<undefined, undefined, MoveShelfAction>,
|
||||||
|
res: Response
|
||||||
|
) => {
|
||||||
|
await isAuthenticated(req, res, async () => {
|
||||||
|
const { target } = req.body;
|
||||||
|
try {
|
||||||
|
const containsThread = checkForThreads([target], res);
|
||||||
|
if (containsThread) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const conn = await pool.getConnection();
|
||||||
|
await conn.query(moveShelf(req.body));
|
||||||
|
await conn.end();
|
||||||
|
res.status(200).send(`Books moved to shelf ${target}.`);
|
||||||
|
} catch (error) {
|
||||||
|
res.status(500).send("Internal Server Error: " + error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
app.post(
|
app.post(
|
||||||
"/api/books/edit",
|
"/api/books/edit",
|
||||||
async (
|
async (
|
||||||
|
@ -230,7 +256,7 @@ app.post(
|
||||||
} else {
|
} else {
|
||||||
await conn.query(editBook(req.body));
|
await conn.query(editBook(req.body));
|
||||||
await conn.end();
|
await conn.end();
|
||||||
res.status(200).send("Book moved to shelf");
|
res.status(200).send("Book edited.");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
res.status(500).send("Internal Server Error: " + error);
|
res.status(500).send("Internal Server Error: " + error);
|
||||||
|
|
6
middleware/queries/moveShelf.ts
Normal file
6
middleware/queries/moveShelf.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import { MoveShelfAction } from "../types/Book";
|
||||||
|
|
||||||
|
export const moveShelf = ({ target, books }: MoveShelfAction) =>
|
||||||
|
`UPDATE bookData SET shelf='${target}' WHERE uuid IN ('${books.join(
|
||||||
|
"', '"
|
||||||
|
)}');`;
|
|
@ -9,3 +9,8 @@ export type Book = {
|
||||||
contact: string | null;
|
contact: string | null;
|
||||||
shelf: "AVAILABLE" | "FNORD1" | "FNORD2" | "SHARING" | null;
|
shelf: "AVAILABLE" | "FNORD1" | "FNORD2" | "SHARING" | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface MoveShelfAction {
|
||||||
|
target: Book["shelf"];
|
||||||
|
books: Book["uuid"][];
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue