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 { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
@ -18,14 +19,6 @@ import {
FieldLabel, FieldLabel,
FieldSet, FieldSet,
} from '@/components/ui/field'; } from '@/components/ui/field';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { apiFetch } from '@/lib/api'; import { apiFetch } from '@/lib/api';
import { transfer } from '@/routes/admin/manage/retail-stock'; import { transfer } from '@/routes/admin/manage/retail-stock';
@ -151,6 +144,9 @@ function formatNumber(value: number): string {
<DialogTitle class="flex items-center gap-2"> <DialogTitle class="flex items-center gap-2">
Transfer Stok Ecer Transfer Stok Ecer
</DialogTitle> </DialogTitle>
<DialogDescription class="sr-only">
Form pengajuan transfer stok ecer untuk produk {{ productName }}
</DialogDescription>
</DialogHeader> </DialogHeader>
<div class="space-y-4"> <div class="space-y-4">
@ -159,22 +155,21 @@ function formatNumber(value: number): string {
<Field v-if="hasMultipleVariants"> <Field v-if="hasMultipleVariants">
<FieldLabel for="transfer-variant" required>Pilih Varian</FieldLabel> <FieldLabel for="transfer-variant" required>Pilih Varian</FieldLabel>
<Select :model-value="selectedVariantId ? String(selectedVariantId) : undefined" @update:model-value="selectedVariantId = Number($event)"> <select
<SelectTrigger id="transfer-variant" class="w-full"> id="transfer-variant"
<SelectValue placeholder="Pilih varian" /> :value="selectedVariantId ? String(selectedVariantId) : ''"
</SelectTrigger> @change="selectedVariantId = Number(($event.target as HTMLSelectElement).value)"
<SelectContent> 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"
<SelectGroup> >
<SelectItem <option value="" disabled>Pilih varian</option>
v-for="variant in variants" <option
:key="variant.id" v-for="variant in props.variants"
:value="String(variant.id)" :key="variant.id"
> :value="String(variant.id)"
{{ variant.name }} >
</SelectItem> {{ variant.name }}
</SelectGroup> </option>
</SelectContent> </select>
</Select>
</Field> </Field>
<p v-if="!hasMultipleVariants" class="text-xs text-muted-foreground">Varian: {{ displayVariantName }}</p> <p v-if="!hasMultipleVariants" class="text-xs text-muted-foreground">Varian: {{ displayVariantName }}</p>