Changes to UI and other stuff

resources/js/Pages/Cases/Index.vue

@@ -3,9 +3,10 @@ import AppLayout from "@/Layouts/AppLayout.vue";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import { Link, router } from "@inertiajs/vue3";
 import { ref } from "vue";
-import DataTable from "@/Components/DataTable/DataTable.vue";
+import DataTable from "@/Components/DataTable/DataTableNew2.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import Pagination from "@/Components/Pagination.vue";
 
 const props = defineProps({
   client_cases: Object,
@@ -50,10 +51,8 @@ const fmtDateDMY = (v) => {
               </SectionTitle>
             </div>
             <DataTable
-              :show-search="true"
-              :show-page-size="true"
               :columns="[
-                { key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
+                { key: 'nu', label: 'Št.', sortable: false },
                 { key: 'case', label: 'Primer', sortable: false },
                 { key: 'client', label: 'Stranka', sortable: false },
                 { key: 'tax', label: 'Davčna', sortable: false },
@@ -71,23 +70,13 @@ const fmtDateDMY = (v) => {
                   align: 'right',
                 },
               ]"
-              :rows="client_cases.data || []"
-              :meta="{
-                current_page: client_cases.current_page,
-                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,
-              }"
-              :search="search"
-              route-name="clientCase"
-              page-param-name="client-cases-page"
-              :only-props="['client_cases']"
-              :empty-icon="faFolderOpen"
-              empty-text="Ni zadetkov"
-              empty-description="Ni najdenih primerov. Ustvarite nov primer ali preverite iskalne kriterije."
+              :data="client_cases.data || []"
+              :page-size="client_cases.per_page"
+              :show-pagination="false"
+              :show-toolbar="true"
+              :hoverable="true"
+              row-key="uuid"
+              empty-text="Ni najdenih primerov."
             >
               <template #cell-nu="{ row }">
                 {{ row.person?.nu || "-" }}
@@ -130,6 +119,19 @@ const fmtDateDMY = (v) => {
                 </div>
               </template>
             </DataTable>
+            <div class="border-t border-gray-200 p-4">
+              <Pagination
+                :links="client_cases.links"
+                :from="client_cases.from"
+                :to="client_cases.to"
+                :total="client_cases.total"
+                :per-page="client_cases.per_page || 20"
+                :last-page="client_cases.last_page"
+                :current-page="client_cases.current_page"
+                per-page-param="perPage"
+                page-param="clientCasesPage"
+              />
+            </div>
           </div>
           <!-- Pagination handled by DataTableServer -->
         </div>