refactor: update product label in CuttingPosResultCatalogPanel for clarity and streamline component structure
This commit is contained in:
parent
318de0ba30
commit
42d4bc05bc
@ -40,7 +40,7 @@ const quickCreateOpen = ref(false);
|
|||||||
<template>
|
<template>
|
||||||
<Card class="min-w-0">
|
<Card class="min-w-0">
|
||||||
<CardHeader class="flex flex-row items-center justify-between pb-3 space-y-0">
|
<CardHeader class="flex flex-row items-center justify-between pb-3 space-y-0">
|
||||||
<CardTitle class="text-base">Pilih Produk Hasil</CardTitle>
|
<CardTitle class="text-base">Pilih Nama Produk</CardTitle>
|
||||||
<Button type="button" variant="outline" size="sm" @click="quickCreateOpen = true">
|
<Button type="button" variant="outline" size="sm" @click="quickCreateOpen = true">
|
||||||
<Plus class="size-3.5 mr-1" />
|
<Plus class="size-3.5 mr-1" />
|
||||||
Baru
|
Baru
|
||||||
@ -65,27 +65,18 @@ const quickCreateOpen = ref(false);
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
<div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
<PosCatalogCard
|
<PosCatalogCard v-for="product in filteredProducts" :key="product.id" :title="product.name"
|
||||||
v-for="product in filteredProducts"
|
:cover-image="getFirstCoverImage(product.variants)">
|
||||||
:key="product.id"
|
|
||||||
:title="product.name"
|
|
||||||
:cover-image="getFirstCoverImage(product.variants)"
|
|
||||||
>
|
|
||||||
<p v-if="!product.variants.length" class="px-3 py-4 text-sm text-muted-foreground">
|
<p v-if="!product.variants.length" class="px-3 py-4 text-sm text-muted-foreground">
|
||||||
Belum ada varian
|
Belum ada varian
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div v-for="variant in product.variants" :key="variant.id"
|
||||||
v-for="variant in product.variants"
|
class="flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200" :class="[
|
||||||
:key="variant.id"
|
|
||||||
class="flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200"
|
|
||||||
:class="[
|
|
||||||
'cursor-pointer hover:bg-muted/30',
|
'cursor-pointer hover:bg-muted/30',
|
||||||
getResultCartItem(variant.id)
|
getResultCartItem(variant.id)
|
||||||
? 'mx-1 my-0.5 rounded-md border-2 border-primary bg-primary/5'
|
? 'mx-1 my-0.5 rounded-md border-2 border-primary bg-primary/5'
|
||||||
: '',
|
: '',
|
||||||
]"
|
]" @click="!getResultCartItem(variant.id) && emit('add-result', product, variant)">
|
||||||
@click="!getResultCartItem(variant.id) && emit('add-result', product, variant)"
|
|
||||||
>
|
|
||||||
<PosCatalogVariantThumb :items="variant.images" />
|
<PosCatalogVariantThumb :items="variant.images" />
|
||||||
<div class="min-w-0 flex-1">
|
<div class="min-w-0 flex-1">
|
||||||
<p class="truncate text-sm font-medium">
|
<p class="truncate text-sm font-medium">
|
||||||
@ -100,46 +91,28 @@ const quickCreateOpen = ref(false);
|
|||||||
<span class="text-primary mr-1">
|
<span class="text-primary mr-1">
|
||||||
<Check class="size-4" />
|
<Check class="size-4" />
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button type="button" variant="outline" size="icon-sm"
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="icon-sm"
|
|
||||||
class="hover:text-destructive hover:bg-destructive/10"
|
class="hover:text-destructive hover:bg-destructive/10"
|
||||||
@click.stop="emit('decrease-result-qty', variant.id)"
|
@click.stop="emit('decrease-result-qty', variant.id)">
|
||||||
>
|
|
||||||
<Minus class="size-3.5" />
|
<Minus class="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<Button
|
<Button type="button" variant="outline" size="icon-sm"
|
||||||
type="button"
|
@click.stop="emit('decrease-result-qty', variant.id)">
|
||||||
variant="outline"
|
|
||||||
size="icon-sm"
|
|
||||||
@click.stop="emit('decrease-result-qty', variant.id)"
|
|
||||||
>
|
|
||||||
<Minus class="size-3.5" />
|
<Minus class="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
<span class="min-w-5 text-center text-xs font-semibold tabular-nums">
|
<span class="min-w-5 text-center text-xs font-semibold tabular-nums">
|
||||||
{{ getResultCartItem(variant.id)!.cutting_result }}
|
{{ getResultCartItem(variant.id)!.cutting_result }}
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button type="button" variant="outline" size="icon-sm"
|
||||||
type="button"
|
@click.stop="emit('add-result', product, variant)">
|
||||||
variant="outline"
|
|
||||||
size="icon-sm"
|
|
||||||
@click.stop="emit('add-result', product, variant)"
|
|
||||||
>
|
|
||||||
<Plus class="size-3.5" />
|
<Plus class="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button v-else type="button" variant="outline" size="icon-sm" class="shrink-0"
|
||||||
v-else
|
@click.stop="emit('add-result', product, variant)">
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="icon-sm"
|
|
||||||
class="shrink-0"
|
|
||||||
@click.stop="emit('add-result', product, variant)"
|
|
||||||
>
|
|
||||||
<Plus class="size-3.5" />
|
<Plus class="size-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -149,10 +122,6 @@ const quickCreateOpen = ref(false);
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<QuickCreateProductModal
|
<QuickCreateProductModal v-model:open="quickCreateOpen" :categories="categories" :selected-materials="materialCart"
|
||||||
v-model:open="quickCreateOpen"
|
@created="emit('product-created', $event)" />
|
||||||
:categories="categories"
|
|
||||||
:selected-materials="materialCart"
|
|
||||||
@created="emit('product-created', $event)"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user