Dev branch
This commit is contained in:
Simon Pocrnjič
@@ -1,11 +1,9 @@
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import DialogModal from "./DialogModal.vue";
|
||||
import CreateDialog from "./Dialogs/CreateDialog.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({
|
||||
@@ -15,14 +13,6 @@ const props = defineProps({
|
||||
},
|
||||
person: Object,
|
||||
types: Array,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// Using Inertia useForm for state, errors and processing
|
||||
@@ -70,156 +60,110 @@ const create = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
const update = async () => {
|
||||
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
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
watch(() => props.id, () => hydrateFromProps());
|
||||
watch(() => props.show, (val) => { if (val) hydrateFromProps(); });
|
||||
|
||||
const submit = () => {
|
||||
if (props.edit) {
|
||||
update();
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
create();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<DialogModal :show="show" @close="close">
|
||||
<template #title>
|
||||
<span v-if="edit">Spremeni telefon</span>
|
||||
<span v-else>Dodaj novi telefon</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="submit">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<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"
|
||||
/>
|
||||
<CreateDialog
|
||||
:show="show"
|
||||
title="Dodaj novi telefon"
|
||||
confirm-text="Shrani"
|
||||
:processing="form.processing"
|
||||
@close="close"
|
||||
@confirm="submit"
|
||||
>
|
||||
<form @submit.prevent="submit">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<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="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>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
<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>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
|
||||
<InputError
|
||||
v-if="form.errors.country_code !== undefined"
|
||||
v-for="err in form.errors.country_code"
|
||||
:message="err"
|
||||
<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" />
|
||||
<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>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<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>
|
||||
</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': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<span class="ml-2">Potrjeno</span>
|
||||
</label>
|
||||
<InputError
|
||||
v-if="form.errors.validated !== undefined"
|
||||
v-for="err in form.errors.validated"
|
||||
:message="err"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</CreateDialog>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user