Add single order page (view only)

src/App.tsx

@@ -11,6 +11,7 @@ import HomePage from './pages/HomePage';
 import OrderNewPage from './pages/OrderNewPage';
 import OrdersPage from './pages/OrdersPage';
 import Root from './pages/Root';
+import OrderPage from './pages/OrderPage';
 
 const theme = createMuiTheme({
   palette: {
@@ -35,6 +36,7 @@ export default function App() {
               <Route path={routes.BOOK} component={BookPage} />
               <Route path={routes.BOOKS} component={BooksPage} />
               <Route path={routes.ORDERS_NEW} component={OrderNewPage} />
+              <Route path={routes.ORDER} component={OrderPage} />
               <Route path={routes.ORDERS} component={OrdersPage} />
               <Route path={routes.HOME} component={HomePage} />
             </Switch>

src/components/Orders/OrderList.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Chip,
   Paper,
   Table,
   TableBody,
@@ -12,9 +11,9 @@ import {
 import SeeIcon from '@material-ui/icons/VisibilityRounded';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import { orderStatus } from '../../constants/enums';
 import routes from '../../constants/routes';
 import { BookOrder, Order } from '../../types/database';
+import OrderStatusChip from './OrderStatusChip';
 
 const { ipcRenderer } = require('electron');
 
@@ -24,7 +23,6 @@ export default function CustomerList() {
 
   useEffect(() => {
     ipcRenderer.once('db-result-orders-find', (_: never, args: Order[]) => {
-      console.log(args);
       setOrders([...args]);
     });
     ipcRenderer.send('db-orders-find');
@@ -58,10 +56,7 @@ export default function CustomerList() {
                   {order.customer?.name}
                 </TableCell>
                 <TableCell>
-                  <Chip
-                    style={{ backgroundColor: orderStatus[order.status].color }}
-                    label={orderStatus[order.status].displayName}
-                  />
+                  <OrderStatusChip status={order.status} />
                 </TableCell>
                 <TableCell>{order.created_at}</TableCell>
                 <TableCell>{`${order.books?.reduce(

src/components/Orders/OrderPage/OrderBookList.tsx

@@ -0,0 +1,80 @@
+import {
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@material-ui/core';
+import React from 'react';
+import { BookOrder } from '../../../types/database';
+
+const useStyles = makeStyles((theme) => ({
+  card: {
+    margin: theme.spacing(1),
+  },
+}));
+
+interface Props {
+  books: BookOrder[];
+}
+
+export default function OrderBookList({ books }: Props) {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <div className={classes.card}>
+        <TableContainer component={Paper}>
+          <Table aria-label="order table">
+            <TableHead>
+              <TableRow>
+                <TableCell>Livro</TableCell>
+                <TableCell>Qnt. Alvo</TableCell>
+                <TableCell>Qnt. Encomendada</TableCell>
+                <TableCell>Qnt. Disponível</TableCell>
+                <TableCell>Qnt. Levantada</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {books.map((book: BookOrder) => (
+                <TableRow hover key={book.id}>
+                  <TableCell>
+                    <Typography>{book.name}</Typography>
+                    <Typography color="textSecondary">
+                      {book.isbn}
+                      {book.codePe && ` (${book.codePe})`}
+                    </Typography>
+                  </TableCell>
+                  <TableCell>{book.targetQuantity}</TableCell>
+                  <TableCell>{book.orderedQuantity}</TableCell>
+                  <TableCell>{book.availableQuantity}</TableCell>
+                  <TableCell>{book.pickedupQuantity}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+      <div className={classes.card}>
+        <Typography>
+          <strong>Qnt. Alvo: </strong>Quantidade que o cliente encomendou.
+        </Typography>
+        <Typography>
+          <strong>Qnt. Encomenda: </strong>Quantidade que já foi encomendada à
+          distribuidora e ainda não chegou.
+        </Typography>
+        <Typography>
+          <strong>Qnt. Disponível: </strong>Quantidade disponível para
+          levantamento.
+        </Typography>
+        <Typography>
+          <strong>Qnt. Levantada: </strong>Quantidade já levantada pelo cliente.
+        </Typography>
+      </div>
+    </div>
+  );
+}

src/components/Orders/OrderPage/OrderData.tsx

@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardContent,
+  Grid,
+  TextField,
+  Typography,
+  makeStyles,
+} from '@material-ui/core';
+import React from 'react';
+import { Order } from '../../../types/database';
+import OrderStatusChip from '../OrderStatusChip';
+import OrderBookList from './OrderBookList';
+
+const useStyles = makeStyles((theme) => ({
+  card: {
+    margin: theme.spacing(1),
+  },
+}));
+
+interface Props {
+  order: Order;
+}
+
+export default function OrderData({ order }: Props) {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Typography variant="h4" className={classes.card}>
+        Encomenda #{order.id}
+      </Typography>
+      <Card className={classes.card}>
+        <CardContent>
+          <Typography variant="h5">Informação</Typography>
+          <Grid container spacing={2}>
+            <Grid item xs={12} sm={6} md={4}>
+              <Typography variant="h6">Cliente</Typography>
+              <Typography>
+                {order.customer?.name || 'Nome Desconhecido'}
+              </Typography>
+              <Typography>{order.customer?.phone}</Typography>
+              <Typography>{order.customer?.email}</Typography>
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <Typography variant="h6">Estado</Typography>
+              <OrderStatusChip status={order.status} />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+              <Typography variant="h6">Data de Encomenda</Typography>
+              <Typography>{order.created_at}</Typography>
+              <Typography color="textSecondary">
+                Última atualização a {order.updated_at}
+              </Typography>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+      <Card className={classes.card}>
+        <CardContent>
+          <Typography variant="h5">Observações</Typography>
+          <TextField
+            value={order.notes}
+            InputProps={{
+              readOnly: true,
+            }}
+            multiline
+            variant="outlined"
+            fullWidth
+          />
+        </CardContent>
+      </Card>
+      <OrderBookList books={order.books || []} />
+    </div>
+  );
+}

src/components/Orders/OrderStatusChip.tsx

@@ -0,0 +1,18 @@
+import { Chip } from '@material-ui/core';
+import React from 'react';
+
+import { orderStatus } from '../../constants/enums';
+import { OrderStatus } from '../../types/database';
+
+interface Props {
+  status: OrderStatus;
+}
+
+export default function OrderStatusChip({ status }: Props) {
+  return (
+    <Chip
+      style={{ backgroundColor: orderStatus[status].color }}
+      label={orderStatus[status].displayName}
+    />
+  );
+}

src/components/Orders/create/OrderNotes.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function CustomerSelector({ value, setValue }: Props) {
+export default function OrderNotes({ value, setValue }: Props) {
   const classes = useStyles();
 
   const handleChange = useCallback(

src/pages/OrderPage.tsx

@@ -0,0 +1,44 @@
+import { useSnackbar } from 'notistack';
+import React, { useEffect, useState } from 'react';
+import { useHistory, useParams } from 'react-router';
+import BackButton from '../components/BackButton';
+import Loading from '../components/Loading';
+import OrderData from '../components/Orders/OrderPage/OrderData';
+import { Order } from '../types/database';
+
+const { ipcRenderer } = require('electron');
+
+type ParamType = {
+  id: string | undefined;
+};
+
+export default function OrderOnePage() {
+  const { id } = useParams<ParamType>();
+  const [data, setData] = useState<Order>();
+  const history = useHistory();
+  const { enqueueSnackbar } = useSnackbar();
+
+  useEffect(() => {
+    ipcRenderer.send('db-order-find-one', id);
+    ipcRenderer.once(
+      'db-result-order-find-one',
+      (_: never, response: Order | false) => {
+        if (!response) {
+          enqueueSnackbar('Encomenda não encontrada', { variant: 'error' });
+          history.goBack();
+          return;
+        }
+        setData(response);
+      }
+    );
+  }, [enqueueSnackbar, history, id]);
+
+  if (!data) return <Loading />;
+
+  return (
+    <div>
+      <BackButton />
+      <OrderData order={data} />
+    </div>
+  );
+}

src/server/queries/orders.ts

@@ -111,3 +111,61 @@ ipcMain.on('db-orders-find', async (event: IpcMainEvent) => {
 
   event.reply('db-result-orders-find', orders);
 });
+
+ipcMain.on('db-order-find-one', async (event: IpcMainEvent, id: number) => {
+  try {
+    const result = await db
+      .select(
+        'orders.id as orderId',
+        'status',
+        'notes',
+        'orders.created_at',
+        'orders.updated_at',
+        'customers.id as customerId',
+        'customers.name as customerName',
+        'customers.phone as customerPhone',
+        'customers.email as customerEmail'
+      )
+      .orderBy('orders.created_at', 'desc')
+      .leftJoin('customers', 'orders.customer_id', 'customers.id')
+      .where('orders.id', id)
+      .from('orders');
+
+    const orderBooks = await db
+      .select(
+        'id',
+        'books.isbn as isbn',
+        'target_quantity as targetQuantity',
+        'ordered_quantity as orderedQuantity',
+        'available_quantity as availableQuantity',
+        'pickedup_quantity as pickedupQuantity',
+        'name',
+        'publisher',
+        'provider',
+        'type',
+        'schoolYear',
+        'codePe',
+        'stock'
+      )
+      .where('order_id', result[0].orderId)
+      .leftJoin('books', 'orders_books.isbn', 'books.isbn')
+      .from('orders_books');
+    event.reply('db-result-order-find-one', {
+      id: result[0].orderId,
+      customer: {
+        id: result[0].customerId,
+        name: result[0].customerName,
+        phone: result[0].customerPhone,
+        email: result[0].customerEmail,
+      },
+      status: result[0].status,
+      created_at: result[0].created_at,
+      updated_at: result[0].updated_at,
+      notes: result[0].notes,
+      books: orderBooks,
+    });
+  } catch (e) {
+    log.error('Failed to find an order by ID', e);
+    event.reply('db-result-order-find-one', false);
+  }
+});

src/types/database.d.ts

@@ -48,9 +48,8 @@ export interface Order extends Timestamp {
   bookCount?: number;
 }
 
-export interface BookOrder {
+export interface BookOrder extends Book {
   id: number;
-  isbn: string;
   targetQuantity: number;
   orderedQuantity: number;
   availableQuantity: number;