changes
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,197 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import Drawer from './Drawer.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
|
||||
},
|
||||
person: Object,
|
||||
types: Array,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const processing = ref(false);
|
||||
const errors = ref({});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
|
||||
setTimeout(() => {
|
||||
errors.value = {};
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const form = ref({
|
||||
address: '',
|
||||
country: '',
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
address: '',
|
||||
country: '',
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
};
|
||||
}
|
||||
|
||||
const create = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
const data = await axios({
|
||||
method: 'post',
|
||||
url: route('person.address.create', props.person),
|
||||
data: form.value
|
||||
}).then((response) => {
|
||||
props.person.addresses.push(response.data.address);
|
||||
|
||||
processing.value = false;
|
||||
|
||||
close();
|
||||
resetForm();
|
||||
|
||||
}).catch((reason) => {
|
||||
errors.value = reason.response.data.errors;
|
||||
processing.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const update = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
const data = await axios({
|
||||
method: 'put',
|
||||
url: route('person.address.update', {person: props.person, address_id: props.id}),
|
||||
data: form.value
|
||||
}).then((response) => {
|
||||
console.log(response.data.address)
|
||||
const index = props.person.addresses.findIndex( a => a.id === response.data.address.id );
|
||||
props.person.addresses[index] = response.data.address;
|
||||
|
||||
processing.value = false;
|
||||
|
||||
close();
|
||||
resetForm();
|
||||
|
||||
}).catch((reason) => {
|
||||
errors.value = reason.response.data.errors;
|
||||
processing.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
((id) => {
|
||||
if (props.edit && id !== 0){
|
||||
console.log(props.edit)
|
||||
props.person.addresses.filter((a) => {
|
||||
if(a.id === props.id){
|
||||
form.value = {
|
||||
address: a.address,
|
||||
country: a.country,
|
||||
type_id: a.type_id,
|
||||
description: a.description
|
||||
};
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
resetForm();
|
||||
})
|
||||
);
|
||||
|
||||
const callSubmit = () => {
|
||||
if( props.edit ) {
|
||||
update();
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>
|
||||
<span v-if="edit">Spremeni naslov</span>
|
||||
<span v-else>Dodaj novi naslov</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="callSubmit">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<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" />
|
||||
</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" />
|
||||
</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>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Test",
|
||||
created() {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
stype: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const selected = inject('selected');
|
||||
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div class="py-4 px-2" role="tabpanel" v-show="selected === name">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
import { provide, ref, useSlots } from 'vue';
|
||||
|
||||
defineProps({
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: 'blue-600'
|
||||
}
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const tabs = ref(slots.default().map((tab) => tab.props ));
|
||||
const selected = ref(tabs.value[0].name);
|
||||
|
||||
provide('selected', selected);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
|
||||
<ul class="flex flex-wrap -mb-px">
|
||||
<li class="me-2" v-for="tab in tabs" :key="tab.name">
|
||||
<button
|
||||
@click="selected = tab.name"
|
||||
class="inline-block p-4"
|
||||
:class="{
|
||||
['border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300']: tab.name !== selected,
|
||||
[`text-${ selectedColor } border-b-2 border-${ selectedColor } rounded-t-lg active dark:text-blue-500 dark:border-${ selectedColor }`]: tab.name === selected
|
||||
}"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="default-tab-content">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,43 +1,189 @@
|
||||
<script setup>
|
||||
import { FwbBadge } from 'flowbite-vue';
|
||||
import { EditIcon, PlusIcon, UserEditIcon } from '@/Utilities/Icons';
|
||||
import CusTab from './CusTab.vue';
|
||||
import CusTabs from './CusTabs.vue';
|
||||
import { provide, ref, watch } from 'vue';
|
||||
import PersonUpdateForm from './PersonUpdateForm.vue';
|
||||
import AddressCreateForm from './AddressCreateForm.vue';
|
||||
import PhoneCreateForm from './PhoneCreateForm.vue';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
person: Object
|
||||
})
|
||||
person: Object,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tabColor: {
|
||||
type: String,
|
||||
default: 'blue-600'
|
||||
},
|
||||
types: {
|
||||
type: Object,
|
||||
default: {
|
||||
address_types: [],
|
||||
phone_types: []
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
const drawerUpdatePerson = ref(false);
|
||||
const drawerAddAddress = ref(false);
|
||||
const drawerAddPhone = ref(false);
|
||||
|
||||
const editAddress = ref(false);
|
||||
const editAddressId = ref(0);
|
||||
|
||||
const editPhone = ref(false);
|
||||
const editPhoneId = ref(0);
|
||||
|
||||
const getMainAddress = (adresses) => {
|
||||
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
if( addr !== '' ){
|
||||
const country = addr.country !== '' ? ` - ${addr.country}` : '';
|
||||
return addr.address !== '' ? addr.address + country : '';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
const getMainPhone = (phones) => {
|
||||
const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
if( pho !== '' ){
|
||||
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
|
||||
return pho.nu !== '' ? countryCode + pho.nu: '';
|
||||
}
|
||||
|
||||
return '';
|
||||
|
||||
}
|
||||
|
||||
const openDrawerUpdateClient = () => {
|
||||
drawerUpdatePerson.value = true;
|
||||
}
|
||||
|
||||
const openDrawerAddAddress = (edit = false, id = 0) => {
|
||||
drawerAddAddress.value = true;
|
||||
editAddress.value = edit;
|
||||
editAddressId.value = id;
|
||||
|
||||
}
|
||||
|
||||
const operDrawerAddPhone = (edit = false, id = 0) => {
|
||||
drawerAddPhone.value = true;
|
||||
editPhone.value = edit;
|
||||
editPhoneId.value = id;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.main_address }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.main_phone }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<CusTabs :selected-color="tabColor">
|
||||
<CusTab name="person" title="Oseba">
|
||||
<div class="flex justify-end mb-2">
|
||||
<span class=" border-b-2 border-gray-500 hover:border-gray-800">
|
||||
<button @click="openDrawerUpdateClient"><UserEditIcon size="lg" css="text-gray-500 hover:text-gray-800" /></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainAddress(person.addresses) }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Phone</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ getMainPhone(person.phones) }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-1 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab >
|
||||
<CusTab name="addresses" title="Naslovi">
|
||||
<div class="flex justify-end mb-2">
|
||||
<span class="border-b-2 border-gray-500 hover:border-gray-800">
|
||||
<button><PlusIcon @click="openDrawerAddAddress(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
|
||||
<div class="rounded p-2 shadow" v-for="address in person.addresses">
|
||||
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
|
||||
<div class="flex ">
|
||||
<FwbBadge type="yellow">{{ address.country }}</FwbBadge>
|
||||
<FwbBadge>{{ address.type.name }}</FwbBadge>
|
||||
</div>
|
||||
<button><EditIcon @click="openDrawerAddAddress(true, address.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
|
||||
</div>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ address.address }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab>
|
||||
<CusTab name="phones" title="Telefonske">
|
||||
<div class="flex justify-end mb-2">
|
||||
<span class="border-b-2 border-gray-500 hover:border-gray-800">
|
||||
<button><PlusIcon @click="operDrawerAddPhone(false, 0)" size="lg" css="text-gray-500 hover:text-gray-800" /></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
|
||||
<div class="rounded p-2 shadow" v-for="phone in person.phones">
|
||||
<div class="text-sm leading-5 md:text-sm text-gray-500 flex justify-between">
|
||||
<div class="flex ">
|
||||
<FwbBadge title type="yellow">+{{ phone.country_code }}</FwbBadge>
|
||||
<FwbBadge>{{ phone.type.name }}</FwbBadge>
|
||||
</div>
|
||||
<button><EditIcon @click="operDrawerAddPhone(true, phone.id)" size="md" css="text-gray-500 hover:text-gray-800" /></button>
|
||||
</div>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ phone.nu }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CusTab>
|
||||
<CusTab name="other" title="Drugo">
|
||||
ssss4
|
||||
</CusTab>
|
||||
</CusTabs>
|
||||
<PersonUpdateForm
|
||||
:show="drawerUpdatePerson"
|
||||
@close="drawerUpdatePerson = false"
|
||||
:person="person"
|
||||
/>
|
||||
|
||||
<AddressCreateForm
|
||||
:show="drawerAddAddress"
|
||||
@close="drawerAddAddress = false"
|
||||
:person="person"
|
||||
:types="types.address_types"
|
||||
:id="editAddressId"
|
||||
:edit="editAddress"
|
||||
/>
|
||||
|
||||
<PhoneCreateForm
|
||||
:show="drawerAddPhone"
|
||||
@close="drawerAddPhone = false"
|
||||
:person="person"
|
||||
:types="types.phone_types"
|
||||
:id="editPhoneId"
|
||||
:edit="editPhone"
|
||||
/>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,139 @@
|
||||
<script setup>
|
||||
import Drawer from '@/Components/Drawer.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import axios from 'axios';
|
||||
import { inject, onMounted, ref } from 'vue';
|
||||
import InputError from './InputError.vue';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
person: Object
|
||||
});
|
||||
|
||||
const processingUpdate = ref(false);
|
||||
const errors = ref({});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
|
||||
setTimeout(() => {
|
||||
errors.value = {};
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const form = ref({
|
||||
full_name: props.person.full_name,
|
||||
tax_number: props.person.tax_number,
|
||||
social_security_number: props.person.social_security_number,
|
||||
description: props.person.description
|
||||
});
|
||||
|
||||
const updatePerson = () => {
|
||||
processingUpdate.value = true;
|
||||
errors.value = {};
|
||||
|
||||
axios({
|
||||
method: 'put',
|
||||
url: route('person.update', props.person ),
|
||||
data: form.value
|
||||
}).then((response) => {
|
||||
|
||||
props.person.full_name = response.data.person.full_name;
|
||||
props.person.tax_number = response.data.person.tax_number;
|
||||
props.person.social_security_number = response.data.person.social_security_number;
|
||||
props.person.description = response.data.person.description;
|
||||
|
||||
processingUpdate.value = false;
|
||||
close();
|
||||
}).catch((reason) => {
|
||||
console.log(reason.response.data);
|
||||
errors.value = reason.response.data.errors;
|
||||
processingUpdate.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>Posodobi {{ person.full_name }}</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="updatePerson">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<template #title>
|
||||
Oseba
|
||||
</template>
|
||||
</SectionTitle>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cfulname" value="Naziv" />
|
||||
<TextInput
|
||||
id="cfullname"
|
||||
ref="cfullnameInput"
|
||||
v-model="form.full_name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="full-name"
|
||||
/>
|
||||
<InputError v-if="errors.full_name !== undefined" v-for="err in errors.full_name" :message="err" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="ctaxnumber" value="Davčna" />
|
||||
<TextInput
|
||||
id="ctaxnumber"
|
||||
ref="ctaxnumberInput"
|
||||
v-model="form.tax_number"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="tax-number"
|
||||
/>
|
||||
<InputError v-if="errors.tax_number !== undefined" v-for="err in errors.tax_number" :message="err" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="csocialSecurityNumber" value="Matična / Emšo" />
|
||||
<TextInput
|
||||
id="csocialSecurityNumber"
|
||||
ref="csocialSecurityNumberInput"
|
||||
v-model="form.social_security_number"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="social-security-number"
|
||||
/>
|
||||
<InputError v-if="errors.social_security_number !== undefined" v-for="err in errors.social_security_number" :message="err" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="cdescription" value="Opis"/>
|
||||
<TextInput
|
||||
id="cdescription"
|
||||
ref="cdescriptionInput"
|
||||
v-model="form.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="description"
|
||||
/>
|
||||
<InputError v-if="errors.description !== undefined" v-for="err in errors.description" :message="err" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': processingUpdate }" :disabled="processingUpdate">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import Drawer from './Drawer.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';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
person: Object,
|
||||
types: Array,
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const processing = ref(false);
|
||||
const errors = ref({});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
|
||||
setTimeout(() => {
|
||||
errors.value = {};
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const form = ref({
|
||||
nu: '',
|
||||
country_code: 386,
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
nu: '',
|
||||
country_code: 386,
|
||||
type_id: props.types[0].id,
|
||||
description: ''
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
});
|
||||
};
|
||||
|
||||
const update = async () => {
|
||||
processing.value = true;
|
||||
errors.value = {};
|
||||
|
||||
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;
|
||||
return;
|
||||
}
|
||||
|
||||
resetForm();
|
||||
|
||||
})
|
||||
);
|
||||
|
||||
const submit = () => {
|
||||
if( props.edit ) {
|
||||
update();
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Drawer
|
||||
: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"
|
||||
/>
|
||||
|
||||
<InputError v-if="errors.nu !== undefined" v-for="err in 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="errors.country_code !== undefined" v-for="err in 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="flex justify-end mt-4">
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Test",
|
||||
created() {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user