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

feat: add numerical indexing to cutting material and result groups in tables

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 21:21:28 +07:00
parent 2cb283018c
commit 052a896c8f
4 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/pages/admin/manage/cuttings/Share.vue
View File

@ -168,7 +168,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
<template <template
v-for="group in groupedResults" v-for="(group, groupIndex) in groupedResults"
:key="group.key" :key="group.key"
> >
<TableRow <TableRow
@ -178,7 +178,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
colspan="5" colspan="5"
class="font-semibold" class="font-semibold"
> >
{{ group.name }} {{ groupIndex + 1 }}. {{ group.name }}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow <TableRow
@ -239,7 +239,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
<template <template
v-for="group in groupedMaterials" v-for="(group, groupIndex) in groupedMaterials"
:key="group.key" :key="group.key"
> >
<TableRow <TableRow
@ -250,7 +250,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
class="font-semibold" class="font-semibold"
> >
<template v-if="group.isCombination"> <template v-if="group.isCombination">
<span class="text-primary">{{ group.name }}</span> <span class="text-primary">{{ groupIndex + 1 }}. {{ group.name }}</span>
<Badge <Badge
variant="default" variant="default"
class="ml-2 font-normal" class="ml-2 font-normal"
@ -266,7 +266,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
</Badge> </Badge>
</template> </template>
<template v-else> <template v-else>
{{ group.name }} {{ groupIndex + 1 }}. {{ group.name }}
<Badge <Badge
v-if="group.unitLabel" v-if="group.unitLabel"
variant="secondary" variant="secondary"

21
resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
View File

@ -130,7 +130,7 @@ const totalCompleted = computed(() => props.cuttings.length);
<template v-if="cutting.materials.length"> <template v-if="cutting.materials.length">
<div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1"> <div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1">
<div v-if="group.type === 'combination'" class="mb-1"> <div v-if="group.type === 'combination'" class="mb-1">
<span class="text-primary font-medium text-[11px]">{{ group.name }} ({{ group.items.length }} bahan)</span> <span class="text-primary font-medium text-[11px]">{{ gi + 1 }}. {{ group.name }} ({{ group.items.length }} bahan)</span>
<span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1"> <span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1">
- Hasil: {{ group.items[0].combination_material_result }} pcs - Hasil: {{ group.items[0].combination_material_result }} pcs
</span> </span>
@ -140,14 +140,17 @@ const totalCompleted = computed(() => props.cuttings.length);
</li> </li>
</ul> </ul>
</div> </div>
<ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground"> <div v-else>
<li v-for="mat in group.items" :key="mat.id"> <span class="font-medium text-[11px]">{{ gi + 1 }}. {{ group.items[0]?.raw_material_name }}</span>
{{ mat.raw_material_name }} ({{ mat.variant }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }} <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
<template v-if="mat.material_result !== null && mat.material_result !== undefined"> <li v-for="mat in group.items" :key="mat.id">
→ {{ mat.material_result }} pcs {{ mat.variant }} - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
</template> <template v-if="mat.material_result !== null && mat.material_result !== undefined">
</li> → {{ mat.material_result }} pcs
</ul> </template>
</li>
</ul>
</div>
</div> </div>
</template> </template>
<ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground"> <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">

20
resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
View File

