Dev branch

resources/js/Pages/Client/Show.vue

@@ -1,13 +1,16 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
 import { computed, ref } from "vue";
 import { Link, usePage } from "@inertiajs/vue3";
 import SectionTitle from "@/Components/SectionTitle.vue";
-import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
+import PersonInfoGrid from "@/Components/PersonInfo/PersonInfoGrid.vue";
 import FormCreateCase from "./Partials/FormCreateCase.vue";
-import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
+import DataTable from "@/Components/DataTable/DataTable.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";
 
 const props = defineProps({
   client: Object,
@@ -49,36 +52,6 @@ const openDrawerCreateCase = () => {
                 </template>
               </SectionTitle>
             </div>
-            <nav class="mt-2 border-b border-gray-200">
-              <ul class="flex gap-6 -mb-px">
-                <li>
-                  <Link
-                    :href="route('client.show', { uuid: client.uuid })"
-                    :class="[
-                      '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',
-                    ]"
-                  >
-                    Primeri
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    :href="route('client.contracts', { uuid: client.uuid })"
-                    :class="[
-                      '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',
-                    ]"
-                  >
-                    Pogodbe
-                  </Link>
-                </li>
-              </ul>
-            </nav>
           </div>
         </div>
       </div>
@@ -103,16 +76,30 @@ const openDrawerCreateCase = () => {
       <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"
-              v-if="hasPerm('case-edit')"
-            >
-              <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
-                >Dodaj</PrimaryButton
-              >
+            <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>
-            <DataTableServer
-              class="mt-3"
+            <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 },
@@ -136,6 +123,9 @@ const openDrawerCreateCase = () => {
                 per_page: client_cases.per_page,
                 total: client_cases.total,
                 last_page: client_cases.last_page,
+                from: client_cases.from,
+                to: client_cases.to,
+                links: client_cases.links,
               }"
               route-name="client.show"
               :route-params="{ uuid: client.uuid }"
@@ -143,6 +133,14 @@ const openDrawerCreateCase = () => {
               :search="search"
               :only-props="['client_cases']"
             >
+              <template #toolbar-add>
+                <ActionMenuItem
+                  v-if="hasPerm('case-edit')"
+                  label="Dodaj primer"
+                  :icon="faPlus"
+                  @click="openDrawerCreateCase"
+                />
+              </template>
               <template #cell-nu="{ row }">
                 {{ row.person?.nu || "-" }}
               </template>
@@ -170,10 +168,7 @@ const openDrawerCreateCase = () => {
                   }}
                 </div>
               </template>
-              <template #empty>
-                <div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
-              </template>
-            </DataTableServer>
+            </DataTable>
           </div>
           <!-- Pagination handled by DataTableServer -->
         </div>