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

refactor: integrate MediaThumbnailCell component into CuttingPosMaterialSummaryItems and CuttingPosResultSummaryItems for enhanced visual representation of items
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 23:14:26 +07:00
parent bd781b8f76
commit 78dcc4b39d
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
resources/js/pages/admin/manage/cuttings/form/CuttingPosMaterialSummaryItems.vue
View File

@ -3,6 +3,7 @@ import { Layers, Trash2 } from '@lucide/vue';
import { computed } from 'vue';
import { DecimalInput } from '@/components/form/decimal-input';
import { NumberInput } from '@/components/form/number-input';
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
@ -131,13 +132,22 @@ function setCombinationResult(combinationId: number | undefined, value: string)
<div v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
class="rounded-md border bg-background p-2.5">
<div class="mb-1.5 flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-sm font-medium">
{{ item.raw_material_name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ item.variant }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
</p>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<MediaThumbnailCell
v-if="item.images?.length"
:items="item.images"
:max-visible="1"
/>
<div class="min-w-0">
<p class="truncate text-sm font-medium">
{{ item.raw_material_name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ item.variant }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
</p>
</div>
</div>
</div>
<Button type="button" variant="ghost" size="icon"
class="size-6 shrink-0 text-destructive hover:text-destructive"
@ -164,13 +174,22 @@ function setCombinationResult(combinationId: number | undefined, value: string)
<div v-else v-for="{ item, index } in group.items" :key="item.raw_material_price_id"
class="rounded-lg border p-3">
<div class="mb-2 flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-sm font-medium">
{{ item.raw_material_name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ item.variant }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
</p>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<MediaThumbnailCell
v-if="item.images?.length"
:items="item.images"
:max-visible="1"
/>
<div class="min-w-0">
<p class="truncate text-sm font-medium">
{{ item.raw_material_name }}
</p>
<p class="truncate text-xs text-muted-foreground">
{{ item.variant }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
</p>
</div>
</div>
</div>
<Button type="button" variant="ghost" size="icon"
class="size-7 shrink-0 text-destructive hover:text-destructive"

24
resources/js/pages/admin/manage/cuttings/form/CuttingPosResultSummaryItems.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { Trash2 } from '@lucide/vue';
import { NumberInput } from '@/components/form/number-input';
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
@ -43,13 +44,22 @@ const emit = defineEmits<{
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
<div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3">
<div class="mb-2 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 }} · Stok {{ item.stock }} pcs
</p>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<MediaThumbnailCell
v-if="item.images?.length"
:items="item.images"
:max-visible="1"
/>
<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 }} · Stok {{ item.stock }} pcs
</p>
</div>
</div>
</div>
<Button type="button" variant="ghost" size="icon"
class="size-7 shrink-0 text-destructive hover:text-destructive" @click="emit('remove', index)">