changes
This commit is contained in:
Simon Pocrnjič
+133
-157
@@ -1,185 +1,161 @@
|
||||
<script setup>
|
||||
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import { Link, useForm } from '@inertiajs/vue3';
|
||||
import { FwbA, FwbButton } from 'flowbite-vue';
|
||||
import { ref } from 'vue';
|
||||
import ContractDrawer from './Partials/ContractDrawer.vue';
|
||||
import ContractTable from './Partials/ContractTable.vue';
|
||||
import ActivityDrawer from './Partials/ActivityDrawer.vue';
|
||||
import ActivityTable from './Partials/ActivityTable.vue';
|
||||
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { FwbButton } from "flowbite-vue";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
import ContractDrawer from "./Partials/ContractDrawer.vue";
|
||||
import ContractTable from "./Partials/ContractTable.vue";
|
||||
import ActivityDrawer from "./Partials/ActivityDrawer.vue";
|
||||
import ActivityTable from "./Partials/ActivityTable.vue";
|
||||
import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
client_case: Object,
|
||||
contracts: Array,
|
||||
activities: Object,
|
||||
contract_types: Array,
|
||||
actions: Array
|
||||
client: Object,
|
||||
client_case: Object,
|
||||
contracts: Array,
|
||||
activities: Object,
|
||||
contract_types: Array,
|
||||
actions: Array,
|
||||
types: Object
|
||||
});
|
||||
|
||||
console.log(props.actions);
|
||||
|
||||
const getMainAddress = (adresses) => {
|
||||
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
const country = addr.country !== '' ? ` - ${addr.country}` : '';
|
||||
return addr.address !== '' ? addr.address + country : '';
|
||||
}
|
||||
|
||||
const getMainPhone = (phones) => {
|
||||
const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
|
||||
return pho.nu !== '' ? countryCode + pho.nu: '';
|
||||
}
|
||||
|
||||
const clientInfo = new Object({
|
||||
nu: props.client.person.nu,
|
||||
full_name: props.client.person.full_name,
|
||||
main_address: getMainAddress(props.client.person.addresses),
|
||||
main_phone: getMainPhone(props.client.person.phones),
|
||||
tax_number: props.client.person.tax_number,
|
||||
social_security_number: props.client.person.social_security_number,
|
||||
description: props.client.person.description
|
||||
});
|
||||
|
||||
const casePersonInfo = new Object({
|
||||
nu: props.client_case.person.nu,
|
||||
full_name: props.client_case.person.full_name,
|
||||
main_address: getMainAddress(props.client_case.person.addresses),
|
||||
main_phone: getMainPhone(props.client_case.person.phones),
|
||||
tax_number: props.client_case.person.tax_number,
|
||||
social_security_number: props.client_case.person.social_security_number,
|
||||
description: props.client_case.person.description
|
||||
});
|
||||
const clientDetails = ref(true);
|
||||
|
||||
//Drawer add new contract
|
||||
|
||||
const drawerCreateContract = ref(false);
|
||||
|
||||
const openDrawerCreateContract = () => {
|
||||
drawerCreateContract.value = true;
|
||||
}
|
||||
drawerCreateContract.value = true;
|
||||
};
|
||||
|
||||
//Drawer add new activity
|
||||
|
||||
const drawerAddActivity = ref(false);
|
||||
|
||||
const openDrawerAddActivity = () => {
|
||||
drawerAddActivity.value = true;
|
||||
}
|
||||
drawerAddActivity.value = true;
|
||||
};
|
||||
|
||||
//Close drawer (all)
|
||||
const closeDrawer = () => {
|
||||
drawerCreateContract.value = false;
|
||||
drawerAddActivity.value = false;
|
||||
}
|
||||
drawerCreateContract.value = false;
|
||||
drawerAddActivity.value = false;
|
||||
};
|
||||
|
||||
const showClientDetails = () => {
|
||||
clientDetails.value = false;
|
||||
};
|
||||
|
||||
const hideClietnDetails = () => {
|
||||
clientDetails.value = true;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AppLayout title="Client case">
|
||||
<template #header></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">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
<FwbA class= "hover:text-blue-500" :href="route('client.show', client)">
|
||||
{{ clientInfo.full_name }}
|
||||
</FwbA>
|
||||
</template>
|
||||
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppLayout title="Client case">
|
||||
<template #header></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-500"
|
||||
>
|
||||
<div class="mx-auto max-w-4x1 p-3 flex justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
<a class="hover:text-blue-500" :href="route('client.show', client)">
|
||||
{{ client.person.full_name }}
|
||||
</a>
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<button @click="showClientDetails" :hidden="clientDetails ? false : true">
|
||||
<AngleUpIcon />
|
||||
</button>
|
||||
<button :hidden="clientDetails" @click="hideClietnDetails">
|
||||
<AngleDownIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--div class="pt-1">
|
||||
<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">
|
||||
<PersonInfoGrid :person="clientInfo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="pt-6">
|
||||
<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-red-400">
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
Primer - oseba
|
||||
</template>
|
||||
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-1" :hidden="clientDetails">
|
||||
<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">
|
||||
<PersonInfoGrid :types="types" :person="client.person" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-1">
|
||||
<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-red-400">
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<PersonInfoGrid :person="casePersonInfo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
<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-red-400"
|
||||
>
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<SectionTitle>
|
||||
<template #title> Primer - oseba </template>
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div class="mx-auto max-w-4x1">
|
||||
<div class="flex justify-between p-3">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
Pogodbe
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
|
||||
</div>
|
||||
<ContractTable
|
||||
:client_case="client_case"
|
||||
:contracts="contracts"
|
||||
:contract_types="contract_types"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-1">
|
||||
<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-red-400"
|
||||
>
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<PersonInfoGrid :types="types" tab-color="red-600" :person="client_case.person" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-12 pb-6">
|
||||
<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">
|
||||
<div class="mx-auto max-w-4x1">
|
||||
<div class="flex justify-between p-3">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
Aktivnosti
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerAddActivity">Nova</FwbButton>
|
||||
</div>
|
||||
<ActivityTable
|
||||
:client_case="client_case"
|
||||
:activities="activities"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div class="mx-auto max-w-4x1">
|
||||
<div class="flex justify-between p-3">
|
||||
<SectionTitle>
|
||||
<template #title> Pogodbe </template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
|
||||
</div>
|
||||
<ContractTable
|
||||
:client_case="client_case"
|
||||
:contracts="contracts"
|
||||
:contract_types="contract_types"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<ContractDrawer
|
||||
:show="drawerCreateContract"
|
||||
@close="closeDrawer"
|
||||
:types="contract_types"
|
||||
:client_case="client_case"
|
||||
/>
|
||||
<ActivityDrawer
|
||||
:show="drawerAddActivity"
|
||||
@close="closeDrawer"
|
||||
:client_case="client_case"
|
||||
:actions="actions"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-12 pb-6">
|
||||
<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">
|
||||
<div class="mx-auto max-w-4x1">
|
||||
<div class="flex justify-between p-3">
|
||||
<SectionTitle>
|
||||
<template #title> Aktivnosti </template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerAddActivity">Nova</FwbButton>
|
||||
</div>
|
||||
<ActivityTable :client_case="client_case" :activities="activities" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<ContractDrawer
|
||||
:show="drawerCreateContract"
|
||||
@close="closeDrawer"
|
||||
:types="contract_types"
|
||||
:client_case="client_case"
|
||||
/>
|
||||
<ActivityDrawer
|
||||
:show="drawerAddActivity"
|
||||
@close="closeDrawer"
|
||||
:client_case="client_case"
|
||||
:actions="actions"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
import Drawer from '@/Components/Drawer.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clientUuid: String
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
const Address = {
|
||||
address: '',
|
||||
country: '',
|
||||
type_id: 1
|
||||
}
|
||||
|
||||
const Phone = {
|
||||
nu: '',
|
||||
country_code: '00386',
|
||||
type_id: 1
|
||||
}
|
||||
|
||||
const Person = {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
full_name: '',
|
||||
tax_number: '',
|
||||
social_security_number: '',
|
||||
description: '',
|
||||
address: Address,
|
||||
phone: Phone
|
||||
}
|
||||
|
||||
const formCreateCase = useForm({
|
||||
client_uuid: props.clientUuid,
|
||||
person: Person
|
||||
});
|
||||
|
||||
const storeCase = () => {
|
||||
formCreateCase.post(route('clientCase.store'), {
|
||||
onSuccess: () => {
|
||||
close();
|
||||
formCreateCase.reset();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close">
|
||||
|
||||
<template #title>Nova primer</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="storeCase">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<template #title>
|
||||
Oseba
|
||||
</template>
|
||||
</SectionTitle>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="fullname" value="Naziv"/>
|
||||
<TextInput
|
||||
id="fullname"
|
||||
ref="fullnameInput"
|
||||
v-model="formCreateCase.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="taxnumber" value="Davčna"/>
|
||||
<TextInput
|
||||
id="taxnumber"
|
||||
ref="taxnumberInput"
|
||||
v-model="formCreateCase.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="formCreateCase.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="formCreateCase.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="Država"/>
|
||||
<TextInput
|
||||
id="addressCountry"
|
||||
ref="addressCountryInput"
|
||||
v-model="formCreateCase.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="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="formCreateCase.person.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="formCreateCase.person.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="formCreateCase.person.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="formCreateCase.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="description"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formCreateCase.recentlySuccessful" class="me-3">
|
||||
Shranjeno.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': formCreateCase.processing }" :disabled="formCreateCase.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script setup>
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
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 { useForm } from '@inertiajs/vue3';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
client: Object
|
||||
});
|
||||
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
const form = useForm({
|
||||
person: props.client.person
|
||||
});
|
||||
|
||||
const updateClient = () => {
|
||||
form.put(route('person.update', props.client.person ), {
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props.client)
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>Posodobi {{ client.person.full_name }}</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="updateClient">
|
||||
<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.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="ctaxnumber" value="Davčna" />
|
||||
<TextInput
|
||||
id="ctaxnumber"
|
||||
ref="ctaxnumberInput"
|
||||
v-model="form.person.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="csocialSecurityNumber" value="Matična / Emšo" />
|
||||
<TextInput
|
||||
id="csocialSecurityNumber"
|
||||
ref="csocialSecurityNumberInput"
|
||||
v-model="form.person.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="cdescription" value="Opis"/>
|
||||
<TextInput
|
||||
id="cdescription"
|
||||
ref="cdescriptionInput"
|
||||
v-model="form.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjeno.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -3,52 +3,20 @@ 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 Drawer from '@/Components/Drawer.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import { ref } from 'vue';
|
||||
import { Link, useForm } from '@inertiajs/vue3';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
|
||||
import Pagination from '@/Components/Pagination.vue';
|
||||
import SearchInput from '@/Components/SearchInput.vue';
|
||||
import FormCreateCase from './Partials/FormCreateCase.vue';
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
client_cases: Object,
|
||||
urlPrev: String,
|
||||
filters: Object
|
||||
});
|
||||
|
||||
console.log(props.client_cases)
|
||||
|
||||
const Address = {
|
||||
address: '',
|
||||
country: '',
|
||||
type_id: 1
|
||||
}
|
||||
|
||||
const Phone = {
|
||||
nu: '',
|
||||
country_code: '00386',
|
||||
type_id: 1
|
||||
}
|
||||
|
||||
const Person = {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
full_name: '',
|
||||
tax_number: '',
|
||||
social_security_number: '',
|
||||
description: '',
|
||||
address: Address,
|
||||
phone: Phone
|
||||
}
|
||||
|
||||
const formCreateCase = useForm({
|
||||
client_uuid: props.client.uuid,
|
||||
person: Person
|
||||
filters: Object,
|
||||
types: Object
|
||||
});
|
||||
|
||||
const search = {
|
||||
@@ -65,42 +33,6 @@ const openDrawerCreateCase = () => {
|
||||
drawerCreateCase.value = true;
|
||||
}
|
||||
|
||||
const closeDrawer = () => {
|
||||
drawerCreateCase.value = false
|
||||
}
|
||||
|
||||
const getMainAddress = (adresses) => {
|
||||
const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
const country = addr.country !== '' ? ` - ${addr.country}` : '';
|
||||
return addr.address !== '' ? addr.address + country : '';
|
||||
}
|
||||
|
||||
const getMainPhone = (phones) => {
|
||||
const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
|
||||
return pho.nu !== '' ? countryCode + pho.nu: '';
|
||||
}
|
||||
const clientInfo = new Object({
|
||||
nu: props.client.person.nu,
|
||||
full_name: props.client.person.full_name,
|
||||
main_address: getMainAddress(props.client.person.addresses),
|
||||
main_phone: getMainPhone(props.client.person.phones),
|
||||
tax_number: props.client.person.tax_number,
|
||||
social_security_number: props.client.person.social_security_number,
|
||||
description: props.client.person.description
|
||||
});
|
||||
|
||||
const storeCase = () => {
|
||||
formCreateCase.post(route('clientCase.store'), {
|
||||
onSuccess: () => {
|
||||
closeDrawer();
|
||||
formCreateCase.reset();
|
||||
console.log(props.client_cases)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -109,12 +41,11 @@ const storeCase = () => {
|
||||
<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">
|
||||
<div class="mx-auto max-w-4x1 p-3 flex justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
{{ client.person.full_name }}
|
||||
</template>
|
||||
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,8 +54,8 @@ const storeCase = () => {
|
||||
<div class="pt-1">
|
||||
<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">
|
||||
<PersonInfoGrid :person="clientInfo"></PersonInfoGrid>
|
||||
<div class="mx-auto max-w-4x1 px-2">
|
||||
<PersonInfoGrid :types="types" :person="client.person"></PersonInfoGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,141 +93,9 @@ const storeCase = () => {
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<Drawer
|
||||
:show="drawerCreateCase"
|
||||
@close="drawerCreateCase = false">
|
||||
|
||||
<template #title>Nova primer</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="storeCase">
|
||||
<SectionTitle class="border-b mb-4">
|
||||
<template #title>
|
||||
Oseba
|
||||
</template>
|
||||
</SectionTitle>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="fullname" value="Naziv"/>
|
||||
<TextInput
|
||||
id="fullname"
|
||||
ref="fullnameInput"
|
||||
v-model="formCreateCase.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="taxnumber" value="Davčna"/>
|
||||
<TextInput
|
||||
id="taxnumber"
|
||||
ref="taxnumberInput"
|
||||
v-model="formCreateCase.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="formCreateCase.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="formCreateCase.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="Država"/>
|
||||
<TextInput
|
||||
id="addressCountry"
|
||||
ref="addressCountryInput"
|
||||
v-model="formCreateCase.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="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="formCreateCase.person.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="formCreateCase.person.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="formCreateCase.person.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="formCreateCase.description"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="description"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formCreateCase.recentlySuccessful" class="me-3">
|
||||
Shranjeno.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': formCreateCase.processing }" :disabled="formCreateCase.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
<FormCreateCase
|
||||
:show="drawerCreateCase"
|
||||
@close="drawerCreateCase = false"
|
||||
:client-uuid="client?.uuid"
|
||||
/>
|
||||
</template>
|
||||
@@ -6,10 +6,12 @@ import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/S
|
||||
|
||||
const props = defineProps({
|
||||
chart: Object,
|
||||
people: Array
|
||||
people: Array,
|
||||
terrain: Array
|
||||
});
|
||||
|
||||
console.log(props.people)
|
||||
|
||||
console.log(props.terrain)
|
||||
|
||||
|
||||
const tablePersonHeader = [
|
||||
@@ -18,14 +20,21 @@ const tablePersonHeader = [
|
||||
C_TD.make('Skupina', 'header')
|
||||
];
|
||||
|
||||
let tablePersonBody = [];
|
||||
const tblTerrainHead = [
|
||||
C_TD.make('Št.', 'header'),
|
||||
C_TD.make('Naziv', 'header'),
|
||||
C_TD.make('Začetek', 'header')
|
||||
];
|
||||
|
||||
let tablePersonBody = [];
|
||||
let tblTerrainBody = [];
|
||||
|
||||
const getRoute = (person) => {
|
||||
if( person.client ){
|
||||
return {route: 'client.show', options: person.client};
|
||||
}
|
||||
|
||||
return {route: 'clientCase.show', options: person.client_case};
|
||||
return {route: 'clientCase.show', options: person};
|
||||
}
|
||||
|
||||
props.people.forEach((p) => {
|
||||
@@ -34,12 +43,25 @@ props.people.forEach((p) => {
|
||||
const cols = [
|
||||
C_TD.make(Number(p.nu), 'body', {}, C_LINK.make(forLink.route, forLink.options, `font-bold hover:text-${p.group.color_tag}`)),
|
||||
C_TD.make(p.full_name, 'body'),
|
||||
C_TD.make(p.group.name)
|
||||
C_TD.make(p.group.added_segment, 'body')
|
||||
];
|
||||
|
||||
tablePersonBody.push(C_TR.make(cols, {class: `border-l-4 border-${p.group.color_tag}`}))
|
||||
});
|
||||
|
||||
props.terrain.forEach((t) => {
|
||||
const forLink = getRoute(t);
|
||||
const startDate = new Date(t.added_segment).toLocaleDateString('de');
|
||||
|
||||
const cols = [
|
||||
C_TD.make(t.person.nu, 'body', {}, C_LINK.make(forLink.route, forLink.options, `font-bold hover:text-red-400`)),
|
||||
C_TD.make(t.person.full_name, 'body'),
|
||||
C_TD.make(startDate, 'body')
|
||||
];
|
||||
|
||||
tblTerrainBody.push(C_TR.make(cols, {class: `border-l-4 border-red-400`}));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -67,7 +89,7 @@ props.people.forEach((p) => {
|
||||
Seznam primerov za terensko delo
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<BasicTable :header="tablePersonHeader" :body="tablePersonBody"></BasicTable>
|
||||
<BasicTable :header="tblTerrainHead" :body="tblTerrainBody"></BasicTable>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
||||
<SectionTitle class="p-4">
|
||||
|
||||
@@ -21,7 +21,7 @@ const activeTab = ref('actions')
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
||||
<fwb-tabs v-model="activeTab" variant="underline" >
|
||||
<fwb-tab name="actions" title="Actions">
|
||||
<ActionTable :actions="actions" />
|
||||
<ActionTable :actions="actions" :decisions="decisions" />
|
||||
</fwb-tab>
|
||||
<fwb-tab name="decisions" title="Decisions">
|
||||
<DecisionTable :decisions="decisions" />
|
||||
|
||||
@@ -1,12 +1,69 @@
|
||||
<script setup>
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import Drawer from '@/Components/Drawer.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
actions: Array
|
||||
actions: Array,
|
||||
decisions: Array
|
||||
});
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
|
||||
const selectOptions = ref([]);
|
||||
|
||||
const selectValue = ref([]);
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
decisions: []
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
drawerEdit.value = true;
|
||||
console.log(item.decisions);
|
||||
|
||||
item.decisions.forEach((d) => {
|
||||
selectValue.value.push({
|
||||
name: d.name,
|
||||
code: d.name.substring(0,2).toLowerCase() + d.id
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
form.reset();
|
||||
|
||||
drawerEdit.value = false;
|
||||
}
|
||||
|
||||
const onColorPickerChange = () => {
|
||||
console.log(form.color_tag);
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
props.decisions.forEach((d) => {
|
||||
selectOptions.value.push({
|
||||
name: d.name,
|
||||
code: d.name.substring(0,2).toLowerCase() + d.id
|
||||
});
|
||||
});
|
||||
|
||||
console.log(selectOptions.value);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
@@ -27,10 +84,63 @@ const props = defineProps({
|
||||
<fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button><EditIcon /></button>
|
||||
<button><TrashBinIcon /></button>
|
||||
<button @click="openEditDrawer(act)"><EditIcon /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
<Drawer
|
||||
:show="drawerEdit"
|
||||
@close="closeEditDrawer"
|
||||
>
|
||||
|
||||
<template #title>
|
||||
<span>Spremeni akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime"/>
|
||||
<TextInput
|
||||
id="name"
|
||||
ref="nameInput"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTag"
|
||||
ref="colorTagInput"
|
||||
v-model="form.color_tag"
|
||||
@change="onColorPickerChange"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ form.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisions"
|
||||
ref="decisionsSelect"
|
||||
v-model="selectValue"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="code"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
Reference in New Issue
Block a user