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/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>