From 18e4d1b128135455ab53b4c5ca739bb1b992a29a Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Sat, 16 Mar 2024 13:09:59 +0100 Subject: [PATCH 1/8] update index page --- src/app/page.scss | 58 +++++++++++++++++++++++++++++++------------- src/app/page.tsx | 61 ++++++++++++++++++++++++++++++++--------------- 2 files changed, 83 insertions(+), 36 deletions(-) diff --git a/src/app/page.scss b/src/app/page.scss index 7cfa8a3..5468265 100644 --- a/src/app/page.scss +++ b/src/app/page.scss @@ -42,28 +42,52 @@ body { #index { display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - align-items: stretch; + flex-direction: column; + justify-content: felx-start; + flex-wrap: nowrap; + align-items: flex-start; height: calc(100% - 50px); font-size: 3em; - div { - height: calc(33% - 20px - 4px); - width: calc(50% - 20px - 4px - 20px); - display: flex; - justify-content: center; - align-items: center; - background-color: var(--primary); - margin: 10px; + div.link_category { + display: grid; + grid-template-columns: 100%; + grid-template-rows: 1.2em auto; + row-gap: 10px; + height: calc(33% - 20px); + width: calc(100% - 20px); + padding: 10px; - .fa { - margin-right: 15px; + p { + font-size: 1em; + margin: 0px; + width: max-content; } - &:hover { - filter: brightness(0.9); + div.links_btns { + height: calc(100%); + width: 100%; + display: flex; + flex-direction: row; + + div { + height: 100%; + width: calc(25% - 20px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5vh; + background-color: var(--primary); + margin: 0px 10px; + border-radius: .2em; + + &:hover { + filter: brightness(0.9); + } + } } } -} + + +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 2339463..a614f3f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,11 +2,12 @@ import React from 'react'; import 'moment/locale/fr'; import moment from 'moment'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from "react-redux"; import Navbar from '@/components/navbar'; import FontAwesome from 'react-fontawesome'; import { logout } from '@/reducers/login'; import { Action } from 'redux'; +import { State } from "@/types"; import { useRouter } from 'next/navigation'; moment.locale('fr'); @@ -14,6 +15,7 @@ moment.locale('fr'); const App = () => { const dispatch = useDispatch(); const router = useRouter(); + const login = useSelector((state: State) => state.login); return ( <> @@ -22,24 +24,45 @@ const App = () => {
-
router.push('/sell?except=goodies')}> - Vente de bouffe -
-
router.push('/sell?only=goodies')}> - Vente de goodies -
-
router.push('/preparation')}> - Préparation générale -
-
router.push('/preparation?only=pizzas')}> - Préparation des pizzas -
-
router.push('/tv')}> - TV -
-
router.push('/items')}> - Gestion des items -
+ { ['admin','preparator'].includes(login.key) && +
+

Préparation par commande :

+
+
router.push('/preparation')}> + Général +
+
router.push('/preparation?only=pizzas')}> + Pizzas +
+
router.push('/preparation?only=crepes')}> + Crêpes +
+
router.push('/preparation?only=croques')}> + Croques +
+
+
+ } + { ['admin','tv','seller'].includes(login.key) && +
+

Administration / Affichage :

+
+ { ['admin','seller'].includes(login.key) && +
router.push('/sell')}> + Vente +
+ } + { login.key === 'admin' && +
router.push('/items')}> + Gestion +
+ } +
router.push('/tv')}> + TV +
+
+
+ }
); From 0074e67bd7c3f569629ce8a1132d7149a26513da Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Sat, 16 Mar 2024 18:12:39 +0100 Subject: [PATCH 2/8] feat: add views by quantity of each item --- src/app/page.tsx | 47 ++++++++++++++++++++++++----------- src/app/preparation/page.scss | 6 ++++- src/app/preparation/page.tsx | 47 ++++++++++++++++++++++++++++++++++- 3 files changed, 84 insertions(+), 16 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index a614f3f..2673054 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -25,23 +25,42 @@ const App = () => {
{ ['admin','preparator'].includes(login.key) && -
-

Préparation par commande :

-
-
router.push('/preparation')}> - Général -
-
router.push('/preparation?only=pizzas')}> - Pizzas -
-
router.push('/preparation?only=crepes')}> - Crêpes + <> +
+

