@@ -133,7 +133,9 @@ export const useProductStockColumns = (
if (isDisabled) {
return (
)
}
@@ -188,14 +190,15 @@ export const useProductStockColumns = (
}
return (
-
+
-
+
{quantity}
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/index.ts b/packages/admin/dashboard/src/routes/products/product-stock/index.ts
index cdefbb9aaeebb..ddae1ead0def1 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/index.ts
+++ b/packages/admin/dashboard/src/routes/products/product-stock/index.ts
@@ -1 +1,2 @@
+export { productStockLoader as loader } from "./loader"
export { ProductStock as Component } from "./product-stock"
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/loader.ts b/packages/admin/dashboard/src/routes/products/product-stock/loader.ts
new file mode 100644
index 0000000000000..d64c9e349974b
--- /dev/null
+++ b/packages/admin/dashboard/src/routes/products/product-stock/loader.ts
@@ -0,0 +1,55 @@
+import { HttpTypes } from "@medusajs/types"
+import { defer, LoaderFunctionArgs } from "react-router-dom"
+import { sdk } from "../../../lib/client"
+import { PRODUCT_VARIANT_IDS_KEY } from "../common/constants"
+
+async function getProductStockData(id: string, productVariantIds?: string[]) {
+ const CHUNK_SIZE = 20
+ let offset = 0
+ let totalCount = 0
+
+ let allVariants: HttpTypes.AdminProductVariant[] = []
+
+ do {
+ const { variants: chunk, count } = await sdk.admin.product.listVariants(
+ id,
+ {
+ id: productVariantIds,
+ offset,
+ limit: CHUNK_SIZE,
+ fields:
+ "id,title,sku,inventory_items,inventory_items.*,inventory_items.inventory,inventory_items.inventory.id,inventory_items.inventory.title,inventory_items.inventory.sku,*inventory_items.inventory.location_levels,product.thumbnail",
+ }
+ )
+
+ allVariants = [...allVariants, ...chunk]
+ totalCount = count
+ offset += CHUNK_SIZE
+ } while (allVariants.length < totalCount)
+
+ const { stock_locations } = await sdk.admin.stockLocation.list({
+ limit: 9999,
+ fields: "id,name",
+ })
+
+ return {
+ variants: allVariants,
+ locations: stock_locations,
+ }
+}
+
+export const productStockLoader = async ({
+ params,
+ request,
+}: LoaderFunctionArgs) => {
+ const id = params.id!
+ const searchParams = new URLSearchParams(request.url)
+ const productVariantIds =
+ searchParams.get(PRODUCT_VARIANT_IDS_KEY)?.split(",") || undefined
+
+ const dataPromise = getProductStockData(id, productVariantIds)
+
+ return defer({
+ data: dataPromise,
+ })
+}
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx b/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
index c0e6a5b9f70cf..2f6bb3641175b 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
@@ -1,56 +1,91 @@
-import { Spinner } from "@medusajs/icons"
-import { Text } from "@medusajs/ui"
-import { ColumnDef } from "@tanstack/react-table"
+import { HttpTypes } from "@medusajs/types"
+import { AnimatePresence } from "motion/react"
+import { Suspense, useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
-import { useParams, useSearchParams } from "react-router-dom"
+import { Await, useLoaderData } from "react-router-dom"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { ProgressBar } from "../../../components/common/progress-bar"
import { Skeleton } from "../../../components/common/skeleton"
import { DataGridSkeleton } from "../../../components/data-grid/components"
import { RouteFocusModal } from "../../../components/modals"
-import { PRODUCT_VARIANT_IDS_KEY } from "../common/constants"
import { ProductStockForm } from "./components/product-stock-form"
-import { useProductInventoryData } from "./hooks/use-product-inventory-data"
+import { productStockLoader } from "./loader"
export const ProductStock = () => {
const { t } = useTranslation()
- const { id } = useParams<{ id: string }>()
- const [searchParams] = useSearchParams()
+ const data = useLoaderData() as Awaited
>
- const productVariantIds =
- searchParams.get(PRODUCT_VARIANT_IDS_KEY)?.split(",") || undefined
+ /**
+ * We render a local ProgressBar, as we cannot rely on the global NavigationBar.
+ * This is because we are deferring the data, meaning that the navigation is
+ * instant, and the data is loaded in parallel with the navigation. This will
+ * result in the data loading after the navigation has completed most of the
+ * time for this route, as we chunk the data into multiple queries.
+ *
+ * Here we instead render a local ProgressBar, which is animated, and exit
+ * the animation when the data is loaded, and the form is rendered.
+ */
+ const [isLoading, setIsLoading] = useState(false)
+ const timeoutRef = useRef>()
- const { variants, locations, isLoaded } = useProductInventoryData(
- id!,
- productVariantIds
- )
+ useEffect(() => {
+ timeoutRef.current = setTimeout(() => {
+ setIsLoading(true)
+ }, 200)
+
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ }
+ }, [])
+
+ const onLoaded = () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ setIsLoading(false)
+ }
return (
-
-
- {t("products.stock.heading")}
-
-
- {t("products.stock.description")}
-
- {isLoaded ? (
-
- ) : (
-
- )}
-
+
+
+
+ {isLoading ? : null}
+
+
+
+
+ {t("products.stock.heading")}
+
+
+ {t("products.stock.description")}
+
+ }>
+
+ {(data: {
+ variants: HttpTypes.AdminProductVariant[]
+ locations: HttpTypes.AdminStockLocation[]
+ }) => {
+ return (
+
+ )
+ }}
+
+
+
+
-
-
-
- {t("products.stock.loading")}
-
-
diff --git a/packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx b/packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
index 8fab0fc8591d3..e0c3fe5cf6816 100644
--- a/packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
+++ b/packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
@@ -5,11 +5,12 @@ import {
useAnimationControls,
useDragControls,
useMotionValue,
-} from "framer-motion"
+} from "motion/react"
import { useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom"
+import { HttpTypes } from "@medusajs/types"
import {
STEP_ERROR_STATES,
STEP_INACTIVE_STATES,
@@ -17,7 +18,6 @@ import {
STEP_OK_STATES,
STEP_SKIPPED_STATES,
} from "../../../constants"
-import { HttpTypes } from "@medusajs/types"
type WorkflowExecutionTimelineSectionProps = {
execution: HttpTypes.AdminWorkflowExecutionResponse["workflow_execution"]
diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
index a26d2e9626f90..ebccfc9f887d9 100644
--- a/packages/design-system/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
@@ -23,7 +23,16 @@ const Checkbox = React.forwardRef<
className
)}
>
-
+
{checked === "indeterminate" ? : }
diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
index 1133e9b11f133..e996cc712dafc 100644
--- a/packages/design-system/ui/src/components/radio-group/radio-group.tsx
+++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
@@ -36,7 +36,7 @@ const Indicator = React.forwardRef<
>
@@ -60,10 +60,10 @@ const Item = React.forwardRef<
@@ -95,7 +95,10 @@ const ChoiceBox = React.forwardRef<
-
@@ -117,7 +125,7 @@ const ChoiceBox = React.forwardRef<
{label}
{description}
diff --git a/packages/design-system/ui/src/components/switch/switch.tsx b/packages/design-system/ui/src/components/switch/switch.tsx
index 2a682023719b7..539c5d4e3af06 100644
--- a/packages/design-system/ui/src/components/switch/switch.tsx
+++ b/packages/design-system/ui/src/components/switch/switch.tsx
@@ -7,7 +7,7 @@ import * as React from "react"
import { clx } from "@/utils/clx"
const switchVariants = cva({
- base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
+ base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:opacity-50 group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
variants: {
size: {
small: "h-[16px] w-[28px]",
@@ -20,7 +20,7 @@ const switchVariants = cva({
})
const thumbVariants = cva({
- base: "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
+ base: "bg-ui-fg-on-color shadow-details-switch-handle pointer-events-none h-[14px] w-[14px] rounded-full transition-all",
variants: {
size: {
small:
diff --git a/yarn.lock b/yarn.lock
index 876e0ace3602c..7d0425ba52014 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5623,6 +5623,7 @@ __metadata:
i18next-http-backend: 2.4.2
lodash: ^4.17.21
match-sorter: ^6.3.4
+ motion: ^11.15.0
postcss: ^8.4.33
prettier: ^3.1.1
qs: ^6.12.0
@@ -20732,6 +20733,28 @@ __metadata:
languageName: node
linkType: hard
+"framer-motion@npm:^11.15.0":
+ version: 11.15.0
+ resolution: "framer-motion@npm:11.15.0"
+ dependencies:
+ motion-dom: ^11.14.3
+ motion-utils: ^11.14.3
+ tslib: ^2.4.0
+ peerDependencies:
+ "@emotion/is-prop-valid": "*"
+ react: ^18.0.0 || ^19.0.0
+ react-dom: ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ "@emotion/is-prop-valid":
+ optional: true
+ react:
+ optional: true
+ react-dom:
+ optional: true
+ checksum: 59f1c1eea09a5cbda346624a7d700bdb1ccff8a8528ed145009db974283064c3a4e55ca9eaaf4950494f254f6233c37634735b9bd8463b25ffeef624030894d6
+ languageName: node
+ linkType: hard
+
"fresh@npm:0.5.2":
version: 0.5.2
resolution: "fresh@npm:0.5.2"
@@ -25290,6 +25313,41 @@ __metadata:
languageName: node
linkType: hard
+"motion-dom@npm:^11.14.3":
+ version: 11.14.3
+ resolution: "motion-dom@npm:11.14.3"
+ checksum: 14989aba2981dcf618dc77d202ac35325366e645fd9e57c6942d88d0696263bbe7d0680da2e5f84e93339a67255bdbfebb8a4994a46584a661dd9a1e136fa7a1
+ languageName: node
+ linkType: hard
+
+"motion-utils@npm:^11.14.3":
+ version: 11.14.3
+ resolution: "motion-utils@npm:11.14.3"
+ checksum: 7459bcb27311b72b416b2618cbfd56bad7d0fbec27736529e3f45a561fa78c43bf82e05338d9d9b765649b57d1c693821e83b30c6ba449d6f7f66c5245f072fb
+ languageName: node
+ linkType: hard
+
+"motion@npm:^11.15.0":
+ version: 11.15.0
+ resolution: "motion@npm:11.15.0"
+ dependencies:
+ framer-motion: ^11.15.0
+ tslib: ^2.4.0
+ peerDependencies:
+ "@emotion/is-prop-valid": "*"
+ react: ^18.0.0 || ^19.0.0
+ react-dom: ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ "@emotion/is-prop-valid":
+ optional: true
+ react:
+ optional: true
+ react-dom:
+ optional: true
+ checksum: fe10db69ad3ca7cb3fd2896d4cd6a79ca8080de16f5fdfcf82a6decd474423f4207b7a924dc7bfb405cffb36d7de0e13780f1a623287be354ced65c78a612c99
+ languageName: node
+ linkType: hard
+
"mri@npm:^1.1.0":
version: 1.2.0
resolution: "mri@npm:1.2.0"
From 1cf5a712c017d8d939994d8ac5a1cb26892c146c Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
<45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:28:34 +0100
Subject: [PATCH 15/19] update lock
---
yarn.lock | 21 ---------------------
1 file changed, 21 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index 7d0425ba52014..24622e13a9821 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5617,7 +5617,6 @@ __metadata:
autoprefixer: ^10.4.17
cmdk: ^0.2.0
date-fns: ^3.6.0
- framer-motion: ^11.0.3
i18next: 23.7.11
i18next-browser-languagedetector: 7.2.0
i18next-http-backend: 2.4.2
@@ -20713,26 +20712,6 @@ __metadata:
languageName: node
linkType: hard
-"framer-motion@npm:^11.0.3":
- version: 11.1.8
- resolution: "framer-motion@npm:11.1.8"
- dependencies:
- tslib: ^2.4.0
- peerDependencies:
- "@emotion/is-prop-valid": "*"
- react: ^18.0.0
- react-dom: ^18.0.0
- peerDependenciesMeta:
- "@emotion/is-prop-valid":
- optional: true
- react:
- optional: true
- react-dom:
- optional: true
- checksum: ff7073ca011936fcf0e4af54ff93824609cf03b556def5a69d21f44674c44ec0429a450b419bb4ae89d5b7af9d7b0e88ed57d3eff1ff668ed2a52b42a60375dd
- languageName: node
- linkType: hard
-
"framer-motion@npm:^11.15.0":
version: 11.15.0
resolution: "framer-motion@npm:11.15.0"
From f46a3db2a8a7b6c2ceb59ddd003cf5fbbf0a37db Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
<45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:38:54 +0100
Subject: [PATCH 16/19] lint
---
packages/design-system/ui/src/components/checkbox/checkbox.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
index ebccfc9f887d9..2136906986112 100644
--- a/packages/design-system/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
@@ -26,7 +26,7 @@ const Checkbox = React.forwardRef<
Date: Wed, 8 Jan 2025 11:16:54 +0100
Subject: [PATCH 17/19] fix 404
---
.../product-variant-section/product-variant-section.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx b/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
index 99b0671478c4c..4d0a89a0b08ee 100644
--- a/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
@@ -118,9 +118,9 @@ export const ProductVariantSection = ({
{
action: async (selection) => {
navigate(
- `inventory?${PRODUCT_VARIANT_IDS_KEY}=${Object.keys(
- selection
- ).join(",")}`
+ `stock?${PRODUCT_VARIANT_IDS_KEY}=${Object.keys(selection).join(
+ ","
+ )}`
)
},
label: t("inventory.stock.action"),
From 7059698ddab329aaed711ecef00cbe062d5dede8 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
<45367945+kasperkristensen@users.noreply.github.com>
Date: Fri, 10 Jan 2025 09:23:52 +0100
Subject: [PATCH 18/19] address feedback
---
.../product-stock-form/product-stock-form.tsx | 70 +++++++++----------
.../hooks/use-product-stock-columns.tsx | 16 ++---
.../products/product-stock/product-stock.tsx | 7 +-
.../routes/products/product-stock/types.ts | 9 ---
.../routes/products/product-stock/utils.ts | 19 +++--
.../types/src/http/product/admin/entitites.ts | 28 ++++++++
6 files changed, 87 insertions(+), 62 deletions(-)
delete mode 100644 packages/admin/dashboard/src/routes/products/product-stock/types.ts
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/components/product-stock-form/product-stock-form.tsx b/packages/admin/dashboard/src/routes/products/product-stock/components/product-stock-form/product-stock-form.tsx
index 655d3a65c8681..f3f83c3c90dab 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/components/product-stock-form/product-stock-form.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-stock/components/product-stock-form/product-stock-form.tsx
@@ -4,6 +4,7 @@ import { Button, toast, usePrompt } from "@medusajs/ui"
import { useEffect, useMemo, useRef, useState } from "react"
import { DefaultValues, useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
+
import { DataGrid } from "../../../../../components/data-grid"
import {
RouteFocusModal,
@@ -19,7 +20,6 @@ import {
ProductStockSchema,
ProductStockVariantSchema,
} from "../../schema"
-import { ProductVariantInventoryItemLink } from "../../types"
import {
getDisabledInventoryRows,
isProductVariantWithInventoryPivot,
@@ -47,16 +47,13 @@ export const ProductStockForm = ({
const [isPromptOpen, setIsPromptOpen] = useState(false)
const form = useForm
({
- defaultValues: getDefaultValue(variants as any, locations),
+ defaultValues: getDefaultValue(variants, locations),
resolver: zodResolver(ProductStockSchema),
})
- const initialValues = useRef(getDefaultValue(variants as any, locations))
+ const initialValues = useRef(getDefaultValue(variants, locations))
- const disabled = useMemo(
- () => getDisabledInventoryRows(variants as any),
- [variants]
- )
+ const disabled = useMemo(() => getDisabledInventoryRows(variants), [variants])
const columns = useProductStockColumns(locations, disabled)
const { mutateAsync, isPending } = useBatchInventoryItemsLocationLevels()
@@ -174,46 +171,49 @@ export const ProductStockForm = ({
}
function getSubRows(
- row: HttpTypes.AdminProductVariant | ProductVariantInventoryItemLink
-): ProductVariantInventoryItemLink[] | undefined {
+ row:
+ | HttpTypes.AdminProductVariant
+ | HttpTypes.AdminProductVariantInventoryItemLink
+): HttpTypes.AdminProductVariantInventoryItemLink[] | undefined {
if (isProductVariantWithInventoryPivot(row)) {
return row.inventory_items
}
}
function getDefaultValue(
- variants: (HttpTypes.AdminProductVariant & {
- inventory_items: ProductVariantInventoryItemLink[]
- })[],
+ variants: HttpTypes.AdminProductVariant[],
locations: HttpTypes.AdminStockLocation[]
): DefaultValues {
return {
variants: variants.reduce((variantAcc, variant) => {
- const inventoryItems = variant.inventory_items.reduce((itemAcc, item) => {
- const locationsMap = locations.reduce((locationAcc, location) => {
- const level = item.inventory.location_levels?.find(
- (level) => level.location_id === location.id
- )
-
- locationAcc[location.id] = {
- id: level?.id,
- quantity:
- level?.stocked_quantity !== undefined
- ? level?.stocked_quantity
- : "",
- checked: !!level,
- disabledToggle:
- (level?.incoming_quantity || 0) > 0 ||
- (level?.reserved_quantity || 0) > 0,
- }
- return locationAcc
- }, {} as ProductStockLocationSchema)
+ const inventoryItems = variant.inventory_items?.reduce(
+ (itemAcc, item) => {
+ const locationsMap = locations.reduce((locationAcc, location) => {
+ const level = item.inventory?.location_levels?.find(
+ (level) => level.location_id === location.id
+ )
+
+ locationAcc[location.id] = {
+ id: level?.id,
+ quantity:
+ level?.stocked_quantity !== undefined
+ ? level?.stocked_quantity
+ : "",
+ checked: !!level,
+ disabledToggle:
+ (level?.incoming_quantity || 0) > 0 ||
+ (level?.reserved_quantity || 0) > 0,
+ }
+ return locationAcc
+ }, {} as ProductStockLocationSchema)
- itemAcc[item.inventory_item_id] = { locations: locationsMap }
- return itemAcc
- }, {} as Record)
+ itemAcc[item.inventory_item_id] = { locations: locationsMap }
+ return itemAcc
+ },
+ {} as Record
+ )
- variantAcc[variant.id] = { inventory_items: inventoryItems }
+ variantAcc[variant.id] = { inventory_items: inventoryItems || {} }
return variantAcc
}, {} as Record),
}
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx b/packages/admin/dashboard/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx
index ee77ec8fe4b1c..31515dbe2d8a3 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx
@@ -10,11 +10,11 @@ import { DataGridReadOnlyCell } from "../../../../components/data-grid/component
import { DataGridDuplicateCell } from "../../../../components/data-grid/components/data-grid-duplicate-cell"
import { DataGridTogglableNumberCell } from "../../../../components/data-grid/components/data-grid-toggleable-number-cell"
import { ProductStockSchema } from "../schema"
-import { ProductVariantInventoryItemLink } from "../types"
import { isProductVariant } from "../utils"
const helper = createDataGridHelper<
- HttpTypes.AdminProductVariant | ProductVariantInventoryItemLink,
+ | HttpTypes.AdminProductVariant
+ | HttpTypes.AdminProductVariantInventoryItemLink,
ProductStockSchema
>()
@@ -35,7 +35,7 @@ export const useProductStockColumns = (
) => {
const { t } = useTranslation()
const getIsDisabled = useCallback(
- (item: ProductVariantInventoryItemLink): DisabledResult => {
+ (item: HttpTypes.AdminProductVariantInventoryItemLink): DisabledResult => {
const disabledItem = disabled[item.inventory_item_id]
const isDisabled = !!disabledItem && disabledItem.id !== item.variant_id
@@ -81,10 +81,10 @@ export const useProductStockColumns = (
- {item.inventory.title || "-"}
+ {item.inventory?.title || "-"}
- {item.inventory.title || "-"}
+ {item.inventory?.title || "-"}
)
},
@@ -134,7 +134,7 @@ export const useProductStockColumns = (
return (
- {item.inventory.sku || "-"}
+ {item.inventory?.sku || "-"}
)
@@ -142,7 +142,7 @@ export const useProductStockColumns = (
return (
- {item.inventory.sku || "-"}
+ {item.inventory?.sku || "-"}
)
},
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx b/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
index 2f6bb3641175b..f3b3f1ac4add1 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-stock/product-stock.tsx
@@ -19,9 +19,10 @@ export const ProductStock = () => {
/**
* We render a local ProgressBar, as we cannot rely on the global NavigationBar.
* This is because we are deferring the data, meaning that the navigation is
- * instant, and the data is loaded in parallel with the navigation. This will
- * result in the data loading after the navigation has completed most of the
- * time for this route, as we chunk the data into multiple queries.
+ * instant, and the data is loaded in parallel with the navigation, but may resolve
+ * after the navigation has completed. This will result in the data loading after the
+ * navigation has completed most of the time for this route, as we chunk the data into
+ * multiple queries.
*
* Here we instead render a local ProgressBar, which is animated, and exit
* the animation when the data is loaded, and the form is rendered.
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/types.ts b/packages/admin/dashboard/src/routes/products/product-stock/types.ts
deleted file mode 100644
index 59e3a196f9554..0000000000000
--- a/packages/admin/dashboard/src/routes/products/product-stock/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { HttpTypes } from "@medusajs/types"
-
-// TODO: Create a type in the types package
-export interface ProductVariantInventoryItemLink {
- id: string
- variant_id: string
- inventory_item_id: string
- inventory: HttpTypes.AdminInventoryItem
-}
diff --git a/packages/admin/dashboard/src/routes/products/product-stock/utils.ts b/packages/admin/dashboard/src/routes/products/product-stock/utils.ts
index df620eb3a1c70..0a0ea3fe621e3 100644
--- a/packages/admin/dashboard/src/routes/products/product-stock/utils.ts
+++ b/packages/admin/dashboard/src/routes/products/product-stock/utils.ts
@@ -1,24 +1,25 @@
import { HttpTypes } from "@medusajs/types"
-import { ProductVariantInventoryItemLink } from "./types"
export function isProductVariant(
- row: HttpTypes.AdminProductVariant | ProductVariantInventoryItemLink
+ row:
+ | HttpTypes.AdminProductVariant
+ | HttpTypes.AdminProductVariantInventoryItemLink
): row is HttpTypes.AdminProductVariant {
return row.id.startsWith("variant_")
}
export function isProductVariantWithInventoryPivot(
- row: HttpTypes.AdminProductVariant | ProductVariantInventoryItemLink
+ row:
+ | HttpTypes.AdminProductVariant
+ | HttpTypes.AdminProductVariantInventoryItemLink
): row is HttpTypes.AdminProductVariant & {
- inventory_items: ProductVariantInventoryItemLink[]
+ inventory_items: HttpTypes.AdminProductVariantInventoryItemLink[]
} {
return (row as any).inventory_items && (row as any).inventory_items.length > 0
}
export function getDisabledInventoryRows(
- variants: (HttpTypes.AdminProductVariant & {
- inventory_items: ProductVariantInventoryItemLink[]
- })[]
+ variants: HttpTypes.AdminProductVariant[]
) {
const seen: Record = {}
const disabled: Record =
@@ -27,6 +28,10 @@ export function getDisabledInventoryRows(
variants.forEach((variant) => {
const inventoryItems = variant.inventory_items
+ if (!inventoryItems) {
+ return
+ }
+
inventoryItems.forEach((item) => {
const existing = seen[item.inventory_item_id]
diff --git a/packages/core/types/src/http/product/admin/entitites.ts b/packages/core/types/src/http/product/admin/entitites.ts
index 53e07b5506b46..c6533552ecab1 100644
--- a/packages/core/types/src/http/product/admin/entitites.ts
+++ b/packages/core/types/src/http/product/admin/entitites.ts
@@ -1,4 +1,5 @@
import { AdminCollection } from "../../collection"
+import { AdminInventoryItem } from "../../inventory"
import { AdminPrice } from "../../pricing"
import { AdminProductCategory } from "../../product-category"
import { AdminProductTag } from "../../product-tag"
@@ -13,6 +14,29 @@ import {
ProductStatus,
} from "../common"
+export interface AdminProductVariantInventoryItemLink {
+ /**
+ * The ID of the pivot record.
+ */
+ id: string
+ /**
+ * The ID of the variant.
+ */
+ variant_id: string
+ /**
+ * The variant that the inventory item is linked to.
+ */
+ variant?: AdminProductVariant
+ /**
+ * The ID of the inventory item.
+ */
+ inventory_item_id: string
+ /**
+ * The inventory item that is linked to the variant.
+ */
+ inventory?: AdminInventoryItem
+}
+
export interface AdminProductVariant extends BaseProductVariant {
/**
* The product variant's prices.
@@ -26,6 +50,10 @@ export interface AdminProductVariant extends BaseProductVariant {
* The product that this variant belongs to.
*/
product?: AdminProduct | null
+ /**
+ * The variant's inventory items.
+ */
+ inventory_items?: AdminProductVariantInventoryItemLink[] | null
}
export interface AdminProductOption extends BaseProductOption {
/**
From 940ba4833a1462675bdba2c580812226dfe2ca2f Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
<45367945+kasperkristensen@users.noreply.github.com>
Date: Fri, 10 Jan 2025 09:36:55 +0100
Subject: [PATCH 19/19] update cursor on bidirectional select
---
.../data-grid/components/data-grid-root.tsx | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
diff --git a/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx b/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx
index c9d6d9cc209a7..9dea7779b9f89 100644
--- a/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx
+++ b/packages/admin/dashboard/src/components/data-grid/components/data-grid-root.tsx
@@ -663,6 +663,7 @@ export const DataGridRoot = <
virtualPaddingLeft={virtualPaddingLeft}
virtualPaddingRight={virtualPaddingRight}
onDragToFillStart={onDragToFillStart}
+ multiColumnSelection={multiColumnSelection}
/>
)
})}
@@ -795,6 +796,7 @@ type DataGridCellProps = {
rowIndex: number
anchor: DataGridCoordinates | null
onDragToFillStart: (e: React.MouseEvent) => void
+ multiColumnSelection: boolean
}
const DataGridCell = ({
@@ -803,6 +805,7 @@ const DataGridCell = ({
rowIndex,
anchor,
onDragToFillStart,
+ multiColumnSelection,
}: DataGridCellProps) => {
const coords: DataGridCoordinates = {
row: rowIndex,
@@ -836,7 +839,12 @@ const DataGridCell = ({
{isAnchor && (
)}
@@ -854,6 +862,7 @@ type DataGridRowProps = {
flatColumns: Column[]
anchor: DataGridCoordinates | null
onDragToFillStart: (e: React.MouseEvent) => void
+ multiColumnSelection: boolean
}
const DataGridRow = ({
@@ -866,6 +875,7 @@ const DataGridRow = ({
flatColumns,
anchor,
onDragToFillStart,
+ multiColumnSelection,
}: DataGridRowProps) => {
const visibleCells = row.getVisibleCells()
@@ -912,6 +922,7 @@ const DataGridRow = ({
rowIndex={rowIndex}
anchor={anchor}
onDragToFillStart={onDragToFillStart}
+ multiColumnSelection={multiColumnSelection}
/>
)