dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor PurchaseEdit component to streamline material selection and quantity handling

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-19 18:34:52 +07:00
parent 0908576ef2
commit 631330d3b4
2 changed files with 101 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Services/Admin/Manage/PurchaseService.php
View File

@ -152,6 +152,10 @@ public function getForEdit(Purchase $purchase): array
fn ($media) => $this->s3Service->getTemporaryUrl($media->getPath()) fn ($media) => $this->s3Service->getTemporaryUrl($media->getPath())
)->toArray(); )->toArray();
$existingQuantities = $items->mapWithKeys(fn (PurchaseItem $item) => [
(int) $item->raw_material_price_id => (int) $item->quantity,
])->all();
return [ return [
'id' => $purchase->id, 'id' => $purchase->id,
'name' => $rawMaterial?->name ?? '', 'name' => $rawMaterial?->name ?? '',
@ -164,12 +168,8 @@ public function getForEdit(Purchase $purchase): array
'photo_urls' => $purchasePhotoUrls, 'photo_urls' => $purchasePhotoUrls,
'variants' => $variants, 'variants' => $variants,
'default_mode' => $singleMaterial && ! $sharedWithOther ? 'new' : 'existing', 'default_mode' => $singleMaterial && ! $sharedWithOther ? 'new' : 'existing',
'existing_material_name' => $singleMaterial ? $materials->first()->name : null, 'existing_material_name' => $materials->first()->name ?? null,
'existing_quantities' => $singleMaterial 'existing_quantities' => $existingQuantities,
? $items->mapWithKeys(fn (PurchaseItem $item) => [
(int) $item->raw_material_price_id => (int) $item->quantity,
])->all()
: [],
]; ];
} }

184
resources/js/pages/admin/manage/purchase/edit.tsx
View File

@ -84,9 +84,6 @@ export default function PurchaseEdit({
}); });
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const [selectedMaterialName, setSelectedMaterialName] = useState(
purchase.existing_material_name ?? '',
);
const [quantities, setQuantities] = useState<Record<number, number>>(() => const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries( Object.fromEntries(
Object.entries(purchase.existing_quantities).map(([id, qty]) => [ Object.entries(purchase.existing_quantities).map(([id, qty]) => [
@ -132,10 +129,34 @@ export default function PurchaseEdit({
); );
const total = subtotal - discount + shippingCost; const total = subtotal - discount + shippingCost;
const selectedMaterial = useMemo( const purchasedVariantsByMaterial = useMemo(() => {
() => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null, 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 }[] }>();
[rawMaterials, selectedMaterialName],
); 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) => { const updateQuantity = useCallback((priceId: number, value: number) => {
setQuantities((prev) => ({ setQuantities((prev) => ({
@ -241,92 +262,23 @@ export default function PurchaseEdit({
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid gap-2"> {Array.from(purchasedVariantsByMaterial.entries()).map(([materialName, group]) => (
<Label> <div key={materialName} className="space-y-2">
Nama Bahan Baku{' '} {isMultiMaterial && (
<span className="text-destructive"> <p className="text-sm font-medium text-muted-foreground">
* {group.name} ({group.unit})
</span> </p>
</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>
)} )}
</ComboboxList> {group.items.map((price) => (
</ComboboxContent>
</Combobox>
<InputError
message={
errors.existing_items
}
/>
</div>
{selectedMaterial && (
<div className="space-y-2">
{selectedMaterial.raw_material_prices.map(
(price) => (
<div <div
key={ key={price.id}
price.id className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3"
}
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'
}
> >
<div className="flex min-w-0 items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
{price.photo_conversion_url ?? price.photo_url ? ( {price.photo_conversion_url ?? price.photo_url ? (
<img <img
src={ src={price.photo_conversion_url ?? price.photo_url!}
price.photo_conversion_url ?? price.photo_url alt={price.variant}
}
alt={
price.variant
}
className="h-10 w-10 shrink-0 rounded-md object-cover" className="h-10 w-10 shrink-0 rounded-md object-cover"
/> />
) : ( ) : (
@ -336,24 +288,12 @@ export default function PurchaseEdit({
)} )}
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate font-medium"> <p className="truncate font-medium">
{ {price.variant}
price.variant
}
</p> </p>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Stok:{' '} Stok:{' '}
{formatQuantity( {formatQuantity(Number(price.stock))}{' '}
Number( {group.unit} · {formatCurrency(price.price)}
price.stock,
),
)}{' '}
{
selectedMaterial.unit
}{' '}
·{' '}
{formatCurrency(
price.price,
)}
</p> </p>
</div> </div>
</div> </div>
@ -363,39 +303,19 @@ export default function PurchaseEdit({
variant="outline" variant="outline"
size="icon" size="icon"
disabled={ disabled={
!( (quantities[price.id] ?? 0) <= 0
quantities[
price
.id
] ??
0
)
} }
onClick={() => onClick={() =>
incrementQuantity( incrementQuantity(price.id, -1)
price.id,
-1,
)
} }
> >
<Minus className="h-4 w-4" /> <Minus className="h-4 w-4" />
</Button> </Button>
<NumberInput <NumberInput
className="w-24 text-center" className="w-24 text-center"
value={ value={quantities[price.id] ?? 0}
quantities[ onValueChange={(val) =>
price updateQuantity(price.id, val)
.id
] ??
0
}
onValueChange={(
val,
) =>
updateQuantity(
price.id,
val,
)
} }
/> />
<Button <Button
@ -403,20 +323,16 @@ export default function PurchaseEdit({
variant="outline" variant="outline"
size="icon" size="icon"
onClick={() => onClick={() =>
incrementQuantity( incrementQuantity(price.id, 1)
price.id,
1,
)
} }
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
), ))}
)}
</div> </div>
)} ))}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>