Package system sms
This commit is contained in:
Simon Pocrnjič
@@ -1,90 +1,72 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useForm, router, usePage } from '@inertiajs/vue3';
|
||||
import DialogModal from './DialogModal.vue';
|
||||
import InputLabel from './InputLabel.vue';
|
||||
import SectionTitle from './SectionTitle.vue';
|
||||
import TextInput from './TextInput.vue';
|
||||
import InputError from './InputError.vue';
|
||||
import PrimaryButton from './PrimaryButton.vue';
|
||||
|
||||
|
||||
import { ref, watch } from "vue";
|
||||
import { useForm, router, usePage } from "@inertiajs/vue3";
|
||||
import DialogModal from "./DialogModal.vue";
|
||||
import InputLabel from "./InputLabel.vue";
|
||||
import SectionTitle from "./SectionTitle.vue";
|
||||
import TextInput from "./TextInput.vue";
|
||||
import InputError from "./InputError.vue";
|
||||
import PrimaryButton from "./PrimaryButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
person: Object,
|
||||
types: Array,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const processing = ref(false);
|
||||
const errors = ref({});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
emit("close");
|
||||
setTimeout(() => {
|
||||
errors.value = {};
|
||||
try { form.clearErrors && form.clearErrors(); } catch {}
|
||||
try {
|
||||
form.clearErrors && form.clearErrors();
|
||||
} catch {}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
address: '',
|
||||
country: '',
|
||||
post_code: '',
|
||||
city: '',
|
||||
address: "",
|
||||
country: "",
|
||||
post_code: "",
|
||||
city: "",
|
||||
type_id: props.types?.[0]?.id ?? null,
|
||||
description: ''
|
||||
description: "",
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
form.address = '';
|
||||
form.country = '';
|
||||
form.post_code = '';
|
||||
form.city = '';
|
||||
form.address = "";
|
||||
form.country = "";
|
||||
form.post_code = "";
|
||||
form.city = "";
|
||||
form.type_id = props.types?.[0]?.id ?? null;
|
||||
form.description = '';
|
||||
}
|
||||
form.description = "";
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
form.post(route('person.address.create', props.person), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
// Optimistically append from last created record in DB by refetch or expose via flash if needed.
|
||||
// For now, trigger a lightweight reload of person's addresses via a GET if you have an endpoint, else trust parent reactivity.
|
||||
processing.value = false;
|
||||
close();
|
||||
form.reset();
|
||||
},
|
||||
onError: (e) => {
|
||||
errors.value = e || {};
|
||||
processing.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const update = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
form.put(route('person.address.update', {person: props.person, address_id: props.id}), {
|
||||
form.post(route("person.address.create", props.person), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
// Optimistically append from last created record in DB by refetch or expose via flash if needed.
|
||||
// For now, trigger a lightweight reload of person's addresses via a GET if you have an endpoint, else trust parent reactivity.
|
||||
processing.value = false;
|
||||
close();
|
||||
form.reset();
|
||||
@@ -94,19 +76,40 @@ const update = async () => {
|
||||
processing.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const update = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
form.put(
|
||||
route("person.address.update", { person: props.person, address_id: props.id }),
|
||||
{
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
processing.value = false;
|
||||
close();
|
||||
form.reset();
|
||||
},
|
||||
onError: (e) => {
|
||||
errors.value = e || {};
|
||||
processing.value = false;
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
((id) => {
|
||||
if (props.edit && id !== 0){
|
||||
console.log(props.edit)
|
||||
(id) => {
|
||||
if (props.edit && id !== 0) {
|
||||
console.log(props.edit);
|
||||
props.person.addresses.filter((a) => {
|
||||
if(a.id === props.id){
|
||||
if (a.id === props.id) {
|
||||
form.address = a.address;
|
||||
form.country = a.country;
|
||||
form.post_code = a.post_code || a.postal_code || '';
|
||||
form.city = a.city || '';
|
||||
form.post_code = a.post_code || a.postal_code || "";
|
||||
form.city = a.city || "";
|
||||
form.type_id = a.type_id;
|
||||
form.description = a.description;
|
||||
}
|
||||
@@ -114,24 +117,20 @@ watch(
|
||||
return;
|
||||
}
|
||||
resetForm();
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
const callSubmit = () => {
|
||||
if( props.edit ) {
|
||||
if (props.edit) {
|
||||
update();
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<DialogModal :show="show" @close="close">
|
||||
<template #title>
|
||||
<span v-if="edit">Spremeni naslov</span>
|
||||
<span v-else>Dodaj novi naslov</span>
|
||||
@@ -139,76 +138,91 @@ const callSubmit = () => {
|
||||
<template #content>
|
||||
<form @submit.prevent="callSubmit">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<template #title>
|
||||
Naslov
|
||||
</template>
|
||||
<template #title> Naslov </template>
|
||||
</SectionTitle>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_address" value="Naslov" />
|
||||
<TextInput
|
||||
id="cr_address"
|
||||
ref="cr_addressInput"
|
||||
v-model="form.address"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="address"
|
||||
/>
|
||||
|
||||
<InputError v-if="errors.address !== undefined" v-for="err in errors.address" :message="err" />
|
||||
<InputLabel for="cr_address" value="Naslov" />
|
||||
<TextInput
|
||||
id="cr_address"
|
||||
ref="cr_addressInput"
|
||||
v-model="form.address"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="address"
|
||||
/>
|
||||
|
||||
<InputError
|
||||
v-if="errors.address !== undefined"
|
||||
v-for="err in errors.address"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_country" value="Država" />
|
||||
<TextInput
|
||||
id="cr_country"
|
||||
ref="cr_countryInput"
|
||||
v-model="form.country"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="country"
|
||||
/>
|
||||
|
||||
<InputError v-if="errors.address !== undefined" v-for="err in errors.address" :message="err" />
|
||||
<InputLabel for="cr_country" value="Država" />
|
||||
<TextInput
|
||||
id="cr_country"
|
||||
ref="cr_countryInput"
|
||||
v-model="form.country"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="country"
|
||||
/>
|
||||
|
||||
<InputError
|
||||
v-if="errors.address !== undefined"
|
||||
v-for="err in errors.address"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_post_code" value="Poštna številka" />
|
||||
<TextInput
|
||||
id="cr_post_code"
|
||||
v-model="form.post_code"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="postal-code"
|
||||
/>
|
||||
<InputError v-if="errors.post_code !== undefined" v-for="err in errors.post_code" :message="err" />
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_city" value="Mesto" />
|
||||
<TextInput
|
||||
id="cr_city"
|
||||
v-model="form.city"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="address-level2"
|
||||
/>
|
||||
<InputError v-if="errors.city !== undefined" v-for="err in errors.city" :message="err" />
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_type" value="Tip"/>
|
||||
<InputLabel for="cr_post_code" value="Poštna številka" />
|
||||
<TextInput
|
||||
id="cr_post_code"
|
||||
v-model="form.post_code"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="postal-code"
|
||||
/>
|
||||
<InputError
|
||||
v-if="errors.post_code !== undefined"
|
||||
v-for="err in errors.post_code"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_city" value="Mesto" />
|
||||
<TextInput
|
||||
id="cr_city"
|
||||
v-model="form.city"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="address-level2"
|
||||
/>
|
||||
<InputError
|
||||
v-if="errors.city !== undefined"
|
||||
v-for="err in errors.city"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cr_type" value="Tip" />
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="cr_type"
|
||||
v-model="form.type_id"
|
||||
>
|
||||
<option v-for="type in types" :key="type.id" :value="type.id">{{ type.name }}</option>
|
||||
<option v-for="type in types" :key="type.id" :value="type.id">
|
||||
{{ type.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
|
||||
Shrani
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -228,12 +228,123 @@ const pageSmsTemplates = computed(() => {
|
||||
: null;
|
||||
return fromProps ?? pageProps.value?.sms_templates ?? [];
|
||||
});
|
||||
// Helpers: EU formatter and token renderer
|
||||
const formatEu = (value, decimals = 2) => {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(0);
|
||||
}
|
||||
const num =
|
||||
typeof value === "number"
|
||||
? value
|
||||
: parseFloat(String(value).replace(/\./g, "").replace(",", "."));
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(isNaN(num) ? 0 : num);
|
||||
};
|
||||
|
||||
const renderTokens = (text, vars) => {
|
||||
if (!text) return "";
|
||||
const resolver = (obj, path) => {
|
||||
if (!obj) return null;
|
||||
if (Object.prototype.hasOwnProperty.call(obj, path)) return obj[path];
|
||||
const segs = path.split(".");
|
||||
let cur = obj;
|
||||
for (const s of segs) {
|
||||
if (cur && typeof cur === "object" && s in cur) {
|
||||
cur = cur[s];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return cur;
|
||||
};
|
||||
return text.replace(/\{([a-zA-Z0-9_\.]+)\}/g, (_, key) => {
|
||||
const val = resolver(vars, key);
|
||||
return val !== null && val !== undefined ? String(val) : `{${key}}`;
|
||||
});
|
||||
};
|
||||
|
||||
const buildVarsFromSelectedContract = () => {
|
||||
const uuid = selectedContractUuid.value;
|
||||
if (!uuid) return {};
|
||||
const c = (contractsForCase.value || []).find((x) => x.uuid === uuid);
|
||||
if (!c) return {};
|
||||
const vars = {
|
||||
contract: {
|
||||
uuid: c.uuid,
|
||||
reference: c.reference,
|
||||
start_date: c.start_date || "",
|
||||
end_date: c.end_date || "",
|
||||
},
|
||||
};
|
||||
if (c.account) {
|
||||
vars.account = {
|
||||
reference: c.account.reference,
|
||||
type: c.account.type,
|
||||
initial_amount:
|
||||
c.account.initial_amount ??
|
||||
(c.account.initial_amount_raw ? formatEu(c.account.initial_amount_raw) : null),
|
||||
balance_amount:
|
||||
c.account.balance_amount ??
|
||||
(c.account.balance_amount_raw ? formatEu(c.account.balance_amount_raw) : null),
|
||||
initial_amount_raw: c.account.initial_amount_raw ?? null,
|
||||
balance_amount_raw: c.account.balance_amount_raw ?? null,
|
||||
};
|
||||
}
|
||||
return vars;
|
||||
};
|
||||
|
||||
const updateSmsFromSelection = async () => {
|
||||
if (!selectedTemplateId.value) return;
|
||||
// Try server preview first
|
||||
try {
|
||||
const url = route("clientCase.sms.preview", { client_case: props.clientCaseUuid });
|
||||
const res = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Requested-With": "XMLHttpRequest",
|
||||
"X-CSRF-TOKEN":
|
||||
document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
|
||||
"",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
template_id: selectedTemplateId.value,
|
||||
contract_uuid: selectedContractUuid.value || null,
|
||||
}),
|
||||
credentials: "same-origin",
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (typeof data?.content === "string" && data.content.trim() !== "") {
|
||||
smsMessage.value = data.content;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore and fallback
|
||||
}
|
||||
// Fallback: client-side render using template content and selected contract vars
|
||||
const tpl = (pageSmsTemplates.value || []).find(
|
||||
(t) => t.id === selectedTemplateId.value
|
||||
);
|
||||
if (tpl && typeof tpl.content === "string") {
|
||||
smsMessage.value = renderTokens(tpl.content, buildVarsFromSelectedContract());
|
||||
}
|
||||
};
|
||||
|
||||
// Selections
|
||||
const selectedProfileId = ref(null);
|
||||
const selectedSenderId = ref(null);
|
||||
const deliveryReport = ref(false);
|
||||
const selectedTemplateId = ref(null);
|
||||
// Contract selection for placeholder rendering
|
||||
const contractsForCase = ref([]);
|
||||
const selectedContractUuid = ref(null);
|
||||
|
||||
const sendersForSelectedProfile = computed(() => {
|
||||
if (!selectedProfileId.value) return pageSmsSenders.value;
|
||||
@@ -257,14 +368,49 @@ watch(sendersForSelectedProfile, (list) => {
|
||||
}
|
||||
});
|
||||
|
||||
const renderSmsPreview = async () => {
|
||||
if (!selectedTemplateId.value) return;
|
||||
try {
|
||||
const url = route("clientCase.sms.preview", { client_case: props.clientCaseUuid });
|
||||
const res = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Requested-With": "XMLHttpRequest",
|
||||
"X-CSRF-TOKEN":
|
||||
document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
|
||||
"",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
template_id: selectedTemplateId.value,
|
||||
contract_uuid: selectedContractUuid.value || null,
|
||||
}),
|
||||
credentials: "same-origin",
|
||||
});
|
||||
if (!res.ok) throw new Error(`Preview failed: ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (typeof data?.content === "string") {
|
||||
smsMessage.value = data.content;
|
||||
}
|
||||
} catch (e) {
|
||||
// If preview fails and template has inline content, fallback
|
||||
const tpl = (pageSmsTemplates.value || []).find(
|
||||
(t) => t.id === selectedTemplateId.value
|
||||
);
|
||||
if (tpl && typeof tpl.content === "string") {
|
||||
smsMessage.value = tpl.content;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(selectedTemplateId, () => {
|
||||
if (!selectedTemplateId.value) return;
|
||||
const tpl = (pageSmsTemplates.value || []).find(
|
||||
(t) => t.id === selectedTemplateId.value
|
||||
);
|
||||
if (tpl && typeof tpl.content === "string") {
|
||||
smsMessage.value = tpl.content;
|
||||
}
|
||||
updateSmsFromSelection();
|
||||
});
|
||||
|
||||
watch(selectedContractUuid, () => {
|
||||
if (!selectedTemplateId.value) return;
|
||||
updateSmsFromSelection();
|
||||
});
|
||||
|
||||
// If templates array changes and none is chosen, pick the first by default
|
||||
@@ -304,6 +450,22 @@ const openSmsDialog = (phone) => {
|
||||
// Default template selection to first available
|
||||
selectedTemplateId.value =
|
||||
(pageSmsTemplates.value && pageSmsTemplates.value[0]?.id) || null;
|
||||
// Load contracts for this case (for contract/account placeholders)
|
||||
loadContractsForCase();
|
||||
};
|
||||
const loadContractsForCase = async () => {
|
||||
try {
|
||||
const url = route("clientCase.contracts.list", { client_case: props.clientCaseUuid });
|
||||
const res = await fetch(url, {
|
||||
headers: { "X-Requested-With": "XMLHttpRequest" },
|
||||
credentials: "same-origin",
|
||||
});
|
||||
const json = await res.json();
|
||||
contractsForCase.value = Array.isArray(json?.data) ? json.data : [];
|
||||
// Do not auto-select a contract; let user pick explicitly
|
||||
} catch (e) {
|
||||
contractsForCase.value = [];
|
||||
}
|
||||
};
|
||||
const closeSmsDialog = () => {
|
||||
showSmsDialog.value = false;
|
||||
@@ -323,6 +485,7 @@ const submitSms = () => {
|
||||
{
|
||||
message: smsMessage.value,
|
||||
template_id: selectedTemplateId.value,
|
||||
contract_uuid: selectedContractUuid.value,
|
||||
profile_id: selectedProfileId.value,
|
||||
sender_id: selectedSenderId.value,
|
||||
delivery_report: !!deliveryReport.value,
|
||||
@@ -710,6 +873,24 @@ const submitSms = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contract selector (for placeholders) -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Pogodba</label>
|
||||
<select
|
||||
v-model="selectedContractUuid"
|
||||
class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
>
|
||||
<option :value="null">—</option>
|
||||
<option v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
|
||||
{{ c.reference || c.uuid }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in {account.*}
|
||||
mest.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Template selector -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Predloga</label>
|
||||
|
||||
@@ -1,132 +1,121 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import DialogModal from './DialogModal.vue';
|
||||
import InputLabel from './InputLabel.vue';
|
||||
import SectionTitle from './SectionTitle.vue';
|
||||
import TextInput from './TextInput.vue';
|
||||
import InputError from './InputError.vue';
|
||||
import PrimaryButton from './PrimaryButton.vue';
|
||||
import axios from 'axios';
|
||||
import { ref, watch } from "vue";
|
||||
import DialogModal from "./DialogModal.vue";
|
||||
import InputLabel from "./InputLabel.vue";
|
||||
import SectionTitle from "./SectionTitle.vue";
|
||||
import TextInput from "./TextInput.vue";
|
||||
import InputError from "./InputError.vue";
|
||||
import PrimaryButton from "./PrimaryButton.vue";
|
||||
import { useForm, router } from "@inertiajs/vue3";
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
person: Object,
|
||||
types: Array,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const processing = ref(false);
|
||||
const errors = ref({});
|
||||
// Using Inertia useForm for state, errors and processing
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
emit("close");
|
||||
|
||||
setTimeout(() => {
|
||||
errors.value = {};
|
||||
try {
|
||||
form.clearErrors && form.clearErrors();
|
||||
} catch {}
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const form = ref({
|
||||
nu: '',
|
||||
const form = useForm({
|
||||
nu: "",
|
||||
country_code: 386,
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
type_id: props.types?.[0]?.id ?? null,
|
||||
description: "",
|
||||
validated: false,
|
||||
phone_type: null,
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
nu: '',
|
||||
country_code: 386,
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
}
|
||||
form.nu = "";
|
||||
form.country_code = 386;
|
||||
form.type_id = props.types?.[0]?.id ?? null;
|
||||
form.description = "";
|
||||
form.validated = false;
|
||||
form.phone_type = null;
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
const data = await axios({
|
||||
method: 'post',
|
||||
url: route('person.phone.create', props.person),
|
||||
data: form.value
|
||||
}).then((response) => {
|
||||
props.person.phones.push(response.data.phone);
|
||||
|
||||
processing.value = false;
|
||||
|
||||
close();
|
||||
resetForm();
|
||||
}).catch((reason) => {
|
||||
errors.value = reason.response.data.errors;
|
||||
processing.value = false;
|
||||
router.post(route("person.phone.create", props.person), form, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset();
|
||||
},
|
||||
onError: (e) => {
|
||||
// errors are available on form.errors
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const update = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
router.put(
|
||||
route("person.phone.update", { person: props.person, phone_id: props.id }),
|
||||
form,
|
||||
{
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset();
|
||||
},
|
||||
onError: (e) => {
|
||||
// errors are available on form.errors
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const data = await axios({
|
||||
method: 'put',
|
||||
url: route('person.phone.update', {person: props.person, phone_id: props.id}),
|
||||
data: form.value
|
||||
}).then((response) => {
|
||||
const index = props.person.phones.findIndex( p => p.id === response.data.phone.id );
|
||||
props.person.phones[index] = response.data.phone;
|
||||
|
||||
processing.value = false;
|
||||
close();
|
||||
resetForm();
|
||||
}).catch((reason) => {
|
||||
errors.value = reason.response.data.errors;
|
||||
processing.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
((id) => {
|
||||
if ( id !== 0 && props.edit ){
|
||||
const index = props.person.phones.findIndex( p => p.id === id );
|
||||
form.value.nu = props.person.phones[index].nu;
|
||||
form.value.country_code = props.person.phones[index].country_code;
|
||||
form.value.type_id = props.person.phones[index].type_id;
|
||||
form.value.description = props.person.phones[index].description;
|
||||
function hydrateFromProps() {
|
||||
if (props.edit && props.id) {
|
||||
const p = props.person?.phones?.find((x) => x.id === props.id);
|
||||
if (p) {
|
||||
form.nu = p.nu || "";
|
||||
form.country_code = p.country_code ?? 386;
|
||||
form.type_id = p.type_id ?? (props.types?.[0]?.id ?? null);
|
||||
form.description = p.description || "";
|
||||
form.validated = !!p.validated;
|
||||
form.phone_type = p.phone_type ?? null;
|
||||
return;
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
}
|
||||
|
||||
resetForm();
|
||||
|
||||
})
|
||||
);
|
||||
watch(() => props.id, () => hydrateFromProps());
|
||||
watch(() => props.show, (val) => { if (val) hydrateFromProps(); });
|
||||
|
||||
const submit = () => {
|
||||
if( props.edit ) {
|
||||
if (props.edit) {
|
||||
update();
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<DialogModal
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<DialogModal :show="show" @close="close">
|
||||
<template #title>
|
||||
<span v-if="edit">Spremeni telefon</span>
|
||||
<span v-else>Dodaj novi telefon</span>
|
||||
@@ -134,60 +123,103 @@ const submit = () => {
|
||||
<template #content>
|
||||
<form @submit.prevent="submit">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<template #title>
|
||||
Telefon
|
||||
</template>
|
||||
<template #title> Telefon </template>
|
||||
</SectionTitle>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="pp_nu" value="Številka" />
|
||||
<TextInput
|
||||
id="pp_nu"
|
||||
ref="pp_nuInput"
|
||||
v-model="form.nu"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="nu"
|
||||
/>
|
||||
|
||||
<InputError v-if="errors.nu !== undefined" v-for="err in errors.nu" :message="err" />
|
||||
<InputLabel for="pp_nu" value="Številka" />
|
||||
<TextInput
|
||||
id="pp_nu"
|
||||
ref="pp_nuInput"
|
||||
v-model="form.nu"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="nu"
|
||||
/>
|
||||
|
||||
<InputError
|
||||
v-if="form.errors.nu !== undefined"
|
||||
v-for="err in form.errors.nu"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="pp_countrycode" value="Koda države tel." />
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="pp_countrycode"
|
||||
v-model="form.country_code"
|
||||
>
|
||||
<option value="386">+386 (Slovenija)</option>
|
||||
<option value="385">+385 (Hrvaška)</option>
|
||||
<option value="39">+39 (Italija)</option>
|
||||
<option value="36">+39 (Madžarska)</option>
|
||||
<option value="43">+43 (Avstrija)</option>
|
||||
<option value="381">+381 (Srbija)</option>
|
||||
<option value="387">+387 (Bosna in Hercegovina)</option>
|
||||
<option value="382">+382 (Črna gora)</option>
|
||||
<InputLabel for="pp_countrycode" value="Koda države tel." />
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="pp_countrycode"
|
||||
v-model="form.country_code"
|
||||
>
|
||||
<option value="386">+386 (Slovenija)</option>
|
||||
<option value="385">+385 (Hrvaška)</option>
|
||||
<option value="39">+39 (Italija)</option>
|
||||
<option value="36">+39 (Madžarska)</option>
|
||||
<option value="43">+43 (Avstrija)</option>
|
||||
<option value="381">+381 (Srbija)</option>
|
||||
<option value="387">+387 (Bosna in Hercegovina)</option>
|
||||
<option value="382">+382 (Črna gora)</option>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
|
||||
<InputError v-if="errors.country_code !== undefined" v-for="err in errors.country_code" :message="err" />
|
||||
</select>
|
||||
|
||||
<InputError
|
||||
v-if="form.errors.country_code !== undefined"
|
||||
v-for="err in form.errors.country_code"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="pp_type" value="Tip"/>
|
||||
<InputLabel for="pp_type" value="Tip" />
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="pp_type"
|
||||
v-model="form.type_id"
|
||||
>
|
||||
<option v-for="type in types" :key="type.id" :value="type.id">{{ type.name }}</option>
|
||||
<option v-for="type in types" :key="type.id" :value="type.id">
|
||||
{{ type.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="pp_phone_type" value="Vrsta telefona (enum)" />
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="pp_phone_type"
|
||||
v-model="form.phone_type"
|
||||
>
|
||||
<option :value="null">—</option>
|
||||
<option value="mobile">Mobilni</option>
|
||||
<option value="landline">Stacionarni</option>
|
||||
<option value="voip">VOIP</option>
|
||||
</select>
|
||||
<InputError
|
||||
v-if="form.errors.phone_type !== undefined"
|
||||
v-for="err in form.errors.phone_type"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<label class="inline-flex items-center mt-6">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.validated"
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
|
||||
/>
|
||||
<span class="ml-2">Potrjeno</span>
|
||||
</label>
|
||||
<InputError
|
||||
v-if="form.errors.validated !== undefined"
|
||||
v-for="err in form.errors.validated"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
|
||||
Shrani
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -172,6 +172,13 @@ const navGroups = computed(() => [
|
||||
icon: faGears,
|
||||
active: ["admin.sms-profiles.index"],
|
||||
},
|
||||
{
|
||||
key: "admin.packages.index",
|
||||
label: "SMS paketi",
|
||||
route: "admin.packages.index",
|
||||
icon: faMessage,
|
||||
active: ["admin.packages.index", "admin.packages.show"],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -1,103 +1,123 @@
|
||||
<script setup>
|
||||
import AdminLayout from '@/Layouts/AdminLayout.vue'
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faUserGroup, faKey, faGears, faFileWord, faEnvelopeOpenText, faInbox, faAt, faAddressBook, faFileLines } from '@fortawesome/free-solid-svg-icons'
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faUserGroup,
|
||||
faKey,
|
||||
faGears,
|
||||
faFileWord,
|
||||
faEnvelopeOpenText,
|
||||
faInbox,
|
||||
faAt,
|
||||
faAddressBook,
|
||||
faFileLines,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const cards = [
|
||||
{
|
||||
category: 'Uporabniki & Dovoljenja',
|
||||
category: "Uporabniki & Dovoljenja",
|
||||
items: [
|
||||
{
|
||||
title: 'Uporabniki',
|
||||
description: 'Upravljanje uporabnikov in njihovih vlog',
|
||||
route: 'admin.users.index',
|
||||
title: "Uporabniki",
|
||||
description: "Upravljanje uporabnikov in njihovih vlog",
|
||||
route: "admin.users.index",
|
||||
icon: faUserGroup,
|
||||
},
|
||||
{
|
||||
title: 'Novo dovoljenje',
|
||||
description: 'Dodaj in konfiguriraj novo dovoljenje',
|
||||
route: 'admin.permissions.create',
|
||||
title: "Novo dovoljenje",
|
||||
description: "Dodaj in konfiguriraj novo dovoljenje",
|
||||
route: "admin.permissions.create",
|
||||
icon: faKey,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Dokumenti',
|
||||
category: "Dokumenti",
|
||||
items: [
|
||||
{
|
||||
title: 'Nastavitve dokumentov',
|
||||
description: 'Privzete sistemske nastavitve za dokumente',
|
||||
route: 'admin.document-settings.index',
|
||||
title: "Nastavitve dokumentov",
|
||||
description: "Privzete sistemske nastavitve za dokumente",
|
||||
route: "admin.document-settings.index",
|
||||
icon: faGears,
|
||||
},
|
||||
{
|
||||
title: 'Predloge dokumentov',
|
||||
description: 'Upravljanje in verzioniranje DOCX predlog',
|
||||
route: 'admin.document-templates.index',
|
||||
title: "Predloge dokumentov",
|
||||
description: "Upravljanje in verzioniranje DOCX predlog",
|
||||
route: "admin.document-templates.index",
|
||||
icon: faFileWord,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Email',
|
||||
category: "Email",
|
||||
items: [
|
||||
{
|
||||
title: 'Email predloge',
|
||||
description: 'Upravljanje HTML / tekst email predlog',
|
||||
route: 'admin.email-templates.index',
|
||||
title: "Email predloge",
|
||||
description: "Upravljanje HTML / tekst email predlog",
|
||||
route: "admin.email-templates.index",
|
||||
icon: faEnvelopeOpenText,
|
||||
},
|
||||
{
|
||||
title: 'Email dnevniki',
|
||||
description: 'Pregled poslanih emailov in statusov',
|
||||
route: 'admin.email-logs.index',
|
||||
title: "Email dnevniki",
|
||||
description: "Pregled poslanih emailov in statusov",
|
||||
route: "admin.email-logs.index",
|
||||
icon: faInbox,
|
||||
},
|
||||
{
|
||||
title: 'Mail profili',
|
||||
description: 'SMTP profili, nastavitve in testiranje povezave',
|
||||
route: 'admin.mail-profiles.index',
|
||||
title: "Mail profili",
|
||||
description: "SMTP profili, nastavitve in testiranje povezave",
|
||||
route: "admin.mail-profiles.index",
|
||||
icon: faAt,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Komunikacije',
|
||||
category: "Komunikacije",
|
||||
items: [
|
||||
{
|
||||
title: 'SMS profili',
|
||||
description: 'Nastavitve SMS profilov, testno pošiljanje in stanje kreditov',
|
||||
route: 'admin.sms-profiles.index',
|
||||
title: "SMS profili",
|
||||
description: "Nastavitve SMS profilov, testno pošiljanje in stanje kreditov",
|
||||
route: "admin.sms-profiles.index",
|
||||
icon: faGears,
|
||||
},
|
||||
{
|
||||
title: 'SMS pošiljatelji',
|
||||
description: 'Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile',
|
||||
route: 'admin.sms-senders.index',
|
||||
title: "SMS pošiljatelji",
|
||||
description: "Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile",
|
||||
route: "admin.sms-senders.index",
|
||||
icon: faAddressBook,
|
||||
},
|
||||
{
|
||||
title: 'SMS predloge',
|
||||
description: 'Tekstovne predloge za SMS obvestila in opomnike',
|
||||
route: 'admin.sms-templates.index',
|
||||
title: "SMS predloge",
|
||||
description: "Tekstovne predloge za SMS obvestila in opomnike",
|
||||
route: "admin.sms-templates.index",
|
||||
icon: faFileLines,
|
||||
},
|
||||
{
|
||||
title: 'SMS dnevniki',
|
||||
description: 'Pregled poslanih SMSov in statusov',
|
||||
route: 'admin.sms-logs.index',
|
||||
title: "SMS dnevniki",
|
||||
description: "Pregled poslanih SMSov in statusov",
|
||||
route: "admin.sms-logs.index",
|
||||
icon: faInbox,
|
||||
},
|
||||
{
|
||||
title: "SMS paketi",
|
||||
description: "Kreiranje in pošiljanje serijskih SMS paketov",
|
||||
route: "admin.packages.index",
|
||||
icon: faInbox,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Administrator">
|
||||
<div class="space-y-14">
|
||||
<section v-for="(group, i) in cards" :key="group.category" :class="[ i>0 ? 'pt-6 border-t border-gray-200/70' : '' ]">
|
||||
<section
|
||||
v-for="(group, i) in cards"
|
||||
:key="group.category"
|
||||
:class="[i > 0 ? 'pt-6 border-t border-gray-200/70' : '']"
|
||||
>
|
||||
<h2 class="text-xs font-semibold tracking-wider uppercase text-gray-500 mb-4">
|
||||
{{ group.category }}
|
||||
</h2>
|
||||
@@ -109,15 +129,22 @@ const cards = [
|
||||
class="group relative overflow-hidden p-5 rounded-lg border bg-white hover:border-indigo-300 hover:shadow transition focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100">
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100"
|
||||
>
|
||||
<FontAwesomeIcon :icon="item.icon" class="w-5 h-5" />
|
||||
</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-sm mb-1 flex items-center gap-2">
|
||||
{{ item.title }}
|
||||
<span class="opacity-0 group-hover:opacity-100 transition text-indigo-500 text-[10px] font-medium">→</span>
|
||||
<span
|
||||
class="opacity-0 group-hover:opacity-100 transition text-indigo-500 text-[10px] font-medium"
|
||||
>→</span
|
||||
>
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500 leading-relaxed line-clamp-3">{{ item.description }}</p>
|
||||
<p class="text-xs text-gray-500 leading-relaxed line-clamp-3">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -0,0 +1,359 @@
|
||||
<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())
|
||||
|
||||
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 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
|
||||
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,
|
||||
}
|
||||
|
||||
router.post(route('admin.packages.store-from-contracts'), payload, {
|
||||
onSuccess: () => {
|
||||
clearSelection()
|
||||
showCreate.value = false
|
||||
router.reload({ only: ['packages'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
</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"></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" 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">
|
||||
<button @click="goShow(p.id)" class="text-indigo-600 hover:underline text-sm">Odpri</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>
|
||||
@@ -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