Pages order info

backend/apps/ecommerce/resolvers.py

@@ -38,9 +38,14 @@
     def resolve_all_user_orders(self, info):
         return Order.objects.all()
 
-    @staff_member_required
-    def resolve_all_shop_orders(self, info):
-        return Order.objects.filter(product__shop_item=True)
+    def resolve_all_shop_orders(self, info, limit, offset):
+        # Apply pagination if limit and offset are provided
+        orders = Order.objects.filter(product__shop_item=True).order_by('delivered_product', 'payment_status', 'timestamp')
+        if offset is not None:
+            orders = orders[offset:]
+        if limit is not None:
+            orders = orders[:limit]
+        return orders
 
     @staff_member_required
     def resolve_orders_by_status(self, info: "ResolveInfo", product_id, status):

backend/apps/ecommerce/schema.py

@@ -19,7 +19,7 @@ class EcommerceQueries(graphene.ObjectType, EcommerceResolvers):
     order = graphene.Field(OrderType, order_id=graphene.ID(required=True))
     user_orders = graphene.List(NonNull(OrderType))
     all_user_orders = graphene.List(NonNull(OrderType))
-    all_shop_orders = graphene.List(NonNull(OrderType))
+    all_shop_orders = graphene.List(graphene.NonNull(OrderType), limit=graphene.Int(), offset=graphene.Int())
 
     orders_by_status = graphene.Field(
         OrdersByStatusType, product_id=graphene.ID(required=True), status=graphene.String(required=True)

backend/schema.json

@@ -301,7 +301,28 @@
               }
             },
             {
-              "args": [],
+              "args": [
+                {
+                  "defaultValue": null,
+                  "description": null,
+                  "name": "limit",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  }
+                },
+                {
+                  "defaultValue": null,
+                  "description": null,
+                  "name": "offset",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  }
+                }
+              ],
               "deprecationReason": null,
               "description": null,
               "isDeprecated": false,

frontend/src/components/pages/organization/OrgShop.tsx

@@ -1,32 +1,76 @@
 import { useQuery } from "@apollo/client";
-import { Box, Grid, Stack, Typography } from "@mui/material";
+import { Box, Grid, Stack, Typography, Button} from "@mui/material";
+import {KeyboardArrowLeft, KeyboardArrowRight} from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 
 import { AdminOrganizationFragment, AllShopOrdersDocument } from "@/generated/graphql";
-
 import { ShopSale } from "../orgs/ShopSale";
