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

Dashboard final version, TODO: update main sidebar menu

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-11-23 21:33:01 +01:00
parent c3de189e9d
commit c1ac92efbf
67 changed files with 5195 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Client/Show.vue
+93 -54
View File
@@ -1,16 +1,19 @@
<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { computed, ref } from "vue";
import { Link, usePage } from "@inertiajs/vue3";
import { Link, router, usePage } from "@inertiajs/vue3";
import SectionTitle from "@/Components/SectionTitle.vue";
import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
import FormCreateCase from "./Partials/FormCreateCase.vue";
import DataTable from "@/Components/DataTable/DataTable.vue";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { hasPermission } from "@/Services/permissions";
import { Button } from "@/Components/ui/button";
import { ButtonGroup } from "@/Components/ui/button-group";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { Card } from "@/Components/ui/card";
import Badge from "@/Components/ui/badge/Badge.vue";
import { cn } from "@/lib/utils";
import { Input } from "@/Components/ui/input";
const props = defineProps({
client: Object,
@@ -34,72 +37,92 @@ const drawerCreateCase = ref(false);
const openDrawerCreateCase = () => {
drawerCreateCase.value = true;
};
function applySearch() {
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("client.show", { uuid: props.client.uuid }), params, {
preserveState: true,
replace: true,
preserveScroll: true,
only: ["client_cases"],
});
}
</script>
<template>
<AppLayout title="Client">
<template #header></template>
<div class="pt-12">
<div class="pt-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
>
<div class="mx-auto max-w-4x1 p-3">
<div class="flex items-center justify-between">
<SectionTitle>
<template #title>
{{ client.person.full_name }}
</template>
</SectionTitle>
</div>
<Card class="border-l-4 border-blue-400">
<div class="p-3 flex justify-between items-center">
<SectionTitle>
<template #title>
{{ client.person.full_name }}
</template>
</SectionTitle>
<Badge class="bg-blue-500 text-white"> Naročnik </Badge>
</div>
</div>
</Card>
</div>
</div>
<div class="pt-1">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div
class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400"
>
<div class="mx-auto max-w-4x1 px-2">
<Card>
<div class="mx-auto max-w-4x1 p-3">
<PersonInfoGrid
:types="types"
:person="client.person"
:edit="hasPerm('client-edit')"
></PersonInfoGrid>
</div>
</div>
</Card>
</div>
</div>
<div class="py-12">
<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="mb-4">
<ButtonGroup>
<Button
as-child
:variant="route().current('client.show') ? 'default' : 'ghost'"
>
<Link :href="route('client.show', { uuid: client.uuid })">
Primeri
</Link>
</Button>
<Button
as-child
:variant="route().current('client.contracts') ? 'default' : 'ghost'"
>
<Link :href="route('client.contracts', { uuid: client.uuid })">
Pogodbe
</Link>
</Button>
</ButtonGroup>
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="mx-auto max-w-4x1">
<div class="px-3 py-4 flex flex-row items-center gap-3">
<Link
:class="
cn(
'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
route().current('client.show')
? 'bg-accent text-accent-foreground'
: ''
)
"
:href="route('client.show', { uuid: client.uuid })"
>
Primeri
</Link>
<Link
:class="
cn(
'border border-gray-200 py-2 px-3 rounded-md hover:bg-accent hover:text-accent-foreground ',
route().current('client.contracts')
? 'bg-accent text-accent-foreground'
: ''
)
"
:href="route('client.contracts', { uuid: client.uuid })"
>
Pogodbe
</Link>
</div>
<DataTable
:show-search="true"
:show-page-size="true"
:show-add="true"
:columns="[
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
{ key: 'case', label: 'Primer', sortable: false },
@@ -117,7 +140,7 @@ const openDrawerCreateCase = () => {
align: 'right',
},
]"
:rows="client_cases.data || []"
:data="client_cases.data || []"
:meta="{
current_page: client_cases.current_page,
per_page: client_cases.per_page,
@@ -130,16 +153,32 @@ const openDrawerCreateCase = () => {
route-name="client.show"
:route-params="{ uuid: client.uuid }"
row-key="uuid"
:search="search"
:only-props="['client_cases']"
:page-size-options="[10, 15, 25, 50, 100]"
:show-toolbar="true"
>
<template #toolbar-add>
<ActionMenuItem
<template #toolbar-filters>
<div class="flex items-center gap-2 w-full">
<Input
v-model="search"
placeholder="Išči po primeru, davčni, osebi..."
class="w-[260px]"
@keydown.enter="applySearch"
/>
<Button size="sm" variant="outline" @click="applySearch">Išči</Button>
</div>
</template>
<template #toolbar-actions>
<Button
v-if="hasPerm('case-edit')"
label="Dodaj primer"
:icon="faPlus"
size="sm"
variant="outline"
class="gap-2"
@click="openDrawerCreateCase"
/>
>
<FontAwesomeIcon :icon="faPlus" class="h-4 w-4" />
Dodaj primer
</Button>
</template>
<template #cell-nu="{ row }">
{{ row.person?.nu || "-" }}
@@ -147,7 +186,7 @@ const openDrawerCreateCase = () => {
<template #cell-case="{ row }">
<Link
:href="route('clientCase.show', { client_case: row.uuid })"
class="text-indigo-600 hover:underline"
class="font-semibold hover:underline text-primary-700"
>
{{ row.person?.full_name || "-" }}
</Link>