@medusajs/dashboard 2.10.4-preview-20250924150158 → 2.10.4-preview-20250924210149

package/src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx

@@ -1,111 +1,75 @@
-import * as zod from "zod"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { AdminInventoryItem, AdminStockLocation } from "@medusajs/types"
+import {
+  AdminInventoryItem,
+  AdminStockLocation,
+  HttpTypes,
+} from "@medusajs/types"
 import { Button, Text, toast } from "@medusajs/ui"
-import { useFieldArray, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { z } from "zod"
 import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
 import { useBatchInventoryItemLocationLevels } from "../../../../../../hooks/api/inventory"
+import { sdk } from "../../../../../../lib/client"
 
-import { useEffect, useMemo } from "react"
-import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
+import { useMemo, useState } from "react"
 import { LocationItem } from "./location-item"
+import { LocationSearchInput } from "./location-search-input"
+import { InfiniteList } from "../../../../../../components/common/infinite-list/infinite-list"
+import { useStockLocations } from "../../../../../../hooks/api/stock-locations"
 
 type EditInventoryItemAttributeFormProps = {
   item: AdminInventoryItem
   locations: AdminStockLocation[]
 }
 
-const EditInventoryItemAttributesSchema = z.object({
-  locations: z.array(
-    z.object({
-      id: z.string(),
-      location_id: z.string(),
-      selected: z.boolean(),
-    })
-  ),
-})
-
-const getDefaultValues = (
-  allLocations: AdminStockLocation[],
-  existingLevels: Set<string>
-) => {
-  return {
-    locations: allLocations.map((location) => ({
-      ...location,
-      location_id: location.id,
-      selected: existingLevels.has(location.id),
-    })),
-  }
-}
-
 export const ManageLocationsForm = ({
   item,
-  locations,
 }: EditInventoryItemAttributeFormProps) => {
   const existingLocationLevels = useMemo(
     () => new Set(item.location_levels?.map((l) => l.location_id) ?? []),
-    item.location_levels
+    [item.location_levels]
   )
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedLocationIds, setSelectedLocationIds] = useState<Set<string>>(
+    existingLocationLevels
+  )
 
-  const form = useForm<zod.infer<typeof EditInventoryItemAttributesSchema>>({
-    defaultValues: getDefaultValues(locations, existingLocationLevels),
-    resolver: zodResolver(EditInventoryItemAttributesSchema),
-  })
-
-  const { fields: locationFields, update: updateField } = useFieldArray({
-    control: form.control,
-    name: "locations",
-  })
+  const { count } = useStockLocations({ limit: 1, fields: "id" })
 
-  useEffect(() => {
-    form.setValue(
-      "locations",
-      getDefaultValues(locations, existingLocationLevels).locations
-    )
-  }, [existingLocationLevels, locations])
+  const handleLocationSelect = (locationId: string, selected: boolean) => {
+    setSelectedLocationIds((prev) => {
+      const newSet = new Set(prev)
+      if (selected) {
+        newSet.add(locationId)
+      } else {
+        newSet.delete(locationId)
+      }
+      return newSet
+    })
+  }
 
   const { mutateAsync } = useBatchInventoryItemLocationLevels(item.id)
 
-  const handleSubmit = form.handleSubmit(async ({ locations }) => {
-    // Changes in selected locations
-    const [selectedLocations, unselectedLocations] = locations.reduce(
-      (acc, location) => {
-        // If the location is not changed do nothing
-        if (
-          (!location.selected &&
-            !existingLocationLevels.has(location.location_id)) ||
-          (location.selected &&
-            existingLocationLevels.has(location.location_id))
-        ) {
-          return acc
-        }
+  const handleSubmit = async () => {
+    const toCreate = Array.from(selectedLocationIds).filter(
+      (id) => !existingLocationLevels.has(id)
+    )
 
-        if (location.selected) {
-          acc[0].push(location.location_id)
-        } else {
-          acc[1].push(location.location_id)
-        }
-        return acc
-      },
-      [[], []] as [string[], string[]]
+    const toDeleteLocations = Array.from(existingLocationLevels).filter(
+      (id) => !selectedLocationIds.has(id)
     )
 
-    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
-      return handleSuccess()
-    }
+    const toDelete = toDeleteLocations
+      .map((id) => item.location_levels?.find((l) => l.location_id === id)?.id)
+      .filter(Boolean) as unknown as string[]
 
     await mutateAsync(
       {
-        create: selectedLocations.map((location_id) => ({
+        create: toCreate.map((location_id) => ({
           location_id,
         })),
-        delete: unselectedLocations,
+        delete: toDelete,
       },
       {
         onSuccess: () => {
@@ -117,80 +81,103 @@ export const ManageLocationsForm = ({
         },
       }
     )
-  })
+  }
 
   return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex flex-1 flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
-          <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.title")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.title ?? "-"}
-              </Text>
-            </div>
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.sku")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.sku}
-              </Text>
-            </div>
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+        <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.title")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.title ?? "-"}
+            </Text>
           </div>
-          <div className="flex flex-col">
-            <Text size="small" weight="plus" leading="compact">
-              {t("locations.domain")}
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.sku")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.sku}
             </Text>
-            <div className="text-ui-fg-subtle flex w-full justify-between">
-              <Text size="small" leading="compact">
-                {t("locations.selectLocations")}
-              </Text>
-              <Text size="small" leading="compact">
-                {"("}
-                {t("general.countOfTotalSelected", {
-                  count: locationFields.filter((l) => l.selected).length,
-                  total: locations.length,
-                })}
-                {")"}
-              </Text>
-            </div>
           </div>
-          {locationFields.map((location, idx) => {
-            return (
+        </div>
+        <div className="flex flex-col">
+          <Text size="small" weight="plus" leading="compact">
+            {t("locations.domain")}
+          </Text>
+          <div className="text-ui-fg-subtle flex w-full justify-between">
+            <Text size="small" leading="compact">
+              {t("locations.selectLocations")}
+            </Text>
+            <Text size="small" leading="compact">
+              {"("}
+              {t("general.countOfTotalSelected", {
+                count: selectedLocationIds.size,
+                total: count,
+              })}
+              {")"}
+            </Text>
+          </div>
+        </div>
+
+        <LocationSearchInput
+          onSearchChange={setSearchQuery}
+          placeholder={t("general.search")}
+        />
+
+        <div className="min-h-0 flex-1">
+          <InfiniteList<
+            HttpTypes.AdminStockLocationListResponse,
+            HttpTypes.AdminStockLocation,
+            HttpTypes.AdminStockLocationListParams
+          >
+            queryKey={["stock-locations", searchQuery]}
+            queryFn={async (params) => {
+              const response = await sdk.admin.stockLocation.list({
+                limit: params.limit,
+                offset: params.offset,
+                ...(searchQuery && { q: searchQuery }),
+              })
+              return response
+            }}
+            responseKey="stock_locations"
+            renderItem={(location) => (
               <LocationItem
-                selected={location.selected}
-                location={location as any}
-                onSelect={() =>
-                  updateField(idx, {
-                    ...location,
-                    selected: !location.selected,
-                  })
+                selected={selectedLocationIds.has(location.id)}
+                location={location}
+                onSelect={(selected) =>
+                  handleLocationSelect(location.id, selected)
                 }
-                key={location.id}
               />
-            )
-          })}
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button variant="secondary" size="small">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button type="submit" size="small" isLoading={false}>
-              {t("actions.save")}
+            )}
+            renderEmpty={() => (
+              <div className="flex items-center justify-center py-8">
+                <Text size="small" className="text-ui-fg-subtle">
+                  {searchQuery
+                    ? t("locations.noLocationsFound")
+                    : t("locations.noLocationsFound")}
+                </Text>
+              </div>
+            )}
+            pageSize={20}
+          />
+        </div>
+      </RouteDrawer.Body>
+      <RouteDrawer.Footer>
+        <div className="flex items-center justify-end gap-x-2">
+          <RouteDrawer.Close asChild>
+            <Button variant="secondary" size="small">
+              {t("actions.cancel")}
             </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
+          </RouteDrawer.Close>
+          <Button onClick={handleSubmit} size="small" isLoading={false}>
+            {t("actions.save")}
+          </Button>
+        </div>
+      </RouteDrawer.Footer>
+    </div>
   )
 }

package/dist/manage-locations-3TBIUSHP.mjs

@@ -1,236 +0,0 @@
-import "./chunk-IUCDCPJU.mjs";
-import {
-  KeyboundForm
-} from "./chunk-6HTZNHPT.mjs";
-import {
-  RouteDrawer,
-  useRouteModal
-} from "./chunk-4TC5YS65.mjs";
-import "./chunk-OBQI23QM.mjs";
-import {
-  useStockLocations
-} from "./chunk-32IQRUVY.mjs";
-import {
-  useBatchInventoryItemLocationLevels,
-  useInventoryItem
-} from "./chunk-X4X5KUGQ.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-DEQUVHHE.mjs";
-import "./chunk-RPUOO7AV.mjs";
-
-// src/routes/inventory/inventory-detail/components/manage-locations/manage-locations-drawer.tsx
-import { Heading } from "@medusajs/ui";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { useParams } from "react-router-dom";
-
-// src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Text as Text2, toast } from "@medusajs/ui";
-import { useFieldArray, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { z } from "zod";
-import { useEffect, useMemo } from "react";
-
-// src/routes/inventory/inventory-detail/components/manage-locations/components/location-item.tsx
-import { Checkbox, Text, clx } from "@medusajs/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var LocationItem = ({
-  selected,
-  onSelect,
-  location
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clx(
-        "flex w-full cursor-pointer gap-x-2 rounded-lg border px-2 py-2",
-        {
-          "border-ui-border-interactive ": selected
-        }
-      ),
-      onClick: () => onSelect(!selected),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "h-5 w-5", children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              onSelect(!selected);
-            },
-            checked: selected
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col", children: [
-          /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: location.name }),
-          /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
-            location.address?.address_1,
-            location.address?.city,
-            location.address?.country_code
-          ].filter((el) => !!el).join(", ") })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var EditInventoryItemAttributesSchema = z.object({
-  locations: z.array(
-    z.object({
-      id: z.string(),
-      location_id: z.string(),
-      selected: z.boolean()
-    })
-  )
-});
-var getDefaultValues = (allLocations, existingLevels) => {
-  return {
-    locations: allLocations.map((location) => ({
-      ...location,
-      location_id: location.id,
-      selected: existingLevels.has(location.id)
-    }))
-  };
-};
-var ManageLocationsForm = ({
-  item,
-  locations
-}) => {
-  const existingLocationLevels = useMemo(
-    () => new Set(item.location_levels?.map((l) => l.location_id) ?? []),
-    item.location_levels
-  );
-  const { t } = useTranslation();
-  const { handleSuccess } = useRouteModal();
-  const form = useForm({
-    defaultValues: getDefaultValues(locations, existingLocationLevels),
-    resolver: zodResolver(EditInventoryItemAttributesSchema)
-  });
-  const { fields: locationFields, update: updateField } = useFieldArray({
-    control: form.control,
-    name: "locations"
-  });
-  useEffect(() => {
-    form.setValue(
-      "locations",
-      getDefaultValues(locations, existingLocationLevels).locations
-    );
-  }, [existingLocationLevels, locations]);
-  const { mutateAsync } = useBatchInventoryItemLocationLevels(item.id);
-  const handleSubmit = form.handleSubmit(async ({ locations: locations2 }) => {
-    const [selectedLocations, unselectedLocations] = locations2.reduce(
-      (acc, location) => {
-        if (!location.selected && !existingLocationLevels.has(location.location_id) || location.selected && existingLocationLevels.has(location.location_id)) {
-          return acc;
-        }
-        if (location.selected) {
-          acc[0].push(location.location_id);
-        } else {
-          acc[1].push(location.location_id);
-        }
-        return acc;
-      },
-      [[], []]
-    );
-    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
-      return handleSuccess();
-    }
-    await mutateAsync(
-      {
-        create: selectedLocations.map((location_id) => ({
-          location_id
-        })),
-        delete: unselectedLocations
-      },
-      {
-        onSuccess: () => {
-          toast.success(t("inventory.toast.updateLocations"));
-          handleSuccess();
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx2(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs2(
-    KeyboundForm,
-    {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs2(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 divide-x", children: [
-              /* @__PURE__ */ jsx2(Text2, { className: "px-2 py-1.5", size: "small", leading: "compact", children: t("fields.title") }),
-              /* @__PURE__ */ jsx2(Text2, { className: "px-2 py-1.5", size: "small", leading: "compact", children: item.title ?? "-" })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 divide-x", children: [
-              /* @__PURE__ */ jsx2(Text2, { className: "px-2 py-1.5", size: "small", leading: "compact", children: t("fields.sku") }),
-              /* @__PURE__ */ jsx2(Text2, { className: "px-2 py-1.5", size: "small", leading: "compact", children: item.sku })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx2(Text2, { size: "small", weight: "plus", leading: "compact", children: t("locations.domain") }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle flex w-full justify-between", children: [
-              /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: t("locations.selectLocations") }),
-              /* @__PURE__ */ jsxs2(Text2, { size: "small", leading: "compact", children: [
-                "(",
-                t("general.countOfTotalSelected", {
-                  count: locationFields.filter((l) => l.selected).length,
-                  total: locations.length
-                }),
-                ")"
-              ] })
-            ] })
-          ] }),
-          locationFields.map((location, idx) => {
-            return /* @__PURE__ */ jsx2(
-              LocationItem,
-              {
-                selected: location.selected,
-                location,
-                onSelect: () => updateField(idx, {
-                  ...location,
-                  selected: !location.selected
-                })
-              },
-              location.id
-            );
-          })
-        ] }),
-        /* @__PURE__ */ jsx2(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx2(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
-          /* @__PURE__ */ jsx2(Button, { type: "submit", size: "small", isLoading: false, children: t("actions.save") })
-        ] }) })
-      ]
-    }
-  ) });
-};
-
-// src/routes/inventory/inventory-detail/components/manage-locations/manage-locations-drawer.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ManageLocationsDrawer = () => {
-  const { id } = useParams();
-  const { t } = useTranslation2();
-  const {
-    inventory_item: inventoryItem,
-    isPending: isLoading,
-    isError,
-    error
-  } = useInventoryItem(id);
-  const { stock_locations, isLoading: loadingLocations } = useStockLocations();
-  const ready = !isLoading && !loadingLocations && inventoryItem && stock_locations;
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs3(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx3(RouteDrawer.Header, { children: /* @__PURE__ */ jsx3(Heading, { children: t("inventory.manageLocations") }) }),
-    ready && /* @__PURE__ */ jsx3(ManageLocationsForm, { item: inventoryItem, locations: stock_locations })
-  ] });
-};
-export {
-  ManageLocationsDrawer as Component
-};