Add quantity picker to distributor import (fixes #6)

livraria-papelaria-espaco · Jul 9, 2021 · 4d0687c · 4d0687c
1 parent 77c9011
commit 4d0687c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/src/components/External/ImportBooks.tsx b/src/components/External/ImportBooks.tsx
@@ -9,15 +9,14 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography,
 } from '@material-ui/core';
 import MarkArrivedIcon from '@material-ui/icons/PlaceRounded';
 import { useSnackbar } from 'notistack';
 import React, { useCallback } from 'react';
 import { BookWithQuantity } from '../../types/database';
 import { importBooksDistributor } from '../../utils/api';
 import BookQuantityInput from '../Book/BookQuantityInput';
-import BookTypeChip from '../Book/BookTypeChip';
+import BookItem from '../Orders/create/BookItem';
 
 interface Props {
   products: BookWithQuantity[];
@@ -56,6 +55,15 @@ export default function ImportBooks({ products, setProducts }: Props) {
     [enqueueSnackbar, setProducts]
   );
 
+  const updateQuantity = useCallback(
+    (isbn: string, quantity: number) => {
+      setProducts((books) =>
+        books.map((book) => (book.isbn === isbn ? { ...book, quantity } : book))
+      );
+    },
+    [setProducts]
+  );
+
   const handleMarkArrived = async () => {
     const success = await importBooksDistributor(products);
     if (!success) {
@@ -82,20 +90,11 @@ export default function ImportBooks({ products, setProducts }: Props) {
           </TableHead>
           <TableBody>
             {products.map((product) => (
-              <TableRow key={product.isbn}>
-                <TableCell component="th" scope="row">
-                  <Typography>{product.name}</Typography>
-                  <Typography color="textSecondary">
-                    {product.isbn}
-                    {product.codePe && ` (${product.codePe})`}
-                    {` | ${product.publisher}`}
-                  </Typography>
-                </TableCell>
-                <TableCell>
-                  <BookTypeChip type={product.type} />
-                </TableCell>
-                <TableCell>{product.quantity}</TableCell>
-              </TableRow>
+              <BookItem
+                key={product.isbn}
+                book={product}
+                updateQuantity={updateQuantity}
+              />
             ))}
             <BookQuantityInput addBook={addBook} />
           </TableBody>

diff --git a/src/components/Orders/create/BookItem.tsx b/src/components/Orders/create/BookItem.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
   },
   quantityInput: {
-    width: 50,
+    width: 75,
   },
   quantityButton: {
     margin: theme.spacing(1),
@@ -42,13 +42,19 @@ export default function BookItem({ book, updateQuantity }: Props) {
   const increase = () => updateQuantity(book.isbn, book.quantity + 1);
   const decrease = () =>
     book.quantity > 0 && updateQuantity(book.isbn, book.quantity - 1);
+  const change = (event: React.FocusEvent<HTMLInputElement>) => {
+    const qnt = Math.max(parseInt(event.target.value, 10), 0);
+    updateQuantity(book.isbn, Number.isNaN(qnt) ? 0 : qnt);
+  };
 
   return (
     <TableRow>
-      <TableCell>
+      <TableCell component="th" scope="row">
         <Typography>{book.name}</Typography>
         <Typography color="textSecondary">
-          {[book.isbn, book.publisher].join(' | ')}
+          {book.isbn}
+          {book.codePe && ` (${book.codePe})`}
+          {` | ${book.publisher}`}
         </Typography>
       </TableCell>
       <TableCell>
@@ -67,10 +73,8 @@ export default function BookItem({ book, updateQuantity }: Props) {
             className={classes.quantityInput}
             variant="outlined"
             size="small"
-            InputProps={{
-              readOnly: true,
-            }}
             value={book.quantity}
+            onChange={change}
           />
           <IconButton
             size="small"