changes to UI mostly
This commit is contained in:
Simon Pocrnjič
@@ -1,101 +1,154 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import List from '@/Components/List.vue';
|
||||
import ListItem from '@/Components/ListItem.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import { ref } from 'vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
|
||||
import Pagination from '@/Components/Pagination.vue';
|
||||
import SearchInput from '@/Components/SearchInput.vue';
|
||||
import FormCreateCase from './Partials/FormCreateCase.vue';
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import FormCreateCase from "./Partials/FormCreateCase.vue";
|
||||
import { debounce } from "lodash";
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
client_cases: Object,
|
||||
urlPrev: String,
|
||||
filters: Object,
|
||||
types: Object
|
||||
client: Object,
|
||||
client_cases: Object,
|
||||
urlPrev: String,
|
||||
filters: Object,
|
||||
types: Object,
|
||||
});
|
||||
|
||||
const search = {
|
||||
search: props.filters.search,
|
||||
route: {
|
||||
link: 'client.show',
|
||||
options: {uuid: props.client.uuid}
|
||||
}
|
||||
}
|
||||
// Table-friendly search for client cases
|
||||
const search = ref(props.filters?.search || "");
|
||||
const applySearch = debounce((term) => {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
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,
|
||||
});
|
||||
}, 300);
|
||||
watch(search, (v) => applySearch(v));
|
||||
|
||||
const drawerCreateCase = ref(false);
|
||||
|
||||
const openDrawerCreateCase = () => {
|
||||
drawerCreateCase.value = true;
|
||||
}
|
||||
|
||||
drawerCreateCase.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Client">
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<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 flex justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
{{ client.person.full_name }}
|
||||
</template>
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppLayout title="Client">
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<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 flex justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>
|
||||
{{ client.person.full_name }}
|
||||
</template>
|
||||
</SectionTitle>
|
||||
</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">
|
||||
<PersonInfoGrid :types="types" :person="client.person"></PersonInfoGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<PersonInfoGrid :types="types" :person="client.person"></PersonInfoGrid>
|
||||
</div>
|
||||
</div>
|
||||
</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="flex justify-between">
|
||||
<PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400">Dodaj</PrimaryButton>
|
||||
<SearchInput :options="search" />
|
||||
</div>
|
||||
<List class="mt-2">
|
||||
<ListItem v-for="clientCase in client_cases.data">
|
||||
<div class="flex justify-between shadow rounded border-solid border-l-4 border-red-400 p-2">
|
||||
<div class="flex min-w-0 gap-x-4">
|
||||
<div class="min-w-0 flex-auto">
|
||||
<p class="text-sm font-semibold leading-6 text-gray-900"><Link :href="route('clientCase.show', {uuid: clientCase.uuid})">{{ clientCase.person.full_name }}</Link></p>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
|
||||
<p class="text-sm leading-6 text-gray-900">{{ clientCase.person.nu }}</p>
|
||||
<div class="mt-1 flex items-center gap-x-1.5">
|
||||
<p class="text-xs leading-5 text-gray-500">Primer naročnika</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
<Pagination :links="client_cases.links" :from="client_cases.from" :to="client_cases.to" :total="client_cases.total" />
|
||||
</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="flex items-center justify-between gap-3">
|
||||
<PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
|
||||
>Dodaj</PrimaryButton
|
||||
>
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Iskanje po imenu"
|
||||
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto mt-3">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Št.</th>
|
||||
<th class="py-2 pr-4">Primer</th>
|
||||
<th class="py-2 pr-4">Davčna</th>
|
||||
<th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
|
||||
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in client_cases.data"
|
||||
:key="c.uuid"
|
||||
class="border-b last:border-0"
|
||||
>
|
||||
<td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
:href="route('clientCase.show', { client_case: c.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ c.person?.full_name || "-" }}
|
||||
</Link>
|
||||
</td>
|
||||
|
||||
<td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ c.active_contracts_count ?? 0 }}
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{
|
||||
new Intl.NumberFormat("sl-SI", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
}).format(Number(c.active_contracts_balance_sum ?? 0))
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!client_cases.data || client_cases.data.length === 0">
|
||||
<td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<Pagination
|
||||
:links="client_cases.links"
|
||||
:from="client_cases.from"
|
||||
:to="client_cases.to"
|
||||
:total="client_cases.total"
|
||||
/>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<FormCreateCase
|
||||
:show="drawerCreateCase"
|
||||
@close="drawerCreateCase = false"
|
||||
:client-uuid="client?.uuid"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
<FormCreateCase
|
||||
:show="drawerCreateCase"
|
||||
@close="drawerCreateCase = false"
|
||||
:client-uuid="client?.uuid"
|
||||
/>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user