Lots of changes
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import List from '@/Components/List.vue';
|
||||
import ListItem from '@/Components/ListItem.vue';
|
||||
import Pagination from '@/Components/Pagination.vue';
|
||||
import SearchInput from '@/Components/SearchInput.vue';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
const props = defineProps({
|
||||
client_cases: Object,
|
||||
filters: Object
|
||||
});
|
||||
|
||||
const search = {
|
||||
search: props.filters.search,
|
||||
route: {
|
||||
link: 'clientCase'
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<AppLayout title="Client cases">
|
||||
<template #header>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Contracts
|
||||
</h2>
|
||||
</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">
|
||||
<div class="flex justify-end">
|
||||
<SearchInput :options="search" />
|
||||
</div>
|
||||
<List>
|
||||
<ListItem v-for="clientCase in client_cases.data">
|
||||
<div class="flex justify-between shadow rounded border-solid border-l-4 border-red-400 p-3">
|
||||
<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"><a :href="route('clientCase.show', {uuid: clientCase.uuid})">{{ clientCase.person.full_name }}</a></p>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ clientCase.person.nu }}</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">{{ clientCase.person.tax_number }}</p>
|
||||
<div class="mt-1 flex items-center gap-x-1.5">
|
||||
<p class="text-xs leading-5 text-gray-500">{{ clientCase.person.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
<Pagination :links="client_cases.links" :from="client_cases.from" :to="client_cases.to" :total="client_cases.total" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,149 @@
|
||||
<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 { FwbTextarea } from 'flowbite-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
client_case: Object,
|
||||
actions: Array
|
||||
});
|
||||
|
||||
const decisions = ref(props.actions[0].decisions);
|
||||
|
||||
console.log(props.actions);
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
const form = useForm({
|
||||
due_date: null,
|
||||
amount: null,
|
||||
note: '',
|
||||
action_id: props.actions[0].id,
|
||||
decision_id: props.actions[0].decisions[0].id
|
||||
});
|
||||
|
||||
watch(
|
||||
() => form.action_id,
|
||||
(action_id) => {
|
||||
decisions.value = props.actions.filter((el) => el.id === action_id)[0].decisions;
|
||||
form.decision_id = decisions.value[0].id;
|
||||
}
|
||||
);
|
||||
|
||||
const store = () => {
|
||||
console.table({
|
||||
due_date: form.due_date,
|
||||
action_id: form.action_id,
|
||||
decision_id: form.decision_id,
|
||||
amount: form.amount,
|
||||
note: form.note
|
||||
});
|
||||
form.post(route('clientCase.activity.store', props.client_case), {
|
||||
onBefore: () => {
|
||||
if(form.due_date !== null || form.due_date !== '') {
|
||||
form.due_date = new Date(form.due_date).toISOString();
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
close();
|
||||
form.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>Add activity</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<SectionTitle class="mt-4 border-b mb-4">
|
||||
<template #title>
|
||||
Activity
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="activityDueDate" value="Due date"/>
|
||||
<vue-date-picker
|
||||
id="activityDueDate"
|
||||
:enable-time-picker="false"
|
||||
format="dd.MM.yyyy"
|
||||
class="mt-1 block w-full"
|
||||
v-model="form.due_date"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="activityAmount" value="Amount"/>
|
||||
<TextInput
|
||||
id="activityAmount"
|
||||
ref="activityAmountinput"
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="0.00"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="activityAction" value="Action"/>
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="activityAction"
|
||||
ref="activityActionSelect"
|
||||
v-model="form.action_id"
|
||||
>
|
||||
<option v-for="a in actions" :value="a.id">{{ a.name }}</option>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="activityDecision" value="Decision"/>
|
||||
<select
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
id="activityDecision"
|
||||
ref="activityDecisionSelect"
|
||||
v-model="form.decision_id"
|
||||
>
|
||||
<option v-for="d in decisions" :value="d.id">{{ d.name }}</option>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<FwbTextarea
|
||||
label="Note"
|
||||
id="activityNote"
|
||||
ref="activityNoteTextarea"
|
||||
v-model="form.note"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Saved.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
import BasicTable from '@/Components/BasicTable.vue';
|
||||
import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/Shared/AppObjects';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
activities: Object
|
||||
});
|
||||
|
||||
|
||||
let header = [
|
||||
C_TD.make('Date', 'header'),
|
||||
C_TD.make('Action', 'header'),
|
||||
C_TD.make('Decision', 'header'),
|
||||
C_TD.make('Note', 'header'),
|
||||
C_TD.make('Due date', 'header'),
|
||||
C_TD.make('Amount', 'header')
|
||||
];
|
||||
|
||||
const createBody = (data) => {
|
||||
let body = [];
|
||||
|
||||
data.forEach((p) => {
|
||||
const createdDate = new Date(p.created_at).toLocaleDateString('de');
|
||||
const dueDate = (p.due_date === null) ? new Date().toLocaleDateString('de') : null;
|
||||
|
||||
const cols = [
|
||||
C_TD.make(createdDate, 'body' ),
|
||||
C_TD.make(p.action.name, 'body'),
|
||||
C_TD.make(p.decision.name, 'body'),
|
||||
C_TD.make(p.note, 'body' ),
|
||||
C_TD.make(dueDate, 'body' ),
|
||||
C_TD.make(Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p.amount), 'body' )
|
||||
];
|
||||
|
||||
body.push(
|
||||
C_TR.make(cols)
|
||||
)
|
||||
});
|
||||
|
||||
return body;
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BasicTable :header="header" :body="createBody(activities.data)" />
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<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';
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
types: Array
|
||||
});
|
||||
|
||||
console.log(props.types);
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
//store contract
|
||||
const formContract = useForm({
|
||||
client_case_uuid: props.client_case.uuid,
|
||||
reference: '',
|
||||
start_date: new Date().toISOString(),
|
||||
type_id: props.types[0].id
|
||||
});
|
||||
|
||||
const storeContract = () => {
|
||||
formContract.post(route('clientCase.contract.store', props.client_case), {
|
||||
onBefore: () => {
|
||||
formContract.start_date = formContract.start_date;
|
||||
},
|
||||
onSuccess: () => {
|
||||
close();
|
||||
formContract.reset();
|
||||
},
|
||||
preserveScroll: true
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>Add contract</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="storeContract">
|
||||
<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="formContract.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" :enable-time-picker="false" format="dd.MM.yyyy" class="mt-1 block w-full" v-model="formContract.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="formContract.type_id"
|
||||
>
|
||||
<option v-for="t in types" :value="t.id">{{ t.name }}</option>
|
||||
<!-- ... -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formContract.recentlySuccessful" class="me-3">
|
||||
Saved.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': formContract.processing }" :disabled="formContract.processing">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import BasicTable from '@/Components/BasicTable.vue';
|
||||
import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/Shared/AppObjects';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
contract_types: Array,
|
||||
contracts: Array
|
||||
});
|
||||
|
||||
//Contract table
|
||||
let tableContractHeader = [
|
||||
C_TD.make('Ref.', 'header'),
|
||||
C_TD.make('Start date', 'header'),
|
||||
C_TD.make('Type', 'header')
|
||||
];
|
||||
|
||||
const tableOptions = {
|
||||
editor_data: {
|
||||
form: {
|
||||
route: {name: 'clientCase.contract.update', params: {uuid: props.client_case.uuid}},
|
||||
route_remove: {name: 'clientCase.contract.delete', params: {uuid: props.client_case.uuid}},
|
||||
values: {
|
||||
uuid: null,
|
||||
reference: '',
|
||||
type_id: 1
|
||||
},
|
||||
key: 'uuid',
|
||||
index: {uuid: null},
|
||||
el: [
|
||||
{
|
||||
id: 'contractRefU',
|
||||
ref: 'contractRefUInput',
|
||||
bind: 'reference',
|
||||
type: 'text',
|
||||
label: 'Reference',
|
||||
autocomplete: 'contract-reference'
|
||||
},
|
||||
{
|
||||
id: 'contractTypeU',
|
||||
ref: 'contractTypeSelectU',
|
||||
bind: 'type_id',
|
||||
type: 'select',
|
||||
label: 'Type',
|
||||
selectOptions: props.contract_types.map(item => new Object({val: item.id, desc: item.name}))
|
||||
}
|
||||
]
|
||||
},
|
||||
title: 'contract'
|
||||
}
|
||||
}
|
||||
|
||||
const createContractTableBody = (data) => {
|
||||
let tableContractBody = [];
|
||||
|
||||
data.forEach((p) => {
|
||||
let startDate = new Date(p.start_date).toLocaleDateString('de');
|
||||
const cols = [
|
||||
C_TD.make(p.reference, 'body' ),
|
||||
C_TD.make(startDate, 'body' ),
|
||||
C_TD.make(p.type.name, 'body' ),
|
||||
];
|
||||
|
||||
tableContractBody.push(
|
||||
C_TR.make(
|
||||
cols,
|
||||
{
|
||||
class: '',
|
||||
title: p.reference,
|
||||
edit: true,
|
||||
ref: {key: 'uuid', val: p.uuid},
|
||||
editable: {
|
||||
reference: p.reference,
|
||||
type_id: p.type.id
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
});
|
||||
|
||||
return tableContractBody;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<BasicTable :options="tableOptions" :header="tableContractHeader" :editor="true" :body="createContractTableBody(contracts)" />
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
<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';
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
client_case: Object,
|
||||
contracts: Array,
|
||||
activities: Object,
|
||||
contract_types: Array,
|
||||
actions: Array
|
||||
});
|
||||
|
||||
console.log(props.actions);
|
||||
|
||||
//Client and case person info card
|
||||
const clientMainAddress = props.client.person.addresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
const personMainAddress = props.client_case.person.addresses.filter( a => a.type.id === 1 )[0] ?? '';
|
||||
|
||||
const clientInfo = new Object({
|
||||
nu: props.client.person.nu,
|
||||
full_name: props.client.person.full_name,
|
||||
main_address: (clientMainAddress.country !== '') ? `${clientMainAddress.address} - ${clientMainAddress.country}` : clientMainAddress.address,
|
||||
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: (personMainAddress.country !== '') ? `${personMainAddress.address} - ${personMainAddress.country}` : personMainAddress.address,
|
||||
tax_number: props.client_case.person.tax_number,
|
||||
social_security_number: props.client_case.person.social_security_number,
|
||||
description: props.client_case.person.description
|
||||
});
|
||||
|
||||
//Drawer add new contract
|
||||
|
||||
const drawerCreateContract = ref(false);
|
||||
|
||||
const openDrawerCreateContract = () => {
|
||||
drawerCreateContract.value = true;
|
||||
}
|
||||
|
||||
//Drawer add new activity
|
||||
|
||||
const drawerAddActivity = ref(false);
|
||||
|
||||
const openDrawerAddActivity = () => {
|
||||
drawerAddActivity.value = true;
|
||||
}
|
||||
|
||||
//Close drawer (all)
|
||||
const closeDrawer = () => {
|
||||
drawerCreateContract.value = false;
|
||||
drawerAddActivity.value = false;
|
||||
}
|
||||
|
||||
|
||||
</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)">
|
||||
Client
|
||||
</FwbA>
|
||||
</template>
|
||||
|
||||
</SectionTitle>
|
||||
</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-blue-400">
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<PersonInfoGrid :person="clientInfo" />
|
||||
</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 border-red-400">
|
||||
<div class="mx-auto max-w-4x1 p-3">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
Case
|
||||
</template>
|
||||
|
||||
</SectionTitle>
|
||||
</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 :person="casePersonInfo" />
|
||||
</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>
|
||||
Contracts
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerCreateContract">Add new</FwbButton>
|
||||
</div>
|
||||
<ContractTable
|
||||
:client_case="client_case"
|
||||
:contracts="contracts"
|
||||
:contract_types="contract_types"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Activities
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerAddActivity">Add new</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>
|
||||
Reference in New Issue
Block a user