refactor: restructure results section in Share.vue for improved clarity; enhance display of cutting results with a new table format and computed logic for grouped results
This commit is contained in:
Yoga Pangestu
parent
27f55ef18e
commit
02fb2045d2
@ -154,33 +154,77 @@ const groupedResults = computed<GroupedResults[]>(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="border-b p-6">
|
||||
<h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-lg border p-3">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Total Hasil Cutting
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold text-primary">
|
||||
{{ cutting.total_result_pieces ?? 0 }} pcs
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
cutting.total_material_usage_summary_formatted
|
||||
"
|
||||
class="rounded-lg border p-3"
|
||||
>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Total Pemakaian Bahan
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold text-primary">
|
||||
{{
|
||||
cutting.total_material_usage_summary_formatted
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<!-- Results Section -->
|
||||
<div v-if="cutting.results.length" class="border-b p-6">
|
||||
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
|
||||
<div class="overflow-hidden rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Varian</TableHead>
|
||||
<TableHead>Foto</TableHead>
|
||||
<TableHead class="text-right"
|
||||
>Hasil</TableHead
|
||||
>
|
||||
<TableHead class="text-right"
|
||||
>Sample</TableHead
|
||||
>
|
||||
<TableHead class="text-right"
|
||||
>Diluar Sample</TableHead
|
||||
>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template
|
||||
v-for="group in groupedResults"
|
||||
:key="group.key"
|
||||
>
|
||||
<TableRow
|
||||
class="bg-muted/20 hover:bg-muted/20"
|
||||
>
|
||||
<TableCell
|
||||
colspan="5"
|
||||
class="font-semibold"
|
||||
>
|
||||
{{ group.name }}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow
|
||||
v-for="result in group.items"
|
||||
:key="result.id"
|
||||
>
|
||||
<TableCell class="pl-6">
|
||||
{{ result.product_variant?.name }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<MediaThumbnailCell
|
||||
:items="
|
||||
result.product_variant
|
||||
?.images ?? []
|
||||
"
|
||||
:max-visible="1"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.cutting_result }} pcs
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.sample }} pcs
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.original_outside_sample }}
|
||||
pcs
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</template>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -281,77 +325,33 @@ const groupedResults = computed<GroupedResults[]>(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div v-if="cutting.results.length" class="p-6">
|
||||
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
|
||||
<div class="overflow-hidden rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Varian</TableHead>
|
||||
<TableHead>Foto</TableHead>
|
||||
<TableHead class="text-right"
|
||||
>Hasil</TableHead
|
||||
>
|
||||
<TableHead class="text-right"
|
||||
>Sample</TableHead
|
||||
>
|
||||
<TableHead class="text-right"
|
||||
>Diluar Sample</TableHead
|
||||
>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template
|
||||
v-for="group in groupedResults"
|
||||
:key="group.key"
|
||||
>
|
||||
<TableRow
|
||||
class="bg-muted/20 hover:bg-muted/20"
|
||||
>
|
||||
<TableCell
|
||||
colspan="5"
|
||||
class="font-semibold"
|
||||
>
|
||||
{{ group.name }}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow
|
||||
v-for="result in group.items"
|
||||
:key="result.id"
|
||||
>
|
||||
<TableCell class="pl-6">
|
||||
{{ result.product_variant?.name }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<MediaThumbnailCell
|
||||
:items="
|
||||
result.product_variant
|
||||
?.images ?? []
|
||||
"
|
||||
:max-visible="1"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.cutting_result }} pcs
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.sample }} pcs
|
||||
</TableCell>
|
||||
<TableCell
|
||||
class="text-right tabular-nums"
|
||||
>
|
||||
{{ result.original_outside_sample }}
|
||||
pcs
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</template>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<!-- Summary -->
|
||||
<div class="p-6">
|
||||
<h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-lg border p-3">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Total Hasil Cutting
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold text-primary">
|
||||
{{ cutting.total_result_pieces ?? 0 }} pcs
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
cutting.total_material_usage_summary_formatted
|
||||
"
|
||||
class="rounded-lg border p-3"
|
||||
>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Total Pemakaian Bahan
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold text-primary">
|
||||
{{
|
||||
cutting.total_material_usage_summary_formatted
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user