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

feat: replace useMemo with useState for selectedProductId and update product selection UI

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-07 09:11:47 +07:00
parent 9e60a1cf39
commit add157183b
1 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
resources/js/pages/admin/manage/transaction/edit.tsx
View File

@ -83,16 +83,15 @@ export default function TransactionEdit({ transaction, data }: Props) {
const [photo, setPhoto] = useState<string | null>(transaction.photo_key);
const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url);
const [uploading, setUploading] = useState(false);
const selectedProductId = useMemo(() => {
const [selectedProductId, setSelectedProductId] = useState(() => {
const items = transaction.items ?? [];
const product = products.find((p) =>
p.product_variants.some((v) =>
items.some((i) => i.product_variant_id === v.id),
),
);
return product ? String(product.id) : '';
}, [products, transaction.items]);
});
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries(
(transaction.items ?? []).map((item) => [
@ -302,10 +301,57 @@ export default function TransactionEdit({ transaction, data }: Props) {
<div className="space-y-6 md:col-span-2">
<Card>
<CardHeader>
<CardTitle>Item Transaksi</CardTitle>
<CardTitle>Pilih Produk</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{selectedProduct ? (
<div className="grid gap-2">
<Label>
Nama Produk{' '}
<span className="text-destructive">
*
</span>
</Label>
<Combobox
items={products}
itemToStringLabel={(p) =>
p.name
}
value={selectedProduct}
onValueChange={(value) =>
setSelectedProductId(
value
? String(value.id)
: '',
)
}
>
<ComboboxInput
placeholder="Cari produk..."
className="w-full"
/>
<ComboboxContent>
<ComboboxEmpty>
Tidak ada produk
ditemukan.
</ComboboxEmpty>
<ComboboxList>
{(p) => (
<ComboboxItem
key={p.id}
value={p}
>
{p.name}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
<InputError
message={errors.items}
/>
</div>
{selectedProduct && (
<div className="space-y-2">
{selectedProduct.product_variants.map(
(variant) => {
@ -425,12 +471,7 @@ export default function TransactionEdit({ transaction, data }: Props) {
},
)}
</div>
) : (
<p className="text-sm text-muted-foreground">
Tidak ada item.
</p>
)}
<InputError message={errors.items} />
</CardContent>
</Card>
</div>