293 lines
10 KiB
Vue
293 lines
10 KiB
Vue
<script setup>
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import { Head, useForm, router } from "@inertiajs/vue3";
|
|
import { ref, watch } from "vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { faPlus, faPaperPlane, faCoins, faTags, faFlask } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const props = defineProps({
|
|
initialProfiles: { type: Array, default: () => [] },
|
|
});
|
|
|
|
const profiles = ref(props.initialProfiles || []);
|
|
|
|
// Keep local ref in sync with Inertia prop changes (after router navigations)
|
|
watch(
|
|
() => props.initialProfiles,
|
|
(val) => {
|
|
profiles.value = val || [];
|
|
}
|
|
);
|
|
|
|
// Create profile modal
|
|
const createOpen = ref(false);
|
|
const createForm = useForm({
|
|
name: "",
|
|
active: true,
|
|
api_username: "",
|
|
api_password: "",
|
|
});
|
|
|
|
function openCreate() {
|
|
createForm.reset();
|
|
createForm.active = true;
|
|
createOpen.value = true;
|
|
}
|
|
|
|
async function submitCreate() {
|
|
try {
|
|
createForm.processing = true;
|
|
const payload = {
|
|
name: createForm.name,
|
|
active: !!createForm.active,
|
|
api_username: createForm.api_username,
|
|
api_password: createForm.api_password,
|
|
};
|
|
await router.post(route("admin.sms-profiles.store"), payload, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
createOpen.value = false;
|
|
},
|
|
});
|
|
} finally {
|
|
createForm.processing = false;
|
|
}
|
|
}
|
|
|
|
// Test send modal
|
|
const testOpen = ref(false);
|
|
const testTarget = ref(null);
|
|
const testResult = ref(null);
|
|
const testForm = useForm({
|
|
to: "",
|
|
message: "",
|
|
sender_id: null,
|
|
delivery_report: true,
|
|
country_code: null,
|
|
});
|
|
|
|
function openTest(p) {
|
|
testForm.reset();
|
|
testTarget.value = p;
|
|
testResult.value = null;
|
|
testOpen.value = true;
|
|
}
|
|
|
|
async function submitTest() {
|
|
if (!testTarget.value) return;
|
|
try {
|
|
testForm.processing = true;
|
|
const payload = {
|
|
to: testForm.to,
|
|
message: testForm.message,
|
|
sender_id: testForm.sender_id,
|
|
delivery_report: !!testForm.delivery_report,
|
|
country_code: testForm.country_code,
|
|
};
|
|
await router.post(route("admin.sms-profiles.test-send", testTarget.value.id), payload, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
testResult.value = null;
|
|
testOpen.value = false;
|
|
},
|
|
});
|
|
} finally {
|
|
testForm.processing = false;
|
|
}
|
|
}
|
|
|
|
// Balance & Price
|
|
const balances = ref({});
|
|
const quotes = ref({});
|
|
|
|
function fetchBalance(p) {
|
|
window.axios.post(route("admin.sms-profiles.balance", p.id)).then((r) => {
|
|
balances.value[p.id] = r.data.balance;
|
|
});
|
|
}
|
|
|
|
function fetchPrice(p) {
|
|
window.axios.post(route("admin.sms-profiles.price", p.id)).then((r) => {
|
|
quotes.value[p.id] = r.data.quotes || [];
|
|
});
|
|
}
|
|
|
|
const formatDateTime = (s) => (s ? new Date(s).toLocaleString() : "—");
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="SMS profili">
|
|
<Head title="SMS profili" />
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-xl font-semibold text-gray-800 flex items-center gap-3">
|
|
SMS profili
|
|
<span class="text-xs font-medium text-gray-400">({{ profiles.length }})</span>
|
|
</h1>
|
|
<button
|
|
@click="openCreate"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
|
|
>
|
|
<FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nov profil
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rounded-lg border bg-white overflow-hidden shadow-sm">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
|
|
<tr>
|
|
<th class="px-3 py-2 text-left">Ime</th>
|
|
<th class="px-3 py-2 text-left">Uporabnik</th>
|
|
<th class="px-3 py-2">Aktiven</th>
|
|
<th class="px-3 py-2">Pošiljatelji</th>
|
|
<th class="px-3 py-2">Bilanca</th>
|
|
<th class="px-3 py-2">Cena</th>
|
|
<th class="px-3 py-2">Akcije</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="p in profiles" :key="p.id" class="border-t last:border-b hover:bg-gray-50">
|
|
<td class="px-3 py-2 font-medium text-gray-800">{{ p.name }}</td>
|
|
<td class="px-3 py-2">{{ p.api_username }}</td>
|
|
<td class="px-3 py-2 text-center">
|
|
<span :class="p.active ? 'text-emerald-600' : 'text-rose-600'">{{ p.active ? 'Da' : 'Ne' }}</span>
|
|
</td>
|
|
<td class="px-3 py-2 text-xs text-gray-600">
|
|
<span v-if="(p.senders||[]).length === 0">—</span>
|
|
<span v-else>
|
|
{{ p.senders.map(s => s.sname).join(', ') }}
|
|
</span>
|
|
</td>
|
|
<td class="px-3 py-2">
|
|
<div class="flex items-center gap-2">
|
|
<button @click="fetchBalance(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-700 border-amber-300 bg-amber-50 hover:bg-amber-100">
|
|
<FontAwesomeIcon :icon="faCoins" class="w-3.5 h-3.5" /> Pridobi
|
|
</button>
|
|
<span class="text-xs text-gray-600">{{ balances[p.id] ?? '—' }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-3 py-2">
|
|
<div class="flex items-center gap-2">
|
|
<button @click="fetchPrice(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-700 border-indigo-300 bg-indigo-50 hover:bg-indigo-100">
|
|
<FontAwesomeIcon :icon="faTags" class="w-3.5 h-3.5" /> Cene
|
|
</button>
|
|
<span class="text-xs text-gray-600 truncate max-w-[200px]" :title="(quotes[p.id]||[]).join(', ')">
|
|
{{ (quotes[p.id] || []).join(', ') || '—' }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-3 py-2 flex items-center gap-2">
|
|
<button
|
|
@click="openTest(p)"
|
|
class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-emerald-700 border-emerald-300 bg-emerald-50 hover:bg-emerald-100"
|
|
title="Pošlji test SMS"
|
|
>
|
|
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Test SMS
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Create Profile Modal -->
|
|
<DialogModal :show="createOpen" max-width="2xl" @close="() => (createOpen = false)">
|
|
<template #title> Nov SMS profil </template>
|
|
<template #content>
|
|
<form @submit.prevent="submitCreate" id="create-sms-profile" class="space-y-5">
|
|
<div class="grid gap-4 grid-cols-2">
|
|
<div>
|
|
<label class="label">Ime</label>
|
|
<input v-model="createForm.name" type="text" class="input" />
|
|
</div>
|
|
<div>
|
|
<label class="label">Aktivno</label>
|
|
<select v-model="createForm.active" class="input">
|
|
<option :value="true">Da</option>
|
|
<option :value="false">Ne</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="label">API uporabnik</label>
|
|
<input v-model="createForm.api_username" type="text" class="input" />
|
|
</div>
|
|
<div>
|
|
<label class="label">API geslo</label>
|
|
<input v-model="createForm.api_password" type="password" class="input" autocomplete="new-password" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<template #footer>
|
|
<button type="button" @click="() => (createOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Prekliči</button>
|
|
<button form="create-sms-profile" type="submit" :disabled="createForm.processing" class="px-4 py-2 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50">Shrani</button>
|
|
</template>
|
|
</DialogModal>
|
|
|
|
<!-- Test Send Modal -->
|
|
<DialogModal :show="testOpen" max-width="2xl" @close="() => (testOpen = false)">
|
|
<template #title> Testni SMS </template>
|
|
<template #content>
|
|
<div class="space-y-4">
|
|
<div class="grid gap-4 grid-cols-2">
|
|
<div>
|
|
<label class="label">Prejemnik (E.164)</label>
|
|
<input v-model="testForm.to" type="text" class="input" placeholder="+386..." />
|
|
</div>
|
|
<div>
|
|
<label class="label">Državna koda (opcijsko)</label>
|
|
<input v-model="testForm.country_code" type="text" class="input" placeholder="SI" />
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="label">Sporočilo</label>
|
|
<textarea v-model="testForm.message" class="input" rows="4"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="label">Dostavna poročila</label>
|
|
<select v-model="testForm.delivery_report" class="input">
|
|
<option :value="true">Da</option>
|
|
<option :value="false">Ne</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Result details removed; rely on flash message after redirect -->
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<button type="button" @click="() => (testOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Zapri</button>
|
|
<button type="button" @click="submitTest" :disabled="testForm.processing || !testTarget" class="px-4 py-2 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50">
|
|
<FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5 mr-1" /> Pošlji test
|
|
</button>
|
|
</template>
|
|
</DialogModal>
|
|
</AdminLayout>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.input {
|
|
width: 100%;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid var(--tw-color-gray-300, #d1d5db);
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
.input:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
--tw-ring-color: #6366f1;
|
|
border-color: #6366f1;
|
|
box-shadow: 0 0 0 1px #6366f1;
|
|
}
|
|
.label {
|
|
display: block;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: #6b7280;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
</style>
|