203 lines
9.7 KiB
Vue
203 lines
9.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { RowEditAction } from '@/components/button';
|
|
import { DataTableEmpty } from '@/components/data-table';
|
|
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
|
|
import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
|
|
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
|
|
import VerificationDetailModal from '@/components/owner-verification/VerificationDetailModal.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { usePaginationSummary } from '@/composables/usePaginationSummary';
|
|
import { groupedTableRowNumber } from '@/lib/grouped-table';
|
|
import type {
|
|
DataTableFilterDef,
|
|
DataTablePagination,
|
|
DataTablePaginationLink,
|
|
} from '@/types/data-table';
|
|
import type { RawMaterialListItem, RawMaterialPrice } from '@/types/raw-material';
|
|
import RawMaterialVariantEditModal from '../form/RawMaterialVariantEditModal.vue';
|
|
import DataTableActions from './data-table-actions.vue';
|
|
import RawMaterialStatusToggle from './raw-material-status-toggle.vue';
|
|
|
|
const props = defineProps<{
|
|
materials: RawMaterialListItem[];
|
|
firstItem?: number;
|
|
pagination?: DataTablePagination;
|
|
paginationLinks?: DataTablePaginationLink[];
|
|
filterDefs?: DataTableFilterDef[];
|
|
filterValues?: Record<string, string>;
|
|
loading?: boolean;
|
|
}>();
|
|
|
|
const search = defineModel<string>('search', { default: '' });
|
|
|
|
const emit = defineEmits<{
|
|
'filter-change': [key: string, value: string];
|
|
'filters-reset': [];
|
|
}>();
|
|
|
|
const showingCount = computed(() => props.materials.length);
|
|
const paginationSummary = usePaginationSummary(() => props.pagination, showingCount, 'bahan baku');
|
|
|
|
function rowNumber(index: number): number {
|
|
return groupedTableRowNumber(props.firstItem, index);
|
|
}
|
|
|
|
function allVariantImageUrls(material: RawMaterialListItem): string[] {
|
|
return material.prices.flatMap((price) => (price.images ?? []).map((img) => img.url));
|
|
}
|
|
|
|
function allVariantImageTitles(material: RawMaterialListItem): string[] {
|
|
return material.prices.flatMap((price) =>
|
|
(price.images ?? []).map(() => `${material.name} - ${price.variant}`)
|
|
);
|
|
}
|
|
|
|
const verificationModalOpen = ref(false);
|
|
const selectedRequestId = ref<number | null>(null);
|
|
|
|
function openVerificationDetail(requestId: number | undefined) {
|
|
if (requestId) {
|
|
selectedRequestId.value = requestId;
|
|
verificationModalOpen.value = true;
|
|
}
|
|
}
|
|
|
|
// ─── Modal Edit Varian State ─────────────────────────────────────────────────
|
|
const isEditing = ref(false);
|
|
const editingMaterial = ref<RawMaterialListItem | null>(null);
|
|
const editingPrice = ref<RawMaterialPrice | null>(null);
|
|
|
|
function openEditModal(price: RawMaterialPrice, material: RawMaterialListItem) {
|
|
editingMaterial.value = material;
|
|
editingPrice.value = price;
|
|
isEditing.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<DataTableToolbar v-model:search="search" :filter-defs="filterDefs" :filter-values="filterValues"
|
|
@filter-change="(key, value) => emit('filter-change', key, value)" @filters-reset="emit('filters-reset')" />
|
|
|
|
<div class="relative min-h-[100px]">
|
|
<!-- Subtle loading bar — tidak ganggu layout -->
|
|
<div v-if="loading" class="absolute top-0 left-0 right-0 h-0.5 z-10 overflow-hidden bg-primary/10">
|
|
<div class="h-full w-1/3 animate-[loading-bar_1.2s_ease-in-out_infinite] bg-primary rounded-full" />
|
|
</div>
|
|
|
|
<div v-if="materials.length" class="space-y-4">
|
|
<div v-for="(material, index) in materials" :key="material.id"
|
|
class="overflow-hidden rounded-md border bg-background">
|
|
<div
|
|
class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div class="flex min-w-0 items-start gap-3">
|
|
<span class="text-muted-foreground w-8 shrink-0 pt-0.5 text-center text-sm tabular-nums">
|
|
{{ rowNumber(index) }}
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h3 class="font-semibold leading-tight text-foreground text-base">
|
|
{{ material.name }}
|
|
</h3>
|
|
<Badge variant="secondary">
|
|
{{ material.unit_label }}
|
|
</Badge>
|
|
</div>
|
|
<p v-if="material.has_pending_request" class="text-sm text-amber-600">
|
|
{{ material.pending_request_submitted_by_name }} mengajukan {{
|
|
material.pending_request_action_label?.toLowerCase() }} bahan baku ini —
|
|
<button type="button" class="underline-offset-2 hover:underline font-semibold"
|
|
@click="openVerificationDetail(material.pending_request_id)">lihat</button>
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
|
<span>
|
|
Total stok <strong class="text-primary font-semibold">
|
|
{{ material.total_stock_formatted }}
|
|
</strong>
|
|
</span>
|
|
<span>
|
|
Total harga <strong class="text-primary font-semibold">
|
|
{{ material.total_inventory_value_formatted }}
|
|
</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
|
|
<RawMaterialStatusToggle :material="material" />
|
|
<DataTableActions :material="material" />
|
|
</div>
|
|
</div>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead class="w-10">#</TableHead>
|
|
<TableHead>Varian</TableHead>
|
|
<TableHead>Foto</TableHead>
|
|
<TableHead>Stok</TableHead>
|
|
<TableHead>Harga per Satuan</TableHead>
|
|
<TableHead class="w-24 text-center">Aksi</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-if="!material.prices.length" :key="`${material.id}-empty`">
|
|
<TableCell colspan="6" class="text-muted-foreground text-center">
|
|
Belum ada varian
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-for="(price, priceIndex) in material.prices" :key="price.id">
|
|
<TableCell class="text-muted-foreground tabular-nums text-center">
|
|
{{ priceIndex + 1 }}
|
|
</TableCell>
|
|
<TableCell class="font-medium">
|
|
{{ price.variant }}
|
|
</TableCell>
|
|
<TableCell>
|
|
<MediaThumbnailCell :items="price.images ?? []" :max-visible="1"
|
|
:title="`${material.name} - ${price.variant}`"
|
|
:all-urls="allVariantImageUrls(material)"
|
|
:all-titles="allVariantImageTitles(material)" />
|
|
</TableCell>
|
|
<TableCell class="tabular-nums">
|
|
{{ price.stock_formatted }}
|
|
</TableCell>
|
|
<TableCell class="tabular-nums">
|
|
{{ price.price_formatted }}
|
|
</TableCell>
|
|
<TableCell class="text-center">
|
|
<RowEditAction :disabled="material.has_pending_request" tooltip="Ubah Varian"
|
|
@click="openEditModal(price, material)" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTableEmpty v-else />
|
|
</div>
|
|
|
|
<GroupedTableFooter :summary="paginationSummary" :pagination="pagination" :pagination-links="paginationLinks" />
|
|
|
|
<VerificationDetailModal v-model:open="verificationModalOpen" :request-id="selectedRequestId" />
|
|
|
|
<!-- Dialog Modal Edit Varian -->
|
|
<RawMaterialVariantEditModal
|
|
v-model:open="isEditing"
|
|
:price="editingPrice"
|
|
:material="editingMaterial"
|
|
/>
|
|
</div>
|
|
</template>
|