Merge pull request #2026 from boxwise/fix/manage_products

Fix/manage products
boxwise · Mar 12, 2025 · 6bc4899 · 6bc4899
2 parents 7155958 + 7bffbfe
commit 6bc4899
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 23 deletions.
diff --git a/front/src/views/EnableStandardProduct/components/transformer.ts b/front/src/views/EnableStandardProduct/components/transformer.ts
@@ -9,8 +9,9 @@ export const standardProductRawToFormDataTransformer = (
 ) => {
   if (standardProductRawData.standardProducts?.__typename === "StandardProductPage") {
     return standardProductRawData.standardProducts.elements.map(
-      ({ id, name, category, gender, sizeRange, instantiation }) =>
-        ({
+      ({ id, name, category, gender, sizeRange, instantiation }) => {
+        const nonDeletedInstantiation = instantiation?.deletedOn ? undefined : instantiation;
+        return {
           standardProduct: {
             label: name,
             value: id,
@@ -24,10 +25,11 @@ export const standardProductRawToFormDataTransformer = (
             label: sizeRange.label,
             value: sizeRange.id,
           },
-          comment: instantiation?.comment ? instantiation.comment : undefined,
-          inShop: instantiation?.inShop ? instantiation.inShop : undefined,
-          price: instantiation?.price ? instantiation.price : undefined,
-        }) as IEnableStandardProductFormInput,
+          comment: nonDeletedInstantiation?.comment ? nonDeletedInstantiation.comment : undefined,
+          inShop: nonDeletedInstantiation?.inShop ? nonDeletedInstantiation.inShop : undefined,
+          price: nonDeletedInstantiation?.price ? nonDeletedInstantiation.price : undefined,
+        } as IEnableStandardProductFormInput;
+      },
     );
   } else {
     throw new Error(enableStandardProductQueryErrorText);

diff --git a/front/src/views/Products/ProductsView.tsx b/front/src/views/Products/ProductsView.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useMutation, useQuery } from "@apollo/client";
 import { CellProps, Column } from "react-table";
-import { Button, Heading, Skeleton, Tab, TabList, Tabs, Text } from "@chakra-ui/react";
+import { Badge, Button, Heading, Skeleton, Tab, TabList, Tabs, Text } from "@chakra-ui/react";
 import { FaCheckCircle } from "react-icons/fa";
 
 import { graphql } from "../../../../graphql/graphql";
@@ -47,6 +47,9 @@ export const STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY = graphql(
             instantiation {
               id
               instockItemsCount
+              price
+              inShop
+              comment
               createdOn
               createdBy {
                 id
@@ -102,15 +105,25 @@ function Products() {
         { id: "enabled", desc: false },
         { id: "name", desc: false },
       ],
-      hiddenColumns: ["version", "enabledOn", "enabledBy", "disabledOn", "id"],
+      hiddenColumns: [
+        "price",
+        "inShop",
+        "comment",
+        "version",
+        "enabledOn",
+        "enabledBy",
+        "disabledOn",
+        "id",
+      ],
     },
   });
 
   // fetch Standard Products data
-  const { loading: isStandardProductsQueryLoading, data: standardProductsRawData } = useQuery(
-    STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY,
-    { variables: { baseId } },
-  );
+  const {
+    loading: isStandardProductsQueryLoading,
+    data: standardProductsRawData,
+    error,
+  } = useQuery(STANDARD_PRODUCTS_FOR_PRODUCTVIEW_QUERY, { variables: { baseId } });
 
   const [disableStandardProductMutation, { loading: disableStandardProductMutationLoading }] =
     useMutation(DISABLE_STANDARD_PRODUCT_MUTATION);
@@ -287,11 +300,36 @@ function Products() {
         filter: "includesOneOfMultipleStrings",
       },
       {
-        Header: "inStock Items",
+        Header: "Items in Use",
         accessor: "instockItemsCount",
         id: "instockItemsCount",
         disableFilters: true,
       },
+      {
+        Header: "Price",
+        accessor: "price",
+        id: "price",
+        disableFilters: true,
+      },
+      {
+        Header: "In Shop?",
+        accessor: "inShop",
+        id: "inShop",
+        disableFilters: true,
+        sortType: (rowA, rowB) => {
+          const a = rowA.values.inShop;
+          const b = rowB.values.inShop;
+          return a === b ? 0 : a ? -1 : 1;
+        },
+        Cell: ({ value }: CellProps<ProductRow, boolean>) =>
+          value && <Badge colorScheme="green">Yes</Badge>,
+      },
+      {
+        Header: "Description",
+        accessor: "comment",
+        id: "comment",
+        disableFilters: true,
+      },
       {
         Header: "Version",
         accessor: "version",
@@ -327,6 +365,20 @@ function Products() {
     [disableStandardProductMutationLoading, handleEnableProduct, handleDisableProduct],
   );
 
+  if (error) {
+    throw error;
+  }
+
+  if (!standardProductsRawData) {
+    return <TableSkeleton />;
+  }
+
+  console.log("standardProductsRawData", standardProductsRawData);
+  console.log(
+    "transformedData",
+    standardProductsRawDataToTableDataTransformer(standardProductsRawData),
+  );
+
   return (
     <>
       <BreadcrumbNavigation

diff --git a/front/src/views/Products/components/transformers.ts b/front/src/views/Products/components/transformers.ts
@@ -7,6 +7,9 @@ export type ProductRow = {
   gender: string;
   size: string;
   instockItemsCount?: number;
+  price?: number | null;
+  inShop?: boolean | null;
+  comment?: string | null;
   version: number;
   enabledOn?: string | null;
   enabledBy?: string | null;
@@ -20,21 +23,26 @@ export const standardProductsRawDataToTableDataTransformer = (
 ) => {
   if (standardProductQueryResult.standardProducts?.__typename === "StandardProductPage") {
     return standardProductQueryResult.standardProducts.elements.map(
-      ({ id, name, category, gender, instantiation, sizeRange, version }) =>
-        ({
+      ({ id, name, category, gender, instantiation, sizeRange, version }) => {
+        const nonDeletedInstantiation = instantiation?.deletedOn ? null : instantiation;
+        return {
           id,
-          enabled: instantiation?.instockItemsCount !== undefined,
+          enabled: nonDeletedInstantiation?.instockItemsCount !== undefined,
           name,
           category: category.name,
-          gender,
+          gender: gender === "none" ? "-" : gender,
           size: sizeRange.label,
-          instockItemsCount: instantiation?.instockItemsCount,
-          enabledOn: instantiation?.createdOn,
-          enabledBy: instantiation?.createdBy?.name,
-          disabledOn: instantiation?.deletedOn,
+          instockItemsCount: nonDeletedInstantiation?.instockItemsCount,
+          price: nonDeletedInstantiation?.price,
+          inShop: nonDeletedInstantiation?.inShop,
+          comment: nonDeletedInstantiation?.comment,
+          enabledOn: nonDeletedInstantiation?.createdOn,
+          enabledBy: nonDeletedInstantiation?.createdBy?.name,
+          disabledOn: nonDeletedInstantiation?.deletedOn,
           version,
-          instantiationId: instantiation?.id,
-        }) satisfies ProductRow,
+          instantiationId: nonDeletedInstantiation?.id,
+        } satisfies ProductRow;
+      },
     );
   } else {
     throw new Error("Could not fetch products data! Please try reloading the page.");