+import React,{ useState } from 'react';
 
 type Props = {
   organization: AdminOrganizationFragment;
 };
 export const OrgProducts: React.FC<Props> = ({ organization }) => {
-  const { data, error } = useQuery(AllShopOrdersDocument);
+
+  const limit = 5
+  const [page, setPage] = useState(0);
+
+
+  const { data, error, loading } = useQuery(AllShopOrdersDocument, {
+    variables: {
+      limit: limit + 1,    // The number of orders you want to fetch
+      offset: page * limit,    // The starting index (e.g., 0 for the first set of results)
+    },
+  });
   if (error) return <p>Error</p>;
 
-  console.log(data);
-  if (organization.name !== "Janus linjeforening") {
+  if (organization.name.toLowerCase() !== "janus linjeforening") {
     return (
       <p>
         Per nå har kun Janus tilgang på buttikk administrasjon. Etter hvert vil vi åpne for at flere kan bruke siden
       </p>
     );
   }
-  if (data?.allShopOrders?.length === 0) {
+  if (data?.allShopOrders!.length === 0) {
     return <p>Ingen ordre</p>;
   }
-  return (
-    <>
-      <Stack direction={"row"} padding={2} border={3}>
-        <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
+    // Pagination button handlers
+    const nextPage = () => setPage(page + 1);
+    const prevPage = () => setPage(page > 0 ? page - 1 : 0);
+    const theme = useTheme();
+    // Check if there is a next page (if we received less than `limit` items)
+    const hasNextPage = (data?.allShopOrders && data.allShopOrders.length < limit) ?? false; //Have to check if the data exists before I check that the data has a certain length. This gave me an error: data?.allShopOrders?.length < limit;
+
+    return (
+      <>
+
+      <Stack sx={{ maxWidth: 300, flexGrow: 1, position: "static", flexDirection: "row", justifyContent: "space-between"}}>
+
+        <Button size="small" onClick={prevPage} disabled={page === 0}>
+              {theme.direction === 'rtl' ? (
+                <KeyboardArrowRight />
+              ) : (
+                <KeyboardArrowLeft />
+              )}
+              Back
+            </Button>
+
+        <Typography>{page + 1}</Typography>
+        <Button
+              size="small"
+              onClick={nextPage}
+              disabled={hasNextPage}
+            >
+              Next
+              {theme.direction === 'rtl' ? (
+                <KeyboardArrowLeft />
+              ) : (
+                <KeyboardArrowRight />
+              )}
+          </Button>
+      </Stack>
+      <Stack direction={"row"} marginTop={"36px"} spacing = {0} padding={1} borderBottom={1} sx={{bgcolor : theme.palette.background.elevated, color: theme.palette.text.primary}}>
+        <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
           <Typography variant="body1">Navn på kunde</Typography>
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
@@ -38,31 +82,32 @@ export const OrgProducts: React.FC<Props> = ({ organization }) => {
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
           <Typography variant="body1"> Betalt status</Typography>
         </Box>
-        <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
+        <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
           Mulige handlinger
         </Box>
         <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
           <Typography variant="body1"> Har vi levert varen</Typography>
         </Box>
       </Stack>
-      <Grid container spacing={0}>
-        {data?.allShopOrders?.map((order) => {
-          return (
-            <Grid key={order.id} item xs={12} sm={12} md={12}>
-              <Stack border={1}>
-                <ShopSale
-                  name={order.user.firstName + " " + order.user.lastName}
-                  product_name={order.product.name}
-                  quantity={order.quantity}
-                  has_paid={order.paymentStatus === "CAPTURED"}
-                  is_delivered={order.deliveredProduct === true}
-                  order_id={order.id}
-                />
-              </Stack>
-            </Grid>
-          );
-        })}
-      </Grid>
+      {/*If not loading and data is loaded -> Render grid element*/}
+      {(!loading && data) && <Grid container spacing={0}>
+        {data?.allShopOrders?.slice(0, limit).map((order) => {
+            return (
+              <Grid key={order.id} item xs={12} sm={12} md={12}>
+                <Stack borderBottom={1} borderColor={"gray"}>
+                  <ShopSale
+                    name={order.user.firstName + " " + order.user.lastName}
+                    product_name={order.product.name}
+                    quantity={order.quantity}
+                    has_paid={order.paymentStatus === "CAPTURED"}
+                    is_delivered={order.deliveredProduct === true}
+                    order_id={order.id}
+                  />
+                </Stack>
+              </Grid>
+            );
+          })}
+      </Grid>}
     </>
   );
 };

frontend/src/components/pages/orgs/ShopSale.tsx

@@ -23,8 +23,8 @@ export const ShopSale: React.FC<Props> = ({ name, product_name, quantity, has_pa
     deliverProduct({ variables: { orderId: order_id } });
   }
   return (
-    <Stack direction={"row"} padding={2} spacing={1}>
-      <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
+    <Stack direction={"row"} padding={1} spacing={0}>
+      <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
         <Typography variant="body1">{name}</Typography>
       </Box>
       <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
@@ -36,7 +36,7 @@ export const ShopSale: React.FC<Props> = ({ name, product_name, quantity, has_pa
       <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
         <Typography variant="body1">Betalt: {has_paid ? "Ja" : "Nei"}</Typography>
       </Box>
-      <Box display="flex" alignItems="left" justifyContent="left" width={"25%"} padding={1}>
+      <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
         <Stack direction={"row"} spacing={1}>
           <Tooltip title="Levert">
             <Box display="inline" component="span">
@@ -69,7 +69,7 @@ export const ShopSale: React.FC<Props> = ({ name, product_name, quantity, has_pa
         </Stack>
       </Box>
       <Box display="flex" alignItems="left" justifyContent="left" width={"15%"} padding={1}>
-        <Typography variant="body1">Varen er {delivered ? "levert" : "ikke levert"}</Typography>
+        <Typography variant="body1">{delivered ? "Levert" : "Ikke levert"}</Typography>
       </Box>
     </Stack>
   );