Package system sms
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,282 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user