sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of changes

Browse Source
This commit is contained in:
Simon Pocrnjič
2024-11-13 22:11:07 +01:00
parent 90a5858320
commit 953ff38d64
76 changed files with 2822 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Cases/Index.vue
+59
View File
@@ -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>
resources/js/Pages/Cases/Partials/ActivityDrawer.vue
+149
View File
@@ -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>
resources/js/Pages/Cases/Partials/ActivityTable.vue
+48
View File
@@ -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>
resources/js/Pages/Cases/Partials/ContractDrawer.vue
+102
View File
@@ -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>
resources/js/Pages/Cases/Partials/ContractTable.vue
+87
View File
@@ -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>
resources/js/Pages/Cases/Show.vue
+175
View File
@@ -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>
resources/js/Pages/Client/Index.vue
+31 -15
View File
@@ -1,23 +1,22 @@
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
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 InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import { useForm } from '@inertiajs/vue3';
import { Link, useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import Drawer from '@/Components/Drawer.vue';
import Pagination from '@/Components/Pagination.vue';
import SearchInput from '@/Components/SearchInput.vue';
const props = defineProps({
persons: Array,
create_url: String,
person_types: Array
clients: Object,
filters: Object
});
const drawerCreateClient = ref(false);
const Address = {
address: '',
country: '',
@@ -31,14 +30,29 @@ const formClient = useForm({
address: Address
});
//Create client drawer
const drawerCreateClient = ref(false);
//Search input
const search = {
search: props.filters.search,
route: {
link: 'client'
}
}
//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: () => {
@@ -50,10 +64,8 @@ const storeClient = () => {
}
});
};
</script>
<template>
@@ -67,26 +79,30 @@ const storeClient = () => {
<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="openDrawerCreateClient" class="bg-blue-400">Add client</PrimaryButton>
<div class="flex justify-between">
<PrimaryButton @click="openDrawerCreateClient" class="bg-blue-400">Add client</PrimaryButton>
<SearchInput :options="search" />
</div>
<List class="mt-2">
<ListItem v-for="person in persons">
<ListItem v-for="client in clients.data">
<div class="flex justify-between shadow rounded border-solid border-l-4 border-blue-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('client.show', { uuid: person.uuid })">{{ person.full_name }}</a></p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ person.nu }}</p>
<p class="text-sm font-semibold leading-6 text-gray-900"><Link :href="route('client.show', {uuid: client.uuid})">{{ client.person.full_name }}</Link></p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ client.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">{{ person.tax_number }}</p>
<p class="text-sm leading-6 text-gray-900">{{ client.person.tax_number }}</p>
<div class="mt-1 flex items-center gap-x-1.5">
<p class="text-xs leading-5 text-gray-500">{{ person.group.name }}</p>
<p class="text-xs leading-5 text-gray-500">Client</p>
</div>
</div>
</div>
</ListItem>
</List>
</div>
<Pagination :links="clients.links" :from="clients.from" :to="clients.to" :total="clients.total" />
</div>
</div>
</div>
resources/js/Pages/Client/Show.vue
+75 -92
View File
@@ -3,21 +3,26 @@ 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 { Link, useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import { de } from 'date-fns/locale'
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
import Pagination from '@/Components/Pagination.vue';
import SearchInput from '@/Components/SearchInput.vue';
const props = defineProps({
client: Object
client: Object,
client_cases: Object,
urlPrev: String,
filters: Object
});
console.log(props.client_cases)
const Address = {
address: '',
country: '',
@@ -31,47 +36,46 @@ const Person = {
address: Address
}
const Contract = {
reference: '',
start_date: new Date(),
type_id: 3
}
const formCreateContract = useForm({
const formCreateCase = useForm({
client_uuid: props.client.uuid,
person: Person,
contract: Contract
person: Person
});
const drawerCreateContract = ref(false);
const search = {
search: props.filters.search,
route: {
link: 'client.show',
options: {uuid: props.client.uuid}
}
}
const openDrawerCreateContract = () => {
drawerCreateContract.value = true;
const drawerCreateCase = ref(false);
const openDrawerCreateCase = () => {
drawerCreateCase.value = true;
}
const closeDrawer = () => {
drawerCreateContract.value = false
drawerCreateCase.value = false
}
const mainAddress = props.client.addresses.filter( a => a.type.id === 1 )[0] ?? '';
const mainAddress = props.client.person.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 clientInfo = new Object({
nu: props.client.person.nu,
full_name: props.client.person.full_name,
main_address: (mainAddress.country !== '') ? `${mainAddress.address} - ${mainAddress.country}` : mainAddress.address,
tax_number: props.client.person.tax_number,
social_security_number: props.client.person.social_security_number,
description: props.client.person.description
});
const storeContract = () => {
formCreateContract.post(route('contract.store'), {
onBefore: () => {
formCreateContract.contract.start_date = formCreateContract.contract.start_date.toISOString();
},
const storeCase = () => {
formCreateCase.post(route('clientCase.store'), {
onSuccess: () => {
closeDrawer();
formCreateContract.reset();
formCreateCase.reset();
console.log(props.client_cases)
}
});
};
@@ -81,17 +85,26 @@ const storeContract = () => {
<template>
<AppLayout title="Client">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ client.full_name.toUpperCase() }}
</h2>
</template>
<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">
<ItemGrid :items="clientInfo"></ItemGrid>
<SectionTitle>
<template #title>
{{ client.person.full_name }} - client
</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"></PersonInfoGrid>
</div>
</div>
</div>
@@ -101,37 +114,41 @@ const storeContract = () => {
<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>
<div class="flex justify-between">
<PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400">Add Case</PrimaryButton>
<SearchInput :options="search" />
</div>
<List class="mt-2">
<ListItem v-for="contract in client.contracts">
<ListItem v-for="clientCase in client_cases.data">
<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>
<p class="text-sm font-semibold leading-6 text-gray-900"><Link :href="route('clientCase.show', {uuid: clientCase.uuid})">{{ clientCase.person.full_name }}</Link></p>
<p class="mt-1 truncate text-xs leading-5 text-gray-500"></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>
<p class="text-sm leading-6 text-gray-900">{{ clientCase.person.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>
<p class="text-xs leading-5 text-gray-500">Client case</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>
<Drawer
:show="drawerCreateContract"
@close="drawerCreateContract = false">
:show="drawerCreateCase"
@close="drawerCreateCase = false">
<template #title>Add contract</template>
<template #title>Add case</template>
<template #content>
<form @submit.prevent="storeContract">
<form @submit.prevent="storeCase">
<SectionTitle class="border-b mb-4">
<template #title>
Person
@@ -142,7 +159,7 @@ const storeContract = () => {
<TextInput
id="firstname"
ref="firstnameInput"
v-model="formCreateContract.person.first_name"
v-model="formCreateCase.person.first_name"
type="text"
class="mt-1 block w-full"
autocomplete="first-name"
@@ -154,7 +171,7 @@ const storeContract = () => {
<TextInput
id="lastname"
ref="lastnameInput"
v-model="formCreateContract.person.last_name"
v-model="formCreateCase.person.last_name"
type="text"
class="mt-1 block w-full"
autocomplete="last-name"
@@ -166,7 +183,7 @@ const storeContract = () => {
<TextInput
id="fullname"
ref="fullnameInput"
v-model="formCreateContract.person.full_name"
v-model="formCreateCase.person.full_name"
type="text"
class="mt-1 block w-full"
autocomplete="full-name"
@@ -178,7 +195,7 @@ const storeContract = () => {
<TextInput
id="address"
ref="addressInput"
v-model="formCreateContract.person.address.address"
v-model="formCreateCase.person.address.address"
type="text"
class="mt-1 block w-full"
autocomplete="address"
@@ -190,7 +207,7 @@ const storeContract = () => {
<TextInput
id="addressCountry"
ref="addressCountryInput"
v-model="formCreateContract.person.address.country"
v-model="formCreateCase.person.address.country"
type="text"
class="mt-1 block w-full"
autocomplete="address-country"
@@ -202,53 +219,19 @@ const storeContract = () => {
<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"
v-model="formCreateCase.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">
<ActionMessage :on="formCreateCase.recentlySuccessful" class="me-3">
Saved.
</ActionMessage>
<PrimaryButton :class="{ 'opacity-25': formCreateContract.processing }" :disabled="formCreateContract.processing">
<PrimaryButton :class="{ 'opacity-25': formCreateCase.processing }" :disabled="formCreateCase.processing">
Save
</PrimaryButton>
</div>
resources/js/Pages/Dashboard.vue
+29 -14
View File
@@ -6,23 +6,38 @@ import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/S
const props = defineProps({
chart: Object,
clients: Array
people: Array
});
const tableClientHeader = [
console.log(props.people)
const tablePersonHeader = [
C_TD.make('Nu.', 'header'),
C_TD.make('Name', 'header')
C_TD.make('Name', 'header'),
C_TD.make('Group', 'header')
];
let tableClientBody = [];
let tablePersonBody = [];
const getRoute = (person) => {
if( person.client ){
return {route: 'client.show', options: person.client};
}
return {route: 'clientCase.show', options: person.client_case};
}
props.people.forEach((p) => {
const forLink = getRoute(p);
props.clients.forEach((p) => {
const cols = [
C_TD.make(Number(p.nu), 'body', {}, C_LINK.make('client.show', {'uuid': p.uuid})),
C_TD.make(p.full_name, 'body')
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)
];
tableClientBody.push(C_TR.make(cols))
tablePersonBody.push(C_TR.make(cols, {class: `border-l-4 border-${p.group.color_tag}`}))
});
</script>
@@ -34,7 +49,7 @@ props.clients.forEach((p) => {
Dashboard
</h2>
</template>
<div class="pt-12">
<div class="pt-12 hidden md:block">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-2">
<apexchart :width="chart.width" :height="chart.height" :type="chart.type" :options="chart.options" :series="chart.series"></apexchart>
@@ -42,7 +57,7 @@ props.clients.forEach((p) => {
</div>
</div>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-2 gap-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 grid md:grid-cols-2 gap-6">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<SectionTitle class="p-4">
<template #title>
@@ -52,18 +67,18 @@ props.clients.forEach((p) => {
List of new contracts for terrain work
</template>
</SectionTitle>
<BasicTable :table-head="tableClientHeader" :table-body="tableClientBody"></BasicTable>
<BasicTable :header="tablePersonHeader" :body="tablePersonBody"></BasicTable>
</div>
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<SectionTitle class="p-4">
<template #title>
Persons
Last added
</template>
<template #description>
List of new persons
List of new people
</template>
</SectionTitle>
<BasicTable :table-head="tableClientHeader" :table-body="tableClientBody"></BasicTable>
<BasicTable :header="tablePersonHeader" :body="tablePersonBody"></BasicTable>
</div>
</div>
</div>
resources/js/Pages/Settings/Index.vue
+36
View File
@@ -0,0 +1,36 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { ref } from 'vue';
import { FwbTab, FwbTabs } from 'flowbite-vue'
import ActionTable from './Partials/ActionTable.vue';
import DecisionTable from './Partials/DecisionTable.vue';
const props = defineProps({
actions: Array,
decisions: Array
});
const activeTab = ref('actions')
</script>
<template>
<AppLayout title="Settings">
<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">
<fwb-tabs v-model="activeTab" variant="underline" >
<fwb-tab name="actions" title="Actions">
<ActionTable :actions="actions" />
</fwb-tab>
<fwb-tab name="decisions" title="Decisions">
<DecisionTable :decisions="decisions" />
</fwb-tab>
</fwb-tabs>
</div>
</div>
</div>
</AppLayout>
</template>
resources/js/Pages/Settings/Partials/ActionTable.vue
+36
View File
@@ -0,0 +1,36 @@
<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({
actions: Array
});
const header = [
C_TD.make('#', 'header'),
C_TD.make('Name', 'header'),
C_TD.make('Color tag', 'header'),
C_TD.make('Decisions', 'header')
];
const createBody = (data) => {
let content = [];
data.forEach((a) => {
const cols = [
C_TD.make(a.id, 'body'),
C_TD.make(a.name, 'body'),
C_TD.make(a.color_tag, 'body'),
C_TD.make(a.decisions.length, 'body')
];
content.push(C_TR.make(cols));
});
return content;
}
</script>
<template>
<BasicTable :header="header" :body="createBody(actions)" />
</template>
resources/js/Pages/Settings/Partials/DecisionTable.vue
+36
View File
@@ -0,0 +1,36 @@
<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({
decisions: Array
});
const header = [
C_TD.make('#', 'header'),
C_TD.make('Name', 'header'),
C_TD.make('Color tag', 'header'),
C_TD.make('Belongs to actions', 'header')
];
const createBody = (data) => {
let content = [];
data.forEach((a) => {
const cols = [
C_TD.make(a.id, 'body'),
C_TD.make(a.name, 'body'),
C_TD.make(a.color_tag, 'body'),
C_TD.make(a.actions.length, 'body')
];
content.push(C_TR.make(cols));
});
return content;
}
</script>
<template>
<BasicTable :header="header" :body="createBody(decisions)" />
</template>