587 lines
21 KiB
Vue
587 lines
21 KiB
Vue
<script setup>
|
||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||
import { Link, router, useForm } from "@inertiajs/vue3";
|
||
import { ref, computed } from "vue";
|
||
|
||
const props = defineProps({
|
||
packages: { type: Object, required: true },
|
||
profiles: { type: Array, default: () => [] },
|
||
senders: { type: Array, default: () => [] },
|
||
templates: { type: Array, default: () => [] },
|
||
segments: { type: Array, default: () => [] },
|
||
clients: { type: Array, default: () => [] },
|
||
});
|
||
|
||
function goShow(id) {
|
||
router.visit(route("admin.packages.show", id));
|
||
}
|
||
|
||
const showCreate = ref(false);
|
||
const createMode = ref("numbers"); // 'numbers' | 'contracts'
|
||
const form = useForm({
|
||
type: "sms",
|
||
name: "",
|
||
description: "",
|
||
profile_id: null,
|
||
sender_id: null,
|
||
template_id: null,
|
||
delivery_report: false,
|
||
body: "",
|
||
numbers: "", // one per line
|
||
});
|
||
|
||
const filteredSenders = computed(() => {
|
||
if (!form.profile_id) return props.senders;
|
||
return props.senders.filter((s) => s.profile_id === form.profile_id);
|
||
});
|
||
|
||
function submitCreate() {
|
||
const lines = (form.numbers || "")
|
||
.split(/\r?\n/)
|
||
.map((s) => s.trim())
|
||
.filter(Boolean);
|
||
if (!lines.length) return;
|
||
if (!form.profile_id && !form.template_id) {
|
||
// require profile if no template/default profile resolution available
|
||
alert("Izberi SMS profil ali predlogo.");
|
||
return;
|
||
}
|
||
if (!form.template_id && !form.body) {
|
||
alert("Vnesi vsebino sporočila ali izberi predlogo.");
|
||
return;
|
||
}
|
||
|
||
const payload = {
|
||
type: "sms",
|
||
name: form.name || `SMS paket ${new Date().toLocaleString()}`,
|
||
description: form.description || "",
|
||
items: lines.map((number) => ({
|
||
number,
|
||
payload: {
|
||
profile_id: form.profile_id,
|
||
sender_id: form.sender_id,
|
||
template_id: form.template_id,
|
||
delivery_report: !!form.delivery_report,
|
||
body: form.body && form.body.trim() ? form.body.trim() : null,
|
||
},
|
||
})),
|
||
};
|
||
|
||
router.post(route("admin.packages.store"), payload, {
|
||
onSuccess: () => {
|
||
form.reset();
|
||
showCreate.value = false;
|
||
router.reload({ only: ["packages"] });
|
||
},
|
||
});
|
||
}
|
||
|
||
// Contracts mode state & actions
|
||
const contracts = ref({
|
||
data: [],
|
||
meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
||
});
|
||
const segmentId = ref(null);
|
||
const search = ref("");
|
||
const clientId = ref(null);
|
||
const onlyMobile = ref(false);
|
||
const onlyValidated = ref(false);
|
||
const loadingContracts = ref(false);
|
||
const selectedContractIds = ref(new Set());
|
||
const deletingId = ref(null);
|
||
const creatingFromContracts = ref(false);
|
||
|
||
const allOnPageSelected = computed(() => {
|
||
const ids = (contracts.value.data || []).map((c) => c.id);
|
||
if (!ids.length) return false;
|
||
return ids.every((id) => selectedContractIds.value.has(id));
|
||
});
|
||
|
||
function pageContractIds() {
|
||
return (contracts.value.data || []).map((c) => c.id);
|
||
}
|
||
|
||
function toggleSelectAllOnPage() {
|
||
const ids = pageContractIds();
|
||
if (!ids.length) return;
|
||
const set = new Set(selectedContractIds.value);
|
||
if (allOnPageSelected.value) {
|
||
// deselect all visible
|
||
ids.forEach((id) => set.delete(id));
|
||
} else {
|
||
// select all visible
|
||
ids.forEach((id) => set.add(id));
|
||
}
|
||
selectedContractIds.value = new Set(Array.from(set));
|
||
}
|
||
|
||
async function loadContracts(url = null) {
|
||
if (!segmentId.value) {
|
||
contracts.value = {
|
||
data: [],
|
||
meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
||
};
|
||
return;
|
||
}
|
||
loadingContracts.value = true;
|
||
try {
|
||
const target =
|
||
url ||
|
||
`${route("admin.packages.contracts")}?segment_id=${encodeURIComponent(
|
||
segmentId.value
|
||
)}${search.value ? `&q=${encodeURIComponent(search.value)}` : ""}${
|
||
clientId.value ? `&client_id=${encodeURIComponent(clientId.value)}` : ""
|
||
}${onlyMobile.value ? `&only_mobile=1` : ""}${
|
||
onlyValidated.value ? `&only_validated=1` : ""
|
||
}`;
|
||
const res = await fetch(target, {
|
||
headers: { "X-Requested-With": "XMLHttpRequest" },
|
||
});
|
||
const json = await res.json();
|
||
contracts.value = {
|
||
data: json.data || [],
|
||
meta: json.meta || { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
||
};
|
||
} finally {
|
||
loadingContracts.value = false;
|
||
}
|
||
}
|
||
|
||
function toggleSelectContract(id) {
|
||
const s = selectedContractIds.value;
|
||
if (s.has(id)) {
|
||
s.delete(id);
|
||
} else {
|
||
s.add(id);
|
||
}
|
||
// force reactivity
|
||
selectedContractIds.value = new Set(Array.from(s));
|
||
}
|
||
|
||
function clearSelection() {
|
||
selectedContractIds.value = new Set();
|
||
}
|
||
|
||
function deletePackage(pkg) {
|
||
if (!pkg || pkg.status !== 'draft') return;
|
||
if (!confirm(`Izbrišem paket #${pkg.id}?`)) return;
|
||
deletingId.value = pkg.id;
|
||
router.delete(route('admin.packages.destroy', pkg.id), {
|
||
onSuccess: () => {
|
||
router.reload({ only: ['packages'] });
|
||
},
|
||
onFinish: () => {
|
||
deletingId.value = null;
|
||
},
|
||
});
|
||
}
|
||
|
||
function goContractsPage(delta) {
|
||
const { current_page } = contracts.value.meta;
|
||
const nextPage = current_page + delta;
|
||
if (nextPage < 1 || nextPage > contracts.value.meta.last_page) return;
|
||
const base = `${route("admin.packages.contracts")}?segment_id=${encodeURIComponent(
|
||
segmentId.value
|
||
)}${search.value ? `&q=${encodeURIComponent(search.value)}` : ""}${
|
||
clientId.value ? `&client_id=${encodeURIComponent(clientId.value)}` : ""
|
||
}${onlyMobile.value ? `&only_mobile=1` : ""}${
|
||
onlyValidated.value ? `&only_validated=1` : ""
|
||
}&page=${nextPage}`;
|
||
loadContracts(base);
|
||
}
|
||
|
||
function submitCreateFromContracts() {
|
||
const ids = Array.from(selectedContractIds.value);
|
||
if (!ids.length) return;
|
||
// Optional quick client-side sanity: if all selected are from current page and none have phones, warn early.
|
||
const visibleById = new Map((contracts.value.data || []).map((c) => [c.id, c]));
|
||
const selectedVisible = ids.map((id) => visibleById.get(id)).filter(Boolean);
|
||
if (selectedVisible.length && selectedVisible.every((c) => !c?.selected_phone)) {
|
||
alert("Za izbrane pogodbe ni mogoče najti prejemnikov (telefonov).");
|
||
return;
|
||
}
|
||
const payload = {
|
||
type: "sms",
|
||
name: form.name || `SMS paket (segment) ${new Date().toLocaleString()}`,
|
||
description: form.description || "",
|
||
payload: {
|
||
profile_id: form.profile_id,
|
||
sender_id: form.sender_id,
|
||
template_id: form.template_id,
|
||
delivery_report: !!form.delivery_report,
|
||
body: form.body && form.body.trim() ? form.body.trim() : null,
|
||
},
|
||
contract_ids: ids,
|
||
};
|
||
|
||
creatingFromContracts.value = true;
|
||
router.post(route("admin.packages.store-from-contracts"), payload, {
|
||
onSuccess: () => {
|
||
clearSelection();
|
||
showCreate.value = false;
|
||
router.reload({ only: ["packages"] });
|
||
},
|
||
onError: (errors) => {
|
||
// Show the first validation error if present
|
||
const first = errors && Object.values(errors)[0];
|
||
if (first) {
|
||
alert(String(first));
|
||
}
|
||
},
|
||
onFinish: () => {
|
||
creatingFromContracts.value = false;
|
||
},
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AdminLayout title="SMS paketi">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-base font-semibold text-gray-800">Seznam paketov</h2>
|
||
<button
|
||
@click="showCreate = !showCreate"
|
||
class="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm"
|
||
>
|
||
{{ showCreate ? "Zapri" : "Nov paket" }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="showCreate" class="mb-6 rounded border bg-white p-4">
|
||
<div class="mb-4 flex items-center gap-4 text-sm">
|
||
<label class="inline-flex items-center gap-2">
|
||
<input type="radio" value="numbers" v-model="createMode" /> Vnos številk
|
||
</label>
|
||
<label class="inline-flex items-center gap-2">
|
||
<input type="radio" value="contracts" v-model="createMode" /> Iz pogodb
|
||
(segment)
|
||
</label>
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-3 gap-4">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">Profil</label>
|
||
<select
|
||
v-model.number="form.profile_id"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
>
|
||
<option :value="null">—</option>
|
||
<option v-for="p in profiles" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">Pošiljatelj</label>
|
||
<select
|
||
v-model.number="form.sender_id"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
>
|
||
<option :value="null">—</option>
|
||
<option v-for="s in filteredSenders" :key="s.id" :value="s.id">
|
||
{{ s.sname }} <span v-if="s.phone_number">({{ s.phone_number }})</span>
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">Predloga</label>
|
||
<select
|
||
v-model.number="form.template_id"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
>
|
||
<option :value="null">—</option>
|
||
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="sm:col-span-3">
|
||
<label class="block text-xs text-gray-500 mb-1">Vsebina (če ni predloge)</label>
|
||
<textarea
|
||
v-model="form.body"
|
||
rows="3"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
placeholder="Sporočilo..."
|
||
></textarea>
|
||
<label class="inline-flex items-center gap-2 mt-2 text-sm text-gray-600">
|
||
<input type="checkbox" v-model="form.delivery_report" /> Zahtevaj delivery
|
||
report
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Numbers mode -->
|
||
<template v-if="createMode === 'numbers'">
|
||
<div class="sm:col-span-3">
|
||
<label class="block text-xs text-gray-500 mb-1"
|
||
>Telefonske številke (ena na vrstico)</label
|
||
>
|
||
<textarea
|
||
v-model="form.numbers"
|
||
rows="4"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
placeholder="+38640123456
|
||
+38640123457"
|
||
></textarea>
|
||
</div>
|
||
<div class="sm:col-span-3 flex items-center justify-end gap-2">
|
||
<button
|
||
@click="submitCreate"
|
||
class="px-3 py-1.5 rounded bg-emerald-600 text-white text-sm"
|
||
>
|
||
Ustvari paket
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Contracts mode -->
|
||
<template v-else>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">Segment</label>
|
||
<select
|
||
v-model.number="segmentId"
|
||
@change="loadContracts()"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
>
|
||
<option :value="null">—</option>
|
||
<option v-for="s in segments" :key="s.id" :value="s.id">
|
||
{{ s.name }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 mb-1">Stranka</label>
|
||
<select
|
||
v-model.number="clientId"
|
||
@change="loadContracts()"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
>
|
||
<option :value="null">—</option>
|
||
<option v-for="c in clients" :key="c.id" :value="c.id">{{ c.name }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="sm:col-span-2">
|
||
<label class="block text-xs text-gray-500 mb-1">Iskanje</label>
|
||
<div class="flex gap-2">
|
||
<input
|
||
v-model="search"
|
||
@keyup.enter="loadContracts()"
|
||
type="text"
|
||
class="w-full rounded border-gray-300 text-sm"
|
||
placeholder="referenca..."
|
||
/>
|
||
<button @click="loadContracts()" class="px-3 py-1.5 rounded border text-sm">
|
||
Išči
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="sm:col-span-3 flex items-center gap-6 text-sm text-gray-700">
|
||
<label class="inline-flex items-center gap-2">
|
||
<input type="checkbox" v-model="onlyMobile" @change="loadContracts()" />
|
||
Samo s mobilno številko
|
||
</label>
|
||
<label class="inline-flex items-center gap-2">
|
||
<input type="checkbox" v-model="onlyValidated" @change="loadContracts()" />
|
||
Telefonska številka mora biti potrjena
|
||
</label>
|
||
</div>
|
||
<div class="sm:col-span-3">
|
||
<div class="overflow-hidden rounded 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 w-8">
|
||
<input
|
||
type="checkbox"
|
||
:checked="allOnPageSelected"
|
||
:disabled="!contracts.data?.length"
|
||
@change="toggleSelectAllOnPage"
|
||
title="Izberi vse na strani"
|
||
/>
|
||
</th>
|
||
<th class="px-3 py-2 text-left">Pogodba</th>
|
||
<th class="px-3 py-2 text-left">Primer</th>
|
||
<th class="px-3 py-2 text-left">Stranka</th>
|
||
<th class="px-3 py-2 text-left">Izbrana številka</th>
|
||
<th class="px-3 py-2 text-left">Opomba</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200" v-if="!loadingContracts">
|
||
<tr v-for="c in contracts.data" :key="c.id" class="text-sm">
|
||
<td class="px-3 py-2">
|
||
<input
|
||
type="checkbox"
|
||
:checked="selectedContractIds.has(c.id)"
|
||
@change="toggleSelectContract(c.id)"
|
||
/>
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<div class="font-mono text-xs text-gray-600">{{ c.uuid }}</div>
|
||
<div class="text-xs text-gray-800">{{ c.reference }}</div>
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<div class="text-xs text-gray-800">
|
||
{{ c.person?.full_name || "—" }}
|
||
</div>
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<div class="text-xs text-gray-800">{{ c.client?.name || "—" }}</div>
|
||
</td>
|
||
<td class="px-3 py-2">
|
||
<div v-if="c.selected_phone" class="text-xs">
|
||
{{ c.selected_phone.number }}
|
||
<span
|
||
class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 text-gray-600 text-[10px]"
|
||
>{{ c.selected_phone.validated ? "validated" : "unverified" }} /
|
||
{{ c.selected_phone.type || "unknown" }}</span
|
||
>
|
||
</div>
|
||
<div v-else class="text-xs text-gray-500">—</div>
|
||
</td>
|
||
<td class="px-3 py-2 text-xs text-gray-500">
|
||
{{ c.no_phone_reason || "—" }}
|
||
</td>
|
||
</tr>
|
||
<tr v-if="!contracts.data?.length">
|
||
<td colspan="6" class="px-3 py-8 text-center text-sm text-gray-500">
|
||
Ni rezultatov.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody v-else>
|
||
<tr>
|
||
<td colspan="6" class="px-3 py-6 text-center text-sm text-gray-500">
|
||
Nalaganje...
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="mt-3 flex items-center justify-between text-sm">
|
||
<div class="text-gray-600">
|
||
Prikazano stran {{ contracts.meta.current_page }} od
|
||
{{ contracts.meta.last_page }} (skupaj {{ contracts.meta.total }})
|
||
</div>
|
||
<div class="space-x-2">
|
||
<button
|
||
@click="goContractsPage(-1)"
|
||
:disabled="contracts.meta.current_page <= 1"
|
||
class="px-3 py-1.5 rounded border text-sm disabled:opacity-50"
|
||
>
|
||
Nazaj
|
||
</button>
|
||
<button
|
||
@click="goContractsPage(1)"
|
||
:disabled="contracts.meta.current_page >= contracts.meta.last_page"
|
||
class="px-3 py-1.5 rounded border text-sm disabled:opacity-50"
|
||
>
|
||
Naprej
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sm:col-span-3 flex items-center justify-end gap-2">
|
||
<div class="text-sm text-gray-600 mr-auto">
|
||
Izbrano: {{ selectedContractIds.size }}
|
||
</div>
|
||
<button
|
||
@click="submitCreateFromContracts"
|
||
:disabled="selectedContractIds.size === 0 || creatingFromContracts"
|
||
class="px-3 py-1.5 rounded bg-emerald-600 text-white text-sm disabled:opacity-50"
|
||
>
|
||
Ustvari paket
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</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">UUID</th>
|
||
<th class="px-3 py-2 text-left font-medium">Ime</th>
|
||
<th class="px-3 py-2 text-left font-medium">Tip</th>
|
||
<th class="px-3 py-2 text-left font-medium">Status</th>
|
||
<th class="px-3 py-2 text-left font-medium">Skupaj</th>
|
||
<th class="px-3 py-2 text-left font-medium">Poslano</th>
|
||
<th class="px-3 py-2 text-left font-medium">Neuspešno</th>
|
||
<th class="px-3 py-2 text-left font-medium">Zaključeno</th>
|
||
<th class="px-3 py-2"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200">
|
||
<tr v-for="p in packages.data" :key="p.id" class="text-sm">
|
||
<td class="px-3 py-2">{{ p.id }}</td>
|
||
<td class="px-3 py-2 font-mono text-xs text-gray-500">{{ p.uuid }}</td>
|
||
<td class="px-3 py-2">{{ p.name ?? "—" }}</td>
|
||
<td class="px-3 py-2 uppercase text-xs text-gray-600">{{ p.type }}</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', 'running'].includes(
|
||
p.status
|
||
),
|
||
'bg-emerald-50 text-emerald-700': p.status === 'completed',
|
||
'bg-rose-50 text-rose-700': p.status === 'failed',
|
||
'bg-gray-100 text-gray-600': p.status === 'draft',
|
||
}"
|
||
>{{ p.status }}</span
|
||
>
|
||
</td>
|
||
<td class="px-3 py-2">{{ p.total_items }}</td>
|
||
<td class="px-3 py-2">{{ p.sent_count }}</td>
|
||
<td class="px-3 py-2">{{ p.failed_count }}</td>
|
||
<td class="px-3 py-2 text-xs text-gray-500">{{ p.finished_at ?? "—" }}</td>
|
||
<td class="px-3 py-2 text-right space-x-3">
|
||
<button @click="goShow(p.id)" class="text-indigo-600 hover:underline text-sm">
|
||
Odpri
|
||
</button>
|
||
<button
|
||
v-if="p.status === 'draft'"
|
||
@click="deletePackage(p)"
|
||
:disabled="deletingId === p.id"
|
||
class="text-rose-600 hover:underline text-sm disabled:opacity-50"
|
||
>
|
||
Izbriši
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="!packages.data?.length">
|
||
<td colspan="10" class="px-3 py-8 text-center text-sm text-gray-500">
|
||
Ni paketov za prikaz.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-4 flex items-center justify-between text-sm">
|
||
<div class="text-gray-600">
|
||
Prikazano {{ packages.from || 0 }}–{{ packages.to || 0 }} od
|
||
{{ packages.total || 0 }}
|
||
</div>
|
||
<div class="space-x-2">
|
||
<Link
|
||
:href="packages.prev_page_url || '#'"
|
||
:class="[
|
||
'px-3 py-1.5 rounded border',
|
||
packages.prev_page_url
|
||
? 'text-gray-700 hover:bg-gray-50'
|
||
: 'text-gray-400 cursor-not-allowed',
|
||
]"
|
||
>Nazaj</Link
|
||
>
|
||
<Link
|
||
:href="packages.next_page_url || '#'"
|
||
:class="[
|
||
'px-3 py-1.5 rounded border',
|
||
packages.next_page_url
|
||
? 'text-gray-700 hover:bg-gray-50'
|
||
: 'text-gray-400 cursor-not-allowed',
|
||
]"
|
||
>Naprej</Link
|
||
>
|
||
</div>
|
||
</div>
|
||
</AdminLayout>
|
||
</template>
|