981 lines
32 KiB
Vue
981 lines
32 KiB
Vue
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { router, useForm } from "@inertiajs/vue3";
|
|
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
|
import StatusBadge from "@/Components/DataTable/StatusBadge.vue";
|
|
import TableActions from "@/Components/DataTable/TableActions.vue";
|
|
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
|
|
import CaseObjectsDialog from "./CaseObjectsDialog.vue";
|
|
import PaymentDialog from "./PaymentDialog.vue";
|
|
import ViewPaymentsDialog from "./ViewPaymentsDialog.vue";
|
|
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
|
import ConfirmationDialog from "@/Components/Dialogs/ConfirmationDialog.vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faCircleInfo,
|
|
faClock,
|
|
faPenToSquare,
|
|
faTrash,
|
|
faListCheck,
|
|
faPlus,
|
|
faBoxArchive,
|
|
faFileWord,
|
|
faSpinner,
|
|
faTags,
|
|
faFolderOpen,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import EmptyState from "@/Components/EmptyState.vue";
|
|
import { Button } from "@/Components/ui/button";
|
|
|
|
const props = defineProps({
|
|
client: { type: Object, default: null },
|
|
client_case: Object,
|
|
contract_types: Array,
|
|
contracts: { type: Array, default: () => [] },
|
|
segments: { type: Array, default: () => [] },
|
|
all_segments: { type: Array, default: () => [] },
|
|
templates: { type: Array, default: () => [] },
|
|
edit: { type: Boolean, default: () => false },
|
|
createDoc: { type: Boolean, default: () => false },
|
|
});
|
|
|
|
const emit = defineEmits(["edit", "delete", "add-activity", "create", "attach-segment"]);
|
|
|
|
const formatDate = (d) => {
|
|
if (!d) return "-";
|
|
const dt = new Date(d);
|
|
return isNaN(dt.getTime()) ? "-" : dt.toLocaleDateString("de");
|
|
};
|
|
|
|
const formatCurrency = (v) => {
|
|
const n = Number(v ?? 0);
|
|
return new Intl.NumberFormat("de-DE", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(n);
|
|
};
|
|
|
|
const hasDesc = (c) => {
|
|
const d = c?.description;
|
|
return typeof d === "string" && d.trim().length > 0;
|
|
};
|
|
|
|
// Meta helpers
|
|
const formatMetaDate = (v) => {
|
|
if (!v) return "-";
|
|
const d = new Date(v);
|
|
if (isNaN(d.getTime())) return String(v);
|
|
const dd = String(d.getDate()).padStart(2, "0");
|
|
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
|
const yyyy = d.getFullYear();
|
|
return `${dd}.${mm}.${yyyy}`;
|
|
};
|
|
|
|
const formatMetaNumber = (v) => {
|
|
if (v === null || v === undefined || v === "") return "0";
|
|
let n = typeof v === "number" ? v : parseFloat(String(v).replace(",", "."));
|
|
if (isNaN(n)) return String(v);
|
|
const hasDecimal = Math.abs(n % 1) > 0;
|
|
return new Intl.NumberFormat("de-DE", {
|
|
minimumFractionDigits: hasDecimal ? 2 : 0,
|
|
maximumFractionDigits: hasDecimal ? 2 : 0,
|
|
}).format(n);
|
|
};
|
|
|
|
const formatMetaValue = (entry) => {
|
|
const value = entry?.value;
|
|
const type = entry?.type;
|
|
if (value === null || value === undefined || String(value).trim() === "") return "-";
|
|
if (type === "date") return formatMetaDate(value);
|
|
if (type === "number") return formatMetaNumber(value);
|
|
if (typeof value === "number") return formatMetaNumber(value);
|
|
return String(value);
|
|
};
|
|
|
|
const getMetaEntries = (c) => {
|
|
const meta = c?.meta;
|
|
const results = [];
|
|
const visit = (node, keyName) => {
|
|
if (node === null || node === undefined) return;
|
|
if (Array.isArray(node)) {
|
|
node.forEach((el) => visit(el));
|
|
return;
|
|
}
|
|
if (typeof node === "object") {
|
|
const hasValue = Object.prototype.hasOwnProperty.call(node, "value");
|
|
const hasTitle = Object.prototype.hasOwnProperty.call(node, "title");
|
|
if (hasValue || hasTitle) {
|
|
const title =
|
|
(node.title || keyName || "").toString().trim() || keyName || "Meta";
|
|
results.push({ title, value: node.value, type: node.type });
|
|
return;
|
|
}
|
|
for (const [k, v] of Object.entries(node)) {
|
|
visit(v, k);
|
|
}
|
|
return;
|
|
}
|
|
if (keyName) {
|
|
results.push({ title: keyName, value: node });
|
|
}
|
|
};
|
|
visit(meta, undefined);
|
|
return results.filter(
|
|
(e) =>
|
|
e.title &&
|
|
e.value !== null &&
|
|
e.value !== undefined &&
|
|
String(e.value).trim() !== ""
|
|
);
|
|
};
|
|
|
|
const hasMeta = (c) => getMetaEntries(c).length > 0;
|
|
|
|
// Segment helpers
|
|
const contractActiveSegment = (c) => {
|
|
const arr = c?.segments || [];
|
|
return arr.find((s) => s.pivot?.active) || arr[0] || null;
|
|
};
|
|
|
|
const sortedSegments = computed(() => {
|
|
const list = Array.isArray(props.segments) ? [...props.segments] : [];
|
|
return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
|
|
});
|
|
|
|
const sortedAllSegments = computed(() => {
|
|
const list = Array.isArray(props.all_segments) ? [...props.all_segments] : [];
|
|
return list.sort((a, b) => a.name.localeCompare(b.name, "sl", { sensitivity: "base" }));
|
|
});
|
|
|
|
const confirmChange = ref({
|
|
show: false,
|
|
contract: null,
|
|
segmentId: null,
|
|
fromAll: false,
|
|
});
|
|
|
|
const askChangeSegment = (c, segmentId, fromAll = false) => {
|
|
if (!c?.active) return;
|
|
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(),
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
// 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";
|
|
};
|
|
|
|
// Document generation
|
|
const generating = ref({});
|
|
const generatedDocs = ref({});
|
|
const generationError = ref({});
|
|
const showGenerateDialog = ref(false);
|
|
const generateFor = ref(null);
|
|
const selectedTemplateSlug = ref(null);
|
|
const templateTokens = ref([]);
|
|
const templateCustomDefaults = ref({});
|
|
const templateCustomTypes = ref({});
|
|
const customInputs = ref({});
|
|
const clientAddressSource = ref("client");
|
|
const personAddressSource = ref("case_person");
|
|
|
|
const clientAddress = computed(() => {
|
|
const addr = props.client?.person?.addresses?.[0] || null;
|
|
return addr
|
|
? {
|
|
address: addr.address || "",
|
|
post_code: addr.post_code || "",
|
|
city: addr.city || "",
|
|
}
|
|
: { address: "", post_code: "", city: "" };
|
|
});
|
|
|
|
const casePersonAddress = computed(() => {
|
|
const addr = props.client_case?.person?.addresses?.[0] || null;
|
|
return addr
|
|
? {
|
|
address: addr.address || "",
|
|
post_code: addr.post_code || "",
|
|
city: addr.city || "",
|
|
}
|
|
: { address: "", post_code: "", city: "" };
|
|
});
|
|
|
|
const customTokenList = computed(() =>
|
|
(templateTokens.value || []).filter((t) => t.startsWith("custom."))
|
|
);
|
|
|
|
function openGenerateDialog(c) {
|
|
generateFor.value = c;
|
|
const first =
|
|
(props.templates || []).find(
|
|
(t) => Array.isArray(t?.tokens) && t.tokens.length > 0
|
|
) ||
|
|
(props.templates || [])[0] ||
|
|
null;
|
|
selectedTemplateSlug.value = first?.slug || null;
|
|
templateTokens.value = Array.isArray(first?.tokens) ? first.tokens : [];
|
|
templateCustomDefaults.value = (first?.meta && first.meta.custom_defaults) || {};
|
|
templateCustomTypes.value = (first?.meta && first.meta.custom_default_types) || {};
|
|
customInputs.value = {};
|
|
for (const t of customTokenList.value) {
|
|
const key = t.replace(/^custom\./, "");
|
|
customInputs.value[key] = templateCustomDefaults.value?.[key] ?? "";
|
|
}
|
|
clientAddressSource.value = "client";
|
|
personAddressSource.value = "case_person";
|
|
showGenerateDialog.value = true;
|
|
}
|
|
|
|
function onTemplateChange() {
|
|
const tpl = (props.templates || []).find((t) => t.slug === selectedTemplateSlug.value);
|
|
templateTokens.value = Array.isArray(tpl?.tokens) ? tpl.tokens : [];
|
|
templateCustomDefaults.value = (tpl?.meta && tpl.meta.custom_defaults) || {};
|
|
templateCustomTypes.value = (tpl?.meta && tpl.meta.custom_default_types) || {};
|
|
customInputs.value = {};
|
|
for (const t of customTokenList.value) {
|
|
const key = t.replace(/^custom\./, "");
|
|
customInputs.value[key] = templateCustomDefaults.value?.[key] ?? "";
|
|
}
|
|
}
|
|
|
|
async function submitGenerate() {
|
|
const c = generateFor.value;
|
|
if (!c?.uuid || generating.value[c.uuid]) return;
|
|
const tpl = (props.templates || []).find((t) => t.slug === selectedTemplateSlug.value);
|
|
if (!tpl) return;
|
|
generating.value[c.uuid] = true;
|
|
generationError.value[c.uuid] = null;
|
|
try {
|
|
const clientAddr =
|
|
clientAddressSource.value === "case_person"
|
|
? casePersonAddress.value
|
|
: clientAddress.value;
|
|
const personAddr =
|
|
personAddressSource.value === "case_person"
|
|
? casePersonAddress.value
|
|
: clientAddress.value;
|
|
const token_overrides = {
|
|
"client.person.person_address.address": clientAddr.address,
|
|
"client.person.person_address.post_code": clientAddr.post_code,
|
|
"client.person.person_address.city": clientAddr.city,
|
|
"person.person_address.address": personAddr.address,
|
|
"person.person_address.post_code": personAddr.post_code,
|
|
"person.person_address.city": personAddr.city,
|
|
};
|
|
const payload = {
|
|
template_slug: tpl.slug,
|
|
template_version: tpl.version,
|
|
custom: { ...customInputs.value },
|
|
token_overrides,
|
|
unresolved_policy: "fail",
|
|
};
|
|
await router.post(
|
|
route("contracts.generate-document", { contract: c.uuid }),
|
|
payload,
|
|
{
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
generationError.value[c.uuid] = null;
|
|
showGenerateDialog.value = false;
|
|
router.reload({ only: ["documents"] });
|
|
},
|
|
onError: () => {
|
|
generationError.value[c.uuid] = "Manjkajoči tokeni v predlogi.";
|
|
},
|
|
}
|
|
);
|
|
} catch (e) {
|
|
generationError.value[c.uuid] = "Neuspešno generiranje.";
|
|
} finally {
|
|
generating.value[c.uuid] = false;
|
|
}
|
|
}
|
|
|
|
function closeGenerateDialog() {
|
|
showGenerateDialog.value = false;
|
|
generateFor.value = null;
|
|
}
|
|
|
|
// Case objects
|
|
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;
|
|
};
|
|
|
|
// Payments
|
|
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();
|
|
router.reload({ only: ["contracts", "activities"] });
|
|
},
|
|
});
|
|
};
|
|
|
|
const showPaymentsDialog = ref(false);
|
|
|
|
const openPaymentsDialog = (c) => {
|
|
selectedContract.value = c;
|
|
showPaymentsDialog.value = true;
|
|
};
|
|
|
|
const closePaymentsDialog = () => {
|
|
showPaymentsDialog.value = false;
|
|
selectedContract.value = null;
|
|
};
|
|
|
|
// Columns configuration
|
|
const columns = computed(() => [
|
|
{ key: "reference", label: "Ref.", sortable: false, align: "center" },
|
|
{ key: "start_date", label: "Datum začetka", sortable: false },
|
|
{ key: "type", label: "Tip", sortable: false },
|
|
{ key: "segment", label: "Segment", sortable: false },
|
|
{ key: "initial_amount", label: "Predano", sortable: false, align: "right" },
|
|
{ key: "balance_amount", label: "Odprto", sortable: false, align: "right" },
|
|
{ key: "meta_info", label: "Opis", sortable: false, align: "center" },
|
|
{ key: "actions", label: "", sortable: false, hideable: false, align: "center" },
|
|
]);
|
|
|
|
const onEdit = (c) => emit("edit", c);
|
|
const onDelete = (c) => emit("delete", c);
|
|
const onAddActivity = (c) => emit("add-activity", c);
|
|
const onCreate = () => emit("create");
|
|
const onAttachSegment = () => emit("attach-segment");
|
|
|
|
const availableSegmentsCount = computed(() => {
|
|
const current = new Set((props.segments || []).map((s) => s.id));
|
|
return (props.all_segments || []).filter((s) => !current.has(s.id)).length;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DataTable
|
|
:columns="columns"
|
|
:data="contracts"
|
|
:empty-icon="faFolderOpen"
|
|
empty-text="Ni pogodb"
|
|
empty-description="Za ta primer še ni ustvarjenih pogodb. Ustvarite novo pogodbo za začetek."
|
|
:show-pagination="false"
|
|
:show-toolbar="true"
|
|
:hoverable="true"
|
|
>
|
|
<!-- Toolbar Actions -->
|
|
<template #toolbar-actions v-if="edit">
|
|
<Button variant="outline" @click="onCreate">Nova pogodba</Button>
|
|
<Button
|
|
variant="outline"
|
|
@click="onAttachSegment"
|
|
:disabled="availableSegmentsCount === 0"
|
|
>
|
|
{{ availableSegmentsCount ? "Dodaj segment" : "Ni razpoložljivih segmentov" }}
|
|
</Button>
|
|
</template>
|
|
<!-- Reference -->
|
|
<template #cell-reference="{ row }">
|
|
<span class="font-medium text-gray-900 px-2">{{ row.reference }}</span>
|
|
</template>
|
|
|
|
<!-- Start Date -->
|
|
<template #cell-start_date="{ row }">
|
|
{{ formatDate(row.start_date) }}
|
|
</template>
|
|
|
|
<!-- Type -->
|
|
<template #cell-type="{ row }">
|
|
{{ row?.type?.name || "-" }}
|
|
</template>
|
|
|
|
<!-- Segment -->
|
|
<template #cell-segment="{ row }">
|
|
<div class="flex items-center gap-2" @click.stop>
|
|
<span class="text-gray-700">{{ contractActiveSegment(row)?.name || "-" }}</span>
|
|
<DropdownMenu v-if="edit">
|
|
<DropdownMenuTrigger as-child>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
:class="{
|
|
'opacity-50 cursor-not-allowed':
|
|
!segments || segments.length === 0 || !row.active,
|
|
}"
|
|
:title="
|
|
!row.active
|
|
? 'Segmenta ni mogoče spremeniti za arhivirano pogodbo'
|
|
: segments && segments.length
|
|
? 'Spremeni segment'
|
|
: 'Ni segmentov na voljo za ta primer'
|
|
"
|
|
:disabled="!row.active || !segments || !segments.length"
|
|
>
|
|
<FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<template v-if="segments && segments.length">
|
|
<DropdownMenuItem
|
|
v-for="s in sortedSegments"
|
|
:key="s.id"
|
|
@click="askChangeSegment(row, s.id)"
|
|
>
|
|
{{ s.name }}
|
|
</DropdownMenuItem>
|
|
</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>
|
|
<DropdownMenuItem
|
|
v-for="s in sortedAllSegments"
|
|
:key="s.id"
|
|
@click="askChangeSegment(row, s.id, true)"
|
|
>
|
|
{{ s.name }}
|
|
</DropdownMenuItem>
|
|
</template>
|
|
<template v-else>
|
|
<div class="px-3 py-2 text-sm text-gray-500">
|
|
Ni konfiguriranih segmentov.
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<StatusBadge
|
|
v-if="!row.active"
|
|
status="Arhivirano"
|
|
variant="default"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Initial Amount -->
|
|
<template #cell-initial_amount="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrency(row?.account?.initial_amount ?? 0) }}
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Balance Amount -->
|
|
<template #cell-balance_amount="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrency(row?.account?.balance_amount ?? 0) }}
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Meta Info -->
|
|
<template #cell-meta_info="{ row }">
|
|
<div class="inline-flex items-center justify-center gap-0.5" @click.stop>
|
|
<!-- Description -->
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full transition-colors"
|
|
:title="'Pokaži opis'"
|
|
:disabled="!hasDesc(row)"
|
|
:class="
|
|
hasDesc(row)
|
|
? 'hover:bg-gray-100 focus:outline-none text-gray-700'
|
|
: 'text-gray-400 cursor-not-allowed'
|
|
"
|
|
>
|
|
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<div class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap">
|
|
{{ row.description }}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<!-- Meta -->
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full transition-colors"
|
|
:title="'Pokaži meta'"
|
|
:disabled="!hasMeta(row)"
|
|
:class="
|
|
hasMeta(row)
|
|
? 'hover:bg-gray-100 focus:outline-none text-gray-700'
|
|
: 'text-gray-400 cursor-not-allowed'
|
|
"
|
|
>
|
|
<FontAwesomeIcon :icon="faTags" class="h-4 w-4" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<div class="max-w-sm px-3 py-2 text-sm text-gray-700">
|
|
<template v-if="hasMeta(row)">
|
|
<div
|
|
v-for="(m, idx) in getMetaEntries(row)"
|
|
:key="idx"
|
|
class="flex flex-col items-start gap-0.5 py-0.5 mb-0.5"
|
|
>
|
|
<span class="text-gray-500 text-xs whitespace-nowrap">{{
|
|
m.title
|
|
}}</span>
|
|
<span class="text-gray-800 font-medium break-all">{{
|
|
formatMetaValue(m)
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="text-gray-500">Ni meta podatkov.</div>
|
|
</template>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<!-- Promise Date -->
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center h-5 w-5 rounded-full hover:bg-gray-100 focus:outline-none transition-colors"
|
|
:title="
|
|
getPromiseDate(row)
|
|
? 'Obljubljen datum plačila'
|
|
: 'Ni obljubljenega datuma'
|
|
"
|
|
:disabled="!getPromiseDate(row)"
|
|
>
|
|
<FontAwesomeIcon
|
|
:icon="faClock"
|
|
class="h-4 w-4"
|
|
:class="promiseColorClass(row)"
|
|
/>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<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(row)"
|
|
/>
|
|
<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(row)) }}</span>
|
|
</div>
|
|
<div class="mt-1" v-if="promiseStatus(row) === 'future'">
|
|
<span class="text-green-600">V prihodnosti</span>
|
|
</div>
|
|
<div class="mt-1" v-else-if="promiseStatus(row) === 'today'">
|
|
<span class="text-yellow-600">Danes</span>
|
|
</div>
|
|
<div class="mt-1" v-else-if="promiseStatus(row) === 'past'">
|
|
<span class="text-red-600">Zapadlo</span>
|
|
</div>
|
|
<div class="mt-1 text-gray-500" v-else>Ni nastavljenega datuma.</div>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Actions -->
|
|
<template #cell-actions="{ row }">
|
|
<div @click.stop>
|
|
<TableActions align="right">
|
|
<template #default="{ handleAction }">
|
|
<!-- Editing -->
|
|
<template v-if="edit">
|
|
<div
|
|
class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
|
|
>
|
|
Urejanje
|
|
</div>
|
|
<ActionMenuItem
|
|
v-if="row.active"
|
|
:icon="faPenToSquare"
|
|
label="Uredi"
|
|
@click="onEdit(row)"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Add Activity -->
|
|
<ActionMenuItem
|
|
v-if="row.active"
|
|
:icon="faListCheck"
|
|
label="Dodaj aktivnost"
|
|
@click="onAddActivity(row)"
|
|
/>
|
|
|
|
<div class="my-1 border-t border-gray-100" />
|
|
|
|
<!-- Documents -->
|
|
<template v-if="createDoc">
|
|
<div
|
|
class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
|
|
>
|
|
Dokument
|
|
</div>
|
|
<ActionMenuItem
|
|
:icon="generating[row.uuid] ? faSpinner : faFileWord"
|
|
:label="
|
|
generating[row.uuid]
|
|
? 'Generiranje...'
|
|
: templates && templates.length
|
|
? 'Generiraj dokument'
|
|
: 'Ni predlog'
|
|
"
|
|
:disabled="generating[row.uuid] || !templates || templates.length === 0"
|
|
@click="openGenerateDialog(row)"
|
|
/>
|
|
<a
|
|
v-if="generatedDocs[row.uuid]?.path"
|
|
:href="'/storage/' + generatedDocs[row.uuid].path"
|
|
target="_blank"
|
|
class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-indigo-600 hover:bg-indigo-50"
|
|
>
|
|
<FontAwesomeIcon :icon="faFileWord" class="h-4 w-4" />
|
|
<span>Prenesi zadnji</span>
|
|
</a>
|
|
<div
|
|
v-if="generationError[row.uuid]"
|
|
class="px-3 py-2 text-xs text-rose-600 whitespace-pre-wrap"
|
|
>
|
|
{{ generationError[row.uuid] }}
|
|
</div>
|
|
<div class="my-1 border-t border-gray-100" />
|
|
</template>
|
|
|
|
<!-- Objects -->
|
|
<div
|
|
class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
|
|
>
|
|
Predmeti
|
|
</div>
|
|
<ActionMenuItem
|
|
:icon="faCircleInfo"
|
|
label="Seznam predmetov"
|
|
@click="openObjectsList(row)"
|
|
/>
|
|
<ActionMenuItem
|
|
v-if="row.active"
|
|
:icon="faPlus"
|
|
label="Dodaj predmet"
|
|
@click="openObjectDialog(row)"
|
|
/>
|
|
|
|
<div class="my-1 border-t border-gray-100" />
|
|
|
|
<!-- Payments -->
|
|
<div
|
|
class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
|
|
>
|
|
Plačila
|
|
</div>
|
|
<ActionMenuItem
|
|
:icon="faCircleInfo"
|
|
label="Pokaži plačila"
|
|
@click="openPaymentsDialog(row)"
|
|
/>
|
|
<ActionMenuItem
|
|
v-if="row.active && row?.account"
|
|
:icon="faPlus"
|
|
label="Dodaj plačilo"
|
|
@click="openPaymentDialog(row)"
|
|
/>
|
|
|
|
<!-- Archive -->
|
|
<template v-if="edit">
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<div
|
|
class="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wide text-gray-400"
|
|
>
|
|
{{ row.active ? "Arhiviranje" : "Ponovna aktivacija" }}
|
|
</div>
|
|
<ActionMenuItem
|
|
v-if="row.active"
|
|
:icon="faBoxArchive"
|
|
:label="'Arhiviraj'"
|
|
@click="
|
|
router.post(
|
|
route('clientCase.contract.archive', {
|
|
client_case: client_case.uuid,
|
|
uuid: row.uuid,
|
|
}),
|
|
{},
|
|
{
|
|
preserveScroll: true,
|
|
only: ['contracts', 'activities', 'documents'],
|
|
}
|
|
)
|
|
"
|
|
/>
|
|
<ActionMenuItem
|
|
v-else
|
|
:icon="faBoxArchive"
|
|
label="Ponovno aktiviraj"
|
|
@click="
|
|
router.post(
|
|
route('clientCase.contract.archive', {
|
|
client_case: client_case.uuid,
|
|
uuid: row.uuid,
|
|
}),
|
|
{ reactivate: true },
|
|
{
|
|
preserveScroll: true,
|
|
only: ['contracts', 'activities', 'documents'],
|
|
}
|
|
)
|
|
"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Delete -->
|
|
<template v-if="edit">
|
|
<div class="my-1 border-t border-gray-100" />
|
|
<ActionMenuItem
|
|
:icon="faTrash"
|
|
label="Izbriši"
|
|
danger
|
|
@click="onDelete(row)"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</TableActions>
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
|
|
<!-- Confirm Change Segment -->
|
|
<ConfirmationDialog
|
|
:show="confirmChange.show"
|
|
title="Spremeni segment"
|
|
:message="`Ali želite spremeniti segment za pogodbo ${
|
|
confirmChange.contract?.reference || ''
|
|
}?`"
|
|
confirm-text="Potrdi"
|
|
cancel-text="Prekliči"
|
|
@close="closeConfirm"
|
|
@confirm="doChangeSegment"
|
|
/>
|
|
|
|
<!-- Dialogs -->
|
|
<CaseObjectCreateDialog
|
|
:show="showObjectDialog"
|
|
@close="closeObjectDialog"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
/>
|
|
|
|
<CaseObjectsDialog
|
|
:show="showObjectsList"
|
|
@close="closeObjectsList"
|
|
:client_case="client_case"
|
|
:contract="selectedContract"
|
|
:edit="edit"
|
|
/>
|
|
|
|
<PaymentDialog
|
|
:show="showPaymentDialog"
|
|
:form="paymentForm"
|
|
@close="closePaymentDialog"
|
|
@submit="submitPayment"
|
|
/>
|
|
|
|
<ViewPaymentsDialog
|
|
:show="showPaymentsDialog"
|
|
:contract="selectedContract"
|
|
@close="closePaymentsDialog"
|
|
:edit="edit"
|
|
/>
|
|
|
|
<!-- Generate Document Dialog -->
|
|
<CreateDialog
|
|
:show="showGenerateDialog"
|
|
title="Generiraj dokument"
|
|
max-width="4xl"
|
|
confirm-text="Generiraj"
|
|
:processing="generating[generateFor?.uuid]"
|
|
:disabled="!selectedTemplateSlug"
|
|
@close="closeGenerateDialog"
|
|
@confirm="submitGenerate"
|
|
>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Predloga</label>
|
|
<select
|
|
v-model="selectedTemplateSlug"
|
|
@change="onTemplateChange"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
|
>
|
|
<option :value="null">Izberi predlogo...</option>
|
|
<option v-for="t in templates" :key="t.slug" :value="t.slug">
|
|
{{ t.name }} (v{{ t.version }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Custom inputs -->
|
|
<template v-if="customTokenList.length > 0">
|
|
<div class="border-t border-gray-200 pt-4">
|
|
<h3 class="text-sm font-medium text-gray-700 mb-3">Prilagojene vrednosti</h3>
|
|
<div class="space-y-3">
|
|
<div v-for="token in customTokenList" :key="token">
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
{{ token.replace(/^custom\./, "") }}
|
|
</label>
|
|
<input
|
|
v-model="customInputs[token.replace(/^custom\./, '')]"
|
|
type="text"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Address overrides -->
|
|
<div class="border-t border-gray-200 pt-4 space-y-3">
|
|
<h3 class="text-sm font-medium text-gray-700">Naslovi</h3>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Naslov stranke</label>
|
|
<select
|
|
v-model="clientAddressSource"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
|
>
|
|
<option value="client">Stranka</option>
|
|
<option value="case_person">Oseba primera</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Naslov osebe</label>
|
|
<select
|
|
v-model="personAddressSource"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
|
|
>
|
|
<option value="case_person">Oseba primera</option>
|
|
<option value="client">Stranka</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="generationError[generateFor?.uuid]" class="text-sm text-red-600">
|
|
{{ generationError[generateFor?.uuid] }}
|
|
</div>
|
|
</div>
|
|
</CreateDialog>
|
|
</div>
|
|
</template>
|