feat: enhance PurchasePosForm with image display for materials and add package icon for missing images

This commit is contained in:
Yoga Pangestu 2026-07-29 08:43:12 +07:00
parent d316266da7
commit 06ad8a6e8a

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useForm } from '@inertiajs/vue3'; import { useForm } from '@inertiajs/vue3';
import { Check, Plus, Search, ShoppingCart } from '@lucide/vue'; import { Check, Package, Plus, Search, ShoppingCart } from '@lucide/vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'; import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { apiFetch } from '@/lib/api'; import { apiFetch } from '@/lib/api';
@ -816,6 +816,15 @@ function submit() {
: 'cursor-pointer hover:bg-accent'" : 'cursor-pointer hover:bg-accent'"
@click="!isInCart(result.priceId) && selectExistingMaterial(result)" @click="!isInCart(result.priceId) && selectExistingMaterial(result)"
> >
<div class="size-10 shrink-0 overflow-hidden rounded border bg-muted/30">
<img v-if="result.images.length > 0"
:src="result.images[0].thumb_url"
:alt="result.variant"
class="size-full object-cover" />
<div v-else class="flex size-full items-center justify-center text-muted-foreground">
<Package class="size-4 opacity-40" />
</div>
</div>
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate font-medium">{{ selectedMaterialId ? '' : result.name + ' → ' }}{{ result.variant }}</p> <p class="truncate font-medium">{{ selectedMaterialId ? '' : result.name + ' → ' }}{{ result.variant }}</p>
<p class="text-xs text-muted-foreground"> <p class="text-xs text-muted-foreground">