feat: add dialog description and refactor variant selection to use native select element in RetailStockTransferModal

This commit is contained in:
Yoga Pangestu 2026-07-01 13:51:09 +07:00
parent 8eee3b04ce
commit 4bafd467ce

View File

@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
@ -18,14 +19,6 @@ import {
FieldLabel,
FieldSet,
} from '@/components/ui/field';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { apiFetch } from '@/lib/api';
import { transfer } from '@/routes/admin/manage/retail-stock';
@ -151,6 +144,9 @@ function formatNumber(value: number): string {
<DialogTitle class="flex items-center gap-2">
Transfer Stok Ecer
</DialogTitle>
<DialogDescription class="sr-only">
Form pengajuan transfer stok ecer untuk produk {{ productName }}
</DialogDescription>
</DialogHeader>
<div class="space-y-4">
@ -159,22 +155,21 @@ function formatNumber(value: number): string {
<Field v-if="hasMultipleVariants">
<FieldLabel for="transfer-variant" required>Pilih Varian</FieldLabel>
<Select :model-value="selectedVariantId ? String(selectedVariantId) : undefined" @update:model-value="selectedVariantId = Number($event)">
<SelectTrigger id="transfer-variant" class="w-full">
<SelectValue placeholder="Pilih varian" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="variant in variants"
:key="variant.id"
:value="String(variant.id)"
>
{{ variant.name }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<select
id="transfer-variant"
:value="selectedVariantId ? String(selectedVariantId) : ''"
@change="selectedVariantId = Number(($event.target as HTMLSelectElement).value)"
class="border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="" disabled>Pilih varian</option>
<option
v-for="variant in props.variants"
:key="variant.id"
:value="String(variant.id)"
>
{{ variant.name }}
</option>
</select>
</Field>
<p v-if="!hasMultipleVariants" class="text-xs text-muted-foreground">Varian: {{ displayVariantName }}</p>