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

refactor: enhance StockVerifyDialog layout by improving material display with thumbnails and better alignment for improved user interaction

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 16:28:42 +07:00
parent 60aae40575
commit 87adc68376
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
View File

@ -273,7 +273,29 @@ function submitVerify() {
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<div v-for="material in group.items" :key="material.id" <div v-for="material in group.items" :key="material.id"
class="rounded-md border bg-background p-2.5"> class="flex items-center gap-3 rounded-md border bg-background p-2.5">
<div class="shrink-0">
<MediaThumbnailCell :items="material.images ?? material.raw_material_price?.images ?? []" :max-visible="1" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium">
{{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ material.variant || material.raw_material_price?.variant }}
</p>
</div>
</div>
</div>
</div>
<template v-else>
<div v-for="material in group.items" :key="material.id"
class="flex items-center gap-3 rounded-lg border p-3">
<div class="shrink-0">
<MediaThumbnailCell :items="material.images ?? material.raw_material_price?.images ?? []" :max-visible="1" />
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium"> <p class="truncate text-sm font-medium">
{{ material.raw_material_name || material.raw_material_price?.raw_material?.name }} {{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
</p> </p>
@ -282,18 +304,6 @@ function submitVerify() {
</p> </p>
</div> </div>
</div> </div>
</div>
<template v-else>
<div v-for="material in group.items" :key="material.id"
class="rounded-lg border p-3">
<p class="truncate text-sm font-medium">
{{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ material.variant || material.raw_material_price?.variant }}
</p>
</div>
</template> </template>
</template> </template>
</div> </div>