Lots of changes
This commit is contained in:
Simon Pocrnjič
@@ -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>
|
||||
Reference in New Issue
Block a user