Lots of changes
This commit is contained in:
Simon Pocrnjič
@@ -1,7 +1,9 @@
|
||||
@import '/node_modules/floating-vue/dist/style.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
[x-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" class="fill-black" />
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</template>
|
||||
|
||||
@@ -4,14 +4,6 @@ import { Link } from '@inertiajs/vue3';
|
||||
|
||||
<template>
|
||||
<Link :href="'/'">
|
||||
<svg
|
||||
class="w-16 h-16"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-32 h-32" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
@@ -1,27 +1,192 @@
|
||||
<script setup>
|
||||
import { FwbButton, FwbModal, FwbTable, FwbTableBody, FwbTableCell, FwbTableHead, FwbTableHeadCell, FwbTableRow } from 'flowbite-vue';
|
||||
import Drawer from './Drawer.vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
import TextInput from './TextInput.vue';
|
||||
import InputLabel from './InputLabel.vue';
|
||||
import ActionMessage from './ActionMessage.vue';
|
||||
import PrimaryButton from './PrimaryButton.vue';
|
||||
import Modal from './Modal.vue';
|
||||
import SecondaryButton from './SecondaryButton.vue';
|
||||
|
||||
defineProps({
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
description: String,
|
||||
tableHead: Array,
|
||||
tableBody: Array
|
||||
header: Array,
|
||||
body: Array,
|
||||
editor: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const drawerUpdateForm = ref(false);
|
||||
const modalRemove = ref(false);
|
||||
const formUpdate = (props.editor) ? useForm(props.options.editor_data.form.values) : false;
|
||||
const formRemove = (props.editor) ? useForm({type: 'soft', key: null}) : false;
|
||||
|
||||
const openEditor = (ref, data) => {
|
||||
formUpdate[ref.key] = ref.val;
|
||||
for(const [key, value] of Object.entries(data)) {
|
||||
formUpdate[key] = value;
|
||||
}
|
||||
drawerUpdateForm.value = true;
|
||||
}
|
||||
|
||||
const closeEditor = () => {
|
||||
drawerUpdateForm.value = false;
|
||||
}
|
||||
|
||||
const setUpdateRoute = (name, params = false, index) => {
|
||||
if(!params){
|
||||
return route(name, index)
|
||||
}
|
||||
|
||||
return route(name, [params, index]);
|
||||
}
|
||||
|
||||
const update = () => {
|
||||
|
||||
const putRoute = setUpdateRoute(
|
||||
props.options.editor_data.form.route.name,
|
||||
props.options.editor_data.form.route.params,
|
||||
formUpdate[props.options.editor_data.form.key]
|
||||
)
|
||||
|
||||
formUpdate.put(putRoute, {
|
||||
onSuccess: () => {
|
||||
closeEditor();
|
||||
formUpdate.reset();
|
||||
console.log('ssss')
|
||||
},
|
||||
preserveScroll: true
|
||||
});
|
||||
}
|
||||
|
||||
const modalRemoveTitle = ref('');
|
||||
|
||||
const closeModal = () => {
|
||||
modalRemove.value = false;
|
||||
}
|
||||
|
||||
const showModal = (key, title) => {
|
||||
modalRemoveTitle.value = title;
|
||||
formRemove.key = key;
|
||||
modalRemove.value = true;
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
const removeRoute = setUpdateRoute(
|
||||
props.options.editor_data.form.route_remove.name,
|
||||
props.options.editor_data.form.route_remove.params,
|
||||
formRemove.key
|
||||
)
|
||||
|
||||
formRemove.delete(removeRoute, {
|
||||
onSuccess: () => {
|
||||
closeModal();
|
||||
formRemove.reset();
|
||||
},
|
||||
preserveScroll: true
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="relative overflow-x-auto">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
|
||||
<th scope="col" class="px-6 py-3 font-bold" v-for="h in tableHead">{{ h.data }}</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-100 hover:bg-gray-100 even:dark:bg-gray-800 border-b dark:border-gray-700" v-for="row in tableBody">
|
||||
<th scope="row" class="px-6 py-4 font-light text-gray-900 whitespace-nowrap dark:text-white" v-for="col in row.cols">
|
||||
<a v-if="col.link !== undefined" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
|
||||
<FwbTable hoverable>
|
||||
<FwbTableHead>
|
||||
<FwbTableHeadCell v-for="h in header">{{ h.data }}</FwbTableHeadCell>
|
||||
<FwbTableHeadCell v-if="editor"></FwbTableHeadCell>
|
||||
<FwbTableHeadCell v-else />
|
||||
</FwbTableHead>
|
||||
<FwbTableBody>
|
||||
<FwbTableRow v-for="(row, key, parent_index) in body" :class="row.options.class" >
|
||||
<FwbTableCell v-for="col in row.cols">
|
||||
<a v-if="col.link !== undefined" :class="col.link.css" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
|
||||
<span v-else>{{ col.data }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</FwbTableCell>
|
||||
<FwbTableCell v-if="editor">
|
||||
<fwb-button class="mr-1" size="sm" color="default" @click="openEditor(row.options.ref, row.options.editable)" outline>Edit</fwb-button>
|
||||
<fwb-button size="sm" color="red" @click="showModal(row.options.ref.val, row.options.title)" outline>Remove</fwb-button>
|
||||
</FwbTableCell>
|
||||
<FwbTableCell v-else />
|
||||
</FwbTableRow>
|
||||
</FwbTableBody>
|
||||
</FwbTable>
|
||||
</div>
|
||||
<Drawer
|
||||
v-if="editor"
|
||||
:show="drawerUpdateForm"
|
||||
@close="drawerUpdateForm = false"
|
||||
>
|
||||
|
||||
<template #title>Update {{ options.editor_data.title }}</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div v-for="e in options.editor_data.form.el" class="col-span-6 sm:col-span-4 mb-4">
|
||||
<InputLabel :for="e.id" :value="e.label"/>
|
||||
<TextInput
|
||||
v-if="e.type === 'text'"
|
||||
:id="e.id"
|
||||
:ref="e.ref"
|
||||
type="text"
|
||||
:autocomplete="e.autocomplete"
|
||||
class="mt-1 block w-full"
|
||||
v-model="formUpdate[e.bind]"
|
||||
/>
|
||||
<select
|
||||
v-else-if="e.type === 'select'"
|
||||
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
:id="e.id"
|
||||
:ref="e.ref"
|
||||
v-model="formUpdate[e.bind]"
|
||||
>
|
||||
<option v-for="op in e.selectOptions" :value="op.val">{{ op.desc }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formUpdate.recentlySuccessful" class="me-3">
|
||||
Saved.
|
||||
</ActionMessage>
|
||||
<PrimaryButton :class="{ 'opacity-25': formUpdate.processing }" :disabled="formUpdate.processing">
|
||||
Save
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
|
||||
<Modal
|
||||
v-if="editor"
|
||||
:show="modalRemove"
|
||||
@close="closeModal"
|
||||
maxWidth="sm"
|
||||
>
|
||||
<form @submit.prevent="remove">
|
||||
<div class="p-3">
|
||||
<div class="text-lg text-center py-2 mb-4">
|
||||
Remove {{ options.editor_data.title }} <b>{{ modalRemoveTitle }}</b>?
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<SecondaryButton type="button" @click="closeModal">
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
<ActionMessage :on="formRemove.recentlySuccessful" class="me-3">
|
||||
Deleted.
|
||||
</ActionMessage>
|
||||
<PrimaryButton class="bg-red-700" :class="{ 'opacity-25': formRemove.processing }" :disabled="formRemove.processing">
|
||||
Delete
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
|
||||
defineProps({
|
||||
breadcrumbs: Array
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="breadcrumbs" class="flex" aria-label="Breadcrumb">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
|
||||
<li v-for="(page, index) in breadcrumbs" class="flex items-center">
|
||||
<svg v-if="index !== 0" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
<a v-if="page.current === undefined" :href="page.url" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">{{ page.title }}</a>
|
||||
<span v-else class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ page.title }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -9,7 +9,7 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class=" rounded p-2 shadow" v-for="item in items">
|
||||
<div class="rounded p-2 shadow" v-for="item in items">
|
||||
<p class="text-sm leading-5 md text-gray-500">{{ item.title }}</p>
|
||||
<p class="text-lg leading-7 text-gray-900">{{ item.val }}</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
links: Array,
|
||||
from: Number,
|
||||
to: Number,
|
||||
total: Number
|
||||
});
|
||||
|
||||
const num = props.links.length;
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex items-center justify-between bg-white px-4 py-3 sm:px-6">
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
|
||||
<a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">{{ from }}</span>
|
||||
to
|
||||
<span class="font-medium">{{ to }}</span>
|
||||
of
|
||||
<span class="font-medium">{{ total }}</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<template v-for="(link, index) in links">
|
||||
<component
|
||||
:is="link.url ? Link : 'span'"
|
||||
v-if="index === 0 || index === (num - 1)"
|
||||
:href="link.url"
|
||||
class="relative inline-flex items-center px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0"
|
||||
:class="{
|
||||
'rounded-l-md': index === 0,
|
||||
'rounded-r-md': index === (num - 1),
|
||||
'text-gray-900 hover:bg-gray-50': link.url,
|
||||
'text-gray-400 bg-gray-100': ! link.url}"
|
||||
>
|
||||
|
||||
<span class="sr-only">
|
||||
{{ index === 0 ? 'Previous' : 'Next' }}
|
||||
</span>
|
||||
<svg v-if="index === 0" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg v-else class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</component>
|
||||
<component
|
||||
v-else
|
||||
:is="link.url ? Link : 'span'"
|
||||
:href="link.url"
|
||||
v-html="link.label"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:outline-offset-0"
|
||||
:class="{
|
||||
'text-gray-700 ring-1 ring-inset ring-gray-300': ! link.url,
|
||||
'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20': link.url && ! link.active,
|
||||
'z-10 bg-blue-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600': link.url && link.active
|
||||
}"
|
||||
>
|
||||
|
||||
</component>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
person: Object
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-2 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.address }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-2 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import { debounce } from 'lodash';
|
||||
import { ref, watch } from 'vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
options: Object
|
||||
});
|
||||
|
||||
const search = ref(props.options.search)
|
||||
|
||||
watch(search, debounce((value) => {
|
||||
const routeOptions = props.options.route.options ?? null;
|
||||
router.get(
|
||||
route(props.options.route.link, routeOptions),
|
||||
{ search: value },
|
||||
{ preserveState: true, replace: true }
|
||||
);
|
||||
}, 300));
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<TextInput v-model="search" title="Search" placeholder="Search..." />
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="md:col-span-1 flex justify-between">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
<h3 class="text-base lg:text-lg font-medium text-gray-900">
|
||||
<slot name="title" />
|
||||
</h3>
|
||||
|
||||
|
||||
@@ -1,27 +1,20 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { computed, ref } from 'vue';
|
||||
import { Head, Link, router, usePage } from '@inertiajs/vue3';
|
||||
import ApplicationMark from '@/Components/ApplicationMark.vue';
|
||||
import Banner from '@/Components/Banner.vue';
|
||||
import Dropdown from '@/Components/Dropdown.vue';
|
||||
import DropdownLink from '@/Components/DropdownLink.vue';
|
||||
import NavLink from '@/Components/NavLink.vue';
|
||||
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
|
||||
import Breadcrumbs from '@/Components/Breadcrumbs.vue';
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
const showingNavigationDropdown = ref(false);
|
||||
|
||||
const switchToTeam = (team) => {
|
||||
router.put(route('current-team.update'), {
|
||||
team_id: team.id,
|
||||
}, {
|
||||
preserveState: false,
|
||||
});
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
router.post(route('logout'));
|
||||
};
|
||||
@@ -55,70 +48,22 @@ const logout = () => {
|
||||
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<NavLink :href="route('client')" :active="route().current('client') || route().current('client.*')">
|
||||
Client
|
||||
Clients
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<NavLink :href="route('clientCase')" :active="route().current('clientCase') || route().current('clientCase.*')">
|
||||
Cases
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<NavLink :href="route('settings')" :active="route().current('settings') || route().current('settings.*')">
|
||||
Settings
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6">
|
||||
<div class="ms-3 relative">
|
||||
<!-- Teams Dropdown -->
|
||||
<Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
|
||||
<template #trigger>
|
||||
<span class="inline-flex rounded-md">
|
||||
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
|
||||
{{ $page.props.auth.user.current_team.name }}
|
||||
|
||||
<svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="w-60">
|
||||
<!-- Team Management -->
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">
|
||||
Manage Team
|
||||
</div>
|
||||
|
||||
<!-- Team Settings -->
|
||||
<DropdownLink :href="route('teams.show', $page.props.auth.user.current_team)">
|
||||
Team Settings
|
||||
</DropdownLink>
|
||||
|
||||
<DropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
|
||||
Create New Team
|
||||
</DropdownLink>
|
||||
|
||||
<!-- Team Switcher -->
|
||||
<template v-if="$page.props.auth.user.all_teams.length > 1">
|
||||
<div class="border-t border-gray-200" />
|
||||
|
||||
<div class="block px-4 py-2 text-xs text-gray-400">
|
||||
Switch Teams
|
||||
</div>
|
||||
|
||||
<template v-for="team in $page.props.auth.user.all_teams" :key="team.id">
|
||||
<form @submit.prevent="switchToTeam(team)">
|
||||
<DropdownLink as="button">
|
||||
<div class="flex items-center">
|
||||
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="me-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
|
||||
<div>{{ team.name }}</div>
|
||||
</div>
|
||||
</DropdownLink>
|
||||
</form>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="ms-3 relative">
|
||||
<Dropdown align="right" width="48">
|
||||
@@ -130,7 +75,6 @@ const logout = () => {
|
||||
<span v-else class="inline-flex rounded-md">
|
||||
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150">
|
||||
{{ $page.props.auth.user.name }}
|
||||
|
||||
<svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
@@ -203,6 +147,12 @@ const logout = () => {
|
||||
<ResponsiveNavLink :href="route('client')" :active="route().current('client')">
|
||||
Clients
|
||||
</ResponsiveNavLink>
|
||||
<ResponsiveNavLink :href="route('clientCase')" :active="route().current('clientCase')">
|
||||
Cases
|
||||
</ResponsiveNavLink>
|
||||
<ResponsiveNavLink :href="route('settings')" :active="route().current('settings')">
|
||||
Settings
|
||||
</ResponsiveNavLink>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Settings Options -->
|
||||
@@ -285,7 +235,8 @@ const logout = () => {
|
||||
<!-- Page Heading -->
|
||||
<header v-if="$slots.header" class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<slot name="header" />
|
||||
<Breadcrumbs :breadcrumbs="$page.props.breadcrumbs"></Breadcrumbs>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -9,42 +9,46 @@ export class TableColumn{
|
||||
}
|
||||
}
|
||||
link = undefined;
|
||||
constructor(data, type, option = undefined, link = undefined) {
|
||||
constructor(data, type, options = {}, link = undefined) {
|
||||
this.data = data;
|
||||
this.type = type;
|
||||
this.options = option;
|
||||
this.options = options;
|
||||
this.link = link;
|
||||
};
|
||||
|
||||
static make(data, type, option = undefined, link = undefined){
|
||||
return new this(data, type, option, link);
|
||||
static make(data, type, options = {}, link = undefined){
|
||||
return new this(data, type, options, link);
|
||||
}
|
||||
}
|
||||
|
||||
export class LinkOptions{
|
||||
route = '';
|
||||
options = undefined;
|
||||
constructor(route, options = undefined){
|
||||
css = undefined;
|
||||
constructor(route, options = undefined, css = undefined){
|
||||
this.route = route;
|
||||
this.options = options
|
||||
this.options = options;
|
||||
this.css = css
|
||||
};
|
||||
|
||||
static make(route, option = undefined){
|
||||
return new this(route, option);
|
||||
static make(route, option = {}, css = undefined){
|
||||
return new this(route, option, css);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class TableRow{
|
||||
cols = [];
|
||||
options = {};
|
||||
edit = false;
|
||||
constructor(cols, edit = false){
|
||||
this.cols = cols,
|
||||
this.edit = edit
|
||||
constructor(cols, options = {}, edit = false){
|
||||
this.cols = cols;
|
||||
this.options = options;
|
||||
this.edit = edit;
|
||||
};
|
||||
|
||||
static make(cols, edit = false){
|
||||
return new this(cols, edit);
|
||||
static make(cols, options, edit = false){
|
||||
return new this(cols, options, edit);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user