feat: refactor PurchaseEdit component to streamline material selection and quantity handling
This commit is contained in:
Yoga Pangestu
parent
0908576ef2
commit
631330d3b4
@ -152,6 +152,10 @@ public function getForEdit(Purchase $purchase): array
|
||||
fn ($media) => $this->s3Service->getTemporaryUrl($media->getPath())
|
||||
)->toArray();
|
||||
|
||||
$existingQuantities = $items->mapWithKeys(fn (PurchaseItem $item) => [
|
||||
(int) $item->raw_material_price_id => (int) $item->quantity,
|
||||
])->all();
|
||||
|
||||
return [
|
||||
'id' => $purchase->id,
|
||||
'name' => $rawMaterial?->name ?? '',
|
||||
@ -164,12 +168,8 @@ public function getForEdit(Purchase $purchase): array
|
||||
'photo_urls' => $purchasePhotoUrls,
|
||||
'variants' => $variants,
|
||||
'default_mode' => $singleMaterial && ! $sharedWithOther ? 'new' : 'existing',
|
||||
'existing_material_name' => $singleMaterial ? $materials->first()->name : null,
|
||||
'existing_quantities' => $singleMaterial
|
||||
? $items->mapWithKeys(fn (PurchaseItem $item) => [
|
||||
(int) $item->raw_material_price_id => (int) $item->quantity,
|
||||
])->all()
|
||||
: [],
|
||||
'existing_material_name' => $materials->first()->name ?? null,
|
||||
'existing_quantities' => $existingQuantities,
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -84,9 +84,6 @@ export default function PurchaseEdit({
|
||||
});
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const [selectedMaterialName, setSelectedMaterialName] = useState(
|
||||
purchase.existing_material_name ?? '',
|
||||
);
|
||||
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
|
||||
Object.fromEntries(
|
||||
Object.entries(purchase.existing_quantities).map(([id, qty]) => [
|
||||
@ -132,10 +129,34 @@ export default function PurchaseEdit({
|
||||
);
|
||||
const total = subtotal - discount + shippingCost;
|
||||
|
||||
const selectedMaterial = useMemo(
|
||||
() => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null,
|
||||
[rawMaterials, selectedMaterialName],
|
||||
);
|
||||
const purchasedVariantsByMaterial = useMemo(() => {
|
||||
const map = new Map<string, { name: string; unit: string; items: { id: number; variant: string; price: number; stock: number; photo_url: string | null; photo_conversion_url: string | null }[] }>();
|
||||
|
||||
for (const [priceId, quantity] of Object.entries(quantities)) {
|
||||
const id = Number(priceId);
|
||||
const price = priceMap.get(id);
|
||||
const material = materialByPriceId.get(id);
|
||||
|
||||
if (!price || !material) continue;
|
||||
|
||||
if (!map.has(material.name)) {
|
||||
map.set(material.name, { name: material.name, unit: material.unit, items: [] });
|
||||
}
|
||||
|
||||
map.get(material.name)!.items.push({
|
||||
id: price.id,
|
||||
variant: price.variant,
|
||||
price: price.price,
|
||||
stock: price.stock,
|
||||
photo_url: price.photo_url,
|
||||
photo_conversion_url: price.photo_conversion_url,
|
||||
});
|
||||
}
|
||||
|
||||
return map;
|
||||
}, [quantities, priceMap, materialByPriceId]);
|
||||
|
||||
const isMultiMaterial = purchasedVariantsByMaterial.size > 1;
|
||||
|
||||
const updateQuantity = useCallback((priceId: number, value: number) => {
|
||||
setQuantities((prev) => ({
|
||||
@ -241,92 +262,23 @@ export default function PurchaseEdit({
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Nama Bahan Baku{' '}
|
||||
<span className="text-destructive">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Combobox
|
||||
items={rawMaterials}
|
||||
itemToStringLabel={(
|
||||
m,
|
||||
) => m.name}
|
||||
value={selectedMaterial}
|
||||
onValueChange={(
|
||||
value,
|
||||
) =>
|
||||
setSelectedMaterialName(
|
||||
value?.name ??
|
||||
'',
|
||||
)
|
||||
}
|
||||
>
|
||||
<ComboboxInput
|
||||
placeholder="Cari bahan baku..."
|
||||
className="w-full"
|
||||
disabled
|
||||
/>
|
||||
<ComboboxContent>
|
||||
<ComboboxEmpty>
|
||||
Tidak ada bahan
|
||||
baku ditemukan.
|
||||
</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{(m) => (
|
||||
<ComboboxItem
|
||||
key={
|
||||
m.id
|
||||
}
|
||||
value={
|
||||
m
|
||||
}
|
||||
>
|
||||
{m.name}{' '}
|
||||
(
|
||||
{m.unit}
|
||||
)
|
||||
</ComboboxItem>
|
||||
{Array.from(purchasedVariantsByMaterial.entries()).map(([materialName, group]) => (
|
||||
<div key={materialName} className="space-y-2">
|
||||
{isMultiMaterial && (
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{group.name} ({group.unit})
|
||||
</p>
|
||||
)}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
<InputError
|
||||
message={
|
||||
errors.existing_items
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedMaterial && (
|
||||
<div className="space-y-2">
|
||||
{selectedMaterial.raw_material_prices.map(
|
||||
(price) => (
|
||||
{group.items.map((price) => (
|
||||
<div
|
||||
key={
|
||||
price.id
|
||||
}
|
||||
className={
|
||||
(quantities[
|
||||
price
|
||||
.id
|
||||
] ??
|
||||
0) >
|
||||
0
|
||||
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
||||
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
|
||||
}
|
||||
key={price.id}
|
||||
className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
{price.photo_conversion_url ?? price.photo_url ? (
|
||||
<img
|
||||
src={
|
||||
price.photo_conversion_url ?? price.photo_url
|
||||
}
|
||||
alt={
|
||||
price.variant
|
||||
}
|
||||
src={price.photo_conversion_url ?? price.photo_url!}
|
||||
alt={price.variant}
|
||||
className="h-10 w-10 shrink-0 rounded-md object-cover"
|
||||
/>
|
||||
) : (
|
||||
@ -336,24 +288,12 @@ export default function PurchaseEdit({
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-medium">
|
||||
{
|
||||
price.variant
|
||||
}
|
||||
{price.variant}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Stok:{' '}
|
||||
{formatQuantity(
|
||||
Number(
|
||||
price.stock,
|
||||
),
|
||||
)}{' '}
|
||||
{
|
||||
selectedMaterial.unit
|
||||
}{' '}
|
||||
·{' '}
|
||||
{formatCurrency(
|
||||
price.price,
|
||||
)}
|
||||
{formatQuantity(Number(price.stock))}{' '}
|
||||
{group.unit} · {formatCurrency(price.price)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -363,39 +303,19 @@ export default function PurchaseEdit({
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={
|
||||
!(
|
||||
quantities[
|
||||
price
|
||||
.id
|
||||
] ??
|
||||
0
|
||||
)
|
||||
(quantities[price.id] ?? 0) <= 0
|
||||
}
|
||||
onClick={() =>
|
||||
incrementQuantity(
|
||||
price.id,
|
||||
-1,
|
||||
)
|
||||
incrementQuantity(price.id, -1)
|
||||
}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<NumberInput
|
||||
className="w-24 text-center"
|
||||
value={
|
||||
quantities[
|
||||
price
|
||||
.id
|
||||
] ??
|
||||
0
|
||||
}
|
||||
onValueChange={(
|
||||
val,
|
||||
) =>
|
||||
updateQuantity(
|
||||
price.id,
|
||||
val,
|
||||
)
|
||||
value={quantities[price.id] ?? 0}
|
||||
onValueChange={(val) =>
|
||||
updateQuantity(price.id, val)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
@ -403,20 +323,16 @@ export default function PurchaseEdit({
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
incrementQuantity(
|
||||
price.id,
|
||||
1,
|
||||
)
|
||||
incrementQuantity(price.id, 1)
|
||||
}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user