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

feat: add media preview functionality for order transaction images
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-17 19:21:27 +07:00
parent 54b1f8c7f8
commit f337e50fa2
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/pages/admin/manage/orders/Show.vue
View File

@ -13,6 +13,7 @@ import { computed, ref } from 'vue';
import { toast } from 'vue-sonner';
import { RowDeleteAction, RowDetailAction, RowEditAction, RowStatusAction } from '@/components/button';
import BackButton from '@/components/button/BackButton.vue';
import MediaPreviewDialog from '@/components/media/MediaPreviewDialog.vue';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@ -53,6 +54,12 @@ const pendingAction = ref<OrderStatusAction | null>(null);
const canEdit = computed(() => props.order.is_editable && can('orders.update'));
const canDelete = computed(() => can('orders.delete'));
const previewOpen = ref(false);
function openPreview() {
previewOpen.value = true;
}
const { open: deleteConfirmOpen, processing: deleteProcessing, destroy: destroyOrder } = useDestroy({
url: destroy.url(props.order.id),
preserveScroll: false,
@ -473,12 +480,18 @@ const feeEntries = computed(() => {
</CardTitle>
</CardHeader>
<CardContent>
<a :href="order.photos.url" target="_blank" class="block overflow-hidden rounded-md border">
<img :src="order.photos.thumb_url" alt="Bukti Transaksi" class="w-full object-cover">
</a>
<button type="button"
class="block w-full cursor-zoom-in overflow-hidden rounded-md border"
@click="openPreview">
<img :src="order.photos.thumb_url" alt="Bukti Transaksi"
class="w-full object-cover">
</button>
</CardContent>
</Card>
<MediaPreviewDialog v-model:open="previewOpen" :url="order.photos?.url ?? null"
title="Bukti Transaksi" />
</div>
</div>
</AdminLayout>