525 lines
16 KiB
Vue
525 lines
16 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted, ref, watch, computed } from "vue";
|
|
import { Head, Link, router, usePage } from "@inertiajs/vue3";
|
|
import ApplicationMark from "@/Components/ApplicationMark.vue";
|
|
import Banner from "@/Components/Banner.vue";
|
|
import Dropdown from "@/Components/Dropdown.vue";
|
|
import DropdownLink from "@/Components/DropdownLink.vue";
|
|
import Breadcrumbs from "@/Components/Breadcrumbs.vue";
|
|
import GlobalSearch from "./Partials/GlobalSearch.vue";
|
|
import NotificationsBell from "./Partials/NotificationsBell.vue";
|
|
import ToastContainer from "@/Components/Toast/ToastContainer.vue";
|
|
import { Button } from "@/Components/ui/button";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import {
|
|
faMobileScreenButton,
|
|
faGaugeHigh,
|
|
faLayerGroup,
|
|
faUserGroup,
|
|
faFolderOpen,
|
|
faFileImport,
|
|
faTableList,
|
|
faFileCirclePlus,
|
|
faMap,
|
|
faGear,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
});
|
|
|
|
// Collapsible sidebar state (persisted when user explicitly toggles)
|
|
const sidebarCollapsed = ref(false);
|
|
const hasSavedSidebarPref = ref(false);
|
|
// Mobile off-canvas state
|
|
const isMobile = ref(false);
|
|
const mobileSidebarOpen = ref(false);
|
|
function applyAutoCollapse() {
|
|
if (typeof window === "undefined") return;
|
|
isMobile.value = window.innerWidth < 1024; // Tailwind lg breakpoint
|
|
sidebarCollapsed.value = isMobile.value;
|
|
}
|
|
function handleResize() {
|
|
if (typeof window !== "undefined") {
|
|
isMobile.value = window.innerWidth < 1024;
|
|
if (!isMobile.value) mobileSidebarOpen.value = false; // close drawer when switching to desktop
|
|
}
|
|
if (!hasSavedSidebarPref.value) applyAutoCollapse();
|
|
}
|
|
onMounted(() => {
|
|
try {
|
|
const saved = localStorage.getItem("sidebarCollapsed");
|
|
if (saved !== null) {
|
|
hasSavedSidebarPref.value = true;
|
|
sidebarCollapsed.value = saved === "1";
|
|
} else {
|
|
applyAutoCollapse();
|
|
}
|
|
} catch {}
|
|
window.addEventListener("resize", handleResize);
|
|
});
|
|
onUnmounted(() => window.removeEventListener("resize", handleResize));
|
|
watch(sidebarCollapsed, (v) => {
|
|
if (!hasSavedSidebarPref.value) return; // don't persist auto behavior
|
|
try {
|
|
localStorage.setItem("sidebarCollapsed", v ? "1" : "0");
|
|
} catch {}
|
|
});
|
|
|
|
// Global search modal state
|
|
const searchOpen = ref(false);
|
|
const openSearch = () => (searchOpen.value = true);
|
|
const closeSearch = () => (searchOpen.value = false);
|
|
|
|
// Keyboard shortcut: Ctrl+K / Cmd+K to open search
|
|
function onKeydown(e) {
|
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
|
e.preventDefault();
|
|
openSearch();
|
|
}
|
|
if (e.key === "Escape" && mobileSidebarOpen.value) {
|
|
mobileSidebarOpen.value = false;
|
|
}
|
|
}
|
|
onMounted(() => window.addEventListener("keydown", onKeydown));
|
|
onUnmounted(() => window.removeEventListener("keydown", onKeydown));
|
|
|
|
function toggleSidebar() {
|
|
hasSavedSidebarPref.value = true; // user explicitly chose
|
|
sidebarCollapsed.value = !sidebarCollapsed.value;
|
|
}
|
|
|
|
function toggleMobileSidebar() {
|
|
mobileSidebarOpen.value = !mobileSidebarOpen.value;
|
|
}
|
|
|
|
function handleSidebarToggleClick() {
|
|
if (isMobile.value) toggleMobileSidebar();
|
|
else toggleSidebar();
|
|
}
|
|
|
|
const logout = () => {
|
|
router.post(route("logout"));
|
|
};
|
|
|
|
// Flash toast notifications
|
|
const page = usePage();
|
|
// Toast notifications are now handled by ToastContainer component
|
|
|
|
// No automatic daily notifications
|
|
|
|
// Sidebar menu groups (sorted alphabetically within each group)
|
|
const rawMenuGroups = [
|
|
{
|
|
label: "Glavno",
|
|
items: [
|
|
{
|
|
key: "dashboard",
|
|
title: "Nadzorna plošča",
|
|
routeName: "dashboard",
|
|
active: ["dashboard"],
|
|
},
|
|
{
|
|
key: "reports",
|
|
title: "Poročila",
|
|
routeName: "reports.index",
|
|
active: ["reports.index", "reports.show"],
|
|
requires: { permission: "reports-view" },
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Stranke",
|
|
items: [
|
|
{
|
|
key: "clients",
|
|
title: "Naročniki",
|
|
routeName: "client",
|
|
active: ["client", "client.*"],
|
|
},
|
|
{
|
|
key: "cases",
|
|
title: "Primeri",
|
|
routeName: "clientCase",
|
|
active: ["clientCase", "clientCase.*"],
|
|
},
|
|
{
|
|
key: "segments",
|
|
title: "Segmenti",
|
|
routeName: "segments.index",
|
|
active: ["segments.index"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Uvoz",
|
|
requires: { permission: "manage-imports" },
|
|
items: [
|
|
{
|
|
key: "imports",
|
|
title: "Uvozi",
|
|
routeName: "imports.index",
|
|
active: ["imports.index", "imports.*"],
|
|
},
|
|
{
|
|
key: "import-templates",
|
|
title: "Uvozne predloge",
|
|
routeName: "importTemplates.index",
|
|
active: ["importTemplates.index"],
|
|
},
|
|
{
|
|
key: "import-templates-new",
|
|
title: "Nova uvozna predloga",
|
|
routeName: "importTemplates.create",
|
|
active: ["importTemplates.create"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Terensko delo",
|
|
requires: { permission: "field-job" },
|
|
items: [
|
|
{
|
|
key: "fieldjobs",
|
|
title: "Terenske naloge",
|
|
routeName: "fieldjobs.index",
|
|
active: ["fieldjobs.index"],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "Konfiguracija",
|
|
// Group-level authorization: show "Konfiguracija" only to admins or users with manage-settings
|
|
// You can set requires on any group to hide the whole section unless allowed
|
|
requires: { permission: "manage-settings" },
|
|
items: [
|
|
{
|
|
key: "settings",
|
|
title: "Nastavitve",
|
|
routeName: "settings",
|
|
active: ["settings", "settings.*"],
|
|
},
|
|
// Admin panel (roles & permissions management)
|
|
// Only shown if current user has admin role or manage-settings permission.
|
|
// We'll filter it out below if not authorized.
|
|
{
|
|
key: "admin-panel",
|
|
title: "Administrator",
|
|
routeName: "admin.index",
|
|
active: ["admin.index", "admin.users.index", "admin.permissions.create"],
|
|
requires: { role: "admin" },
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const menuGroups = computed(() => {
|
|
const user = page.props.auth?.user || {};
|
|
const roles = (user.roles || []).map((r) => r.slug);
|
|
const permissions = user.permissions || [];
|
|
|
|
// Generic helper to determine inclusion based on optional `requires` meta
|
|
function allowedMeta(entity) {
|
|
const req = entity?.requires;
|
|
if (!req) {
|
|
return true;
|
|
}
|
|
const needRole = req.role ?? "admin";
|
|
const needPerm = req.permission;
|
|
return (
|
|
(needRole && roles.includes(needRole)) ||
|
|
(needPerm && permissions.includes(needPerm))
|
|
);
|
|
}
|
|
|
|
return (
|
|
rawMenuGroups
|
|
// Group-level permission check (hide whole group if not allowed)
|
|
.filter((g) => allowedMeta(g))
|
|
.map((g) => {
|
|
const items = (g.items || [])
|
|
.filter((item) => allowedMeta(item))
|
|
.sort((a, b) => a.title.localeCompare(b.title, "sl", { sensitivity: "base" }));
|
|
return { label: g.label, items };
|
|
})
|
|
// Drop groups that end up empty after item filtering
|
|
.filter((g) => g.items.length > 0)
|
|
);
|
|
});
|
|
|
|
// Icon map for menu keys -> FontAwesome icon definitions
|
|
const menuIconMap = {
|
|
dashboard: faGaugeHigh,
|
|
segments: faLayerGroup,
|
|
clients: faUserGroup,
|
|
cases: faFolderOpen,
|
|
imports: faFileImport,
|
|
"import-templates": faTableList,
|
|
"import-templates-new": faFileCirclePlus,
|
|
fieldjobs: faMap,
|
|
settings: faGear,
|
|
"admin-panel": faUserGroup,
|
|
reports: faTableList,
|
|
};
|
|
|
|
function isActive(patterns) {
|
|
try {
|
|
return patterns?.some((p) => route().current(p));
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Head :title="title" />
|
|
|
|
<Banner />
|
|
|
|
<div class="min-h-screen bg-gray-100 flex">
|
|
<!-- Mobile backdrop -->
|
|
<div
|
|
v-if="isMobile && mobileSidebarOpen"
|
|
class="fixed inset-0 z-40 bg-black/30"
|
|
@click="mobileSidebarOpen = false"
|
|
></div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside
|
|
:class="[
|
|
sidebarCollapsed ? 'w-16' : 'w-64',
|
|
'bg-white border-r border-gray-200 transition-all duration-300 ease-in-out z-50',
|
|
// Off-canvas behavior on mobile; sticky fixed-like sidebar on desktop
|
|
isMobile
|
|
? 'fixed inset-y-0 left-0 transform shadow-strong ' +
|
|
(mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full')
|
|
: 'sticky top-0 h-screen overflow-y-auto',
|
|
]"
|
|
>
|
|
<div class="h-16 px-4 flex items-center justify-between border-b border-gray-200 bg-white">
|
|
<Link
|
|
:href="route('dashboard')"
|
|
class="flex items-center gap-2 hover:opacity-80 transition-opacity"
|
|
>
|
|
<ApplicationMark />
|
|
<span
|
|
v-if="!sidebarCollapsed"
|
|
class="text-sm font-semibold text-gray-900 transition-opacity"
|
|
>
|
|
Teren
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<nav class="py-4 overflow-y-auto">
|
|
<ul class="space-y-4 px-2">
|
|
<li v-for="group in menuGroups" :key="group.label">
|
|
<div
|
|
v-if="!sidebarCollapsed"
|
|
class="px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-gray-400"
|
|
>
|
|
{{ group.label }}
|
|
</div>
|
|
<ul class="space-y-0.5">
|
|
<li v-for="item in group.items" :key="item.key">
|
|
<Link
|
|
:href="route(item.routeName)"
|
|
:class="[
|
|
'flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg transition-all duration-150',
|
|
isActive(item.active)
|
|
? 'bg-primary-50 text-primary-700 font-medium shadow-sm'
|
|
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
|
|
]"
|
|
:title="item.title"
|
|
>
|
|
<!-- Unified FontAwesome icon rendering -->
|
|
<FontAwesomeIcon
|
|
v-if="menuIconMap[item.key]"
|
|
:icon="menuIconMap[item.key]"
|
|
:class="[
|
|
'w-5 h-5 flex-shrink-0 transition-colors',
|
|
isActive(item.active) ? 'text-primary-600' : 'text-gray-500',
|
|
]"
|
|
/>
|
|
<!-- Title -->
|
|
<span
|
|
v-if="!sidebarCollapsed"
|
|
class="truncate transition-opacity"
|
|
:class="{ 'font-medium': isActive(item.active) }"
|
|
>
|
|
{{ item.title }}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main column -->
|
|
<div class="flex-1 flex flex-col min-w-0">
|
|
<!-- Top bar -->
|
|
<div
|
|
class="h-16 bg-white border-b border-gray-200 px-4 flex items-center justify-between sticky top-0 z-30 backdrop-blur-sm bg-white/95 shadow-sm"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Sidebar toggle -->
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
@click="handleSidebarToggleClick()"
|
|
:title="sidebarCollapsed ? 'Razširi meni' : 'Skrči meni'"
|
|
aria-label="Toggle sidebar"
|
|
>
|
|
<!-- Hamburger (Bars) icon -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
<!-- Search trigger -->
|
|
<Button
|
|
variant="outline"
|
|
size="default"
|
|
@click="openSearch"
|
|
class="gap-2"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1010.5 18.5a7.5 7.5 0 006.15-1.85z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline text-sm font-medium">Globalni iskalnik</span>
|
|
<kbd
|
|
class="hidden sm:inline ml-2 text-[10px] px-1.5 py-0.5 rounded border border-gray-300 bg-gray-100 text-gray-600 font-medium"
|
|
>Ctrl K</kbd
|
|
>
|
|
</Button>
|
|
</div>
|
|
<!-- Notifications + User drop menu --->
|
|
<div class="flex items-center">
|
|
<NotificationsBell class="mr-2" />
|
|
<!-- Phone page quick access button -->
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
:as-child="true"
|
|
class="mr-2"
|
|
title="Phone"
|
|
>
|
|
<Link :href="route('phone.index')">
|
|
<FontAwesomeIcon :icon="faMobileScreenButton" class="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<div class="ms-3 relative">
|
|
<Dropdown align="right" width="48">
|
|
<template #trigger>
|
|
<button
|
|
v-if="$page.props.jetstream.managesProfilePhotos"
|
|
class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all hover:ring-2 hover:ring-gray-200"
|
|
>
|
|
<img
|
|
class="h-8 w-8 rounded-full object-cover ring-2 ring-gray-100"
|
|
:src="$page.props.auth.user.profile_photo_url"
|
|
:alt="$page.props.auth.user.name"
|
|
/>
|
|
</button>
|
|
|
|
<span v-else class="inline-flex">
|
|
<Button
|
|
variant="outline"
|
|
size="default"
|
|
type="button"
|
|
class="gap-2"
|
|
>
|
|
{{ $page.props.auth.user.name }}
|
|
<svg
|
|
class="h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</span>
|
|
</template>
|
|
|
|
<template #content>
|
|
<div class="block px-4 py-2 text-xs text-gray-400">
|
|
Nastavitve računa
|
|
</div>
|
|
|
|
<DropdownLink :href="route('profile.show')">Profil</DropdownLink>
|
|
<DropdownLink
|
|
v-if="$page.props.jetstream.hasApiFeatures"
|
|
:href="route('api-tokens.index')"
|
|
>API Tokens</DropdownLink
|
|
>
|
|
|
|
<div class="border-t border-gray-200" />
|
|
|
|
<form @submit.prevent="logout">
|
|
<DropdownLink as="button">Izpis</DropdownLink>
|
|
</form>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Heading -->
|
|
<header
|
|
v-if="$slots.header"
|
|
class="bg-white border-b border-gray-200 shadow-sm"
|
|
>
|
|
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2">
|
|
<Breadcrumbs
|
|
v-if="$page.props.breadcrumbs && $page.props.breadcrumbs.length"
|
|
:breadcrumbs="$page.props.breadcrumbs"
|
|
/>
|
|
<slot name="header" />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<main class="flex-1 p-4 sm:p-6">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Search Modal -->
|
|
<GlobalSearch :open="searchOpen" @update:open="(v) => (searchOpen = v)" />
|
|
|
|
<!-- Toast Notification Container -->
|
|
<ToastContainer />
|
|
</div>
|
|
</template>
|