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

Package system sms

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-10-26 12:57:09 +01:00
parent 266af6595e
commit 369af34ad4
29 changed files with 2639 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/AddressCreateForm.vue
+131 -117
View File
@@ -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>
resources/js/Components/PersonInfoGrid.vue
+187 -6
View File
@@ -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>
resources/js/Components/PhoneCreateForm.vue
+153 -121
View File
@@ -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>