610 lines
22 KiB
Vue
610 lines
22 KiB
Vue
<script setup>
|
|
import {
|
|
FwbTable,
|
|
FwbTableHead,
|
|
FwbTableHeadCell,
|
|
FwbTableBody,
|
|
FwbTableRow,
|
|
FwbTableCell,
|
|
} from "flowbite-vue";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
|
|
import CaseObjectsDialog from "./CaseObjectsDialog.vue";
|
|
import PaymentDialog from "./PaymentDialog.vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faCircleInfo,
|
|
faClock,
|
|
faEllipsisVertical,
|
|
faPenToSquare,
|
|
faTrash,
|
|
faListCheck,
|
|
faPlus,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const props = defineProps({
|
|
client_case: Object,
|
|
contract_types: Array,
|
|
contracts: { type: Array, default: () => [] },
|
|
segments: { type: Array, default: () => [] },
|
|
all_segments: { type: Array, default: () => [] },
|
|
});
|
|
|
|
const emit = defineEmits(["edit", "delete", "add-activity"]);
|
|
|
|
const formatDate = (d) => {
|
|
if (!d) return "-";
|
|
const dt = new Date(d);
|
|
return isNaN(dt.getTime()) ? "-" : dt.toLocaleDateString("de");
|
|
};
|
|
|
|
const hasDesc = (c) => {
|
|
const d = c?.description;
|
|
return typeof d === "string" && d.trim().length > 0;
|
|
};
|
|
|
|
const onEdit = (c) => emit("edit", c);
|
|
const onDelete = (c) => emit("delete", c);
|
|
const onAddActivity = (c) => emit("add-activity", c);
|
|
|
|
// CaseObject dialog state
|
|
import { ref, computed } from "vue";
|
|
import { router, useForm } from "@inertiajs/vue3";
|
|
import axios from "axios";
|
|
const showObjectDialog = ref(false);
|
|
const showObjectsList = ref(false);
|
|
const selectedContract = ref(null);
|
|
const openObjectDialog = (c) => {
|
|
selectedContract.value = c;
|
|
showObjectDialog.value = true;
|
|
};
|
|
const closeObjectDialog = () => {
|
|
showObjectDialog.value = false;
|
|
selectedContract.value = null;
|
|
};
|
|
const openObjectsList = (c) => {
|
|
selectedContract.value = c;
|
|
showObjectsList.value = true;
|
|
};
|
|
const closeObjectsList = () => {
|
|
showObjectsList.value = false;
|
|
selectedContract.value = null;
|
|
};
|
|
|
|
// Promise date helpers
|
|
const todayStr = computed(() => {
|
|
const d = new Date();
|
|
const yyyy = d.getFullYear();
|
|
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
|
const dd = String(d.getDate()).padStart(2, "0");
|
|
return `${yyyy}-${mm}-${dd}`;
|
|
});
|
|
|
|
const getPromiseDate = (c) => c?.account?.promise_date || null;
|
|
const promiseStatus = (c) => {
|
|
const p = getPromiseDate(c);
|
|
if (!p) return null;
|
|
if (p > todayStr.value) return "future";
|
|
if (p === todayStr.value) return "today";
|
|
return "past";
|
|
};
|
|
const promiseColorClass = (c) => {
|
|
const s = promiseStatus(c);
|
|
if (s === "future") return "text-green-600";
|
|
if (s === "today") return "text-yellow-500";
|
|
if (s === "past") return "text-red-600";
|
|
return "text-gray-400";
|
|
};
|
|
|
|
// Segment helpers
|
|
const contractActiveSegment = (c) => {
|
|
const arr = c?.segments || [];
|
|
return arr.find((s) => s.pivot?.active) || arr[0] || null;
|
|
};
|
|
const segmentName = (id) => props.segments.find((s) => s.id === id)?.name || "";
|
|
const confirmChange = ref({
|
|
show: false,
|
|
contract: null,
|
|
segmentId: null,
|
|
fromAll: false,
|
|
});
|
|
const askChangeSegment = (c, segmentId, fromAll = false) => {
|
|
confirmChange.value = { show: true, contract: c, segmentId, fromAll };
|
|
};
|
|
const closeConfirm = () => {
|
|
confirmChange.value = { show: false, contract: null, segmentId: null };
|
|
};
|
|
const doChangeSegment = () => {
|
|
const { contract, segmentId, fromAll } = confirmChange.value;
|
|
if (!contract || !segmentId) return closeConfirm();
|
|
if (fromAll) {
|
|
router.post(
|
|
route("clientCase.segments.attach", props.client_case),
|
|
{
|
|
segment_id: segmentId,
|
|
contract_uuid: contract.uuid,
|
|
make_active_for_contract: true,
|
|
},
|
|
{
|
|
preserveScroll: true,
|
|
only: ["contracts", "segments"],
|
|
onFinish: () => closeConfirm(),
|
|
}
|
|
);
|
|
} else {
|
|
router.post(
|
|
route("clientCase.contract.updateSegment", {
|
|
client_case: props.client_case.uuid,
|
|
uuid: contract.uuid,
|
|
}),
|
|
{ segment_id: segmentId },
|
|
{
|
|
preserveScroll: true,
|
|
only: ["contracts"],
|
|
onFinish: () => closeConfirm(),
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
// Add Payment modal state
|
|
const showPaymentDialog = ref(false);
|
|
const paymentContract = ref(null);
|
|
const paymentForm = useForm({
|
|
amount: null,
|
|
currency: "EUR",
|
|
paid_at: null,
|
|
reference: "",
|
|
});
|
|
const openPaymentDialog = (c) => {
|
|
paymentContract.value = c;
|
|
paymentForm.reset();
|
|
paymentForm.paid_at = todayStr.value;
|
|
showPaymentDialog.value = true;
|
|
};
|
|
const closePaymentDialog = () => {
|
|
showPaymentDialog.value = false;
|
|
paymentContract.value = null;
|
|
};
|
|
const submitPayment = () => {
|
|
if (!paymentContract.value?.account?.id) {
|
|
return;
|
|
}
|
|
const accountId = paymentContract.value.account.id;
|
|
paymentForm.post(route("accounts.payments.store", { account: accountId }), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
closePaymentDialog();
|
|
// Reload contracts and activities (new payment may create an activity)
|
|
router.reload({ only: ["contracts", "activities"] });
|
|
},
|
|
});
|
|
};
|
|
|
|
// View Payments dialog state and logic
|
|
const showPaymentsDialog = ref(false);
|
|
const paymentsForContract = ref([]);
|
|
const paymentsLoading = ref(false);
|
|
const openPaymentsDialog = async (c) => {
|
|
selectedContract.value = c;
|
|
showPaymentsDialog.value = true;
|
|
await loadPayments();
|
|
};
|
|
const closePaymentsDialog = () => {
|
|
showPaymentsDialog.value = false;
|
|
selectedContract.value = null;
|
|
paymentsForContract.value = [];
|
|
};
|
|
const loadPayments = async () => {
|
|
if (!selectedContract.value?.account?.id) return;
|
|
paymentsLoading.value = true;
|
|
try {
|
|
const { data } = await axios.get(route("accounts.payments.list", { account: selectedContract.value.account.id }));
|
|
paymentsForContract.value = data.payments || [];
|
|
} finally {
|
|
paymentsLoading.value = false;
|
|
}
|
|
};
|
|
const deletePayment = (paymentId) => {
|
|
if (!selectedContract.value?.account?.id) return;
|
|
const accountId = selectedContract.value.account.id;
|
|
router.delete(route("accounts.payments.destroy", { account: accountId, payment: paymentId }), {
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
only: ["contracts", "activities"],
|
|
onSuccess: async () => {
|
|
await loadPayments();
|
|
},
|
|
onError: async () => {
|
|
// Even if there is an error, try to refresh payments list
|
|
await loadPayments();
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
|
|
>
|
|
<FwbTable hoverable striped class="text-sm">
|
|
<FwbTableHead
|
|
class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
|
|
>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
|
|
>Ref.
|
|
</FwbTableHeadCell>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
|
|
>Datum začetka
|
|
</FwbTableHeadCell>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
|
|
>Tip
|
|
</FwbTableHeadCell>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3"
|
|
>Segment
|
|
</FwbTableHeadCell>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right"
|
|
>
|
|
Predano</FwbTableHeadCell
|
|
>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right"
|
|
>
|
|
Odprto</FwbTableHeadCell
|
|
>
|
|
<FwbTableHeadCell
|
|
class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-center"
|
|
>
|
|
Opis</FwbTableHeadCell
|
|
>
|
|
<FwbTableHeadCell class="w-px" />
|
|
</FwbTableHead>
|
|
<FwbTableBody>
|
|
<template v-for="(c, i) in contracts" :key="c.uuid || i">
|
|
<FwbTableRow>
|
|
<FwbTableCell>{{ c.reference }}</FwbTableCell>
|
|
<FwbTableCell>{{ formatDate(c.start_date) }}</FwbTableCell>
|
|
<FwbTableCell>{{ c?.type?.name }}</FwbTableCell>
|
|
<FwbTableCell>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-700">{{
|
|
contractActiveSegment(c)?.name || "-"
|
|
}}</span>
|
|
<Dropdown width="64" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-7 w-7 rounded-full hover:bg-gray-100"
|
|
:class="{
|
|
'opacity-50 cursor-not-allowed':
|
|
!segments || segments.length === 0,
|
|
}"
|
|
:title="
|
|
segments && segments.length
|
|
? 'Change segment'
|
|
: 'No segments available for this case'
|
|
"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faPenToSquare"
|
|
class="h-4 w-4 text-gray-600"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="py-1">
|
|
<template v-if="segments && segments.length">
|
|
<button
|
|
v-for="s in segments"
|
|
:key="s.id"
|
|
type="button"
|
|
class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
|
|
@click="askChangeSegment(c, s.id)"
|
|
>
|
|
<span>{{ s.name }}</span>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="all_segments && all_segments.length">
|
|
<div class="px-3 py-2 text-xs text-gray-500">
|
|
Ni segmentov v tem primeru. Dodaj in nastavi segment:
|
|
</div>
|
|
<button
|
|
v-for="s in all_segments"
|
|
:key="s.id"
|
|
type="button"
|
|
class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
|
|
@click="askChangeSegment(c, s.id, true)"
|
|
>
|
|
<span>{{ s.name }}</span>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<div class="px-3 py-2 text-sm text-gray-500">
|
|
No segments configured.
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</FwbTableCell>
|
|
<FwbTableCell class="text-right">{{
|
|
Intl.NumberFormat("de-DE", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(c?.account?.initial_amount ?? 0)
|
|
}}</FwbTableCell>
|
|
<FwbTableCell class="text-right">{{
|
|
Intl.NumberFormat("de-DE", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(c?.account?.balance_amount ?? 0)
|
|
}}</FwbTableCell>
|
|
<FwbTableCell class="text-center">
|
|
<div class="inline-flex items-center justify-center gap-0.5">
|
|
<Dropdown width="64" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full"
|
|
:title="'Pokaži opis'"
|
|
:disabled="!hasDesc(c)"
|
|
:class="hasDesc(c) ? 'hover:bg-gray-100 focus:outline-none' : text-gray-400"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faCircleInfo"
|
|
class="h-4 w-4"
|
|
:class="hasDesc(c) ? 'text-gray-700' : 'text-gray-400'"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div
|
|
class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap"
|
|
>
|
|
{{ c.description }}
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
|
|
<!-- Promise date indicator -->
|
|
<Dropdown width="64" align="left">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
|
|
:title="
|
|
getPromiseDate(c)
|
|
? 'Obljubljen datum plačila'
|
|
: 'Ni obljubljenega datuma'
|
|
"
|
|
:disabled="!getPromiseDate(c)"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faClock"
|
|
class="h-4 w-4"
|
|
:class="promiseColorClass(c)"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="px-3 py-2 text-sm text-gray-700">
|
|
<div class="flex items-center gap-2">
|
|
<FontAwesomeIcon
|
|
:icon="faClock"
|
|
class="h-4 w-4"
|
|
:class="promiseColorClass(c)"
|
|
/>
|
|
<span class="font-medium">Obljubljeno plačilo</span>
|
|
</div>
|
|
<div class="mt-1">
|
|
<span class="text-gray-500">Datum:</span>
|
|
<span class="ml-1">{{ formatDate(getPromiseDate(c)) }}</span>
|
|
</div>
|
|
<div class="mt-1" v-if="promiseStatus(c) === 'future'">
|
|
<span class="text-green-600">V prihodnosti</span>
|
|
</div>
|
|
<div class="mt-1" v-else-if="promiseStatus(c) === 'today'">
|
|
<span class="text-yellow-600">Danes</span>
|
|
</div>
|
|
<div class="mt-1" v-else-if="promiseStatus(c) === 'past'">
|
|
<span class="text-red-600">Zapadlo</span>
|
|
</div>
|
|
<div class="mt-1 text-gray-500" v-else>
|
|
Ni nastavljenega datuma.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</FwbTableCell>
|
|
<FwbTableCell class="text-right whitespace-nowrap">
|
|
<Dropdown align="right" width="56">
|
|
<template #trigger>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none"
|
|
:title="'Actions'"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faEllipsisVertical"
|
|
class="h-4 w-4 text-gray-700"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="onEdit(c)"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faPenToSquare"
|
|
class="h-4 w-4 text-gray-600"
|
|
/>
|
|
<span>Edit</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openObjectsList(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
|
|
<span>Predmeti</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openObjectDialog(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
|
|
<span>Predmeti</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
|
|
@click="onDelete(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
|
|
<span>Briši</span>
|
|
</button>
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openPaymentsDialog(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
|
|
<span>Plačila</span>
|
|
</button>
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="onAddActivity(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
|
|
<span>Aktivnost</span>
|
|
</button>
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<button
|
|
type="button"
|
|
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
|
@click="openPaymentDialog(c)"
|
|
>
|
|
<FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
|
|
<span>Dodaj plačilo</span>
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</FwbTableCell>
|
|
</FwbTableRow>
|
|
</template>
|
|
</FwbTableBody>
|
|
</FwbTable>
|
|
<div
|
|
v-if="!contracts || contracts.length === 0"
|
|
class="p-6 text-center text-sm text-gray-500"
|
|
>
|
|
No contracts.
|
|
</div>
|
|
</div>
|
|
<!-- Confirm change segment -->
|
|
<div
|
|
v-if="confirmChange.show"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
|
|
>
|
|
<div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-sm">
|
|
<div class="text-sm text-gray-800">
|
|
Ali želite spremeniti segment za pogodbo
|
|
<span class="font-medium">{{ confirmChange.contract?.reference }}</span
|
|
>?
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button
|
|
class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
|
|
@click="closeConfirm"
|
|
>
|
|
Prekliči
|
|
</button>
|
|
<button
|
|
class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
|
|
@click="doChangeSegment"
|
|
>
|
|
Potrdi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CaseObjectCreateDialog
|
|
:show="showObjectDialog"
|
|
@close="closeObjectDialog"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
/>
|
|
<CaseObjectsDialog
|
|
:show="showObjectsList"
|
|
@close="closeObjectsList"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
/>
|
|
|
|
<PaymentDialog :show="showPaymentDialog" :form="paymentForm" @close="closePaymentDialog" @submit="submitPayment" />
|
|
|
|
<!-- View Payments Dialog -->
|
|
<div v-if="showPaymentsDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
|
|
<div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-lg">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-base font-medium text-gray-800">
|
|
Plačila za pogodbo
|
|
<span class="text-gray-600">{{ selectedContract?.reference }}</span>
|
|
</div>
|
|
<button type="button" class="text-sm text-gray-500 hover:text-gray-700" @click="closePaymentsDialog">Zapri</button>
|
|
</div>
|
|
<div class="mt-3">
|
|
<div v-if="paymentsLoading" class="text-sm text-gray-500">Nalaganje…</div>
|
|
<template v-else>
|
|
<div v-if="paymentsForContract.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
|
|
<div v-else class="divide-y divide-gray-100 border rounded">
|
|
<div v-for="p in paymentsForContract" :key="p.id" class="px-3 py-2 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-sm text-gray-800">
|
|
{{
|
|
Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.amount ?? 0)
|
|
}}
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<span>{{ formatDate(p.paid_at) }}</span>
|
|
<span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
|
|
@click="deletePayment(p.id)"
|
|
title="Izbriši plačilo"
|
|
>
|
|
<FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
|
|
<span class="text-sm">Briši</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="loadPayments">Osveži</button>
|
|
<button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="closePaymentsDialog">Zapri</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|