changes to UI mostly
This commit is contained in:
Simon Pocrnjič
@@ -1,59 +1,121 @@
|
||||
<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';
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { debounce } from "lodash";
|
||||
import { ref, watch, onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
client_cases: Object,
|
||||
filters: Object
|
||||
client_cases: Object,
|
||||
filters: Object,
|
||||
});
|
||||
|
||||
const search = {
|
||||
search: props.filters.search,
|
||||
route: {
|
||||
link: 'clientCase'
|
||||
}
|
||||
}
|
||||
// Search state (initialize from server-provided filters)
|
||||
const search = ref(props.filters?.search || "");
|
||||
const applySearch = debounce((term) => {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
if (term) {
|
||||
params.search = term;
|
||||
} else {
|
||||
delete params.search;
|
||||
}
|
||||
// Reset paginator key used by backend: 'client-cases-page'
|
||||
delete params["client-cases-page"];
|
||||
delete params.page;
|
||||
router.get(route("clientCase"), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
}, 300);
|
||||
watch(search, (v) => applySearch(v));
|
||||
onUnmounted(() => applySearch.cancel && applySearch.cancel());
|
||||
|
||||
// Format helpers
|
||||
const fmtCurrency = (v) => {
|
||||
const n = Number(v ?? 0);
|
||||
try {
|
||||
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
|
||||
n
|
||||
);
|
||||
} catch (e) {
|
||||
return `${n.toFixed(2)} €`;
|
||||
}
|
||||
};
|
||||
</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>
|
||||
<AppLayout title="Client cases">
|
||||
<template #header> </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 items-center justify-between gap-3 pb-3">
|
||||
<SectionTitle>
|
||||
<template #title>Primeri</template>
|
||||
</SectionTitle>
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Iskanje po imenu"
|
||||
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Št.</th>
|
||||
<th class="py-2 pr-4">Primer</th>
|
||||
<th class="py-2 pr-4">Stranka</th>
|
||||
<th class="py-2 pr-4">Davčna</th>
|
||||
<th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
|
||||
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in client_cases.data"
|
||||
:key="c.uuid"
|
||||
class="border-b last:border-0"
|
||||
>
|
||||
<td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
:href="route('clientCase.show', { client_case: c.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ c.person?.full_name || "-" }}
|
||||
</Link>
|
||||
</td>
|
||||
<td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
|
||||
|
||||
<td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ c.active_contracts_count ?? 0 }}
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ fmtCurrency(c.active_contracts_balance_sum) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!client_cases.data || client_cases.data.length === 0">
|
||||
<td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination
|
||||
:links="client_cases.links"
|
||||
:from="client_cases.from"
|
||||
:to="client_cases.to"
|
||||
:total="client_cases.total"
|
||||
/>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,53 +1,163 @@
|
||||
<script setup>
|
||||
import BasicTable from '@/Components/BasicTable.vue';
|
||||
import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/Shared/AppObjects';
|
||||
import { ref } from "vue";
|
||||
import { router } from "@inertiajs/vue3";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
|
||||
import SecondaryButton from "@/Components/SecondaryButton.vue";
|
||||
import DangerButton from "@/Components/DangerButton.vue";
|
||||
import {
|
||||
FwbTable,
|
||||
FwbTableHead,
|
||||
FwbTableHeadCell,
|
||||
FwbTableBody,
|
||||
FwbTableRow,
|
||||
FwbTableCell,
|
||||
} from "flowbite-vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faTrash, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(faTrash, faEllipsisVertical);
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
activities: Object
|
||||
client_case: Object,
|
||||
activities: Object,
|
||||
});
|
||||
|
||||
// Dropdown component manages its own open/close state
|
||||
|
||||
let header = [
|
||||
C_TD.make('Pogodba', 'header'),
|
||||
C_TD.make('Datum', 'header'),
|
||||
C_TD.make('Akcija', 'header'),
|
||||
C_TD.make('Odločitev', 'header'),
|
||||
C_TD.make('Opomba', 'header'),
|
||||
C_TD.make('Datum zapadlosti', 'header'),
|
||||
C_TD.make('Znesek obljube', 'header'),
|
||||
C_TD.make('Dodal', 'header')
|
||||
];
|
||||
const fmtDate = (d) => {
|
||||
if (!d) return "";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("sl-SI");
|
||||
} catch (e) {
|
||||
return String(d);
|
||||
}
|
||||
};
|
||||
const fmtCurrency = (v) => {
|
||||
const n = Number(v ?? 0);
|
||||
try {
|
||||
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
|
||||
n
|
||||
);
|
||||
} catch {
|
||||
return `${n.toFixed(2)} €`;
|
||||
}
|
||||
};
|
||||
|
||||
const createBody = (data) => {
|
||||
let body = [];
|
||||
|
||||
data.forEach((p) => {
|
||||
const createdDate = new Date(p.created_at).toLocaleDateString('de');
|
||||
const dueDate = (p.due_date) ? new Date().toLocaleDateString('de') : null;
|
||||
const userName = (p.user && p.user.name) ? p.user.name : (p.user_name || '');
|
||||
|
||||
const cols = [
|
||||
C_TD.make(p.contract?.reference ?? ''),
|
||||
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' ),
|
||||
C_TD.make(userName, 'body')
|
||||
];
|
||||
|
||||
body.push(
|
||||
C_TR.make(cols)
|
||||
)
|
||||
});
|
||||
|
||||
return body;
|
||||
}
|
||||
const deleteActivity = (row) => {
|
||||
if (!row?.id) return;
|
||||
router.delete(
|
||||
route("clientCase.activity.delete", {
|
||||
client_case: props.client_case.uuid,
|
||||
activity: row.id,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Confirmation modal state and handlers
|
||||
const confirmDelete = ref(false);
|
||||
const toDeleteRow = ref(null);
|
||||
const openDelete = (row) => {
|
||||
toDeleteRow.value = row;
|
||||
confirmDelete.value = true;
|
||||
};
|
||||
const cancelDelete = () => {
|
||||
confirmDelete.value = false;
|
||||
toDeleteRow.value = null;
|
||||
};
|
||||
const confirmDeleteAction = () => {
|
||||
if (toDeleteRow.value) {
|
||||
deleteActivity(toDeleteRow.value);
|
||||
}
|
||||
confirmDelete.value = false;
|
||||
toDeleteRow.value = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicTable :header="header" :body="createBody(activities.data)" />
|
||||
</template>
|
||||
<div class="overflow-x-auto">
|
||||
<FwbTable hoverable striped class="min-w-full text-left text-sm">
|
||||
<FwbTableHead>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Pogodba</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Datum</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Akcija</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Odločitev</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Opomba</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Datum zapadlosti</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4 text-right">Znesek obljube</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pr-4">Dodal</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="py-2 pl-2 pr-2 w-8 text-right"></FwbTableHeadCell>
|
||||
</FwbTableHead>
|
||||
|
||||
<FwbTableBody>
|
||||
<FwbTableRow v-for="row in activities.data" :key="row.id" class="border-b">
|
||||
<FwbTableCell class="py-2 pr-4">{{
|
||||
row.contract?.reference || ""
|
||||
}}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{ fmtDate(row.created_at) }}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{ row.action?.name || "" }}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{ row.decision?.name || "" }}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{ row.note || "" }}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{ fmtDate(row.due_date) }}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4 text-right">{{
|
||||
fmtCurrency(row.amount)
|
||||
}}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pr-4">{{
|
||||
row.user?.name || row.user_name || ""
|
||||
}}</FwbTableCell>
|
||||
<FwbTableCell class="py-2 pl-2 pr-2 text-right">
|
||||
<Dropdown align="right" width="30" :content-classes="['py-1', 'bg-white']">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100"
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="['fas', 'ellipsis-vertical']"
|
||||
class="text-gray-600 text-[20px]"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-red-50 text-red-600"
|
||||
@click.stop="openDelete(row)"
|
||||
>
|
||||
<FontAwesomeIcon :icon="['fas', 'trash']" class="text-[16px]" />
|
||||
<span>Izbriši</span>
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</FwbTableCell>
|
||||
</FwbTableRow>
|
||||
|
||||
<FwbTableRow v-if="!activities?.data || activities.data.length === 0">
|
||||
<FwbTableCell :colspan="9" class="py-4 text-gray-500"
|
||||
>Ni aktivnosti.</FwbTableCell
|
||||
>
|
||||
</FwbTableRow>
|
||||
</FwbTableBody>
|
||||
</FwbTable>
|
||||
</div>
|
||||
|
||||
<!-- Confirm deletion modal -->
|
||||
<ConfirmationModal :show="confirmDelete" @close="cancelDelete">
|
||||
<template #title>Potrditev</template>
|
||||
<template #content>
|
||||
Ali ste prepričani, da želite izbrisati to aktivnost? Tega dejanja ni mogoče
|
||||
razveljaviti.
|
||||
</template>
|
||||
<template #footer>
|
||||
<SecondaryButton type="button" @click="cancelDelete">Prekliči</SecondaryButton>
|
||||
<DangerButton type="button" class="ml-2" @click="confirmDeleteAction"
|
||||
>Izbriši</DangerButton
|
||||
>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
|
||||
@@ -94,10 +94,21 @@ const storeOrUpdate = () => {
|
||||
},
|
||||
preserveScroll: true,
|
||||
}
|
||||
const params = {}
|
||||
try {
|
||||
const url = new URL(window.location.href)
|
||||
const seg = url.searchParams.get('segment')
|
||||
if (seg) params.segment = seg
|
||||
} catch (e) {}
|
||||
if (isEdit) {
|
||||
formContract.put(route('clientCase.contract.update', { client_case: props.client_case.uuid, uuid: formContract.uuid }), options)
|
||||
formContract.put(route('clientCase.contract.update', { client_case: props.client_case.uuid, uuid: formContract.uuid, ...params }), options)
|
||||
} else {
|
||||
formContract.post(route('clientCase.contract.store', props.client_case), options)
|
||||
// route helper merges params for GET; for POST we can append query manually if needed
|
||||
let postUrl = route('clientCase.contract.store', props.client_case)
|
||||
if (params.segment) {
|
||||
postUrl += (postUrl.includes('?') ? '&' : '?') + 'segment=' + encodeURIComponent(params.segment)
|
||||
}
|
||||
formContract.post(postUrl, options)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -12,11 +12,11 @@ import DocumentsTable from "@/Components/DocumentsTable.vue";
|
||||
import DocumentUploadDialog from "@/Components/DocumentUploadDialog.vue";
|
||||
import DocumentViewerDialog from "@/Components/DocumentViewerDialog.vue";
|
||||
import { classifyDocument } from "@/Services/documents";
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import { router, useForm } from "@inertiajs/vue3";
|
||||
import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import ConfirmDialog from "@/Components/ConfirmDialog.vue";
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
@@ -30,33 +30,55 @@ const props = defineProps({
|
||||
documents: Array,
|
||||
segments: { type: Array, default: () => [] },
|
||||
all_segments: { type: Array, default: () => [] },
|
||||
current_segment: { type: Object, default: null },
|
||||
});
|
||||
|
||||
const showUpload = ref(false);
|
||||
const openUpload = () => { showUpload.value = true; };
|
||||
const closeUpload = () => { showUpload.value = false; };
|
||||
const openUpload = () => {
|
||||
showUpload.value = true;
|
||||
};
|
||||
const closeUpload = () => {
|
||||
showUpload.value = false;
|
||||
};
|
||||
const onUploaded = () => {
|
||||
// Refresh page data to include the new document
|
||||
router.reload({ only: ['documents'] });
|
||||
router.reload({ only: ["documents"] });
|
||||
};
|
||||
|
||||
const viewer = ref({ open: false, src: '', title: '' });
|
||||
const viewer = ref({ open: false, src: "", title: "" });
|
||||
const openViewer = (doc) => {
|
||||
const kind = classifyDocument(doc)
|
||||
const isContractDoc = (doc?.documentable_type || '').toLowerCase().includes('contract')
|
||||
if (kind === 'preview') {
|
||||
const url = isContractDoc && doc.contract_uuid
|
||||
? route('contract.document.view', { contract: doc.contract_uuid, document: doc.uuid })
|
||||
: route('clientCase.document.view', { client_case: props.client_case.uuid, document: doc.uuid })
|
||||
viewer.value = { open: true, src: url, title: doc.original_name || doc.name }
|
||||
const kind = classifyDocument(doc);
|
||||
const isContractDoc = (doc?.documentable_type || "").toLowerCase().includes("contract");
|
||||
if (kind === "preview") {
|
||||
const url =
|
||||
isContractDoc && doc.contract_uuid
|
||||
? route("contract.document.view", {
|
||||
contract: doc.contract_uuid,
|
||||
document: doc.uuid,
|
||||
})
|
||||
: route("clientCase.document.view", {
|
||||
client_case: props.client_case.uuid,
|
||||
document: doc.uuid,
|
||||
});
|
||||
viewer.value = { open: true, src: url, title: doc.original_name || doc.name };
|
||||
} else {
|
||||
const url = isContractDoc && doc.contract_uuid
|
||||
? route('contract.document.download', { contract: doc.contract_uuid, document: doc.uuid })
|
||||
: route('clientCase.document.download', { client_case: props.client_case.uuid, document: doc.uuid })
|
||||
window.location.href = url
|
||||
const url =
|
||||
isContractDoc && doc.contract_uuid
|
||||
? route("contract.document.download", {
|
||||
contract: doc.contract_uuid,
|
||||
document: doc.uuid,
|
||||
})
|
||||
: route("clientCase.document.download", {
|
||||
client_case: props.client_case.uuid,
|
||||
document: doc.uuid,
|
||||
});
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
const closeViewer = () => { viewer.value.open = false; viewer.value.src = ''; };
|
||||
};
|
||||
const closeViewer = () => {
|
||||
viewer.value.open = false;
|
||||
viewer.value.src = "";
|
||||
};
|
||||
|
||||
const clientDetails = ref(false);
|
||||
|
||||
@@ -82,17 +104,36 @@ const openDrawerAddActivity = (c = null) => {
|
||||
};
|
||||
|
||||
// delete confirmation
|
||||
const confirmDelete = ref({ show: false, contract: null })
|
||||
const requestDeleteContract = (c) => { confirmDelete.value = { show: true, contract: c } }
|
||||
const closeConfirmDelete = () => { confirmDelete.value.show = false; confirmDelete.value.contract = null }
|
||||
const confirmDelete = ref({ show: false, contract: null });
|
||||
const requestDeleteContract = (c) => {
|
||||
confirmDelete.value = { show: true, contract: c };
|
||||
};
|
||||
const closeConfirmDelete = () => {
|
||||
confirmDelete.value.show = false;
|
||||
confirmDelete.value.contract = null;
|
||||
};
|
||||
const doDeleteContract = () => {
|
||||
const c = confirmDelete.value.contract
|
||||
if (!c) return closeConfirmDelete()
|
||||
router.delete(route('clientCase.contract.delete', { client_case: props.client_case.uuid, uuid: c.uuid }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => closeConfirmDelete(),
|
||||
})
|
||||
}
|
||||
const c = confirmDelete.value.contract;
|
||||
if (!c) return closeConfirmDelete();
|
||||
// Keep segment filter in redirect
|
||||
const params = {};
|
||||
try {
|
||||
const url = new URL(window.location.href);
|
||||
const seg = url.searchParams.get("segment");
|
||||
if (seg) params.segment = seg;
|
||||
} catch (e) {}
|
||||
router.delete(
|
||||
route("clientCase.contract.delete", {
|
||||
client_case: props.client_case.uuid,
|
||||
uuid: c.uuid,
|
||||
...params,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
onFinish: () => closeConfirmDelete(),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
//Close drawer (all)
|
||||
const closeDrawer = () => {
|
||||
@@ -109,35 +150,52 @@ const hideClietnDetails = () => {
|
||||
};
|
||||
|
||||
// Attach segment to case
|
||||
const showAttachSegment = ref(false)
|
||||
const openAttachSegment = () => { showAttachSegment.value = true }
|
||||
const closeAttachSegment = () => { showAttachSegment.value = false }
|
||||
const attachForm = useForm({ segment_id: null })
|
||||
const showAttachSegment = ref(false);
|
||||
const openAttachSegment = () => {
|
||||
showAttachSegment.value = true;
|
||||
};
|
||||
const closeAttachSegment = () => {
|
||||
showAttachSegment.value = false;
|
||||
};
|
||||
const attachForm = useForm({ segment_id: null });
|
||||
const availableSegments = computed(() => {
|
||||
const current = new Set((props.segments || []).map(s => s.id))
|
||||
return (props.all_segments || []).filter(s => !current.has(s.id))
|
||||
})
|
||||
const current = new Set((props.segments || []).map((s) => s.id));
|
||||
return (props.all_segments || []).filter((s) => !current.has(s.id));
|
||||
});
|
||||
const submitAttachSegment = () => {
|
||||
if (!attachForm.segment_id) { return }
|
||||
attachForm.post(route('clientCase.segments.attach', props.client_case), {
|
||||
if (!attachForm.segment_id) {
|
||||
return;
|
||||
}
|
||||
attachForm.post(route("clientCase.segments.attach", props.client_case), {
|
||||
preserveScroll: true,
|
||||
only: ['segments'],
|
||||
only: ["segments"],
|
||||
onSuccess: () => {
|
||||
closeAttachSegment()
|
||||
attachForm.reset('segment_id')
|
||||
}
|
||||
})
|
||||
}
|
||||
closeAttachSegment();
|
||||
attachForm.reset("segment_id");
|
||||
},
|
||||
});
|
||||
};
|
||||
</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">
|
||||
<!-- Current segment badge (right aligned, above the card) -->
|
||||
<div v-if="current_segment" class="flex justify-end pb-3">
|
||||
<div class="text-sm text-gray-700">
|
||||
<span class="mr-2">Segment:</span>
|
||||
<span
|
||||
class="inline-block px-3 py-1 rounded-md border border-indigo-200 bg-indigo-50 text-indigo-800 font-medium"
|
||||
>
|
||||
{{ current_segment.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-500"
|
||||
>
|
||||
<div class="mx-auto max-w-4x1 p-3 flex justify-between">
|
||||
<div class="mx-auto max-w-4x1 p-3 flex justify-between items-center">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
<a class="hover:text-blue-500" :href="route('client.show', client)">
|
||||
@@ -175,9 +233,15 @@ const submitAttachSegment = () => {
|
||||
<SectionTitle>
|
||||
<template #title> Primer - oseba </template>
|
||||
</SectionTitle>
|
||||
<div v-if="client_case && client_case.client_ref" class="text-xs text-gray-600">
|
||||
<div
|
||||
v-if="client_case && client_case.client_ref"
|
||||
class="text-xs text-gray-600"
|
||||
>
|
||||
<span class="mr-1">Ref:</span>
|
||||
<span class="inline-block px-2 py-0.5 rounded border bg-gray-50 font-mono text-gray-700">{{ client_case.client_ref }}</span>
|
||||
<span
|
||||
class="inline-block px-2 py-0.5 rounded border bg-gray-50 font-mono text-gray-700"
|
||||
>{{ client_case.client_ref }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,7 +253,11 @@ const submitAttachSegment = () => {
|
||||
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 :types="types" tab-color="red-600" :person="client_case.person" />
|
||||
<PersonInfoGrid
|
||||
:types="types"
|
||||
tab-color="red-600"
|
||||
:person="client_case.person"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,8 +272,16 @@ const submitAttachSegment = () => {
|
||||
</SectionTitle>
|
||||
<div class="flex items-center gap-2">
|
||||
<FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
|
||||
<FwbButton color="light" :disabled="availableSegments.length === 0" @click="openAttachSegment">
|
||||
{{ availableSegments.length ? 'Dodaj segment' : 'Ni razpoložljivih segmentov' }}
|
||||
<FwbButton
|
||||
color="light"
|
||||
:disabled="availableSegments.length === 0"
|
||||
@click="openAttachSegment"
|
||||
>
|
||||
{{
|
||||
availableSegments.length
|
||||
? "Dodaj segment"
|
||||
: "Ni razpoložljivih segmentov"
|
||||
}}
|
||||
</FwbButton>
|
||||
</div>
|
||||
</div>
|
||||
@@ -222,7 +298,7 @@ const submitAttachSegment = () => {
|
||||
</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">
|
||||
@@ -230,12 +306,16 @@ const submitAttachSegment = () => {
|
||||
<div class="flex justify-between p-4">
|
||||
<SectionTitle>
|
||||
<template #title>Aktivnosti</template>
|
||||
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerAddActivity">Nova</FwbButton>
|
||||
</div>
|
||||
<ActivityTable :client_case="client_case" :activities="activities" />
|
||||
<Pagination :links="activities.links" :from="activities.from" :to="activities.to" :total="activities.total" />
|
||||
<Pagination
|
||||
:links="activities.links"
|
||||
:from="activities.from"
|
||||
:to="activities.to"
|
||||
:total="activities.total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,12 +334,22 @@ const submitAttachSegment = () => {
|
||||
<DocumentsTable
|
||||
:documents="documents"
|
||||
@view="openViewer"
|
||||
:download-url-builder="doc => {
|
||||
const isContractDoc = (doc?.documentable_type || '').toLowerCase().includes('contract')
|
||||
return isContractDoc && doc.contract_uuid
|
||||
? route('contract.document.download', { contract: doc.contract_uuid, document: doc.uuid })
|
||||
: route('clientCase.document.download', { client_case: client_case.uuid, document: doc.uuid })
|
||||
}"
|
||||
:download-url-builder="
|
||||
(doc) => {
|
||||
const isContractDoc = (doc?.documentable_type || '')
|
||||
.toLowerCase()
|
||||
.includes('contract');
|
||||
return isContractDoc && doc.contract_uuid
|
||||
? route('contract.document.download', {
|
||||
contract: doc.contract_uuid,
|
||||
document: doc.uuid,
|
||||
})
|
||||
: route('clientCase.document.download', {
|
||||
client_case: client_case.uuid,
|
||||
document: doc.uuid,
|
||||
});
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,7 +362,12 @@ const submitAttachSegment = () => {
|
||||
:post-url="route('clientCase.document.store', client_case)"
|
||||
:contracts="contracts"
|
||||
/>
|
||||
<DocumentViewerDialog :show="viewer.open" :src="viewer.src" :title="viewer.title" @close="closeViewer" />
|
||||
<DocumentViewerDialog
|
||||
:show="viewer.open"
|
||||
:src="viewer.src"
|
||||
:title="viewer.title"
|
||||
@close="closeViewer"
|
||||
/>
|
||||
</AppLayout>
|
||||
<ContractDrawer
|
||||
:show="drawerCreateContract"
|
||||
@@ -303,16 +398,28 @@ const submitAttachSegment = () => {
|
||||
<template #content>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700">Segment</label>
|
||||
<select v-model="attachForm.segment_id" class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<select
|
||||
v-model="attachForm.segment_id"
|
||||
class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
>
|
||||
<option :value="null" disabled>-- izberi segment --</option>
|
||||
<option v-for="s in availableSegments" :key="s.id" :value="s.id">{{ s.name }}</option>
|
||||
<option v-for="s in availableSegments" :key="s.id" :value="s.id">
|
||||
{{ s.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div v-if="attachForm.errors.segment_id" class="text-sm text-red-600">{{ attachForm.errors.segment_id }}</div>
|
||||
<div v-if="attachForm.errors.segment_id" class="text-sm text-red-600">
|
||||
{{ attachForm.errors.segment_id }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<FwbButton color="light" @click="closeAttachSegment">Prekliči</FwbButton>
|
||||
<FwbButton class="ml-2" :disabled="attachForm.processing || !attachForm.segment_id" @click="submitAttachSegment">Dodaj</FwbButton>
|
||||
<FwbButton
|
||||
class="ml-2"
|
||||
:disabled="attachForm.processing || !attachForm.segment_id"
|
||||
@click="submitAttachSegment"
|
||||
>Dodaj</FwbButton
|
||||
>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user