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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Summary -->
|
<!-- Results Section -->
|
||||||
<div class="border-b p-6">
|
<div v-if="cutting.results.length" class="border-b p-6">
|
||||||
<h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
|
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
|
||||||
<div class="grid gap-4 sm:grid-cols-2">
|
<div class="overflow-hidden rounded-md border">
|
||||||
<div class="rounded-lg border p-3">
|
<Table>
|
||||||
<p class="text-xs text-muted-foreground">
|
<TableHeader>
|
||||||
Total Hasil Cutting
|
<TableRow>
|
||||||
</p>
|
<TableHead>Varian</TableHead>
|
||||||
<p class="mt-1 text-lg font-semibold text-primary">
|
<TableHead>Foto</TableHead>
|
||||||
{{ cutting.total_result_pieces ?? 0 }} pcs
|
<TableHead class="text-right"
|
||||||
</p>
|
>Hasil</TableHead
|
||||||
</div>
|
>
|
||||||
<div
|
<TableHead class="text-right"
|
||||||
v-if="
|
>Sample</TableHead
|
||||||
cutting.total_material_usage_summary_formatted
|
>
|
||||||
"
|
<TableHead class="text-right"
|
||||||
class="rounded-lg border p-3"
|
>Diluar Sample</TableHead
|
||||||
>
|
>
|
||||||
<p class="text-xs text-muted-foreground">
|
</TableRow>
|
||||||
Total Pemakaian Bahan
|
</TableHeader>
|
||||||
</p>
|
<TableBody>
|
||||||
<p class="mt-1 text-lg font-semibold text-primary">
|
<template
|
||||||
{{
|
v-for="group in groupedResults"
|
||||||
cutting.total_material_usage_summary_formatted
|
:key="group.key"
|
||||||
}}
|
>
|
||||||
</p>
|
<TableRow
|
||||||
</div>
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -281,77 +325,33 @@ const groupedResults = computed<GroupedResults[]>(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Results Section -->
|
<!-- Summary -->
|
||||||
<div v-if="cutting.results.length" class="p-6">
|
<div class="p-6">
|
||||||
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
|
<h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
|
||||||
<div class="overflow-hidden rounded-md border">
|
<div class="grid gap-4 sm:grid-cols-2">
|
||||||
<Table>
|
<div class="rounded-lg border p-3">
|
||||||
<TableHeader>
|
<p class="text-xs text-muted-foreground">
|
||||||
<TableRow>
|
Total Hasil Cutting
|
||||||
<TableHead>Varian</TableHead>
|
</p>
|
||||||
<TableHead>Foto</TableHead>
|
<p class="mt-1 text-lg font-semibold text-primary">
|
||||||
<TableHead class="text-right"
|
{{ cutting.total_result_pieces ?? 0 }} pcs
|
||||||
>Hasil</TableHead
|
</p>
|
||||||
>
|
</div>
|
||||||
<TableHead class="text-right"
|
<div
|
||||||
>Sample</TableHead
|
v-if="
|
||||||
>
|
cutting.total_material_usage_summary_formatted
|
||||||
<TableHead class="text-right"
|
"
|
||||||
>Diluar Sample</TableHead
|
class="rounded-lg border p-3"
|
||||||
>
|
>
|
||||||
</TableRow>
|
<p class="text-xs text-muted-foreground">
|
||||||
</TableHeader>
|
Total Pemakaian Bahan
|
||||||
<TableBody>
|
</p>
|
||||||
<template
|
<p class="mt-1 text-lg font-semibold text-primary">
|
||||||
v-for="group in groupedResults"
|
{{
|
||||||
:key="group.key"
|
cutting.total_material_usage_summary_formatted
|
||||||
>
|
}}
|
||||||
<TableRow
|
</p>
|
||||||
class="bg-muted/20 hover:bg-muted/20"
|
</div>
|
||||||
>
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user