283 lines
10 KiB
Vue
283 lines
10 KiB
Vue
<script setup>
|
||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||
import { Link, router } from "@inertiajs/vue3";
|
||
import { onMounted, onUnmounted, ref, computed } from "vue";
|
||
|
||
const props = defineProps({
|
||
package: { type: Object, required: true },
|
||
items: { type: Object, required: true },
|
||
preview: { type: [Object, null], default: null },
|
||
});
|
||
|
||
const refreshing = ref(false);
|
||
let timer = null;
|
||
|
||
const isRunning = computed(() => ["queued", "running"].includes(props.package.status));
|
||
|
||
// Derive a summary of payload/template/body from the first item on the page.
|
||
// Assumption: payload is the same across items in a package (both flows use a common payload).
|
||
const firstItem = computed(() => (props.items?.data && props.items.data.length ? props.items.data[0] : null));
|
||
const firstPayload = computed(() => (firstItem.value ? firstItem.value.payload_json || {} : {}));
|
||
const messageBody = computed(() => {
|
||
const b = firstPayload.value?.body;
|
||
if (typeof b === 'string') {
|
||
const t = b.trim();
|
||
return t.length ? t : null;
|
||
}
|
||
return null;
|
||
});
|
||
const payloadSummary = computed(() => ({
|
||
profile_id: firstPayload.value?.profile_id ?? null,
|
||
sender_id: firstPayload.value?.sender_id ?? null,
|
||
template_id: firstPayload.value?.template_id ?? null,
|
||
delivery_report: !!firstPayload.value?.delivery_report,
|
||
}));
|
||
|
||
function reload() {
|
||
refreshing.value = true;
|
||
router.reload({
|
||
only: ["package", "items"],
|
||
onFinish: () => (refreshing.value = false),
|
||
preserveScroll: true,
|
||
preserveState: true,
|
||
});
|
||
}
|
||
|
||
function dispatchPkg() {
|
||
router.post(
|
||
route("admin.packages.dispatch", props.package.id),
|
||
{},
|
||
{ onSuccess: reload }
|
||
);
|
||
}
|
||
function cancelPkg() {
|
||
router.post(
|
||
route("admin.packages.cancel", props.package.id),
|
||
{},
|
||
{ onSuccess: reload }
|
||
);
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (isRunning.value) {
|
||
timer = setInterval(reload, 3000);
|
||
}
|
||
});
|
||
onUnmounted(() => {
|
||
if (timer) clearInterval(timer);
|
||
});
|
||
|
||
async function copyText(text) {
|
||
if (!text) return;
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
} catch (e) {
|
||
// Fallback for older browsers
|
||
const ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
ta.style.position = 'fixed';
|
||
ta.style.opacity = '0';
|
||
document.body.appendChild(ta);
|
||
ta.focus();
|
||
ta.select();
|
||
try { document.execCommand('copy'); } catch (_) {}
|
||
document.body.removeChild(ta);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AdminLayout :title="`Paket #${package.id}`">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h2 class="text-base font-semibold text-gray-800">Paket #{{ package.id }}</h2>
|
||
<p class="text-xs text-gray-500">
|
||
UUID: <span class="font-mono">{{ package.uuid }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<Link
|
||
:href="route('admin.packages.index')"
|
||
class="text-sm text-gray-600 hover:underline"
|
||
>← Nazaj</Link
|
||
>
|
||
<button
|
||
v-if="['draft', 'failed'].includes(package.status)"
|
||
@click="dispatchPkg"
|
||
class="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm"
|
||
>
|
||
Zaženi
|
||
</button>
|
||
<button
|
||
v-if="isRunning"
|
||
@click="cancelPkg"
|
||
class="px-3 py-1.5 rounded bg-rose-600 text-white text-sm"
|
||
>
|
||
Prekliči
|
||
</button>
|
||
<button
|
||
v-if="!isRunning"
|
||
@click="reload"
|
||
class="px-3 py-1.5 rounded border text-sm"
|
||
>
|
||
Osveži
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-4 gap-3 mb-4">
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500">Status</p>
|
||
<p class="text-sm font-semibold mt-1 uppercase">{{ package.status }}</p>
|
||
</div>
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500">Skupaj</p>
|
||
<p class="text-sm font-semibold mt-1">{{ package.total_items }}</p>
|
||
</div>
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500">Poslano</p>
|
||
<p class="text-sm font-semibold mt-1 text-emerald-700">
|
||
{{ package.sent_count }}
|
||
</p>
|
||
</div>
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500">Neuspešno</p>
|
||
<p class="text-sm font-semibold mt-1 text-rose-700">{{ package.failed_count }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Payload / Message preview -->
|
||
<div class="mb-4 grid gap-3 sm:grid-cols-2">
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500 mb-2">Sporočilo</p>
|
||
<template v-if="preview && preview.content">
|
||
<div class="text-sm whitespace-pre-wrap text-gray-800">{{ preview.content }}</div>
|
||
<div class="mt-2">
|
||
<button @click="copyText(preview.content)" class="px-2 py-1 rounded border text-xs">Kopiraj</button>
|
||
</div>
|
||
<div v-if="preview.source === 'template' && preview.template" class="mt-2 text-xs text-gray-500">
|
||
Predloga: {{ preview.template.name }} (#{{ preview.template.id }})
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="messageBody" class="text-sm whitespace-pre-wrap text-gray-800">
|
||
{{ messageBody }}
|
||
</div>
|
||
<div v-else class="text-sm text-gray-600">
|
||
<template v-if="payloadSummary.template_id">
|
||
Uporabljena bo predloga #{{ payloadSummary.template_id }}.
|
||
</template>
|
||
<template v-else>
|
||
Vsebina sporočila ni določena.
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="rounded border bg-white p-3">
|
||
<p class="text-xs text-gray-500 mb-2">Meta / Nastavitve pošiljanja</p>
|
||
<dl class="text-sm text-gray-700 grid grid-cols-3 gap-y-1">
|
||
<dt class="col-span-1 text-gray-500">Profil</dt>
|
||
<dd class="col-span-2">{{ payloadSummary.profile_id ?? '—' }}</dd>
|
||
<dt class="col-span-1 text-gray-500">Pošiljatelj</dt>
|
||
<dd class="col-span-2">{{ payloadSummary.sender_id ?? '—' }}</dd>
|
||
<dt class="col-span-1 text-gray-500">Predloga</dt>
|
||
<dd class="col-span-2">{{ payloadSummary.template_id ?? '—' }}</dd>
|
||
<dt class="col-span-1 text-gray-500">Delivery report</dt>
|
||
<dd class="col-span-2">{{ payloadSummary.delivery_report ? 'da' : 'ne' }}</dd>
|
||
</dl>
|
||
<div v-if="package.meta && (package.meta.source || package.meta.skipped !== undefined)" class="mt-2 text-xs text-gray-500">
|
||
<span v-if="package.meta.source" class="mr-3">Vir: {{ package.meta.source }}</span>
|
||
<span v-if="package.meta.skipped !== undefined">Preskočeno: {{ package.meta.skipped }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-hidden rounded-md border bg-white">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr class="text-xs text-gray-500">
|
||
<th class="px-3 py-2 text-left font-medium">ID</th>
|
||
<th class="px-3 py-2 text-left font-medium">Prejemnik</th>
|
||
<th class="px-3 py-2 text-left font-medium">Sporočilo</th>
|
||
<th class="px-3 py-2 text-left font-medium">Status</th>
|
||
<th class="px-3 py-2 text-left font-medium">Napaka</th>
|
||
<th class="px-3 py-2 text-left font-medium">Provider ID</th>
|
||
<th class="px-3 py-2 text-left font-medium">Cena</th>
|
||
<th class="px-3 py-2 text-left font-medium">Valuta</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200 text-sm">
|
||
<tr v-for="it in items.data" :key="it.id">
|
||
<td class="px-3 py-2">{{ it.id }}</td>
|
||
<td class="px-3 py-2">
|
||
{{ (it.target_json && it.target_json.number) || "—" }}
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<div class="flex items-start gap-2">
|
||
<div class="text-xs text-gray-800 max-w-[420px] line-clamp-2 whitespace-pre-wrap">{{ it.rendered_preview || '—' }}</div>
|
||
<button v-if="it.rendered_preview" @click="copyText(it.rendered_preview)" class="px-2 py-0.5 rounded border text-xs">Kopiraj</button>
|
||
</div>
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<span
|
||
class="inline-flex items-center px-2 py-0.5 rounded text-xs"
|
||
:class="{
|
||
'bg-yellow-50 text-yellow-700': ['queued', 'processing'].includes(
|
||
it.status
|
||
),
|
||
'bg-emerald-50 text-emerald-700': it.status === 'sent',
|
||
'bg-rose-50 text-rose-700': it.status === 'failed',
|
||
'bg-gray-100 text-gray-600':
|
||
it.status === 'canceled' || it.status === 'skipped',
|
||
}"
|
||
>{{ it.status }}</span
|
||
>
|
||
</td>
|
||
<td class="px-3 py-2 text-xs text-rose-700">{{ it.last_error ?? "—" }}</td>
|
||
<td class="px-3 py-2 text-xs text-gray-500 font-mono">
|
||
{{ it.provider_message_id ?? "—" }}
|
||
</td>
|
||
<td class="px-3 py-2">{{ it.cost ?? "—" }}</td>
|
||
<td class="px-3 py-2">{{ it.currency ?? "—" }}</td>
|
||
</tr>
|
||
<tr v-if="!items.data?.length">
|
||
<td colspan="8" class="px-3 py-8 text-center text-sm text-gray-500">
|
||
Ni elementov za prikaz.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-4 flex items-center justify-between text-sm">
|
||
<div class="text-gray-600">
|
||
Prikazano {{ items.from || 0 }}–{{ items.to || 0 }} od {{ items.total || 0 }}
|
||
</div>
|
||
<div class="space-x-2">
|
||
<Link
|
||
:href="items.prev_page_url || '#'"
|
||
:class="[
|
||
'px-3 py-1.5 rounded border',
|
||
items.prev_page_url
|
||
? 'text-gray-700 hover:bg-gray-50'
|
||
: 'text-gray-400 cursor-not-allowed',
|
||
]"
|
||
>Nazaj</Link
|
||
>
|
||
<Link
|
||
:href="items.next_page_url || '#'"
|
||
:class="[
|
||
'px-3 py-1.5 rounded border',
|
||
items.next_page_url
|
||
? 'text-gray-700 hover:bg-gray-50'
|
||
: 'text-gray-400 cursor-not-allowed',
|
||
]"
|
||
>Naprej</Link
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="refreshing" class="mt-2 text-xs text-gray-500">Osveževanje ...</div>
|
||
</AdminLayout>
|
||
</template>
|