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