fix(dashboard): create reservation prefill (#7820)

**What**
- when creating reservation from inventory details page, preselect that inventory item

FIXES CORE-2387
This commit is contained in:
Frane Polić
2024-06-25 06:48:52 +00:00
committed by GitHub
parent 34c44078e7
commit 11502ee2b5
3 changed files with 17 additions and 5 deletions
@@ -18,7 +18,9 @@ export const InventoryItemReservationsSection = ({
<div className="flex items-center justify-between px-6 py-4"> <div className="flex items-center justify-between px-6 py-4">
<Heading>{t("reservations.domain")}</Heading> <Heading>{t("reservations.domain")}</Heading>
<Button size="small" variant="secondary" asChild> <Button size="small" variant="secondary" asChild>
<Link to="/reservations/create">{t("actions.create")}</Link> <Link to={`/reservations/create?item_id=${inventoryItem.id}`}>
{t("actions.create")}
</Link>
</Button> </Button>
</div> </div>
<ReservationItemTable inventoryItem={inventoryItem} /> <ReservationItemTable inventoryItem={inventoryItem} />
@@ -44,7 +44,7 @@ const AttributeGridRow = ({
) )
} }
export const CreateReservationForm = () => { export const CreateReservationForm = (props: { inventoryItemId?: string }) => {
const { t } = useTranslation() const { t } = useTranslation()
const { handleSuccess } = useRouteModal() const { handleSuccess } = useRouteModal()
const [inventorySearch, setInventorySearch] = React.useState<string | null>( const [inventorySearch, setInventorySearch] = React.useState<string | null>(
@@ -53,7 +53,7 @@ export const CreateReservationForm = () => {
const form = useForm<zod.infer<typeof CreateReservationSchema>>({ const form = useForm<zod.infer<typeof CreateReservationSchema>>({
defaultValues: { defaultValues: {
inventory_item_id: "", inventory_item_id: props.inventoryItemId || "",
location_id: "", location_id: "",
quantity: 0, quantity: 0,
description: "", description: "",
@@ -98,7 +98,11 @@ export const CreateReservationForm = () => {
dismissLabel: t("actions.close"), dismissLabel: t("actions.close"),
description: t("inventory.reservation.successToast"), description: t("inventory.reservation.successToast"),
}) })
handleSuccess(`/reservations/${reservation.id}`) handleSuccess(
props.inventoryItemId
? `/inventory/${props.inventoryItemId}`
: `/reservations/${reservation.id}`
)
}, },
}) })
}) })
@@ -147,6 +151,7 @@ export const CreateReservationForm = () => {
onChange(v) onChange(v)
}} }}
{...field} {...field}
disabled={!!props.inventoryItemId}
options={(inventory_items ?? []).map( options={(inventory_items ?? []).map(
(inventoryItem) => ({ (inventoryItem) => ({
label: inventoryItem.title ?? inventoryItem.sku!, label: inventoryItem.title ?? inventoryItem.sku!,
@@ -1,10 +1,15 @@
import { CreateReservationForm } from "./components/create-reservation-form" import { CreateReservationForm } from "./components/create-reservation-form"
import { RouteFocusModal } from "../../../../components/route-modal" import { RouteFocusModal } from "../../../../components/route-modal"
import { useSearchParams } from "react-router-dom"
export const CreateReservationModal = () => { export const CreateReservationModal = () => {
const [params] = useSearchParams()
const inventoryItemId = params.get("item_id")
return ( return (
<RouteFocusModal> <RouteFocusModal>
<CreateReservationForm /> <CreateReservationForm inventoryItemId={inventoryItemId} />
</RouteFocusModal> </RouteFocusModal>
) )
} }