sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev branch

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Admin/MailProfiles/Index.vue
+26 -36
View File
@@ -1,6 +1,7 @@
<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -220,10 +221,16 @@ const statusClass = (p) => {
</table>
</div>
<DialogModal :show="createOpen" max-width="2xl" @close="closeCreate">
<template #title> Nov Mail profil </template>
<template #content>
<form @submit.prevent="submitCreate" id="create-mail-profile" class="space-y-5">
<CreateDialog
:show="createOpen"
title="Nov Mail profil"
max-width="2xl"
confirm-text="Shrani"
:processing="form.processing"
@close="closeCreate"
@confirm="submitCreate"
>
<form @submit.prevent="submitCreate" id="create-mail-profile" class="space-y-5">
<div class="grid gap-4 grid-cols-2">
<div class="col-span-1">
<label class="label">Ime</label>
@@ -271,31 +278,19 @@ const statusClass = (p) => {
<input v-model="form.priority" type="number" class="input" />
</div>
</div>
</form>
</template>
<template #footer>
<button
type="button"
@click="closeCreate"
class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50"
>
Prekliči
</button>
<button
form="create-mail-profile"
type="submit"
:disabled="form.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>
</form>
</CreateDialog>
<!-- Edit Modal -->
<DialogModal :show="editOpen" max-width="2xl" @close="closeEdit">
<template #title> Uredi Mail profil </template>
<template #content>
<form @submit.prevent="submitEdit" id="edit-mail-profile" class="space-y-5">
<UpdateDialog
:show="editOpen"
title="Uredi Mail profil"
max-width="2xl"
confirm-text="Shrani"
:processing="form.processing"
@close="closeEdit"
@confirm="submitEdit"
>
<form @submit.prevent="submitEdit" id="edit-mail-profile" class="space-y-5">
<div class="grid gap-4 grid-cols-2">
<div>
<label class="label">Ime</label>
@@ -339,13 +334,8 @@ const statusClass = (p) => {
</div>
</div>
<p class="text-xs text-gray-500">Pusti geslo prazno, če želiš obdržati obstoječe.</p>
</form>
</template>
<template #footer>
<button type="button" @click="closeEdit" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Prekliči</button>
<button form="edit-mail-profile" type="submit" :disabled="form.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>
</form>
</UpdateDialog>
</AdminLayout>
</template>
resources/js/Pages/Admin/Packages/Index.vue
+341 -114
View File
@@ -1,7 +1,7 @@
<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Link, router, useForm } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
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 },
@@ -10,138 +10,228 @@ const props = defineProps({
templates: { type: Array, default: () => [] },
segments: { type: Array, default: () => [] },
clients: { type: Array, default: () => [] },
})
});
function goShow(id) {
router.visit(route('admin.packages.show', id))
router.visit(route("admin.packages.show", id));
}
const showCreate = ref(false)
const createMode = ref('numbers') // 'numbers' | 'contracts'
const showCreate = ref(false);
const createMode = ref("numbers"); // 'numbers' | 'contracts'
const form = useForm({
type: 'sms',
name: '',
description: '',
type: "sms",
name: "",
description: "",
profile_id: null,
sender_id: null,
template_id: null,
delivery_report: false,
body: '',
numbers: '', // one per line
})
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)
})
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
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
alert("Izberi SMS profil ali predlogo.");
return;
}
if (!form.template_id && !form.body) {
alert('Vnesi vsebino sporočila ali izberi predlogo.')
return
alert("Vnesi vsebino sporočila ali izberi predlogo.");
return;
}
const payload = {
type: 'sms',
type: "sms",
name: form.name || `SMS paket ${new Date().toLocaleString()}`,
description: form.description || '',
items: lines.map(number => ({
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,
body: form.body && form.body.trim() ? form.body.trim() : null,
},
})),
}
};
router.post(route('admin.packages.store'), payload, {
router.post(route("admin.packages.store"), payload, {
onSuccess: () => {
form.reset()
showCreate.value = false
router.reload({ only: ['packages'] })
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 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
contracts.value = {
data: [],
meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
};
return;
}
loadingContracts.value = true
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 } }
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
loadingContracts.value = false;
}
}
function toggleSelectContract(id) {
const s = selectedContractIds.value
if (s.has(id)) { s.delete(id) } else { s.add(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))
selectedContractIds.value = new Set(Array.from(s));
}
function clearSelection() {
selectedContractIds.value = new Set()
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)
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
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',
type: "sms",
name: form.name || `SMS paket (segment) ${new Date().toLocaleString()}`,
description: form.description || '',
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,
body: form.body && form.body.trim() ? form.body.trim() : null,
},
contract_ids: ids,
}
};
router.post(route('admin.packages.store-from-contracts'), payload, {
creatingFromContracts.value = true;
router.post(route("admin.packages.store-from-contracts"), payload, {
onSuccess: () => {
clearSelection()
showCreate.value = false
router.reload({ only: ['packages'] })
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>
@@ -149,58 +239,93 @@ function submitCreateFromContracts() {
<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>
<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
<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)
<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">
<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">
<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>
<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">
<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>
<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
<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>
<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>
<button
@click="submitCreate"
class="px-3 py-1.5 rounded bg-emerald-600 text-white text-sm"
>
Ustvari paket
</button>
</div>
</template>
@@ -208,14 +333,24 @@ function submitCreateFromContracts() {
<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">
<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>
<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">
<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>
@@ -223,16 +358,26 @@ function submitCreateFromContracts() {
<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>
<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
<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
<input type="checkbox" v-model="onlyValidated" @change="loadContracts()" />
Telefonska številka mora biti potrjena
</label>
</div>
<div class="sm:col-span-3">
@@ -240,7 +385,15 @@ function submitCreateFromContracts() {
<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"></th>
<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>
@@ -251,49 +404,88 @@ function submitCreateFromContracts() {
<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)">
<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>
<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>
<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>
<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>
<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 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>
<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 }})
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>
<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" class="px-3 py-1.5 rounded bg-emerald-600 text-white text-sm disabled:opacity-50">Ustvari paket</button>
<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>
@@ -319,28 +511,44 @@ function submitCreateFromContracts() {
<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">{{ 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"
<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-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>
>{{ 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">
<button @click="goShow(p.id)" class="text-indigo-600 hover:underline text-sm">Odpri</button>
<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>
<td colspan="10" class="px-3 py-8 text-center text-sm text-gray-500">
Ni paketov za prikaz.
</td>
</tr>
</tbody>
</table>
@@ -348,12 +556,31 @@ function submitCreateFromContracts() {
<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 }}
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>
<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>
</template>
resources/js/Pages/Admin/SmsProfiles/Index.vue
+13 -12
View File
@@ -1,6 +1,6 @@
<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, watch } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -191,10 +191,16 @@ const formatDateTime = (s) => (s ? new Date(s).toLocaleString() : "—");
</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">
<CreateDialog
:show="createOpen"
title="Nov SMS profil"
max-width="2xl"
confirm-text="Shrani"
:processing="createForm.processing"
@close="() => (createOpen = false)"
@confirm="submitCreate"
>
<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>
@@ -216,13 +222,8 @@ const formatDateTime = (s) => (s ? new Date(s).toLocaleString() : "—");
<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>
</form>
</CreateDialog>
<!-- Test Send Modal -->
<DialogModal :show="testOpen" max-width="2xl" @close="() => (testOpen = false)">