dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-29 08:43:12 +07:00
parent d316266da7
commit 06ad8a6e8a
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/pages/admin/manage/purchases/form/PurchasePosForm.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
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 { toast } from 'vue-sonner';
import { apiFetch } from '@/lib/api';
@ -816,6 +816,15 @@ function submit() {
: 'cursor-pointer hover:bg-accent'"
@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">
<p class="truncate font-medium">{{ selectedMaterialId ? '' : result.name + ' → ' }}{{ result.variant }}</p>
<p class="text-xs text-muted-foreground">