258 lines
10 KiB
Vue
258 lines
10 KiB
Vue
<script setup>
|
|
import AppLayout from '@/Layouts/AppLayout.vue';
|
|
import List from '@/Components/List.vue';
|
|
import ListItem from '@/Components/ListItem.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import ItemGrid from '@/Components/ItemGrid.vue';
|
|
import { Item } from '@/Shared/AppObjects';
|
|
import Drawer from '@/Components/Drawer.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import { ref } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import ActionMessage from '@/Components/ActionMessage.vue';
|
|
import SectionTitle from '@/Components/SectionTitle.vue';
|
|
import { de } from 'date-fns/locale'
|
|
|
|
const props = defineProps({
|
|
client: Object
|
|
});
|
|
|
|
const Address = {
|
|
address: '',
|
|
country: '',
|
|
type_id: 1
|
|
}
|
|
|
|
const Person = {
|
|
first_name: '',
|
|
last_name: '',
|
|
full_name: '',
|
|
address: Address
|
|
}
|
|
|
|
const Contract = {
|
|
reference: '',
|
|
start_date: new Date(),
|
|
type_id: 3
|
|
}
|
|
|
|
const formCreateContract = useForm({
|
|
client_uuid: props.client.uuid,
|
|
person: Person,
|
|
contract: Contract
|
|
});
|
|
|
|
const drawerCreateContract = ref(false);
|
|
|
|
const openDrawerCreateContract = () => {
|
|
drawerCreateContract.value = true;
|
|
}
|
|
|
|
const closeDrawer = () => {
|
|
drawerCreateContract.value = false
|
|
}
|
|
|
|
const mainAddress = props.client.addresses.filter( a => a.type.id === 1 )[0] ?? '';
|
|
|
|
const clientInfo = [
|
|
Item.make('nu', 'Nu.', 'number', props.client.nu),
|
|
Item.make('full_name', 'Name', 'string', props.client.full_name),
|
|
Item.make('main_address', 'Address', 'string', mainAddress.address),
|
|
Item.make('tax_number', 'Tax NU.', 'string', props.client.tax_number),
|
|
Item.make('social_security_number', 'Social security NU.', 'string', props.client.social_security_number),
|
|
Item.make('description', 'Description', 'string', props.client.description)
|
|
]
|
|
|
|
const storeContract = () => {
|
|
formCreateContract.post(route('contract.store'), {
|
|
onBefore: () => {
|
|
formCreateContract.contract.start_date = formCreateContract.contract.start_date.toISOString();
|
|
},
|
|
onSuccess: () => {
|
|
closeDrawer();
|
|
formCreateContract.reset();
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Client">
|
|
<template #header>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
{{ client.full_name.toUpperCase() }}
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="pt-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400">
|
|
<div class="mx-auto max-w-4x1 p-3">
|
|
<ItemGrid :items="clientInfo"></ItemGrid>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
|
<div class="mx-auto max-w-4x1 py-3">
|
|
<PrimaryButton @click="openDrawerCreateContract" class="bg-blue-400">Add contract</PrimaryButton>
|
|
<List class="mt-2">
|
|
<ListItem v-for="contract in client.contracts">
|
|
<div class="flex justify-between shadow rounded border-solid border-l-4 border-red-400 p-2">
|
|
<div class="flex min-w-0 gap-x-4">
|
|
<div class="min-w-0 flex-auto">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">{{ contract.debtor.full_name }}</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ contract.reference }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
|
|
<p class="text-sm leading-6 text-gray-900">{{ contract.debtor.nu }}</p>
|
|
<div class="mt-1 flex items-center gap-x-1.5">
|
|
<p class="text-xs leading-5 text-gray-500">{{ contract.debtor.group.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
<Drawer
|
|
:show="drawerCreateContract"
|
|
@close="drawerCreateContract = false">
|
|
|
|
<template #title>Add contract</template>
|
|
<template #content>
|
|
<form @submit.prevent="storeContract">
|
|
<SectionTitle class="border-b mb-4">
|
|
<template #title>
|
|
Person
|
|
</template>
|
|
</SectionTitle>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="firstname" value="First name"/>
|
|
<TextInput
|
|
id="firstname"
|
|
ref="firstnameInput"
|
|
v-model="formCreateContract.person.first_name"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="first-name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="lastname" value="Last name"/>
|
|
<TextInput
|
|
id="lastname"
|
|
ref="lastnameInput"
|
|
v-model="formCreateContract.person.last_name"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="last-name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="fullname" value="Full name"/>
|
|
<TextInput
|
|
id="fullname"
|
|
ref="fullnameInput"
|
|
v-model="formCreateContract.person.full_name"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="full-name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="address" value="Address"/>
|
|
<TextInput
|
|
id="address"
|
|
ref="addressInput"
|
|
v-model="formCreateContract.person.address.address"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="address"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="addressCountry" value="Country"/>
|
|
<TextInput
|
|
id="addressCountry"
|
|
ref="addressCountryInput"
|
|
v-model="formCreateContract.person.address.country"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="address-country"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="addressType" value="Address type"/>
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="addressType"
|
|
v-model="formCreateContract.person.address.type_id"
|
|
>
|
|
<option value="1">Permanent</option>
|
|
<option value="2">Temporary</option>
|
|
<!-- ... -->
|
|
</select>
|
|
</div>
|
|
<SectionTitle class="mt-4 border-b mb-4">
|
|
<template #title>
|
|
Contract
|
|
</template>
|
|
</SectionTitle>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractRef" value="Reference"/>
|
|
<TextInput
|
|
id="contractRef"
|
|
ref="contractRefInput"
|
|
v-model="formCreateContract.contract.reference"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="contract-reference"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractStartDate" value="Start date"/>
|
|
<vue-date-picker id="contractStartDate" :format-locale="de" :enable-time-picker="false" format="dd.MM.yyyy" class="mt-1 block w-full" v-model="formCreateContract.contract.start_date"></vue-date-picker>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractTypeSelect" value="Contract type"/>
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="contractTypeSelect"
|
|
v-model="formCreateContract.person.address.type_id"
|
|
>
|
|
<option value="1">Early</option>
|
|
<option value="2">Hard</option>
|
|
<option value="3">Delivery</option>
|
|
<option value="4">Leasing</option>
|
|
<!-- ... -->
|
|
</select>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="formCreateContract.recentlySuccessful" class="me-3">
|
|
Saved.
|
|
</ActionMessage>
|
|
|
|
<PrimaryButton :class="{ 'opacity-25': formCreateContract.processing }" :disabled="formCreateContract.processing">
|
|
Save
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</Drawer>
|
|
</template> |