477 lines
16 KiB
Vue
477 lines
16 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link, useForm, router } from "@inertiajs/vue3";
|
|
import { computed, ref, watch } from "vue";
|
|
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
|
import { Card } from "@/Components/ui/card";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { AlertCircle } from "lucide-vue-next";
|
|
import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
|
|
import Pagination from "@/Components/Pagination.vue";
|
|
import { watchDebounced } from "@vueuse/core";
|
|
|
|
const props = defineProps({
|
|
setting: Object,
|
|
unassignedContracts: Object,
|
|
assignedContracts: Object,
|
|
users: Array,
|
|
filters: Object,
|
|
});
|
|
|
|
const form = useForm({
|
|
contract_uuid: null,
|
|
assigned_user_id: null,
|
|
start_date: null,
|
|
end_date: null,
|
|
});
|
|
|
|
// Bulk selection form
|
|
const bulkForm = useForm({
|
|
contract_uuids: [],
|
|
assigned_user_id: null,
|
|
});
|
|
|
|
// Separate reactive state for selected UUIDs (for UI reactivity)
|
|
const selectedContractUuids = ref([]);
|
|
|
|
// Select all state for unassigned table (current page only)
|
|
const isAllUnassignedSelected = computed({
|
|
get: () => {
|
|
const pageUuids = props.unassignedContracts?.data?.map((c) => c.uuid) || [];
|
|
return (
|
|
pageUuids.length > 0 &&
|
|
pageUuids.every((uuid) => selectedContractUuids.value.includes(uuid))
|
|
);
|
|
},
|
|
set: (value) => {
|
|
const pageUuids = props.unassignedContracts?.data?.map((c) => c.uuid) || [];
|
|
if (value) {
|
|
// Add all page items to selection
|
|
selectedContractUuids.value = [
|
|
...new Set([...selectedContractUuids.value, ...pageUuids]),
|
|
];
|
|
} else {
|
|
// Remove all page items from selection
|
|
selectedContractUuids.value = selectedContractUuids.value.filter(
|
|
(uuid) => !pageUuids.includes(uuid)
|
|
);
|
|
}
|
|
},
|
|
});
|
|
|
|
// Helper to toggle contract selection
|
|
function toggleContractSelection(uuid, checked) {
|
|
if (checked) {
|
|
if (!selectedContractUuids.value.includes(uuid)) {
|
|
selectedContractUuids.value = [...selectedContractUuids.value, uuid];
|
|
}
|
|
} else {
|
|
selectedContractUuids.value = selectedContractUuids.value.filter((id) => id !== uuid);
|
|
}
|
|
console.log(selectedContractUuids.value);
|
|
}
|
|
|
|
// Format helpers (Slovenian formatting)
|
|
|
|
// Initialize search and filter from URL params
|
|
const search = ref(props.filters?.search || "");
|
|
const assignedFilterUserId = ref(props.filters?.assigned_user_id || "all");
|
|
|
|
// Navigation helpers
|
|
function navigateWithParams(params) {
|
|
router.visit(route("fieldjobs.index"), {
|
|
data: params,
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
only: ["unassignedContracts", "assignedContracts", "filters"],
|
|
});
|
|
}
|
|
|
|
const applySearch = async function () {
|
|
const params = Object.fromEntries(
|
|
new URLSearchParams(window.location.search).entries()
|
|
);
|
|
|
|
const term = (search.value || "").trim();
|
|
if (term) {
|
|
params.search = term;
|
|
} else {
|
|
delete params.search;
|
|
}
|
|
delete params.page;
|
|
router.get(route("fieldjobs.index"), params, {
|
|
preserveState: true,
|
|
replace: true,
|
|
preserveScroll: true,
|
|
only: ["unassignedContracts"],
|
|
});
|
|
};
|
|
|
|
watchDebounced(
|
|
() => search.value,
|
|
(val) => {
|
|
applySearch();
|
|
},
|
|
{
|
|
debounce: 200,
|
|
maxWait: 1000,
|
|
}
|
|
);
|
|
|
|
// Watch search and filter changes
|
|
/*watch(search, (value) => {
|
|
navigateWithParams({
|
|
search: value || undefined,
|
|
assigned_user_id:
|
|
assignedFilterUserId.value !== "all" ? assignedFilterUserId.value : undefined,
|
|
page_contracts: 1, // Reset to first page on search
|
|
page_assignments: 1,
|
|
});
|
|
});*/
|
|
|
|
watch(assignedFilterUserId, (value) => {
|
|
navigateWithParams({
|
|
search: search.value || undefined,
|
|
assigned_user_id: value !== "all" ? value : undefined,
|
|
page_contracts: props.unassignedContracts?.current_page,
|
|
page_assignments: 1, // Reset to first page on filter change
|
|
});
|
|
});
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
const d = new Date(value);
|
|
if (isNaN(d)) {
|
|
return value;
|
|
}
|
|
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}`;
|
|
}
|
|
|
|
function formatCurrencyEUR(value) {
|
|
if (value === null || value === undefined) {
|
|
return "-";
|
|
}
|
|
const n = Number(value);
|
|
if (isNaN(n)) {
|
|
return String(value);
|
|
}
|
|
// Thousands separator as dot, decimal as comma, with € suffix
|
|
return (
|
|
n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
|
|
" €"
|
|
);
|
|
}
|
|
|
|
function primaryCaseAddress(contract) {
|
|
const addrs = contract?.client_case?.person?.addresses || [];
|
|
if (!Array.isArray(addrs) || addrs.length === 0) {
|
|
return "-";
|
|
}
|
|
const a = addrs[0];
|
|
const address = a?.address || "";
|
|
const country = a?.country || "";
|
|
return [address, country].filter(Boolean).join(", ");
|
|
}
|
|
|
|
function assign(contract) {
|
|
form.contract_uuid = contract.uuid;
|
|
// minimal UX: if no user selected yet, just post will fail with error; page can be enhanced later with dropdown.
|
|
form.post(route("fieldjobs.assign"));
|
|
}
|
|
|
|
function assignSelected() {
|
|
// Use the same selected user as in the single-assign dropdown
|
|
bulkForm.assigned_user_id = form.assigned_user_id;
|
|
bulkForm.contract_uuids = selectedContractUuids.value;
|
|
bulkForm.post(route("fieldjobs.assign-bulk"), {
|
|
onSuccess: () => {
|
|
selectedContractUuids.value = [];
|
|
bulkForm.contract_uuids = [];
|
|
},
|
|
});
|
|
}
|
|
|
|
function cancelAssignment(contract) {
|
|
const payload = { contract_uuid: contract.uuid };
|
|
form.transform(() => payload).post(route("fieldjobs.cancel"));
|
|
}
|
|
|
|
// Column definitions for DataTableNew2
|
|
const unassignedColumns = [
|
|
{
|
|
key: "_select",
|
|
label: "",
|
|
sortable: false,
|
|
class: "w-8",
|
|
},
|
|
{ key: "reference", label: "Pogodba", sortable: false },
|
|
{ key: "case_person", label: "Primer", sortable: false },
|
|
{ key: "address", label: "Naslov", sortable: false },
|
|
{ key: "client_person", label: "Stranka", sortable: false },
|
|
{ key: "start_date", label: "Začetek", sortable: false },
|
|
{ key: "balance_amount", label: "Stanje", sortable: false, align: "right" },
|
|
{ key: "_actions", label: "Dejanje", sortable: false },
|
|
];
|
|
|
|
const assignedColumns = [
|
|
{ key: "reference", label: "Pogodba", sortable: false },
|
|
{ key: "case_person", label: "Primer", sortable: false },
|
|
{ key: "address", label: "Naslov", sortable: false },
|
|
{ key: "client_person", label: "Stranka", sortable: false },
|
|
{ key: "assigned_at", label: "Dodeljeno dne", sortable: false },
|
|
{ key: "assigned_to", label: "Dodeljeno komu", sortable: false },
|
|
{ key: "balance_amount", label: "Stanje", sortable: false, align: "right" },
|
|
{ key: "_actions", label: "Dejanje", sortable: false },
|
|
];
|
|
|
|
// Prepare rows with flattened fields for display
|
|
const unassignedRows = computed(() =>
|
|
(props.unassignedContracts?.data || []).map((c) => ({
|
|
...c,
|
|
balance_amount:
|
|
c?.account?.balance_amount === null || c?.account?.balance_amount === undefined
|
|
? null
|
|
: Number(c.account.balance_amount),
|
|
case_person: c.client_case?.person?.full_name || null,
|
|
client_person: c.client?.person?.full_name || null,
|
|
address: primaryCaseAddress(c) || null,
|
|
}))
|
|
);
|
|
|
|
const assignedRows = computed(() =>
|
|
(props.assignedContracts?.data || []).map((c) => ({
|
|
...c,
|
|
balance_amount:
|
|
c?.account?.balance_amount === null || c?.account?.balance_amount === undefined
|
|
? null
|
|
: Number(c.account.balance_amount),
|
|
case_person: c.client_case?.person?.full_name || null,
|
|
client_person: c.client?.person?.full_name || null,
|
|
address: primaryCaseAddress(c) || null,
|
|
assigned_to: c.last_field_jobs.assigned_user.name || null,
|
|
assigned_at_formatted: formatDate(c.last_field_jobs.assigned_at),
|
|
}))
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Dodeljevanje terenskih opravil">
|
|
<template #header></template>
|
|
<div class="pt-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div
|
|
v-if="!setting"
|
|
class="mb-6 flex items-start gap-3 rounded-lg border border-yellow-200 bg-yellow-50 p-4"
|
|
>
|
|
<AlertCircle class="h-5 w-5 text-yellow-600 shrink-0 mt-0.5" />
|
|
<p class="text-sm text-yellow-800">
|
|
Nastavitev za terenska opravila ni najdena. Najprej jo ustvarite v Nastavitve
|
|
→ Nastavitve terenskih opravil.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Unassigned (Assignable) Contracts -->
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg mb-8">
|
|
<div class="p-4 border-b">
|
|
<h2 class="text-xl font-semibold">Pogodbe (nedodeljene)</h2>
|
|
</div>
|
|
<div class="p-4 border-b space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="assign-user">Dodeli uporabniku</Label>
|
|
<Select v-model="form.assigned_user_id">
|
|
<SelectTrigger id="assign-user" class="max-w-xs">
|
|
<SelectValue placeholder="Izberite uporabnika" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="u in users || []" :key="u.id" :value="u.id">
|
|
{{ u.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<div v-if="form.errors.assigned_user_id" class="text-red-600 text-sm">
|
|
{{ form.errors.assigned_user_id }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
:disabled="!selectedContractUuids.length || !form.assigned_user_id"
|
|
@click="assignSelected"
|
|
>
|
|
Dodeli izbrane
|
|
<Badge
|
|
v-if="selectedContractUuids.length"
|
|
variant="secondary"
|
|
class="ml-2"
|
|
>
|
|
{{ selectedContractUuids.length }}
|
|
</Badge>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
:disabled="!selectedContractUuids.length"
|
|
@click="selectedContractUuids = []"
|
|
>
|
|
Počisti izbor
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DataTable
|
|
:columns="unassignedColumns"
|
|
:data="unassignedRows"
|
|
:meta="{
|
|
current_page: unassignedContracts.current_page,
|
|
per_page: unassignedContracts.per_page,
|
|
total: unassignedContracts.total,
|
|
last_page: unassignedContracts.last_page,
|
|
from: unassignedContracts.from,
|
|
to: unassignedContracts.to,
|
|
links: unassignedContracts.links,
|
|
}"
|
|
row-key="uuid"
|
|
:page-size="props.unassignedContracts?.per_page || 10"
|
|
:page-size-options="[10, 15, 25, 50, 100]"
|
|
:show-toolbar="true"
|
|
route-name="fieldjobs.index"
|
|
page-param-name="page_contracts"
|
|
per-page-param-name="per_page_contracts"
|
|
>
|
|
<template #toolbar-filters>
|
|
<div class="flex items-center gap-2 w-full">
|
|
<Input
|
|
v-model="search"
|
|
placeholder="Išči po pogodbi, primeru, stranki, naslovu..."
|
|
class="w-[320px]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell-_select="{ row }">
|
|
<Checkbox
|
|
@update:model-value="
|
|
(checked) => toggleContractSelection(row.uuid, checked)
|
|
"
|
|
/>
|
|
</template>
|
|
<template #cell-case_person="{ row }">
|
|
<Link
|
|
v-if="row.client_case?.uuid"
|
|
:href="route('clientCase.show', { client_case: row.client_case.uuid })"
|
|
class="font-semibold hover:underline text-primary-700"
|
|
>
|
|
{{ row.client_case?.person?.full_name || "Primer stranke" }}
|
|
</Link>
|
|
<span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
|
|
</template>
|
|
<template #cell-start_date="{ row }">
|
|
{{ formatDate(row.start_date) }}
|
|
</template>
|
|
<template #cell-balance_amount="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrencyEUR(row.account?.balance_amount) }}
|
|
</div>
|
|
</template>
|
|
<template #cell-_actions="{ row }">
|
|
<Button size="sm" @click="assign(row)">Dodeli</Button>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
|
|
<!-- Assigned Contracts -->
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
|
<div class="p-4 border-b">
|
|
<h2 class="text-xl font-semibold">Dodeljene pogodbe</h2>
|
|
</div>
|
|
<DataTable
|
|
:columns="assignedColumns"
|
|
:data="assignedRows"
|
|
:meta="{
|
|
current_page: assignedContracts.current_page,
|
|
per_page: assignedContracts.per_page,
|
|
total: assignedContracts.total,
|
|
last_page: assignedContracts.last_page,
|
|
from: assignedContracts.from,
|
|
to: assignedContracts.to,
|
|
links: assignedContracts.links,
|
|
}"
|
|
row-key="uuid"
|
|
:page-size="props.assignedContracts?.per_page || 10"
|
|
:page-size-options="[10, 15, 25, 50, 100]"
|
|
:show-toolbar="true"
|
|
route-name="fieldjobs.index"
|
|
page-param-name="page_assignments"
|
|
per-page-param-name="per_page_assignments"
|
|
>
|
|
<template #toolbar-filters>
|
|
<div class="flex items-center gap-2 w-full">
|
|
<Input
|
|
v-model="search_contract"
|
|
placeholder="Išči po pogodbi, primeru, stranki..."
|
|
class="w-[320px]"
|
|
/>
|
|
<div class="flex items-center gap-2 ml-4">
|
|
<Label for="filter-user" class="text-sm whitespace-nowrap"
|
|
>Filter po uporabniku</Label
|
|
>
|
|
<Select v-model="assignedFilterUserId">
|
|
<SelectTrigger id="filter-user" class="w-48">
|
|
<SelectValue placeholder="Vsi" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Vsi</SelectItem>
|
|
<SelectItem
|
|
v-for="u in users || []"
|
|
:key="u.id"
|
|
:value="String(u.id)"
|
|
>
|
|
{{ u.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #cell-case_person="{ row }">
|
|
<Link
|
|
v-if="row.client_case?.uuid"
|
|
:href="route('clientCase.show', { client_case: row.client_case.uuid })"
|
|
class="font-semibold hover:underline text-primary-700"
|
|
>
|
|
{{ row.client_case?.person?.full_name || "Primer stranke" }}
|
|
</Link>
|
|
<span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
|
|
</template>
|
|
<template #cell-assigned_at="{ row }">
|
|
{{ row.assigned_at_formatted }}
|
|
</template>
|
|
<template #cell-balance_amount="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrencyEUR(row.account?.balance_amount) }}
|
|
</div>
|
|
</template>
|
|
<template #cell-_actions="{ row }">
|
|
<Button variant="destructive" size="sm" @click="cancelAssignment(row)">
|
|
Prekliči
|
|
</Button>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|