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

feat(MoveShelfModal): Add new shelf

Browse source
This commit is contained in:
0ry5 2025-01-17 15:08:18 +01:00
parent 219b65e95f
commit b25c54915f
9 changed files with 162 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.tsx
View file

@ -50,7 +50,7 @@ function App() {
height: "100vh",
width: "100vw",
fontFamily: "New Amsterdam",
overflow: "scroll",
overflow: "hidden",
}}
>
<AuthContext.Provider value={{ authenticated, setAuthenticated }}>

24
frontend/src/index.css
View file

@ -19,7 +19,7 @@ body {
.btn-primary {
background-color: #5e6268;
color: #f2f3f4;
border: 2px solid #5e6268;
border: 1px solid #5e6268;
}
form-control {
@ -91,6 +91,16 @@ body {
border: 2px solid #f2f2e8;
}
.form-select {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
border: 2px solid #f2f2e8;
}
.primary {
color: #5e6268 !important;
}
.danger {
background-color: #f9a9ab !important;
}
@ -123,7 +133,7 @@ body {
.btn-primary {
background-color: #f2f3f4;
color: #5e6268;
border: 2px solid #5e6268;
border-left: 1px solid #5e6268;
}
.form-control {
@ -179,6 +189,16 @@ body {
border: 2px solid #5e6268;
}
.form-select {
background-color: #f2f2e8 !important;
color: #5e6268 !important;
border: 2px solid #f2f2e8;
}
.primary {
color: #f2f2e8 !important;
}
.dropdown-item {
color: #f2f2e8 !important;
svg {

2
frontend/src/pages/Library/Library.tsx
View file

@ -232,7 +232,7 @@ export const Library = (): React.JSX.Element => {
<div
style={{
maxWidth: "100%",
maxHeight: "70vh",
maxHeight: "80vh",
overflow: "auto",
marginBottom: "5px",
}}

66
frontend/src/shared/components/modals/BookModal.tsx
View file

@ -1,13 +1,14 @@
import React, { useCallback, useEffect, useState } from "react";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import { ImBook, ImCamera } from "react-icons/im";
import { ImBook, ImCamera, ImCancelCircle } from "react-icons/im";
import { ModalHeader } from "./ModalHeader";
import { useForm, useWatch } from "react-hook-form";
import { Book, bookShelfs } from "../../../types/Book";
import { Book } from "../../../types/Book";
import { useScanner } from "../../utils/useScanner";
import { BookModalProps } from "./types";
import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi";
import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi";
import { useQuery } from "@tanstack/react-query";
type BookForm = Pick<Book, "isbn" | "title" | "shelf" | "published">;
@ -19,6 +20,19 @@ export const BookModal = ({
const isEdit = !!book;
const [showScanner, setShowScanner] = useState(false);
const [addNew, setAddNew] = useState<boolean>(false);
const { data: shelves, isLoading } = useQuery<string[]>({
queryFn: async () => {
const response = await fetch(`/api/shelves/list`);
const data = await response.text();
return data
.split(",")
.map((s) => s.replaceAll('"', "").replace("[", "").replace("]", ""));
},
queryKey: ["shleves"],
});
const { control, register, formState, setError, setValue, reset } =
useForm<BookForm>({
mode: "onChange",
@ -84,7 +98,7 @@ export const BookModal = ({
}
if (error) return;
const createdBook = await fetch(
isEdit ? "api/books/edit" : "/api/books/create",
isEdit ? "/api/books/edit" : "/api/books/create",
{
method: "POST",
body: JSON.stringify(data),
@ -213,22 +227,52 @@ export const BookModal = ({
<Form.Label>Shelf</Form.Label>
</Col>
<Col>
<Form.Select
{!isLoading &&
(addNew ? (
<div className='d-flex'>
<Form.Control
id='move-shelf-text-input'
{...register("shelf", { required: true })}
style={{
borderRadius: "5px 0px 0px 5px",
}}
/>
<Button
style={{
borderRadius: "0px 5px 5px 0px",
}}
className='d-flex mr-2 pt-2'
onClick={() => setAddNew(false)}
>
<div className='m-auto'>
<ImCancelCircle size={20} />
</div>
</Button>
</div>
) : (
<Form.Select
id='move-shelf-select'
{...register("shelf", {
required: true,
onChange: (ev) => {
if (ev.target.value === "addNew") {
setAddNew(true);
}
},
})}
isInvalid={!!formState.errors.shelf}
>
{Object.keys(bookShelfs).map((key) => (
<option
key='key'
value={bookShelfs[key as keyof typeof bookShelfs]}
>
{key}
{shelves?.map((shelf) => (
<option key='key' value={shelf}>
{shelf}
</option>
))}
<option value='addNew'>Add new</option>
</Form.Select>
))}
<Form.Control.Feedback type='invalid'>
{!values.shelf
? "Shelf is required"
? "Target shelf is required"
: formState.errors.shelf?.message}
</Form.Control.Feedback>
</Col>

66
frontend/src/shared/components/modals/MoveShelfModal.tsx
View file

@ -1,10 +1,10 @@
import { useMutation } from "@tanstack/react-query";
import { useMutation, useQuery } from "@tanstack/react-query";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import { ImBook } from "react-icons/im";
import { ImBook, ImCancelCircle } 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";
import { useState } from "react";
export const MoveShelfModal = ({
books,
@ -20,7 +20,7 @@ export const MoveShelfModal = ({
const { mutate: mv } = useMutation({
mutationFn: async () => {
if (!values.target) {
setError("target", { message: "Taget shelf is required" });
setError("target", { message: "Target shelf is required" });
return;
}
@ -35,6 +35,19 @@ export const MoveShelfModal = ({
},
});
const { data: shelves, isLoading } = useQuery<string[]>({
queryFn: async () => {
const response = await fetch(`/api/shelves/list`);
const data = await response.text();
return data
.split(",")
.map((s) => s.replaceAll('"', "").replace("[", "").replace("]", ""));
},
queryKey: ["shleves"],
});
const [addNew, setAddNew] = useState<boolean>(false);
return (
<Modal show={open} onHide={onClose} centered>
<ModalHeader
@ -48,23 +61,50 @@ export const MoveShelfModal = ({
}}
>
<Form.Group as={Row} className='mb-2'>
<Col sm='2'>
<Form.Label>Shelf</Form.Label>
<Col className='d-flex' sm='2'>
<Form.Label className='m-auto'>Shelf</Form.Label>
</Col>
<Col>
<Form.Select
{!isLoading &&
(addNew ? (
<div className='d-flex'>
<Form.Control
id='move-shelf-text-input'
{...register("target", { required: true })}
/>
<Button
style={{
background: "transparent",
marginLeft: "0px",
marginRight: "10px",
}}
className='d-flex m-auto'
onClick={() => setAddNew(false)}
>
<ImCancelCircle className='m-auto primary' size={20} />
</Button>
</div>
) : (
<Form.Select
id='move-shelf-select'
{...register("target", {
required: true,
onChange: (ev) => {
if (ev.target.value === "addNew") {
setAddNew(true);
}
},
})}
isInvalid={!!formState.errors.target}
>
{Object.keys(bookShelfs).map((key) => (
<option
key='key'
value={bookShelfs[key as keyof typeof bookShelfs]}
>
{key}
{shelves?.map((shelf) => (
<option key='key' value={shelf}>
{shelf}
</option>
))}
<option value='addNew'>Add new</option>
</Form.Select>
))}
<Form.Control.Feedback type='invalid'>
{!values.target
? "Target shelf is required"

11
frontend/src/types/Book.ts
View file

@ -1,12 +1,3 @@
export const bookShelfs = {
available: "AVAILABLE",
fnord1: "FNORD1",
fnord2: "FNORD2",
sharing: "SHARING",
} as const;
export type Shelf = (typeof bookShelfs)[keyof typeof bookShelfs];
export type Book = {
id: number;
uuid: string;
@ -16,5 +7,5 @@ export type Book = {
lastCheckoutDate: number | null;
checkoutBy: string | null;
contact: string | null;
shelf: Shelf | null;
shelf: string | null;
};

19
middleware/index.ts
View file

@ -12,6 +12,7 @@ import {
deleteBook,
editBook,
returnBook,
listShelves,
} from "./queries";
import { v4 as uuidv4 } from "uuid";
import path from "path";
@ -370,6 +371,24 @@ app.get(
}
);
app.get(
"/api/shelves/list",
async (
req: Request<undefined, undefined, null>,
res: Response<string[] | string>
) => {
try {
const conn = await pool.getConnection();
const books = await conn.query<Book[]>(listShelves);
const shelves = books.map((e) => (!e.shelf ? "AVAILABLE" : e.shelf));
await conn.end();
res.status(200).send(shelves);
} catch (error) {
res.status(500).send("Internal Server Error: " + error);
}
}
);
app.post(
"/api/books/return",
async (

1
middleware/queries/index.ts
View file

@ -6,3 +6,4 @@ export { findBook } from "./findBook";
export { createBook } from "./createBook";
export { deleteBook } from "./deleteBook";
export { editBook } from "./editBook";
export { listShelves } from "./listShelves";

1
middleware/queries/listShelves.ts Normal file
View file

@ -0,0 +1 @@
export const listShelves = `SELECT DISTINCT shelf FROM bookData;`;