sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated client contract table and notification table, multiselect

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-11-18 21:46:22 +01:00
parent 8125b4d321
commit edbdb64102
14 changed files with 672 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Admin/Users/Index.vue
+25 -2
View File
@@ -1,6 +1,6 @@
<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { useForm, Link } from "@inertiajs/vue3";
import { useForm, Link, router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faMagnifyingGlass, faFloppyDisk, faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -103,6 +103,12 @@ function toggleCreateRole(roleId) {
? createForm.roles.filter((id) => id !== roleId)
: [...createForm.roles, roleId];
}
function toggleUserActive(userId) {
router.patch(route("admin.users.toggle-active", { user: userId }), {}, {
preserveScroll: true,
});
}
</script>
<template>
@@ -197,6 +203,9 @@ function toggleCreateRole(roleId) {
<th class="p-2 text-left font-medium text-[11px] uppercase tracking-wide">
Uporabnik
</th>
<th class="p-2 text-center font-medium text-[11px] uppercase tracking-wide">
Status
</th>
<th
v-for="role in props.roles"
:key="role.id"
@@ -218,6 +227,7 @@ function toggleCreateRole(roleId) {
:class="[
'border-t border-slate-100',
idx % 2 === 1 ? 'bg-slate-50/40' : 'bg-white',
!user.active && 'opacity-60',
]"
>
<td class="p-2 whitespace-nowrap align-top">
@@ -237,6 +247,19 @@ function toggleCreateRole(roleId) {
{{ user.email }}
</div>
</td>
<td class="p-2 text-center align-top">
<button
@click="toggleUserActive(user.id)"
class="inline-flex items-center px-2 py-1 rounded text-xs font-medium transition"
:class="
user.active
? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
"
>
{{ user.active ? 'Aktiven' : 'Neaktiven' }}
</button>
</td>
<td
v-for="role in props.roles"
:key="role.id"
@@ -269,7 +292,7 @@ function toggleCreateRole(roleId) {
</tr>
<tr v-if="!filteredUsers.length">
<td
:colspan="props.roles.length + 2"
:colspan="props.roles.length + 3"
class="p-6 text-center text-sm text-gray-500"
>
Ni rezultatov
resources/js/Pages/Client/Contracts.vue
+271 -52
View File
@@ -1,10 +1,14 @@
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import { Link, router } from "@inertiajs/vue3";
import { Link, router, useForm } from "@inertiajs/vue3";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import Multiselect from "vue-multiselect";
import Dropdown from "@/Components/Dropdown.vue";
import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from "@/Components/InputLabel.vue";
const props = defineProps({
client: Object,
@@ -17,7 +21,70 @@ const props = defineProps({
const fromDate = ref(props.filters?.from || "");
const toDate = ref(props.filters?.to || "");
const search = ref(props.filters?.search || "");
const selectedSegment = ref(props.filters?.segment || "");
const selectedSegments = ref(
props.filters?.segments
? props.segments.filter((s) => props.filters.segments.includes(s.id.toString()))
: []
);
const selectedRows = ref([]);
const showSegmentModal = ref(false);
const targetSegmentId = ref(null);
const segmentForm = useForm({ segment_id: null, contracts: [] });
function toggleSelectAll() {
if (selectedRows.value.length === props.contracts.data.length) {
selectedRows.value = [];
} else {
selectedRows.value = props.contracts.data.map((row) => row.uuid);
}
}
function toggleRowSelection(uuid) {
const index = selectedRows.value.indexOf(uuid);
if (index > -1) {
selectedRows.value.splice(index, 1);
} else {
selectedRows.value.push(uuid);
}
}
function isRowSelected(uuid) {
return selectedRows.value.includes(uuid);
}
function isAllSelected() {
return (
props.contracts.data.length > 0 &&
selectedRows.value.length === props.contracts.data.length
);
}
function isIndeterminate() {
return (
selectedRows.value.length > 0 &&
selectedRows.value.length < props.contracts.data.length
);
}
function openSegmentModal() {
if (!selectedRows.value.length) return;
targetSegmentId.value = null;
showSegmentModal.value = true;
}
function submitSegment() {
if (!targetSegmentId.value || !selectedRows.value.length) return;
segmentForm.segment_id = targetSegmentId.value;
segmentForm.contracts = [...selectedRows.value];
segmentForm.patch(route("contracts.segment"), {
preserveScroll: true,
onSuccess: () => {
showSegmentModal.value = false;
selectedRows.value = [];
router.reload({ only: ["contracts"] });
},
});
}
function applyDateFilter() {
const params = Object.fromEntries(
new URLSearchParams(window.location.search).entries()
@@ -37,10 +104,10 @@ function applyDateFilter() {
} else {
delete params.search;
}
if (selectedSegment.value) {
params.segment = selectedSegment.value;
if (selectedSegments.value && selectedSegments.value.length > 0) {
params.segments = selectedSegments.value.map((s) => s.id).join(",");
} else {
delete params.segment;
delete params.segments;
}
delete params.page;
router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
@@ -53,7 +120,7 @@ function applyDateFilter() {
function clearDateFilter() {
fromDate.value = "";
toDate.value = "";
selectedSegment.value = "";
selectedSegments.value = [];
applyDateFilter();
}
@@ -110,7 +177,7 @@ function formatDate(value) {
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
route().current('client.show')
? 'text-indigo-600 border-indigo-600'
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
]"
>
Primeri
@@ -123,7 +190,7 @@ function formatDate(value) {
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
route().current('client.contracts')
? 'text-indigo-600 border-indigo-600'
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
]"
>
Pogodbe
@@ -154,57 +221,82 @@ function formatDate(value) {
<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 flex-col gap-3 md:flex-row md:items-center md:justify-between"
>
<div class="flex items-center gap-3 flex-wrap">
<label class="font-medium mr-2">Filtri:</label>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600">Od</span>
<input
type="date"
v-model="fromDate"
@change="applyDateFilter"
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
/>
<!-- Filters Section -->
<div class="bg-gray-50 rounded-lg border border-gray-200 p-3 mb-4">
<div class="flex flex-wrap items-center gap-x-6 gap-y-3">
<!-- Date Range -->
<div class="flex flex-col gap-3">
<InputLabel value="Datum začetka" />
<div class="flex items-center gap-2">
<span class="text-xs text-gray-500">Od</span>
<input
type="date"
v-model="fromDate"
@change="applyDateFilter"
class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
/>
<span class="text-xs text-gray-500">Do</span>
<input
type="date"
v-model="toDate"
@change="applyDateFilter"
class="rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm py-1.5"
/>
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600">Do</span>
<input
type="date"
v-model="toDate"
@change="applyDateFilter"
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
/>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600">Segment</span>
<select
v-model="selectedSegment"
@change="applyDateFilter"
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
<!-- Segments -->
<div class="flex flex-col gap-3">
<InputLabel for="segmentSelect" value="Segmenti" />
<Multiselect
v-model="selectedSegments"
:options="segments"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:taggable="true"
:append-to-body="true"
placeholder="Izberi segmente"
label="name"
track-by="id"
id="segmentSelect"
:preselect-first="false"
@update:modelValue="applyDateFilter"
class="w-80"
>
<option value="">Vsi segmenti</option>
<option v-for="segment in segments" :key="segment.id" :value="segment.id">
{{ segment.name }}
</option>
</select>
</Multiselect>
</div>
<!-- Clear Button -->
<button
type="button"
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
:disabled="!fromDate && !toDate && !selectedSegment"
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition ml-auto"
:disabled="!fromDate && !toDate && selectedSegments.length === 0"
@click="clearDateFilter"
title="Počisti filtre"
>
Počisti
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-1.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
Počisti filtre
</button>
</div>
<!-- Search lives in DataTable toolbar -->
</div>
<DataTableServer
class="mt-3"
:columns="[
{ key: 'select', label: '', sortable: false, width: '50px' },
{ key: 'reference', label: 'Referenca', sortable: false },
{ key: 'customer', label: 'Stranka', sortable: false },
{ key: 'start', label: 'Začetek', sortable: false },
@@ -212,37 +304,164 @@ function formatDate(value) {
{ key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
]"
:rows="contracts.data || []"
:meta="{ current_page: contracts.current_page, per_page: contracts.per_page, total: contracts.total, last_page: contracts.last_page }"
:meta="{
current_page: contracts.current_page,
per_page: contracts.per_page,
total: contracts.total,
last_page: contracts.last_page,
}"
route-name="client.contracts"
:route-params="{ uuid: client.uuid }"
:query="{ from: fromDate || undefined, to: toDate || undefined, segment: selectedSegment || undefined }"
:query="{
from: fromDate || undefined,
to: toDate || undefined,
segments:
selectedSegments.length > 0
? selectedSegments.map((s) => s.id).join(',')
: undefined,
}"
:search="search"
row-key="uuid"
:only-props="['contracts']"
>
<template #toolbar-extra>
<div v-if="selectedRows.length" class="flex items-center gap-2">
<div class="text-sm text-gray-700">
Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
</div>
<Dropdown width="48" align="left">
<template #trigger>
<button
type="button"
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
>
Akcije
<svg
class="ml-1 h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
clip-rule="evenodd"
/>
</svg>
</button>
</template>
<template #content>
<button
type="button"
class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@click="openSegmentModal"
>
Preusmeri v segment
</button>
</template>
</Dropdown>
</div>
</template>
<template #header-select>
<input
type="checkbox"
:checked="isAllSelected()"
:indeterminate="isIndeterminate()"
@change="toggleSelectAll"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</template>
<template #cell-select="{ row }">
<input
type="checkbox"
:checked="isRowSelected(row.uuid)"
@change="toggleRowSelection(row.uuid)"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</template>
<template #cell-reference="{ row }">
<Link :href="route('clientCase.show', caseShowParams(row))" class="text-indigo-600 hover:underline">
<Link
:href="route('clientCase.show', caseShowParams(row))"
class="text-indigo-600 hover:underline"
>
{{ row.reference }}
</Link>
</template>
<template #cell-customer="{ row }">
{{ row.client_case?.person?.full_name || '-' }}
{{ row.client_case?.person?.full_name || "-" }}
</template>
<template #cell-start="{ row }">
{{ formatDate(row.start_date) }}
</template>
<template #cell-segment="{ row }">
{{ row.segments?.[0]?.name || '-' }}
{{ row.segments?.[0]?.name || "-" }}
</template>
<template #cell-balance="{ row }">
<div class="text-right">
{{ new Intl.NumberFormat('sl-SI', { style: 'currency', currency: 'EUR' }).format(Number(row.account?.balance_amount ?? 0)) }}
{{
new Intl.NumberFormat("sl-SI", {
style: "currency",
currency: "EUR",
}).format(Number(row.account?.balance_amount ?? 0))
}}
</div>
</template>
<template #empty>
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
</template>
</DataTableServer>
<!-- Segment Reassignment Modal -->
<DialogModal :show="showSegmentModal" @close="showSegmentModal = false">
<template #title> Preusmeri v segment </template>
<template #content>
<div class="space-y-3">
<div class="text-sm text-gray-600">
Število izbranih pogodb:
<span class="font-medium">{{ selectedRows.length }}</span>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1"
>Ciljni segment</label
>
<select
v-model="targetSegmentId"
class="w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
>
<option :value="null" disabled>Izberi segment</option>
<option v-for="seg in segments" :key="seg.id" :value="seg.id">
{{ seg.name }}
</option>
</select>
<div
v-if="segmentForm.errors.segment_id"
class="mt-1 text-sm text-red-600"
>
{{ segmentForm.errors.segment_id }}
</div>
</div>
</div>
</template>
<template #footer>
<button
type="button"
class="px-3 py-1.5 text-sm rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 mr-2"
@click="showSegmentModal = false"
>
Prekliči
</button>
<button
type="button"
class="px-3 py-1.5 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
:disabled="
!targetSegmentId || !selectedRows.length || segmentForm.processing
"
@click="submitSegment"
>
Potrdi
</button>
</template>
</DialogModal>
</div>
<!-- Pagination handled by DataTableServer -->
</div>
resources/js/Pages/Notifications/Unread.vue
+141 -21
View File
@@ -4,6 +4,7 @@ import SectionTitle from "@/Components/SectionTitle.vue";
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
import { Link, router } from "@inertiajs/vue3";
import { ref, computed, watch } from "vue";
import Dropdown from "@/Components/Dropdown.vue";
const props = defineProps({
activities: { type: Object, required: true },
@@ -40,19 +41,23 @@ const selectedClient = ref(initialClient);
const clientOptions = computed(() => {
// Prefer server-provided clients list; fallback to deriving from rows
const list = Array.isArray(props.clients) && props.clients.length
? props.clients
: (Array.isArray(props.activities?.data) ? props.activities.data : [])
.map((row) => {
const client = row.contract?.client_case?.client || row.client_case?.client;
if (!client?.uuid) return null;
return { value: client.uuid, label: client.person?.full_name || "(neznana stranka)" };
})
.filter(Boolean)
.reduce((acc, cur) => {
if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
return acc;
}, []);
const list =
Array.isArray(props.clients) && props.clients.length
? props.clients
: (Array.isArray(props.activities?.data) ? props.activities.data : [])
.map((row) => {
const client = row.contract?.client_case?.client || row.client_case?.client;
if (!client?.uuid) return null;
return {
value: client.uuid,
label: client.person?.full_name || "(neznana stranka)",
};
})
.filter(Boolean)
.reduce((acc, cur) => {
if (!acc.find((x) => x.value === cur.value)) acc.push(cur);
return acc;
}, []);
return list.sort((a, b) => (a.label || "").localeCompare(b.label || ""));
});
@@ -67,12 +72,65 @@ watch(selectedClient, (val) => {
});
});
const selectedRows = ref([]);
function toggleSelectAll() {
if (selectedRows.value.length === (props.activities.data?.length || 0)) {
selectedRows.value = [];
} else {
selectedRows.value = (props.activities.data || []).map((row) => row.id);
}
}
function toggleRowSelection(id) {
const idx = selectedRows.value.indexOf(id);
if (idx > -1) {
selectedRows.value.splice(idx, 1);
} else {
selectedRows.value.push(id);
}
}
function isRowSelected(id) {
return selectedRows.value.includes(id);
}
function isAllSelected() {
return (
(props.activities.data?.length || 0) > 0 &&
selectedRows.value.length === (props.activities.data?.length || 0)
);
}
function isIndeterminate() {
return (
selectedRows.value.length > 0 &&
selectedRows.value.length < (props.activities.data?.length || 0)
);
}
function markRead(id) {
router.patch(route("notifications.activity.read"),
router.patch(
route("notifications.activity.read"),
{ activity_id: id },
{
{
only: ["activities"],
preserveScroll: true
preserveScroll: true,
}
);
}
function markReadBulk() {
if (!selectedRows.value.length) return;
router.patch(
route("notifications.activity.read"),
{ activity_ids: selectedRows.value },
{
only: ["activities"],
preserveScroll: true,
onSuccess: () => {
selectedRows.value = [];
},
}
);
}
@@ -95,14 +153,20 @@ function markRead(id) {
<!-- Filters -->
<div class="mb-4 flex items-center gap-3">
<div class="flex-1 max-w-sm">
<label class="block text-sm font-medium text-gray-700 mb-1">Partner</label>
<label class="block text-sm font-medium text-gray-700 mb-1"
>Partner</label
>
<div class="flex items-center gap-2">
<select
v-model="selectedClient"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
>
<option value="">Vsi partnerji</option>
<option v-for="opt in clientOptions" :key="opt.value || opt.label" :value="opt.value">
<option
v-for="opt in clientOptions"
:key="opt.value || opt.label"
:value="opt.value"
>
{{ opt.label }}
</option>
</select>
@@ -120,6 +184,7 @@ function markRead(id) {
<DataTableServer
:columns="[
{ key: 'select', label: '', sortable: false, width: '50px' },
{ key: 'what', label: 'Zadeva', sortable: false },
{ key: 'partner', label: 'Partner', sortable: false },
{
@@ -143,6 +208,61 @@ function markRead(id) {
:only-props="['activities']"
:query="{ client: selectedClient || undefined }"
>
<template #toolbar-extra>
<div v-if="selectedRows.length" class="flex items-center gap-2">
<div class="text-sm text-gray-700">
Izbrano: <span class="font-medium">{{ selectedRows.length }}</span>
</div>
<Dropdown width="48" align="left">
<template #trigger>
<button
type="button"
class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-gray-300 text-gray-700 bg-white hover:bg-gray-50"
>
Akcije
<svg
class="ml-1 h-4 w-4"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
clip-rule="evenodd"
/>
</svg>
</button>
</template>
<template #content>
<button
type="button"
class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@click="markReadBulk"
>
Označi kot prebrano
</button>
</template>
</Dropdown>
</div>
</template>
<template #header-select>
<input
type="checkbox"
:checked="isAllSelected()"
:indeterminate="isIndeterminate()"
@change="toggleSelectAll"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</template>
<template #cell-select="{ row }">
<input
type="checkbox"
:checked="isRowSelected(row.id)"
@change="toggleRowSelection(row.id)"
class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</template>
<template #cell-what="{ row }">
<div class="font-medium text-gray-800 truncate">
<template v-if="row.contract?.uuid">
@@ -178,9 +298,9 @@ function markRead(id) {
<template #cell-partner="{ row }">
<div class="truncate">
{{
(row.contract?.client_case?.client?.person?.full_name) ||
(row.client_case?.client?.person?.full_name) ||
'—'
row.contract?.client_case?.client?.person?.full_name ||
row.client_case?.client?.person?.full_name ||
"—"
}}
</div>
</template>