Préparation par commande :

+
+
router.push('/preparation')}> + Général +
+
router.push('/preparation?only=pizzas')}> + Pizzas +
+
router.push('/preparation?only=crepes')}> + Crêpes +
+
router.push('/preparation?only=croques')}> + Croques +
-
router.push('/preparation?only=croques')}> - Croques +
+
+

Préparation par item :

+
+
router.push('/preparation?by=item')}> + Général +
+
router.push('/preparation?only=pizzas&by=item')}> + Pizzas +
+
router.push('/preparation?only=crepes&by=item')}> + Crêpes +
+
router.push('/preparation?only=croques&by=item')}> + Croques +
-
+ } { ['admin','tv','seller'].includes(login.key) &&
diff --git a/src/app/preparation/page.scss b/src/app/preparation/page.scss index c10a323..bd9aea8 100644 --- a/src/app/preparation/page.scss +++ b/src/app/preparation/page.scss @@ -51,9 +51,13 @@ margin: 5px 0; width: 20%; + .place, + .quantity { + font-size: 1.75em; + } + .place { margin-bottom: 10px; - font-size: 1.75em; } } diff --git a/src/app/preparation/page.tsx b/src/app/preparation/page.tsx index 4a10a9c..9c1619a 100644 --- a/src/app/preparation/page.tsx +++ b/src/app/preparation/page.tsx @@ -65,10 +65,40 @@ const Page = () => { } }; + const separate_by: string = searchParams.has('by') ? searchParams.get('by') : 'order'; + const displayOrders = (orders: Array) => { + + type itemQuantity = { + id: number, + name: string, + quantity: number, + } + + const items: Array = []; + + if (separate_by === 'item') { + orders.forEach((order) => { + order.orderItems.forEach(orderItem => { + const itemId: number = orderItem.item.id; + const itemName: string = orderItem.item.name + if (items.some(item => item.id === itemId)) { + items.find(item => item.id === itemId).quantity ++; + } else { + const item: itemQuantity = { + id: itemId, + name: itemName, + quantity: 1 + }; + items.push(item); + } + }) + }); + } + return (
- {orders.map((order) => ( + {separate_by === 'order' && orders.map((order) => (
{order.place} @@ -95,6 +125,21 @@ const Page = () => { )}
))} + {separate_by === 'item' && items.map((item) => ( +
+
+ {/* x {item.quantity} */} + x {item.quantity} + {/* {moment(order.createdAt).fromNow(true)} */} +
+
    + {/*
  • + {item.name} +
    • */} + {item.name} +
+
+ ))}
); }; From d36dbea5818a217a9468d83ae15645d237f6243c Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Mon, 18 Mar 2024 16:11:52 +0100 Subject: [PATCH 3/8] update: hides orders without preparation on /tv --- src/app/tv/page.tsx | 8 +++++--- src/types.ts | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/tv/page.tsx b/src/app/tv/page.tsx index fbe03d7..8b5cfc9 100644 --- a/src/app/tv/page.tsx +++ b/src/app/tv/page.tsx @@ -70,9 +70,11 @@ const OrderGrid = ({ orders, passingRef }: { orders: Array; passingRe const Page = () => { const orders = useSelector((state: State) => state.orders); - const pendingOrders = orders.filter((order) => order.status === Status.PENDING); - const preparingOrders = orders.filter((order) => order.status === Status.PREPARING); - const readyOrders = orders.filter((order) => order.status === Status.READY); + const tvOrders = orders.filter(order => order.orderItems.some(item => item.item.category.needsPreparation) === true) + + const pendingOrders = tvOrders.filter((order) => order.status === Status.PENDING); + const preparingOrders = tvOrders.filter((order) => order.status === Status.PREPARING); + const readyOrders = tvOrders.filter((order) => order.status === Status.READY); const refs = useRef([null, null, null]); const router = useRouter(); diff --git a/src/types.ts b/src/types.ts index 6ada748..3c9f30a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -36,6 +36,7 @@ export interface Category extends Identifiable { name: string; key: string; items: Array; + needsPreparation: boolean; } export interface OrderItem { From fc2235fa11ddbc1b8022f733531bc7b120f96140 Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Mon, 18 Mar 2024 19:12:26 +0100 Subject: [PATCH 4/8] feat: colored time warning on orders --- src/app/preparation/page.scss | 28 +++++++++++++++++++++++----- src/app/preparation/page.tsx | 5 ++++- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/app/preparation/page.scss b/src/app/preparation/page.scss index bd9aea8..4107716 100644 --- a/src/app/preparation/page.scss +++ b/src/app/preparation/page.scss @@ -19,12 +19,12 @@ .status { margin: auto; width: 100%; - height: 100%; + height: calc(100% - 20px); padding: 10px 14px 0; - - &::-webkit-scrollbar { - width: 0 !important; - } + overflow-x: hidden; + overflow-y: auto; + scrollbar-color: var(--primary-light) transparent; + scrollbar-width: auto; .title { font-size: 1.5em; @@ -40,6 +40,7 @@ .status .orders .order { background: var(--primary-light); padding-left: 10px; + position: relative; display: flex; justify-content: space-between; align-items: center; @@ -70,6 +71,23 @@ } } + &.timewarning:before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 10px; + height: 100%; + } + + &.orange:before { + background-color: var(--toastify-color-warning); + } + + &.red:before { + background-color: var(--toastify-color-error); + } + .next { background-color: var(--success); width: 20%; diff --git a/src/app/preparation/page.tsx b/src/app/preparation/page.tsx index 9c1619a..ba521a9 100644 --- a/src/app/preparation/page.tsx +++ b/src/app/preparation/page.tsx @@ -69,6 +69,9 @@ const Page = () => { const displayOrders = (orders: Array) => { + const tenMinutesAgo: moment.Moment = moment().subtract(10, 'minutes'); + const twentyMinutesAgo: moment.Moment = moment().subtract(20, 'minutes'); + type itemQuantity = { id: number, name: string, @@ -99,7 +102,7 @@ const Page = () => { return (
{separate_by === 'order' && orders.map((order) => ( -
+
{order.place} {moment(order.createdAt).fromNow(true)} From 722eac5c64262231227370b6f523d5ac7059ce97 Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Mon, 18 Mar 2024 20:57:56 +0100 Subject: [PATCH 5/8] feat: service page --- src/app/page.scss | 2 +- src/app/page.tsx | 48 ++++++---- src/app/preparation/page.scss | 5 ++ src/app/preparation/page.tsx | 9 +- src/app/service/page.scss | 161 ++++++++++++++++++++++++++++++++++ src/app/service/page.tsx | 145 ++++++++++++++++++++++++++++++ 6 files changed, 343 insertions(+), 27 deletions(-) create mode 100644 src/app/service/page.scss create mode 100644 src/app/service/page.tsx diff --git a/src/app/page.scss b/src/app/page.scss index 5468265..02adcaa 100644 --- a/src/app/page.scss +++ b/src/app/page.scss @@ -77,7 +77,7 @@ body { flex-direction: column; justify-content: center; align-items: center; - row-gap: 5vh; + row-gap: 5%; background-color: var(--primary); margin: 0px 10px; border-radius: .2em; diff --git a/src/app/page.tsx b/src/app/page.tsx index 2673054..52c7f0a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -16,6 +16,7 @@ const App = () => { const dispatch = useDispatch(); const router = useRouter(); const login = useSelector((state: State) => state.login); + console.log(login) return ( <> @@ -62,26 +63,35 @@ const App = () => {
} - { ['admin','tv','seller'].includes(login.key) && -
-

Administration / Affichage :

-
- { ['admin','seller'].includes(login.key) && -
router.push('/sell')}> - Vente -
- } - { login.key === 'admin' && -
router.push('/items')}> - Gestion -
- } -
router.push('/tv')}> - TV +
+ { ['admin','seller','preparator','tv'].includes(login.key) && + <> +

Autres controles :

+
+ { ['admin','seller'].includes(login.key) && +
router.push('/sell')}> + Vente +
+ } + { login.key === 'admin' && +
router.push('/items')}> + Gestion +
+ } + { ['admin','preparator'].includes(login.key) && +
router.push('/service')}> + Service +
+ } + { ['admin','tv'].includes(login.key) && +
router.push('/tv')}> + TV +
+ }
-
-
- } + + } +
); diff --git a/src/app/preparation/page.scss b/src/app/preparation/page.scss index 4107716..10d2b77 100644 --- a/src/app/preparation/page.scss +++ b/src/app/preparation/page.scss @@ -103,6 +103,11 @@ transition: transform 0.5s ease-in, opacity 0.5s ease-in; } + &.disabled { + visibility: hidden; + background-color: var(--warning-dark); + } + &.downgrade { background-color: var(--warning-dark); diff --git a/src/app/preparation/page.tsx b/src/app/preparation/page.tsx index ba521a9..6bcd89e 100644 --- a/src/app/preparation/page.tsx +++ b/src/app/preparation/page.tsx @@ -69,7 +69,7 @@ const Page = () => { const displayOrders = (orders: Array) => { - const tenMinutesAgo: moment.Moment = moment().subtract(10, 'minutes'); + const tenMinutesAgo: moment.Moment = moment().subtract(1, 'minutes'); const twentyMinutesAgo: moment.Moment = moment().subtract(20, 'minutes'); type itemQuantity = { @@ -122,7 +122,7 @@ const Page = () => {
) : ( -
editOrder(order)}> +
editOrder(order)}>
)} @@ -131,14 +131,9 @@ const Page = () => { {separate_by === 'item' && items.map((item) => (
- {/* x {item.quantity} */} x {item.quantity} - {/* {moment(order.createdAt).fromNow(true)} */}
    - {/*
  • - {item.name} -
    • */} {item.name}
diff --git a/src/app/service/page.scss b/src/app/service/page.scss new file mode 100644 index 0000000..73ebe18 --- /dev/null +++ b/src/app/service/page.scss @@ -0,0 +1,161 @@ +.preparation-mode-button { + padding: 0 10px; + width: 210px; + text-align: left; + height: 100%; + line-height: 50px; + + &.downgrade { + background-color: var(--warning-dark); + } +} + +#preparation { + display: flex; + height: calc(100% - 50px); + justify-content: space-between; + background-color: var(--primary); + + .status.service { + margin: auto; + width: 100%; + height: calc(100% - 20px); + padding: 10px 14px 0; + overflow-x: hidden; + overflow-y: auto; + scrollbar-color: var(--primary-light) transparent; + scrollbar-width: auto; + + .title { + font-size: 1.5em; + line-height: 60px; + } + + // Removes the visuals clicks for pending (because you can't downgrade a pending order) + &.pending .orders .order .next.downgrade { + background-color: var(--danger-dark); + } + } + + .status .orders.service { + width: calc(100% - 10px); + display: grid; + grid-template-columns: 50% 50%; + column-gap: 10px; + } + + .status .orders .order { + background: var(--primary-light); + padding-left: 10px; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; + + .titles { + display: flex; + flex-direction: column; + margin: 5px 0; + width: 20%; + + .place, + .quantity { + font-size: 1.75em; + } + + .place { + margin-bottom: 10px; + } + } + + .items { + text-align: left; + margin-right: auto; + + .options { + font-style: italic; + } + } + + &.timewarning:before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 10px; + height: 100%; + } + + &.orange:before { + background-color: var(--toastify-color-warning); + } + + &.red:before { + background-color: var(--toastify-color-error); + } + + .next { + background-color: var(--success); + width: 20%; + font-size: 2em; + position: relative; + align-self: stretch; + display: flex; + flex-direction: column; + justify-content: center; + transition: background-color 0.5s ease-in; + + .fa { + transition: transform 0.5s ease-in, opacity 0.5s ease-in; + } + + &.downgrade { + background-color: var(--warning-dark); + + .fa { + transform: rotateZ(180deg); + } + } + + &:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:hover { + filter: brightness(0.9); + } + } + } +} + +.preparation-modal { + .actions { + display: flex; + flex-flow: row nowrap; + justify-content: center; + + .button { + display: inline-block; + padding: 40px 100px; + margin: 0 20px; + + color: #fff; + + &.cancel { + background: var(--danger); + } + + &.confirm { + background: var(--success); + } + + &:hover { + filter: brightness(0.9); + } + } + } +} diff --git a/src/app/service/page.tsx b/src/app/service/page.tsx new file mode 100644 index 0000000..e6fcb66 --- /dev/null +++ b/src/app/service/page.tsx @@ -0,0 +1,145 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import "../page.scss"; +import "./page.scss"; +import Navbar from "../../components/navbar"; +import moment from "moment"; +import FontAwesome from "react-fontawesome"; +import { useSelector } from "react-redux"; +import { Order, State, Status } from "@/types"; +import { downgradeOrder, upgradeOrder } from "@/utils/orders"; +import Modal from "../../components/modals/modal"; +import Loader from "../../components/loader"; +import Separator from "../../components/UI/separator"; +import { useSearchParams } from "next/navigation"; + +const Page = () => { + const searchParams = useSearchParams(); + let orders = useSelector((state: State) => state.orders); + + // Renvoie les commandes contenant au moins un item dans la catégory du paramètre + if (searchParams.has("only")) { + orders = orders.filter((order) => + order.orderItems.some((orderItem) => orderItem.item.category.key == searchParams.get("only")) + ); + } + + // used only to refresh the component every minute + const [tictac, setTicTac] = useState(false); + const [loading, setLoading] = useState(null); + const [confirmOrder, setConfirmOrder] = useState(null); + const [downgradeMode, setDowngradeMode] = useState(false); + + // used only to refresh the component every minute to refresh the duration on the + useEffect(() => { + const interval = setInterval(() => { + setTicTac(!tictac); + }, 1000 * 60); + + return () => clearInterval(interval); + }); + + const editOrder = async (order: Order, confirmed = false) => { + // If ready to be confirmed + if (order.status === Status.READY && !confirmed && !downgradeMode) { + setConfirmOrder(order); + } + // If ready to be cancelled + else if (order.status === Status.PENDING && !confirmed && downgradeMode) { + setConfirmOrder(order); + } else { + if (!loading) { + setLoading(order); + try { + if (!downgradeMode) { + await upgradeOrder(order); + } else { + setDowngradeMode(false); + await downgradeOrder(order); + } + } catch (e) { + } + setLoading(null); + setConfirmOrder(null); + } + } + }; + + const displayOrders = (orders: Array) => { + + const tenMinutesAgo: moment.Moment = moment().subtract(10, 'minutes'); + const twentyMinutesAgo: moment.Moment = moment().subtract(20, 'minutes'); + + return ( +
+ {orders.map((order) => ( +
+
+ {order.place} + {moment(order.createdAt).fromNow(true)} +
+
    + {order.orderItems.map((orderItem, index) => ( +
  • + {orderItem.item.name} +
    + {orderItem.supplements.map((orderSuppl) => orderSuppl.supplement.name).join(", ")} +
    +
    • + ))} +
+ {loading && loading.id === order.id ? ( +
+ +
+ ) : ( +
editOrder(order)}> + +
+ )} +
+ ))} +
+ ); + }; + + return ( + <> + +
setDowngradeMode(!downgradeMode)} + className={`preparation-mode-button ${downgradeMode ? "downgrade" : ""}`}> + {!downgradeMode ? "Retour cuisine" : "Servir"} +
+ +
+
+ A servir + {displayOrders(orders.filter((order) => order.status === Status.READY))} +
+
+ + {downgradeMode ? ( +

Annuler la commande {confirmOrder && confirmOrder.place} ?

+ ) : ( +

La commande {confirmOrder && confirmOrder.place} a-t-elle bien été livrée ?

+ )} +
+
setConfirmOrder(null)}> + {loading ? : "Annuler"} +
+
{ + await editOrder(confirmOrder, true); + setConfirmOrder(null); + }}> + {loading ? : "Confirmer"} +
+
+ + + ); +}; + +export default Page; From ca8480be2b3217fba718a0f4d721b495d2768571 Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Sat, 23 Mar 2024 20:06:16 +0100 Subject: [PATCH 6/8] fix: eslint compliance --- src/app/page.tsx | 1 - src/app/service/page.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 52c7f0a..8c1edd5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -16,7 +16,6 @@ const App = () => { const dispatch = useDispatch(); const router = useRouter(); const login = useSelector((state: State) => state.login); - console.log(login) return ( <> diff --git a/src/app/service/page.tsx b/src/app/service/page.tsx index e6fcb66..b779c10 100644 --- a/src/app/service/page.tsx +++ b/src/app/service/page.tsx @@ -10,7 +10,6 @@ import { Order, State, Status } from "@/types"; import { downgradeOrder, upgradeOrder } from "@/utils/orders"; import Modal from "../../components/modals/modal"; import Loader from "../../components/loader"; -import Separator from "../../components/UI/separator"; import { useSearchParams } from "next/navigation"; const Page = () => { From a9f0cbfed57953448462c21d861a2282cd624622 Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Wed, 11 Sep 2024 12:04:02 +0200 Subject: [PATCH 7/8] feat: multicategories views on preparation --- src/app/page.tsx | 6 +++--- src/app/preparation/page.tsx | 10 ++++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 8c1edd5..d6fc478 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,7 +2,7 @@ import React from 'react'; import 'moment/locale/fr'; import moment from 'moment'; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch, useSelector } from 'react-redux'; import Navbar from '@/components/navbar'; import FontAwesome from 'react-fontawesome'; import { logout } from '@/reducers/login'; @@ -35,7 +35,7 @@ const App = () => {
router.push('/preparation?only=pizzas')}> Pizzas
-
router.push('/preparation?only=crepes')}> +
router.push('/preparation?only=crepes,galettes')}> Crêpes
router.push('/preparation?only=croques')}> @@ -52,7 +52,7 @@ const App = () => {
router.push('/preparation?only=pizzas&by=item')}> Pizzas
-
router.push('/preparation?only=crepes&by=item')}> +
router.push('/preparation?only=crepes,galettes&by=item')}> Crêpes
router.push('/preparation?only=croques&by=item')}> diff --git a/src/app/preparation/page.tsx b/src/app/preparation/page.tsx index 6bcd89e..5f20893 100644 --- a/src/app/preparation/page.tsx +++ b/src/app/preparation/page.tsx @@ -19,9 +19,15 @@ const Page = () => { // Renvoie les commandes contenant au moins un item dans la catégory du paramètre if (searchParams.has("only")) { + const categoriesToDisplay = searchParams.get("only").split(","); orders = orders.filter((order) => - order.orderItems.some((orderItem) => orderItem.item.category.key == searchParams.get("only")) + order.orderItems.some((orderItem) => categoriesToDisplay.includes(orderItem.item.category.key)) ); + if (searchParams.has("by") && searchParams.get("by") == "item") { + orders.forEach((order) => { + order.orderItems = order.orderItems.filter((orderItem) => categoriesToDisplay.includes(orderItem.item.category.key)); + }); + } } // used only to refresh the component every minute @@ -65,7 +71,7 @@ const Page = () => { } }; - const separate_by: string = searchParams.has('by') ? searchParams.get('by') : 'order'; + const separate_by: string = searchParams.get('by') ?? 'order'; const displayOrders = (orders: Array) => { From d5f3225ab24ddf9a386b8aad38d32177dd706d68 Mon Sep 17 00:00:00 2001 From: Arthur Dodin Date: Wed, 11 Sep 2024 12:12:26 +0200 Subject: [PATCH 8/8] update: font-size in rem instead of em --- src/app/page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.scss b/src/app/page.scss index 02adcaa..2c11957 100644 --- a/src/app/page.scss +++ b/src/app/page.scss @@ -52,7 +52,7 @@ body { div.link_category { display: grid; grid-template-columns: 100%; - grid-template-rows: 1.2em auto; + grid-template-rows: 3rem auto; row-gap: 10px; height: calc(33% - 20px); width: calc(100% - 20px);