801 lines
27 KiB
Vue
801 lines
27 KiB
Vue
<script setup>
|
|
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
|
import { Link, router, useForm } from "@inertiajs/vue3";
|
|
import { ref, computed, nextTick } from "vue";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Label } from "@/Components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import { Textarea } from "@/Components/ui/textarea";
|
|
import { Checkbox } from "@/Components/ui/checkbox";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import { Separator } from "@/Components/ui/separator";
|
|
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
|
|
import {
|
|
PackageIcon,
|
|
PhoneIcon,
|
|
UsersIcon,
|
|
SearchIcon,
|
|
SaveIcon,
|
|
ArrowLeftIcon,
|
|
FilterIcon,
|
|
CalendarIcon,
|
|
CheckCircle2Icon,
|
|
XCircleIcon,
|
|
BadgeCheckIcon,
|
|
} from "lucide-vue-next";
|
|
import { fmtDateDMY } from "@/Utilities/functions";
|
|
|
|
const props = defineProps({
|
|
profiles: { type: Array, default: () => [] },
|
|
senders: { type: Array, default: () => [] },
|
|
templates: { type: Array, default: () => [] },
|
|
segments: { type: Array, default: () => [] },
|
|
clients: { type: Array, default: () => [] },
|
|
});
|
|
|
|
const creatingFromContracts = ref(false);
|
|
|
|
const createMode = ref("numbers"); // 'numbers' | 'contracts'
|
|
const form = useForm({
|
|
type: "sms",
|
|
name: "",
|
|
description: "",
|
|
profile_id: null,
|
|
sender_id: null,
|
|
template_id: null,
|
|
delivery_report: false,
|
|
body: "",
|
|
numbers: "", // one per line
|
|
});
|
|
|
|
const filteredSenders = computed(() => {
|
|
if (!form.profile_id) return props.senders;
|
|
return props.senders.filter((s) => s.profile_id === form.profile_id);
|
|
});
|
|
|
|
function onTemplateChange() {
|
|
const template = props.templates.find((t) => t.id === form.template_id);
|
|
if (template?.content) {
|
|
form.body = template.content;
|
|
} else {
|
|
form.body = "";
|
|
}
|
|
}
|
|
|
|
function submitCreate() {
|
|
const lines = (form.numbers || "")
|
|
.split(/\r?\n/)
|
|
.map((s) => s.trim())
|
|
.filter(Boolean);
|
|
if (!lines.length) return;
|
|
if (!form.profile_id && !form.template_id) {
|
|
alert("Izberi SMS profil ali predlogo.");
|
|
return;
|
|
}
|
|
if (!form.template_id && !form.body) {
|
|
alert("Vnesi vsebino sporočila ali izberi predlogo.");
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
type: "sms",
|
|
name: form.name || `SMS paket ${new Date().toLocaleString()}`,
|
|
description: form.description || "",
|
|
items: lines.map((number) => ({
|
|
number,
|
|
payload: {
|
|
profile_id: form.profile_id,
|
|
sender_id: form.sender_id,
|
|
template_id: form.template_id,
|
|
delivery_report: !!form.delivery_report,
|
|
body: form.body && form.body.trim() ? form.body.trim() : null,
|
|
},
|
|
})),
|
|
};
|
|
|
|
router.post(route("admin.packages.store"), payload, {
|
|
onSuccess: () => {
|
|
router.visit(route("admin.packages.index"));
|
|
},
|
|
});
|
|
}
|
|
|
|
// Contracts mode state & actions
|
|
const contracts = ref({
|
|
data: [],
|
|
meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
|
});
|
|
const segmentId = ref(null);
|
|
const search = ref("");
|
|
const clientId = ref(null);
|
|
const startDateFrom = ref("");
|
|
const startDateTo = ref("");
|
|
const promiseDateFrom = ref("");
|
|
const promiseDateTo = ref("");
|
|
const onlyMobile = ref(false);
|
|
const onlyValidated = ref(false);
|
|
const loadingContracts = ref(false);
|
|
const selectedContractIds = ref(new Set());
|
|
const perPage = ref(25);
|
|
|
|
// DataTable columns definition
|
|
const contractColumns = [
|
|
{ accessorKey: "reference", header: "Pogodba" },
|
|
{
|
|
id: "person",
|
|
accessorFn: (row) => row.person?.full_name || "—",
|
|
header: "Primer",
|
|
},
|
|
{
|
|
id: "client",
|
|
accessorFn: (row) => row.client?.name || "—",
|
|
header: "Stranka",
|
|
},
|
|
{ accessorKey: "start_date", header: "Datum začetka" },
|
|
{ accessorKey: "promise_date", header: "Zadnja obljuba" },
|
|
{
|
|
id: "selected_phone",
|
|
accessorFn: (row) => row.selected_phone?.number || "—",
|
|
header: "Izbrana številka",
|
|
},
|
|
{ accessorKey: "no_phone_reason", header: "Opomba" },
|
|
];
|
|
|
|
function onSelectionChange(selectedKeys) {
|
|
// selectedKeys are indices from the table
|
|
const newSelection = new Set();
|
|
selectedKeys.forEach((key) => {
|
|
const index = parseInt(key);
|
|
if (contracts.value.data[index]) {
|
|
newSelection.add(contracts.value.data[index].id);
|
|
}
|
|
});
|
|
selectedContractIds.value = newSelection;
|
|
}
|
|
|
|
async function loadContracts(url = null) {
|
|
loadingContracts.value = true;
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (segmentId.value) params.append("segment_id", segmentId.value);
|
|
if (search.value) params.append("q", search.value);
|
|
if (clientId.value) params.append("client_id", clientId.value);
|
|
if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
|
|
if (startDateTo.value) params.append("start_date_to", startDateTo.value);
|
|
if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
|
|
if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
|
|
if (onlyMobile.value) params.append("only_mobile", "1");
|
|
if (onlyValidated.value) params.append("only_validated", "1");
|
|
params.append("per_page", perPage.value);
|
|
|
|
const target = url || `${route("admin.packages.contracts")}?${params.toString()}`;
|
|
const res = await fetch(target, {
|
|
headers: { "X-Requested-With": "XMLHttpRequest" },
|
|
});
|
|
const json = await res.json();
|
|
|
|
// Wait for next tick before updating to avoid Vue reconciliation issues
|
|
await nextTick();
|
|
|
|
contracts.value = {
|
|
data: json.data || [],
|
|
meta: json.meta || { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
|
};
|
|
} finally {
|
|
loadingContracts.value = false;
|
|
}
|
|
}
|
|
|
|
function toggleSelectContract(id) {
|
|
const s = selectedContractIds.value;
|
|
if (s.has(id)) {
|
|
s.delete(id);
|
|
} else {
|
|
s.add(id);
|
|
}
|
|
selectedContractIds.value = new Set(Array.from(s));
|
|
}
|
|
|
|
// Get row selection state for DataTable
|
|
const rowSelection = computed(() => {
|
|
const selection = {};
|
|
contracts.value.data.forEach((contract, index) => {
|
|
if (selectedContractIds.value.has(contract.id)) {
|
|
selection[index.toString()] = true;
|
|
}
|
|
});
|
|
return selection;
|
|
});
|
|
|
|
// Computed key to force DataTable re-render on page change
|
|
const tableKey = computed(() => {
|
|
return `contracts-${contracts.value.meta.current_page}-${contracts.value.data.length}`;
|
|
});
|
|
|
|
function clearSelection() {
|
|
selectedContractIds.value = new Set();
|
|
}
|
|
|
|
function goToPage(page) {
|
|
if (page < 1 || page > contracts.value.meta.last_page) return;
|
|
|
|
const params = new URLSearchParams();
|
|
if (segmentId.value) params.append("segment_id", segmentId.value);
|
|
if (search.value) params.append("q", search.value);
|
|
if (clientId.value) params.append("client_id", clientId.value);
|
|
if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
|
|
if (startDateTo.value) params.append("start_date_to", startDateTo.value);
|
|
if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
|
|
if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
|
|
if (onlyMobile.value) params.append("only_mobile", "1");
|
|
if (onlyValidated.value) params.append("only_validated", "1");
|
|
params.append("per_page", perPage.value);
|
|
params.append("page", page);
|
|
|
|
const url = `${route("admin.packages.contracts")}?${params.toString()}`;
|
|
loadContracts(url);
|
|
}
|
|
|
|
function resetFilters() {
|
|
segmentId.value = null;
|
|
clientId.value = null;
|
|
search.value = "";
|
|
startDateFrom.value = "";
|
|
startDateTo.value = "";
|
|
promiseDateFrom.value = "";
|
|
promiseDateTo.value = "";
|
|
onlyMobile.value = false;
|
|
onlyValidated.value = false;
|
|
contracts.value = {
|
|
data: [],
|
|
meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
|
|
};
|
|
}
|
|
|
|
function submitCreateFromContracts() {
|
|
const ids = Array.from(selectedContractIds.value);
|
|
if (!ids.length) return;
|
|
|
|
const visibleById = new Map((contracts.value.data || []).map((c) => [c.id, c]));
|
|
const selectedVisible = ids.map((id) => visibleById.get(id)).filter(Boolean);
|
|
if (selectedVisible.length && selectedVisible.every((c) => !c?.selected_phone)) {
|
|
alert("Za izbrane pogodbe ni mogoče najti prejemnikov (telefonov).");
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
type: "sms",
|
|
name: form.name || `SMS paket (segment) ${new Date().toLocaleString()}`,
|
|
description: form.description || "",
|
|
payload: {
|
|
profile_id: form.profile_id,
|
|
sender_id: form.sender_id,
|
|
template_id: form.template_id,
|
|
delivery_report: !!form.delivery_report,
|
|
body: form.body && form.body.trim() ? form.body.trim() : null,
|
|
},
|
|
contract_ids: ids,
|
|
};
|
|
|
|
creatingFromContracts.value = true;
|
|
router.post(route("admin.packages.store-from-contracts"), payload, {
|
|
onSuccess: () => {
|
|
router.visit(route("admin.packages.index"));
|
|
},
|
|
onError: (errors) => {
|
|
const first = errors && Object.values(errors)[0];
|
|
if (first) {
|
|
alert(String(first));
|
|
}
|
|
},
|
|
onFinish: () => {
|
|
creatingFromContracts.value = false;
|
|
},
|
|
});
|
|
}
|
|
|
|
const numbersCount = computed(() => {
|
|
return (form.numbers || "")
|
|
.split(/\r?\n/)
|
|
.map((s) => s.trim())
|
|
.filter(Boolean).length;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Ustvari SMS paket">
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<Link :href="route('admin.packages.index')">
|
|
<Button variant="ghost" size="sm">
|
|
<ArrowLeftIcon class="h-4 w-4 mr-2" />
|
|
Nazaj
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<PackageIcon class="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-tight">Ustvari SMS paket</h1>
|
|
<p class="text-sm text-muted-foreground">Pošlji SMS sporočila v paketu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<Tabs v-model="createMode" class="w-full">
|
|
<TabsList class="flex flex-row justify-baseline py-4">
|
|
<TabsTrigger value="numbers" class="p-3">
|
|
<span class="flex gap-2 items-center align-middle justify-center">
|
|
<PhoneIcon class="h-5 w-5" />Vnos številk
|
|
</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="contracts" class="p-3">
|
|
<span class="flex gap-2 items-center align-middle justify-center">
|
|
<UsersIcon class="h-5 w-5" />Iz pogodb (segment)
|
|
</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<!-- Package Details Card -->
|
|
<Card class="mb-6">
|
|
<CardHeader>
|
|
<CardTitle>Podatki o paketu</CardTitle>
|
|
<CardDescription>Osnovne informacije in SMS nastavitve</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<!-- Basic Info -->
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<Label for="name">Ime paketa</Label>
|
|
<Input
|
|
id="name"
|
|
v-model="form.name"
|
|
placeholder="Npr. SMS kampanja december 2024"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="description">Opis</Label>
|
|
<Input
|
|
id="description"
|
|
v-model="form.description"
|
|
placeholder="Neobvezen opis paketa"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<!-- SMS Configuration -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold mb-4">SMS nastavitve</h3>
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="space-y-2">
|
|
<Label>SMS profil</Label>
|
|
<Select v-model="form.profile_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi profil" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">—</SelectItem>
|
|
<SelectItem v-for="p in profiles" :key="p.id" :value="p.id">
|
|
{{ p.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Pošiljatelj</Label>
|
|
<Select v-model="form.sender_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi pošiljatelja" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">—</SelectItem>
|
|
<SelectItem v-for="s in filteredSenders" :key="s.id" :value="s.id">
|
|
{{ s.sname }}
|
|
<span v-if="s.phone_number" class="text-muted-foreground">
|
|
({{ s.phone_number }})
|
|
</span>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Predloga</Label>
|
|
<Select v-model="form.template_id" @update:model-value="onTemplateChange">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi predlogo" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">—</SelectItem>
|
|
<SelectItem v-for="t in templates" :key="t.id" :value="t.id">
|
|
{{ t.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="body">Vsebina sporočila</Label>
|
|
<Textarea
|
|
id="body"
|
|
v-model="form.body"
|
|
rows="4"
|
|
placeholder="Vsebina SMS sporočila..."
|
|
class="font-mono text-sm"
|
|
/>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
:checked="form.delivery_report"
|
|
@update:checked="(val) => (form.delivery_report = val)"
|
|
id="delivery-report"
|
|
/>
|
|
<Label for="delivery-report" class="cursor-pointer text-sm">
|
|
Zahtevaj delivery report
|
|
</Label>
|
|
</div>
|
|
<p class="text-xs text-muted-foreground">
|
|
{{ form.body?.length || 0 }} znakov
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Numbers Mode -->
|
|
<TabsContent value="numbers">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Telefonske številke</CardTitle>
|
|
<CardDescription
|
|
>Vnesi telefonske številke prejemnikov (ena na vrstico)</CardDescription
|
|
>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="space-y-2">
|
|
<Textarea
|
|
v-model="form.numbers"
|
|
rows="10"
|
|
placeholder="+38640123456 +38640123457 +38641234567"
|
|
class="font-mono text-sm"
|
|
/>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-muted-foreground">
|
|
<strong>{{ numbersCount }}</strong>
|
|
{{
|
|
numbersCount === 1
|
|
? "številka"
|
|
: numbersCount < 5
|
|
? "številke"
|
|
: "številk"
|
|
}}
|
|
</p>
|
|
<Badge v-if="numbersCount > 0" variant="secondary">
|
|
<CheckCircle2Icon class="h-3 w-3 mr-1" />
|
|
Pripravljeno
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end gap-2">
|
|
<Button
|
|
@click="router.visit(route('admin.packages.index'))"
|
|
variant="outline"
|
|
>
|
|
Prekliči
|
|
</Button>
|
|
<Button
|
|
@click="submitCreate"
|
|
:disabled="numbersCount === 0 || (!form.profile_id && !form.template_id)"
|
|
>
|
|
<SaveIcon class="h-4 w-4 mr-2" />
|
|
Ustvari paket
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<!-- Contracts Mode -->
|
|
<TabsContent value="contracts">
|
|
<Card class="mb-6">
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Filtri za pogodbe</CardTitle>
|
|
<CardDescription
|
|
>Najdi prejemnike glede na pogodbe in segmente</CardDescription
|
|
>
|
|
</div>
|
|
<Badge variant="outline" class="text-xs">
|
|
<FilterIcon class="h-3 w-3 mr-1" />
|
|
Napredno iskanje
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<!-- Basic filters -->
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="space-y-2">
|
|
<Label>Segment</Label>
|
|
<Select v-model="segmentId" @update:model-value="loadContracts()">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Vsi segmenti" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">Vsi segmenti</SelectItem>
|
|
<SelectItem v-for="s in segments" :key="s.id" :value="s.id">
|
|
{{ s.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Stranka</Label>
|
|
<Select v-model="clientId" @update:model-value="loadContracts()">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Vse stranke" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">Vse stranke</SelectItem>
|
|
<SelectItem v-for="c in clients" :key="c.id" :value="c.id">
|
|
{{ c.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label>Iskanje po referenci</Label>
|
|
<Input
|
|
v-model="search"
|
|
@keyup.enter="loadContracts()"
|
|
placeholder="Vnesi referenco..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<!-- Date filters -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
|
|
<CalendarIcon class="h-4 w-4" />
|
|
Datumski filtri
|
|
</h4>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="space-y-2">
|
|
<Label class="text-xs">Od</Label>
|
|
<Input v-model="startDateFrom" type="date" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label class="text-xs">Do</Label>
|
|
<Input v-model="startDateTo" type="date" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-muted-foreground">Datum obljube plačila</p>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="space-y-2">
|
|
<Label class="text-xs">Od</Label>
|
|
<Input v-model="promiseDateFrom" type="date" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label class="text-xs">Do</Label>
|
|
<Input v-model="promiseDateTo" type="date" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<!-- Phone filters -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold mb-3">Telefonski filtri</h4>
|
|
<div class="flex flex-wrap gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
:checked="onlyMobile"
|
|
@update:checked="
|
|
(val) => {
|
|
onlyMobile = val;
|
|
}
|
|
"
|
|
id="only-mobile"
|
|
/>
|
|
<Label for="only-mobile" class="cursor-pointer text-sm">
|
|
Samo mobilne številke
|
|
</Label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox
|
|
:checked="onlyValidated"
|
|
@update:checked="
|
|
(val) => {
|
|
onlyValidated = val;
|
|
}
|
|
"
|
|
id="only-validated"
|
|
/>
|
|
<Label for="only-validated" class="cursor-pointer text-sm">
|
|
Samo potrjene številke
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex items-center gap-2">
|
|
<Button @click="loadContracts()">
|
|
<SearchIcon class="h-4 w-4 mr-2" />
|
|
Išči pogodbe
|
|
</Button>
|
|
<Button @click="resetFilters" variant="outline">
|
|
<XCircleIcon class="h-4 w-4 mr-2" />
|
|
Počisti filtre
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Results -->
|
|
<Card v-if="contracts.data.length > 0 || loadingContracts">
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Rezultati iskanja</CardTitle>
|
|
<CardDescription v-if="contracts.meta.total > 0">
|
|
Najdeno {{ contracts.meta.total }}
|
|
{{
|
|
contracts.meta.total === 1
|
|
? "pogodba"
|
|
: contracts.meta.total < 5
|
|
? "pogodbe"
|
|
: "pogodb"
|
|
}}
|
|
</CardDescription>
|
|
</div>
|
|
|
|
<!-- Create Button -->
|
|
<div class="flex justify-end gap-2" v-if="selectedContractIds.size > 0">
|
|
<Badge
|
|
v-if="selectedContractIds.size > 0"
|
|
variant="secondary"
|
|
class="text-sm"
|
|
>
|
|
<CheckCircle2Icon class="h-3 w-3 mr-1" />
|
|
Izbrano: {{ selectedContractIds.size }}
|
|
</Badge>
|
|
<Button
|
|
@click="router.visit(route('admin.packages.index'))"
|
|
variant="outline"
|
|
>
|
|
Prekliči
|
|
</Button>
|
|
<Button
|
|
@click="submitCreateFromContracts"
|
|
:disabled="selectedContractIds.size === 0 || creatingFromContracts"
|
|
>
|
|
<SaveIcon class="h-4 w-4 mr-2" />
|
|
Ustvari paket ({{ selectedContractIds.size }}
|
|
{{
|
|
selectedContractIds.size === 1
|
|
? "pogodba"
|
|
: selectedContractIds.size < 5
|
|
? "pogodbe"
|
|
: "pogodb"
|
|
}})
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="p-0">
|
|
<DataTableNew2
|
|
v-if="!loadingContracts"
|
|
:key="tableKey"
|
|
:columns="contractColumns"
|
|
:data="contracts.data"
|
|
:enableRowSelection="true"
|
|
:rowSelection="rowSelection"
|
|
:showPagination="true"
|
|
:page-size="50"
|
|
:page-size-options="[10, 15, 25, 50, 100]"
|
|
:showToolbar="false"
|
|
@selection:change="onSelectionChange"
|
|
>
|
|
<template #cell-reference="{ row }">
|
|
<div v-if="row.original" class="space-y-1">
|
|
<p class="font-medium">{{ row.original.reference || "—" }}</p>
|
|
<p class="text-xs text-muted-foreground font-mono">
|
|
#{{ row.original.id }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template #cell-person="{ row }">
|
|
<span v-if="row.original" class="text-xs">{{
|
|
row.original.person?.full_name || "—"
|
|
}}</span>
|
|
</template>
|
|
|
|
<template #cell-client="{ row }">
|
|
<span v-if="row.original" class="text-xs">{{
|
|
row.original.client?.name || "—"
|
|
}}</span>
|
|
</template>
|
|
|
|
<template #cell-start_date="{ row }">
|
|
{{ fmtDateDMY(row.start_date) || "—" }}
|
|
</template>
|
|
|
|
<template #cell-promise_date="{ row }">
|
|
{{ fmtDateDMY(row.promise_date) || "—" }}
|
|
</template>
|
|
|
|
<template #cell-selected_phone="{ row }">
|
|
<div v-if="row.selected_phone" class="space-y-1">
|
|
<div class="flex flex-col items-center gap-1">
|
|
<span>{{ row.selected_phone.number }}</span>
|
|
<span
|
|
><Badge
|
|
v-if="row.selected_phone.validated"
|
|
variant="secondary"
|
|
class="text-xs"
|
|
>
|
|
<BadgeCheckIcon />
|
|
Potrjena
|
|
</Badge>
|
|
<Badge
|
|
v-else
|
|
variant="destructive"
|
|
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums text-accent"
|
|
>
|
|
Nepotrjena
|
|
</Badge></span
|
|
>
|
|
</div>
|
|
</div>
|
|
<span v-else class="text-xs text-destructive">Ni telefonske št.</span>
|
|
</template>
|
|
|
|
<template #cell-no_phone_reason="{ row }">
|
|
<span v-if="row.original" class="text-xs text-muted-foreground">{{
|
|
row.original.no_phone_reason || "—"
|
|
}}</span>
|
|
</template>
|
|
</DataTableNew2>
|
|
|
|
<div v-else class="text-center text-muted-foreground py-24">Nalaganje...</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</AdminLayout>
|
|
</template>
|