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 [photo, setPhoto] = useState<string | null>(transaction.photo_key);
const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url); const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const selectedProductId = useMemo(() => { const [selectedProductId, setSelectedProductId] = useState(() => {
const items = transaction.items ?? []; const items = transaction.items ?? [];
const product = products.find((p) => const product = products.find((p) =>
p.product_variants.some((v) => p.product_variants.some((v) =>
items.some((i) => i.product_variant_id === v.id), items.some((i) => i.product_variant_id === v.id),
), ),
); );
return product ? String(product.id) : ''; return product ? String(product.id) : '';
}, [products, transaction.items]); });
const [quantities, setQuantities] = useState<Record<number, number>>(() => const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries( Object.fromEntries(
(transaction.items ?? []).map((item) => [ (transaction.items ?? []).map((item) => [
@ -302,10 +301,57 @@ export default function TransactionEdit({ transaction, data }: Props) {
<div className="space-y-6 md:col-span-2"> <div className="space-y-6 md:col-span-2">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Item Transaksi</CardTitle> <CardTitle>Pilih Produk</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <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"> <div className="space-y-2">
{selectedProduct.product_variants.map( {selectedProduct.product_variants.map(
(variant) => { (variant) => {
@ -425,12 +471,7 @@ export default function TransactionEdit({ transaction, data }: Props) {
}, },
)} )}
</div> </div>
) : (
<p className="text-sm text-muted-foreground">
Tidak ada item.
</p>
)} )}
<InputError message={errors.items} />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>