316 lines
10 KiB
Vue
316 lines
10 KiB
Vue
<script setup>
|
|
import { computed, ref } from "vue";
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
|
import InputLabel from "@/Components/InputLabel.vue";
|
|
import TextInput from "@/Components/TextInput.vue";
|
|
import { Link, useForm, router, usePage } from "@inertiajs/vue3";
|
|
import ActionMessage from "@/Components/ActionMessage.vue";
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
|
import { hasPermission } from "@/Services/permissions";
|
|
|
|
const props = defineProps({
|
|
clients: Object,
|
|
filters: Object,
|
|
});
|
|
|
|
const page = usePage();
|
|
// Expose as a callable computed: use in templates as hasPerm('permission-slug')
|
|
const hasPerm = computed(() => (permission) =>
|
|
hasPermission(page.props.auth?.user, permission)
|
|
);
|
|
|
|
const Address = {
|
|
address: "",
|
|
country: "",
|
|
type_id: 1,
|
|
};
|
|
|
|
const Phone = {
|
|
nu: "",
|
|
country_code: "00386",
|
|
type_id: 1,
|
|
};
|
|
|
|
const formClient = useForm({
|
|
first_name: "",
|
|
last_name: "",
|
|
full_name: "",
|
|
tax_number: "",
|
|
social_security_number: "",
|
|
description: "",
|
|
address: Address,
|
|
phone: Phone,
|
|
});
|
|
|
|
//Create client drawer
|
|
const drawerCreateClient = ref(false);
|
|
|
|
// Initial search (passed to DataTable toolbar)
|
|
const initialSearch = ref(props.filters?.search || "");
|
|
|
|
//Open drawer create client
|
|
const openDrawerCreateClient = () => {
|
|
drawerCreateClient.value = true;
|
|
};
|
|
|
|
//Close any drawer on page
|
|
const closeDrawer = () => {
|
|
drawerCreateClient.value = false;
|
|
};
|
|
|
|
//Ajax call post to store new client
|
|
const storeClient = () => {
|
|
formClient.post(route("client.store"), {
|
|
onBefore: () => {
|
|
formClient.address.type_id = Number(formClient.address.type_id);
|
|
},
|
|
onSuccess: () => {
|
|
closeDrawer();
|
|
formClient.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
// Formatting helpers
|
|
const fmtCurrency = (v) => {
|
|
const n = Number(v ?? 0);
|
|
try {
|
|
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
|
|
n
|
|
);
|
|
} catch (e) {
|
|
return `${n.toFixed(2)} €`;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Client">
|
|
<template #header> </template>
|
|
<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 space-y-3">
|
|
<!-- Top actions -->
|
|
<div
|
|
class="flex items-center justify-between gap-3"
|
|
v-if="hasPerm('client-edit')"
|
|
>
|
|
<PrimaryButton
|
|
@click="openDrawerCreateClient"
|
|
class="bg-blue-600 hover:bg-blue-700"
|
|
>Dodaj</PrimaryButton
|
|
>
|
|
</div>
|
|
|
|
<!-- DataTable (server-side) -->
|
|
<DataTableServer
|
|
:columns="[
|
|
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
|
|
{ key: 'name', label: 'Naročnik', sortable: false },
|
|
{
|
|
key: 'cases',
|
|
label: 'Primeri z aktivnimi pogodbami',
|
|
sortable: false,
|
|
align: 'right',
|
|
},
|
|
{
|
|
key: 'balance',
|
|
label: 'Skupaj stanje',
|
|
sortable: false,
|
|
align: 'right',
|
|
},
|
|
]"
|
|
:rows="clients.data || []"
|
|
:meta="{
|
|
current_page: clients.current_page,
|
|
per_page: clients.per_page,
|
|
total: clients.total,
|
|
last_page: clients.last_page,
|
|
}"
|
|
:sort="{
|
|
key: props.filters?.sort || null,
|
|
direction: props.filters?.direction || null,
|
|
}"
|
|
:search="initialSearch"
|
|
route-name="client"
|
|
row-key="uuid"
|
|
:page-size-options="[clients.per_page]"
|
|
:only-props="['clients']"
|
|
>
|
|
<template #cell-nu="{ row }">
|
|
{{ row.person?.nu || "-" }}
|
|
</template>
|
|
<template #cell-name="{ row }">
|
|
<Link
|
|
:href="route('client.show', { uuid: row.uuid })"
|
|
class="text-indigo-600 hover:underline"
|
|
>
|
|
{{ row.person?.full_name || "-" }}
|
|
</Link>
|
|
<div v-if="!row.person" class="mt-1">
|
|
<PrimaryButton
|
|
class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
|
|
@click.prevent="
|
|
router.post(route('client.emergencyPerson', { uuid: row.uuid }))
|
|
"
|
|
>Add Person</PrimaryButton
|
|
>
|
|
</div>
|
|
</template>
|
|
<template #cell-cases="{ row }">
|
|
<div class="text-right">
|
|
{{ row.cases_with_active_contracts_count ?? 0 }}
|
|
</div>
|
|
</template>
|
|
<template #cell-balance="{ row }">
|
|
<div class="text-right">
|
|
{{ fmtCurrency(row.active_contracts_balance_sum) }}
|
|
</div>
|
|
</template>
|
|
<template #empty>
|
|
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
|
|
</template>
|
|
</DataTableServer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
<DialogModal :show="drawerCreateClient" @close="drawerCreateClient = false">
|
|
<template #title>Novi naročnik</template>
|
|
<template #content>
|
|
<form @submit.prevent="storeClient">
|
|
<div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="fullname" value="Naziv" />
|
|
<TextInput
|
|
id="fullname"
|
|
ref="fullnameInput"
|
|
v-model="formClient.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="taxnumber" value="Davčna" />
|
|
<TextInput
|
|
id="taxnumber"
|
|
ref="taxnumberInput"
|
|
v-model="formClient.tax_number"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="tax-number"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="socialSecurityNumber" value="Matična / Emšo" />
|
|
<TextInput
|
|
id="socialSecurityNumber"
|
|
ref="socialSecurityNumberInput"
|
|
v-model="formClient.social_security_number"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="social-security-number"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="address" value="Naslov" />
|
|
<TextInput
|
|
id="address"
|
|
ref="addressInput"
|
|
v-model="formClient.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="Država" />
|
|
<TextInput
|
|
id="addressCountry"
|
|
ref="addressCountryInput"
|
|
v-model="formClient.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="Vrsta naslova" />
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="addressType"
|
|
v-model="formClient.address.type_id"
|
|
>
|
|
<option value="1">Stalni</option>
|
|
<option value="2">Začasni</option>
|
|
<!-- ... -->
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="phoneCountyCode" 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="phoneCountyCode"
|
|
v-model="formClient.phone.country_code"
|
|
>
|
|
<option value="00386">+386 (Slovenija)</option>
|
|
<option value="00385">+385 (Hrvaška)</option>
|
|
<option value="0039">+39 (Italija)</option>
|
|
<option value="0036">+39 (Madžarska)</option>
|
|
<option value="0043">+43 (Avstrija)</option>
|
|
<option value="00381">+381 (Srbija)</option>
|
|
<option value="00387">+387 (Bosna in Hercegovina)</option>
|
|
<option value="00382">+382 (Črna gora)</option>
|
|
<!-- ... -->
|
|
</select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="phoneNu" value="Telefonska št." />
|
|
<TextInput
|
|
id="phoneNu"
|
|
ref="phoneNuInput"
|
|
v-model="formClient.phone.nu"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="phone-nu"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="description" value="Opis" />
|
|
<TextInput
|
|
id="description"
|
|
ref="descriptionInput"
|
|
v-model="formClient.description"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="description"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="formClient.recentlySuccessful" class="me-3">
|
|
Shranjeno.
|
|
</ActionMessage>
|
|
|
|
<PrimaryButton
|
|
:class="{ 'opacity-25': formClient.processing }"
|
|
:disabled="formClient.processing"
|
|
>
|
|
Shrani
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</DialogModal>
|
|
</template>
|