733 lines
25 KiB
Vue
733 lines
25 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link, router, useForm, usePage } from "@inertiajs/vue3";
|
|
import { ref, computed } from "vue";
|
|
import axios from "axios";
|
|
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import ConfirmDialog from "@/Components/ConfirmDialog.vue";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Checkbox } from "@/Components/ui/checkbox";
|
|
import { Switch } from "@/Components/ui/switch";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/Components/ui/command";
|
|
import {
|
|
Filter,
|
|
ChevronsUpDown,
|
|
Check,
|
|
FileDown,
|
|
LayoutIcon,
|
|
UsersIcon,
|
|
} from "lucide-vue-next";
|
|
import { cn } from "@/lib/utils";
|
|
import AppCard from "@/Components/app/ui/card/AppCard.vue";
|
|
import { CardTitle } from "@/Components/ui/card";
|
|
import { toNumber } from "lodash";
|
|
|
|
const props = defineProps({
|
|
segment: Object,
|
|
contracts: Object, // LengthAwarePaginator payload from Laravel
|
|
clients: Array, // Full list of clients with contracts in this segment
|
|
});
|
|
|
|
// Initialize search and client filter from current URL so inputs reflect server filters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const search = ref(urlParams.get("search") || "");
|
|
const initialClient = urlParams.get("client") || urlParams.get("client_id") || "";
|
|
const selectedClient = ref(initialClient);
|
|
const filterPopoverOpen = ref(false);
|
|
const clientComboboxOpen = ref(false);
|
|
|
|
// Column definitions for the server-driven table
|
|
const columns = [
|
|
{ key: "reference", label: "Pogodba", sortable: false },
|
|
{ key: "client_case", label: "Primer", sortable: false },
|
|
{ key: "address", label: "Naslov", sortable: false },
|
|
{ key: "client", label: "Stranka", sortable: false },
|
|
{ key: "type", label: "Vrsta", sortable: false },
|
|
{ key: "start_date", label: "Začetek", sortable: false },
|
|
{ key: "end_date", label: "Konec", sortable: false },
|
|
{ key: "account", label: "Stanje", align: "right" },
|
|
];
|
|
|
|
const exportDialogOpen = ref(false);
|
|
const exportScope = ref("current");
|
|
const exportColumns = ref(columns.map((col) => col.key));
|
|
const exportError = ref("");
|
|
const isExporting = ref(false);
|
|
|
|
const contractTable = ref(null);
|
|
const selectedRows = ref([]);
|
|
const showConfirmDialog = ref(false);
|
|
const archiveForm = useForm({
|
|
contracts: [],
|
|
reactivate: false,
|
|
});
|
|
|
|
const hasActiveFilters = computed(() => {
|
|
return Boolean(search.value?.trim()) || Boolean(selectedClient.value);
|
|
});
|
|
|
|
const appliedFilterCount = computed(() => {
|
|
let count = 0;
|
|
if (search.value?.trim()) {
|
|
count += 1;
|
|
}
|
|
if (selectedClient.value) {
|
|
count += 1;
|
|
}
|
|
return count;
|
|
});
|
|
|
|
function handleSelectionChange(selectedKeys) {
|
|
selectedRows.value = selectedKeys.map((val, i) => {
|
|
const nu = toNumber(val);
|
|
return props.contracts.data[nu].uuid;
|
|
});
|
|
}
|
|
|
|
const contractsCurrentPage = computed(() => props.contracts?.current_page ?? 1);
|
|
const contractsPerPage = computed(() => props.contracts?.per_page ?? 15);
|
|
const totalContracts = computed(
|
|
() => props.contracts?.total ?? props.contracts?.data?.length ?? 0
|
|
);
|
|
const currentPageCount = computed(() => props.contracts?.data?.length ?? 0);
|
|
|
|
const allColumnsSelected = computed(() => exportColumns.value.length === columns.length);
|
|
const exportDisabled = computed(
|
|
() => exportColumns.value.length === 0 || isExporting.value
|
|
);
|
|
|
|
const canManageSettings = computed(() => {
|
|
const permissions = usePage().props?.auth?.user?.permissions || [];
|
|
return permissions.includes("mass-archive");
|
|
});
|
|
|
|
function toggleAllColumns(checked) {
|
|
exportColumns.value = checked ? columns.map((col) => col.key) : [];
|
|
}
|
|
|
|
function handleColumnToggle(key, checked) {
|
|
if (checked) {
|
|
if (!exportColumns.value.includes(key)) {
|
|
exportColumns.value = [...exportColumns.value, key];
|
|
}
|
|
} else {
|
|
exportColumns.value = exportColumns.value.filter((col) => col !== key);
|
|
}
|
|
}
|
|
|
|
function setExportScopeFromSwitch(checked) {
|
|
exportScope.value = checked ? "all" : "current";
|
|
}
|
|
|
|
function openExportDialog() {
|
|
exportDialogOpen.value = true;
|
|
exportError.value = "";
|
|
}
|
|
|
|
function closeExportDialog() {
|
|
exportDialogOpen.value = false;
|
|
}
|
|
|
|
async function submitExport() {
|
|
if (exportColumns.value.length === 0) {
|
|
exportError.value = "Izberi vsaj en stolpec.";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
exportError.value = "";
|
|
isExporting.value = true;
|
|
|
|
const payload = {
|
|
scope: exportScope.value,
|
|
columns: [...exportColumns.value],
|
|
search: search.value || "",
|
|
client: selectedClient.value || "",
|
|
page: contractsCurrentPage.value,
|
|
per_page: contractsPerPage.value,
|
|
};
|
|
|
|
const response = await axios.post(
|
|
route("segments.export", { segment: props.segment?.id ?? props.segment }),
|
|
payload,
|
|
{ responseType: "blob" }
|
|
);
|
|
|
|
const blob = new Blob([response.data], {
|
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
});
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
const filename =
|
|
extractFilenameFromHeaders(response.headers) || buildDefaultFilename();
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
exportDialogOpen.value = false;
|
|
} catch (error) {
|
|
exportError.value = "Izvoz je spodletel. Poskusi znova.";
|
|
} finally {
|
|
isExporting.value = false;
|
|
}
|
|
}
|
|
|
|
// Build client options from the full list provided by the server, so the dropdown isn't limited by current filters
|
|
const clientOptions = computed(() => {
|
|
const list = Array.isArray(props.clients) ? props.clients : [];
|
|
const opts = list.map((c) => ({
|
|
value: c.uuid || "",
|
|
label: c.name || "(neznana stranka)",
|
|
}));
|
|
return opts.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
|
|
});
|
|
|
|
const selectedClientName = computed(() => {
|
|
if (!selectedClient.value) {
|
|
return "";
|
|
}
|
|
|
|
const options = clientOptions.value || [];
|
|
const match = options.find((opt) => opt.value === selectedClient.value);
|
|
|
|
return match?.label || "";
|
|
});
|
|
|
|
function isClientFilterEmpty() {
|
|
return !selectedClient.value;
|
|
}
|
|
|
|
function selectClient(value) {
|
|
selectedClient.value = value ?? "";
|
|
}
|
|
|
|
function closeClientCombobox() {
|
|
clientComboboxOpen.value = false;
|
|
}
|
|
|
|
function isClientValueSelected(value) {
|
|
return selectedClient.value === value;
|
|
}
|
|
|
|
function handleClientSelect(value) {
|
|
selectClient(value);
|
|
closeClientCombobox();
|
|
}
|
|
|
|
function buildQueryParams() {
|
|
const params = {};
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
|
|
for (const [key, value] of searchParams.entries()) {
|
|
params[key] = value;
|
|
}
|
|
|
|
const trimmedSearch = search.value.trim();
|
|
if (trimmedSearch) {
|
|
params.search = trimmedSearch;
|
|
} else {
|
|
delete params.search;
|
|
}
|
|
|
|
if (selectedClient.value) {
|
|
params.client = selectedClient.value;
|
|
} else {
|
|
delete params.client;
|
|
}
|
|
|
|
params.page = 1;
|
|
|
|
return params;
|
|
}
|
|
|
|
function applyFilters() {
|
|
const query = buildQueryParams();
|
|
router.get(
|
|
route("segments.show", { segment: props.segment?.id ?? props.segment }),
|
|
query,
|
|
{ preserveState: true, preserveScroll: true, only: ["contracts"], replace: true }
|
|
);
|
|
filterPopoverOpen.value = false;
|
|
}
|
|
|
|
function clearFilters() {
|
|
search.value = "";
|
|
selectedClient.value = "";
|
|
applyFilters();
|
|
}
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
const d = new Date(value);
|
|
if (isNaN(d)) return value;
|
|
return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(
|
|
2,
|
|
"0"
|
|
)}.${d.getFullYear()}`;
|
|
}
|
|
|
|
function formatCurrency(value) {
|
|
if (value === null || value === undefined) return "-";
|
|
const n = Number(value);
|
|
if (isNaN(n)) return String(value);
|
|
return (
|
|
n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
|
|
" €"
|
|
);
|
|
}
|
|
|
|
function slugify(value) {
|
|
if (!value) {
|
|
return "data";
|
|
}
|
|
const slug = value.replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "");
|
|
return slug || "data";
|
|
}
|
|
|
|
function buildDefaultFilename() {
|
|
const now = new Date();
|
|
const dd = String(now.getDate()).padStart(2, "0");
|
|
const mm = String(now.getMonth() + 1).padStart(2, "0");
|
|
const yy = String(now.getFullYear()).slice(-2);
|
|
let base = `${dd}${mm}${yy}_${slugify(props.segment?.name || "segment")}-Pogodbe`;
|
|
const clientName = selectedClientName.value;
|
|
if (clientName) {
|
|
base += `_${slugify(clientName)}`;
|
|
}
|
|
return `${base}.xlsx`;
|
|
}
|
|
|
|
function extractFilenameFromHeaders(headers) {
|
|
if (!headers) {
|
|
return null;
|
|
}
|
|
const disposition =
|
|
headers["content-disposition"] || headers["Content-Disposition"] || "";
|
|
if (!disposition) {
|
|
return null;
|
|
}
|
|
const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
|
|
if (utf8Match?.[1]) {
|
|
try {
|
|
return decodeURIComponent(utf8Match[1]);
|
|
} catch (error) {
|
|
return utf8Match[1];
|
|
}
|
|
}
|
|
const asciiMatch = disposition.match(/filename="?([^";]+)"?/i);
|
|
return asciiMatch?.[1] || null;
|
|
}
|
|
|
|
function openArchiveModal() {
|
|
console.log(selectedRows.value);
|
|
if (!selectedRows.value?.length) return;
|
|
showConfirmDialog.value = true;
|
|
}
|
|
|
|
function closeConfirmDialog() {
|
|
showConfirmDialog.value = false;
|
|
}
|
|
|
|
function submitArchive() {
|
|
if (!selectedRows.value?.length) return;
|
|
|
|
showConfirmDialog.value = false;
|
|
|
|
archiveForm.contracts = [...selectedRows.value];
|
|
archiveForm.reactivate = false;
|
|
|
|
archiveForm.post(route("contracts.archive-batch"), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
selectedRows.value = [];
|
|
if (contractTable.value) {
|
|
contractTable.value.clearSelection();
|
|
}
|
|
router.reload({ only: ["contracts"] });
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="`Segment: ${segment?.name || ''}`">
|
|
<template #header> </template>
|
|
<div class="py-6">
|
|
<div class="max-w-7xl mx-auto space-y-6 px-4 sm:px-6 lg:px-8">
|
|
<AppCard
|
|
title=""
|
|
padding="none"
|
|
class="p-5! gap-0"
|
|
header-class="py-3! px-4 gap-0 text-muted-foreground"
|
|
body-class=""
|
|
>
|
|
<div>
|
|
<p class="text-sm uppercase text-muted-foreground">Segment</p>
|
|
<h2 class="text-2xl font-semibold text-foreground">{{ segment.name }}</h2>
|
|
</div>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ segment?.description || "Ni opisa za izbran segment." }}
|
|
</p>
|
|
<div class="mt-4 grid gap-4 sm:grid-cols-3">
|
|
<div class="rounded-lg border bg-muted/40 p-4">
|
|
<p class="text-xs uppercase text-muted-foreground">Pogodbe (stran)</p>
|
|
<p class="text-2xl font-semibold">{{ currentPageCount }}</p>
|
|
</div>
|
|
<div class="rounded-lg border bg-muted/40 p-4">
|
|
<p class="text-xs uppercase text-muted-foreground">Skupaj pogodb</p>
|
|
<p class="text-2xl font-semibold">{{ totalContracts }}</p>
|
|
</div>
|
|
<div class="rounded-lg border bg-muted/40 p-4">
|
|
<p class="text-xs uppercase text-muted-foreground">Izbrana stranka</p>
|
|
<p class="text-base font-medium">
|
|
{{ selectedClientName || "Vse" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
|
|
<AppCard
|
|
title=""
|
|
padding="none"
|
|
class="p-0! gap-0"
|
|
header-class="py-3! px-4 gap-0 text-muted-foreground"
|
|
body-class=""
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UsersIcon size="18" />
|
|
<CardTitle class="uppercase">Pogodbe</CardTitle>
|
|
</div>
|
|
</template>
|
|
<DataTable
|
|
ref="contractTable"
|
|
:columns="columns"
|
|
:data="contracts?.data || []"
|
|
:meta="contracts || {}"
|
|
route-name="segments.show"
|
|
:enable-row-selection="canManageSettings"
|
|
@selection:change="handleSelectionChange"
|
|
:route-params="{ segment: segment?.id ?? segment }"
|
|
:only-props="['contracts']"
|
|
:page-size="contracts?.per_page ?? 15"
|
|
:page-size-options="[10, 15, 25, 50]"
|
|
row-key="uuid"
|
|
empty-text="Ni pogodb v tem segmentu."
|
|
per-page-param-name="per_page"
|
|
>
|
|
<template #toolbar-filters>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<Popover v-model:open="filterPopoverOpen">
|
|
<PopoverTrigger as-child>
|
|
<Button variant="outline" size="sm" class="gap-2">
|
|
<Filter class="h-4 w-4" />
|
|
Filtri
|
|
<span
|
|
v-if="hasActiveFilters"
|
|
class="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground"
|
|
>
|
|
{{ appliedFilterCount }}
|
|
</span>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-105" align="start">
|
|
<div class="space-y-4">
|
|
<div class="space-y-1">
|
|
<h4 class="text-sm font-medium">Filtri pogodb</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
Zoži prikaz pogodb po iskalnem nizu in stranki.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="space-y-1.5">
|
|
<label class="text-sm font-medium">Iskanje</label>
|
|
<Input
|
|
v-model="search"
|
|
type="text"
|
|
placeholder="Išči po referenci, vrsti ..."
|
|
/>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-sm font-medium">Stranka</label>
|
|
<Popover v-model:open="clientComboboxOpen">
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
:aria-expanded="clientComboboxOpen"
|
|
class="w-full justify-between"
|
|
>
|
|
{{ selectedClientName || "Vse stranke" }}
|
|
<ChevronsUpDown
|
|
class="ml-2 h-4 w-4 shrink-0 opacity-50"
|
|
/>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-full p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="Išči stranko..." />
|
|
<CommandList>
|
|
<CommandEmpty>Ni zadetkov.</CommandEmpty>
|
|
<CommandGroup>
|
|
<CommandItem
|
|
value="vse"
|
|
@select="handleClientSelect('')"
|
|
>
|
|
<Check
|
|
:class="
|
|
cn(
|
|
'mr-2 h-4 w-4',
|
|
isClientFilterEmpty
|
|
? 'opacity-100'
|
|
: 'opacity-0'
|
|
)
|
|
"
|
|
/>
|
|
Vse stranke
|
|
</CommandItem>
|
|
<CommandItem
|
|
v-for="client in clientOptions"
|
|
:key="client.value || client.label"
|
|
:value="client.label"
|
|
@select="handleClientSelect(client.value)"
|
|
>
|
|
<Check
|
|
:class="
|
|
cn(
|
|
'mr-2 h-4 w-4',
|
|
isClientValueSelected(client.value)
|
|
? 'opacity-100'
|
|
: 'opacity-0'
|
|
)
|
|
"
|
|
/>
|
|
{{ client.label }}
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t pt-2">
|
|
<Button
|
|
v-if="hasActiveFilters"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="gap-2"
|
|
@click="clearFilters"
|
|
>
|
|
Počisti
|
|
</Button>
|
|
<div v-else></div>
|
|
<Button size="sm" class="gap-2" @click="applyFilters">
|
|
Uporabi
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
class="gap-2"
|
|
@click="openExportDialog"
|
|
>
|
|
<FileDown class="h-4 w-4" />
|
|
Izvozi v Excel
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
<template #toolbar-actions="{ table }">
|
|
<Button
|
|
v-if="canManageSettings && table?.getSelectedRowModel()?.rows?.length > 0"
|
|
variant="destructive"
|
|
size="sm"
|
|
class="gap-2"
|
|
@click="openArchiveModal"
|
|
>
|
|
Arhiviraj ({{ table.getSelectedRowModel().rows.length }})
|
|
</Button>
|
|
</template>
|
|
|
|
<template #cell-client_case="{ row }">
|
|
<Link
|
|
v-if="row.client_case?.uuid"
|
|
:href="
|
|
route('clientCase.show', {
|
|
client_case: row.client_case.uuid,
|
|
segment: segment?.id ?? segment,
|
|
})
|
|
"
|
|
class="text-indigo-600 hover:underline"
|
|
>
|
|
{{ row.client_case?.person?.full_name || "Primer stranke" }}
|
|
</Link>
|
|
<span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
|
|
</template>
|
|
<template #cell-address="{ row }">
|
|
{{ row.client_case?.person?.address?.address }}
|
|
</template>
|
|
<template #cell-client="{ row }">
|
|
{{ row.client?.person?.full_name || "-" }}
|
|
</template>
|
|
<template #cell-type="{ row }">
|
|
{{ row.type?.name || "-" }}
|
|
</template>
|
|
<template #cell-start_date="{ row }">
|
|
{{ formatDate(row.start_date) }}
|
|
</template>
|
|
<template #cell-end_date="{ row }">
|
|
{{ formatDate(row.end_date) }}
|
|
</template>
|
|
<template #cell-account="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrency(row.account?.balance_amount) }}
|
|
</div>
|
|
</template>
|
|
</DataTable>
|
|
</AppCard>
|
|
</div>
|
|
</div>
|
|
|
|
<ConfirmDialog
|
|
:show="showConfirmDialog"
|
|
title="Arhiviraj pogodbe"
|
|
:message="`Ali ste prepričani, da želite arhivirati ${
|
|
selectedRows?.length || 0
|
|
} pogodb${
|
|
selectedRows?.length === 1 ? 'o' : ''
|
|
}? Arhivirane pogodbe bodo odstranjene iz aktivnih segmentov.`"
|
|
confirm-text="Arhiviraj"
|
|
cancel-text="Prekliči"
|
|
:danger="true"
|
|
@close="closeConfirmDialog"
|
|
@confirm="submitArchive"
|
|
/>
|
|
|
|
<DialogModal :show="exportDialogOpen" max-width="3xl" @close="closeExportDialog">
|
|
<template #title>
|
|
<div class="space-y-1">
|
|
<h3 class="text-lg font-semibold leading-6 text-foreground">Izvoz v Excel</h3>
|
|
<p class="text-sm text-muted-foreground">
|
|
Izberi stolpce in obseg podatkov za izvoz.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<form id="segment-export-form" class="space-y-5" @submit.prevent="submitExport">
|
|
<div class="space-y-3 rounded-lg border bg-muted/40 p-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<p class="text-sm font-medium text-foreground">Obseg podatkov</p>
|
|
<p class="text-sm text-muted-foreground">
|
|
Preklopi, ali izvoziš samo trenutni pogled ali celoten segment.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-3 rounded-md bg-background px-3 py-2 shadow-sm"
|
|
>
|
|
<span class="text-xs font-medium text-muted-foreground">Stran</span>
|
|
<Switch
|
|
:model-value="exportScope === 'all'"
|
|
@update:modelValue="setExportScopeFromSwitch"
|
|
aria-label="Preklopi obseg izvoza"
|
|
/>
|
|
<span class="text-xs font-medium text-muted-foreground">Vse</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<div class="rounded-lg border bg-background p-3 shadow-sm">
|
|
<p class="text-sm font-semibold text-foreground">Trenutna stran</p>
|
|
<p class="text-xs text-muted-foreground">
|
|
{{ currentPageCount }} zapisov
|
|
</p>
|
|
</div>
|
|
<div class="rounded-lg border bg-background p-3 shadow-sm">
|
|
<p class="text-sm font-semibold text-foreground">Celoten segment</p>
|
|
<p class="text-xs text-muted-foreground">{{ totalContracts }} zapisov</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4 rounded-lg border bg-muted/40 p-4">
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<p class="text-sm font-medium text-foreground">Stolpci</p>
|
|
<p class="text-sm text-muted-foreground">
|
|
Izberi, katere stolpce želiš vključiti v izvoz.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
id="export-columns-all"
|
|
:model-value="allColumnsSelected"
|
|
@update:modelValue="toggleAllColumns"
|
|
aria-label="Označi vse stolpce"
|
|
/>
|
|
<Label for="export-columns-all" class="text-sm text-muted-foreground">
|
|
Označi vse
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<label
|
|
v-for="col in columns"
|
|
:key="col.key"
|
|
class="flex items-start gap-3 rounded-lg border bg-background px-3 py-3 text-sm shadow-sm transition hover:border-primary/40"
|
|
:for="`export-col-${col.key}`"
|
|
>
|
|
<Checkbox
|
|
:id="`export-col-${col.key}`"
|
|
:model-value="exportColumns.includes(col.key)"
|
|
:value="col.key"
|
|
@update:modelValue="(checked) => handleColumnToggle(col.key, checked)"
|
|
class="mt-0.5"
|
|
/>
|
|
<div class="space-y-0.5">
|
|
<p class="font-medium text-foreground">{{ col.label }}</p>
|
|
<p class="text-xs text-muted-foreground">Vključi stolpec v datoteko.</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<p v-if="exportError" class="text-sm text-destructive">{{ exportError }}</p>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<template #footer>
|
|
<div class="flex flex-row gap-2">
|
|
<Button type="button" variant="ghost" @click="closeExportDialog">
|
|
Prekliči
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
form="segment-export-form"
|
|
:disabled="exportDisabled"
|
|
class="gap-2"
|
|
>
|
|
<span v-if="!isExporting">Prenesi Excel</span>
|
|
<span v-else>Pripravljam ...</span>
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
</DialogModal>
|
|
</AppLayout>
|
|
</template>
|