refactor: reorganize imports and enhance layout in OrderPosForm.vue for improved readability and user experience
This commit is contained in:
Yoga Pangestu
parent
e4b475cd82
commit
740a06ca29
@ -3,9 +3,6 @@ import { useForm, usePage } from '@inertiajs/vue3';
|
||||
import { Minus, Plus, Save, Search, ShoppingCart, Trash2 } from '@lucide/vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import CustomerQuickCreateModal from './CustomerQuickCreateModal.vue';
|
||||
import PosCatalogCard from '../../shared/PosCatalogCard.vue';
|
||||
import PosCatalogVariantThumb from '../../shared/PosCatalogVariantThumb.vue';
|
||||
import { NumberInput } from '@/components/form/number-input';
|
||||
import { RupiahInput } from '@/components/form/rupiah-input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@ -49,8 +46,12 @@ import { getFirstCoverImage } from '@/lib/catalog-cover';
|
||||
import { formErrors } from '@/lib/form';
|
||||
import { formatRupiah, parseRupiah } from '@/lib/rupiah';
|
||||
import type { Auth } from '@/types/auth';
|
||||
import { STOCK_QUALITY_OPTIONS, type EnumOption, type OrderCartItem, type OrderCatalogItem, type SelectOption } from '@/types/order';
|
||||
import { STOCK_QUALITY_OPTIONS } from '@/types/order';
|
||||
import type { EnumOption, OrderCartItem, OrderCatalogItem, SelectOption } from '@/types/order';
|
||||
import type { ProductPriceItem, ProductVariantItem } from '@/types/product';
|
||||
import PosCatalogCard from '../../shared/PosCatalogCard.vue';
|
||||
import PosCatalogVariantThumb from '../../shared/PosCatalogVariantThumb.vue';
|
||||
import CustomerQuickCreateModal from './CustomerQuickCreateModal.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
customers: SelectOption[];
|
||||
@ -498,29 +499,27 @@ function submit() {
|
||||
<CardTitle class="text-base">Pilih Produk</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<Field>
|
||||
<FieldLabel for="stock_quality">Kualitas Stok</FieldLabel>
|
||||
<Select v-model="selectedStockQuality">
|
||||
<SelectTrigger id="stock_quality" class="w-full">
|
||||
<SelectValue placeholder="Pilih kualitas stok" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="option in STOCK_QUALITY_OPTIONS"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<div class="flex gap-4">
|
||||
<div class="relative flex-1">
|
||||
<Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input v-model="search" placeholder="Cari produk..." class="pl-9" />
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input v-model="search" placeholder="Cari produk..." class="pl-9" />
|
||||
<Field class="flex-1">
|
||||
<Select v-model="selectedStockQuality">
|
||||
<SelectTrigger id="stock_quality" class="w-full">
|
||||
<SelectValue placeholder="Pilih kualitas stok" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="option in STOCK_QUALITY_OPTIONS" :key="option.value"
|
||||
:value="option.value">
|
||||
{{ option.label }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredCatalog.length === 0" class="py-12 text-center text-sm text-muted-foreground">
|
||||
@ -592,12 +591,9 @@ function submit() {
|
||||
<ShoppingCart class="size-4" />
|
||||
Ringkasan Pesanan
|
||||
</span>
|
||||
<button
|
||||
v-if="cart.length > 0"
|
||||
type="button"
|
||||
<button v-if="cart.length > 0" type="button"
|
||||
class="text-xs font-normal text-primary underline underline-offset-2 hover:text-primary/80"
|
||||
@click="cartDetailOpen = true"
|
||||
>
|
||||
@click="cartDetailOpen = true">
|
||||
Lihat Detail
|
||||
</button>
|
||||
</CardTitle>
|
||||
@ -675,8 +671,7 @@ function submit() {
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="pt in paymentTypes" :key="pt.value"
|
||||
:value="pt.value">
|
||||
<SelectItem v-for="pt in paymentTypes" :key="pt.value" :value="pt.value">
|
||||
{{ pt.label }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
@ -713,8 +708,8 @@ function submit() {
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button v-if="can('customers.create')" type="button" variant="outline"
|
||||
size="icon" class="shrink-0" @click="customerFormOpen = true">
|
||||
<Button v-if="can('customers.create')" type="button" variant="outline" size="icon"
|
||||
class="shrink-0" @click="customerFormOpen = true">
|
||||
<Plus class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -755,11 +750,9 @@ function submit() {
|
||||
</div>
|
||||
|
||||
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
|
||||
<div
|
||||
v-for="(item, index) in cart"
|
||||
<div v-for="(item, index) in cart"
|
||||
:key="`${item.product_variant_id}-${item.stock_quality}`"
|
||||
class="rounded-lg border p-3"
|
||||
>
|
||||
class="rounded-lg border p-3">
|
||||
<div class="flex gap-3">
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
@ -770,7 +763,8 @@ function submit() {
|
||||
<p class="truncate text-xs text-muted-foreground">
|
||||
{{ item.variant_name }}
|
||||
·
|
||||
{{ item.stock_quality_label ?? (item.stock_quality === 'reject' ? 'Reject' : 'Bagus') }}
|
||||
{{ item.stock_quality_label ?? (item.stock_quality === 'reject'
|
||||
? 'Reject' : 'Bagus') }}
|
||||
</p>
|
||||
</div>
|
||||
<Button type="button" variant="ghost" size="icon"
|
||||
@ -880,17 +874,15 @@ function submit() {
|
||||
<DialogTitle>Detail Keranjang</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="max-h-96 space-y-3 overflow-y-auto overscroll-y-contain scrollbar-thin">
|
||||
<div
|
||||
v-for="item in cart"
|
||||
:key="`detail-${item.product_variant_id}-${item.stock_quality}`"
|
||||
class="rounded-lg border p-3"
|
||||
>
|
||||
<div v-for="item in cart" :key="`detail-${item.product_variant_id}-${item.stock_quality}`"
|
||||
class="rounded-lg border p-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-medium">{{ item.product_name }}</p>
|
||||
<p class="truncate text-xs text-muted-foreground">
|
||||
{{ item.variant_name }}
|
||||
· {{ item.stock_quality_label ?? (item.stock_quality === 'reject' ? 'Reject' : 'Bagus') }}
|
||||
· {{ item.stock_quality_label ?? (item.stock_quality === 'reject' ? 'Reject' : 'Bagus')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<span class="shrink-0 text-xs font-medium tabular-nums">{{ item.quantity }} pcs</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user