@ -235,13 +235,13 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
Belum ada bahan baku Belum ada bahan baku
</TableCell> </TableCell>
</TableRow> </TableRow>
<template v-else v-for="group in getGroupedMaterials( <template v-else v-for="(group, groupIndex) in getGroupedMaterials(
cutting.materials, cutting.materials,
)" :key="group.rawMaterialId"> )" :key="group.rawMaterialId">
<TableRow class="bg-muted/20 hover:bg-muted/20"> <TableRow class="bg-muted/20 hover:bg-muted/20">
<TableCell colspan="4" class="font-semibold text-foreground"> <TableCell colspan="4" class="font-semibold text-foreground">
<template v-if="group.isCombination"> <template v-if="group.isCombination">
<span class="text-primary">{{ group.rawMaterialName }}</span> <span class="text-primary">{{ groupIndex + 1 }}. {{ group.rawMaterialName }}</span>
<Badge variant="default" class="ml-2 font-normal"> <Badge variant="default" class="ml-2 font-normal">
{{ group.items.length }} bahan {{ group.items.length }} bahan
</Badge> </Badge>
@ -252,7 +252,7 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
</Badge> </Badge>
</template> </template>
<template v-else> <template v-else>
{{ group.rawMaterialName }} {{ groupIndex + 1 }}. {{ group.rawMaterialName }}
<Badge v-if="group.unitLabel" variant="secondary" <Badge v-if="group.unitLabel" variant="secondary"
class="ml-2 font-normal"> class="ml-2 font-normal">
{{ group.unitLabel }} {{ group.unitLabel }}
@ -260,9 +260,9 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
</template> </template>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow v-for="(material, index) in group.items" :key="material.id"> <TableRow v-for="material in group.items" :key="material.id">
<TableCell class="pl-6 font-medium"> <TableCell class="pl-6 font-medium">
{{ index + 1 }}. {{ material.variant }} {{ material.variant }}
</TableCell> </TableCell>
<TableCell> <TableCell>
<MediaThumbnailCell :items="material.images ?? [] <MediaThumbnailCell :items="material.images ?? []
@ -310,19 +310,17 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
Belum ada hasil produk Belum ada hasil produk
</TableCell> </TableCell>
</TableRow> </TableRow>
<template v-else v-for="group in getGroupedResults( <template v-else v-for="(group, groupIndex) in getGroupedResults(
cutting.results, cutting.results,
)" :key="group.productId"> )" :key="group.productId">
<TableRow class="bg-muted/20 hover:bg-muted/20"> <TableRow class="bg-muted/20 hover:bg-muted/20">
<TableCell colspan="5" class="font-semibold text-foreground"> <TableCell colspan="5" class="font-semibold text-foreground">
{{ group.productName }} {{ groupIndex + 1 }}. {{ group.productName }}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow v-for="(result, index) in group.items" :key="result.id"> <TableRow v-for="result in group.items" :key="result.id">
<TableCell class="pl-6 font-medium"> <TableCell class="pl-6 font-medium">
{{ index + 1 }}. {{ {{ result.product_variant?.name }}
result.product_variant?.name
}}
</TableCell> </TableCell>
<TableCell> <TableCell>
<MediaThumbnailCell :items="result.product_variant <MediaThumbnailCell :items="result.product_variant

21
resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
View File

@ -102,7 +102,7 @@ defineProps<{
<template v-if="cutting.materials.length"> <template v-if="cutting.materials.length">
<div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1"> <div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1">
<div v-if="group.type === 'combination'" class="mb-1"> <div v-if="group.type === 'combination'" class="mb-1">
<span class="text-primary font-medium text-[11px]">{{ group.name }} ({{ group.items.length }} bahan)</span> <span class="text-primary font-medium text-[11px]">{{ gi + 1 }}. {{ group.name }} ({{ group.items.length }} bahan)</span>
<span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1"> <span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1">
- Hasil: {{ group.items[0].combination_material_result }} pcs - Hasil: {{ group.items[0].combination_material_result }} pcs
</span> </span>
@ -112,14 +112,17 @@ defineProps<{
</li> </li>
</ul> </ul>
</div> </div>
<ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground"> <div v-else>
<li v-for="mat in group.items" :key="mat.id"> <span class="font-medium text-[11px]">{{ gi + 1 }}. {{ group.items[0]?.raw_material_name }}</span>
{{ mat.raw_material_name }} ({{ mat.variant }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }} <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
<template v-if="mat.material_result !== null && mat.material_result !== undefined"> <li v-for="mat in group.items" :key="mat.id">
→ {{ mat.material_result }} pcs {{ mat.variant }} - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
</template> <template v-if="mat.material_result !== null && mat.material_result !== undefined">
</li> → {{ mat.material_result }} pcs
</ul> </template>
</li>
</ul>
</div>
</div> </div>
</template> </template>
<ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground"> <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">