Remove laravel pagination from contract table / ClientCase view and used replacing it with client pagination
This commit is contained in:
Simon Pocrnjič
parent
dda118a005
commit
245caea4dc
|
|
@ -825,9 +825,8 @@ public function show(ClientCase $clientCase)
|
|||
}
|
||||
|
||||
// Get contracts using service
|
||||
$contractsPerPage = request()->integer('contracts_per_page', 10);
|
||||
$contracts = $this->caseDataService->getContracts($case, $segmentId, $contractsPerPage);
|
||||
$contractIds = collect($contracts->items())->pluck('id')->all();
|
||||
$contracts = $this->caseDataService->getContracts($case, $segmentId);
|
||||
$contractIds = collect($contracts)->pluck('id')->all();
|
||||
|
||||
// Get activities using service
|
||||
$activitiesPerPage = request()->integer('activities_per_page', 15);
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
class ClientCaseDataService
|
||||
{
|
||||
/**
|
||||
* Get paginated contracts for a client case with optional segment filtering.
|
||||
* Get contracts for a client case with optional segment filtering.
|
||||
*/
|
||||
public function getContracts(ClientCase $clientCase, ?int $segmentId = null, int $perPage = 50): LengthAwarePaginator
|
||||
public function getContracts(ClientCase $clientCase, ?int $segmentId = null): Collection
|
||||
{
|
||||
$query = $clientCase->contracts()
|
||||
->select(['id', 'uuid', 'reference', 'start_date', 'end_date', 'description', 'meta', 'active', 'type_id', 'client_case_id', 'created_at'])
|
||||
|
|
@ -40,9 +40,8 @@ public function getContracts(ClientCase $clientCase, ?int $segmentId = null, int
|
|||
$query->forSegment($segmentId);
|
||||
}
|
||||
|
||||
$perPage = max(1, min(100, $perPage));
|
||||
|
||||
return $query->paginate($perPage, ['*'], 'contracts_page')->withQueryString();
|
||||
return $query->get();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
} from "@tanstack/vue-table";
|
||||
import { valueUpdater } from "@/lib/utils";
|
||||
import DataTableColumnHeader from "./DataTableColumnHeader.vue";
|
||||
import DataTablePagination from "./DataTablePagination.vue";
|
||||
import DataTablePaginationClient from "./DataTablePaginationClient.vue";
|
||||
import DataTableViewOptions from "./DataTableViewOptions.vue";
|
||||
import DataTableToolbar from "./DataTableToolbar.vue";
|
||||
import SkeletonTable from "../Skeleton/SkeletonTable.vue";
|
||||
|
|
@ -618,7 +618,14 @@ defineExpose({
|
|||
|
||||
<!-- Client-side pagination -->
|
||||
<template v-else>
|
||||
<DataTablePagination :table="table" />
|
||||
<DataTablePaginationClient
|
||||
:current-page="table.getState().pagination.pageIndex"
|
||||
:last-page="table.getPageCount()"
|
||||
:total="table.getFilteredRowModel().rows.length"
|
||||
:showing-from="table.getFilteredSelectedRowModel().rows.length"
|
||||
:showing-to="table.getFilteredRowModel().rows.length"
|
||||
:table="table"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ const props = defineProps({
|
|||
showGoto: { type: Boolean, default: true },
|
||||
maxPageLinks: { type: Number, default: 5 },
|
||||
perPage: { type: Number, default: 10 },
|
||||
table: { type: Object, required: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:page"]);
|
||||
|
|
@ -34,7 +35,7 @@ function goToPageInput() {
|
|||
const n = Number(raw);
|
||||
if (!Number.isFinite(n)) return;
|
||||
const target = Math.max(1, Math.min(props.lastPage, Math.floor(n)));
|
||||
if (target !== props.currentPage) setPage(target);
|
||||
if (target !== props.currentPage) props.table.setPageIndex(target - 1);
|
||||
gotoInput.value = "";
|
||||
}
|
||||
|
||||
|
|
@ -136,14 +137,17 @@ function setPage(p) {
|
|||
>
|
||||
<PaginationContent>
|
||||
<!-- First -->
|
||||
<PaginationFirst :disabled="currentPage <= 1" @click="setPage(1)">
|
||||
<PaginationFirst
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.setPageIndex(0)"
|
||||
>
|
||||
<ChevronsLeft />
|
||||
</PaginationFirst>
|
||||
|
||||
<!-- Previous -->
|
||||
<PaginationPrevious
|
||||
:disabled="currentPage <= 1"
|
||||
@click="setPage(currentPage - 1)"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</PaginationPrevious>
|
||||
|
|
@ -154,25 +158,22 @@ function setPage(p) {
|
|||
<PaginationItem
|
||||
v-else
|
||||
:value="item"
|
||||
:is-active="currentPage === item"
|
||||
@click="setPage(item)"
|
||||
:is-active="currentPage === index"
|
||||
@click="table.setPageIndex(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</PaginationItem>
|
||||
</template>
|
||||
|
||||
<!-- Next -->
|
||||
<PaginationNext
|
||||
:disabled="currentPage >= lastPage"
|
||||
@click="setPage(currentPage + 1)"
|
||||
>
|
||||
<PaginationNext :disabled="!table.getCanNextPage()" @click="table.nextPage()">
|
||||
<ChevronRight />
|
||||
</PaginationNext>
|
||||
|
||||
<!-- Last -->
|
||||
<PaginationLast
|
||||
:disabled="currentPage >= lastPage"
|
||||
@click="setPage(lastPage)"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.setPageIndex(table.getPageCount() - 1)"
|
||||
>
|
||||
<ChevronsRight />
|
||||
</PaginationLast>
|
||||
|
|
@ -191,7 +192,7 @@ function setPage(p) {
|
|||
:max="lastPage"
|
||||
inputmode="numeric"
|
||||
class="w-10 h-full text-sm text-center bg-transparent border-0 outline-none focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
:placeholder="String(currentPage)"
|
||||
:placeholder="String(currentPage + 1)"
|
||||
aria-label="Pojdi na stran"
|
||||
@keyup.enter="goToPageInput"
|
||||
@blur="goToPageInput"
|
||||
|
|
|
|||
|
|
@ -489,7 +489,7 @@ const availableSegmentsCount = computed(() => {
|
|||
:empty-icon="faFolderOpen"
|
||||
empty-text="Ni pogodb"
|
||||
empty-description="Za ta primer še ni ustvarjenih pogodb. Ustvarite novo pogodbo za začetek."
|
||||
:show-pagination="false"
|
||||
:show-pagination="true"
|
||||
:show-toolbar="true"
|
||||
:hoverable="true"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import {
|
|||
const props = defineProps({
|
||||
client: Object,
|
||||
client_case: Object,
|
||||
contracts: Object, // Resource Collection with data/links/meta
|
||||
contracts: { type: Array, default: () => [] }, // Resource Collection with data/links/meta
|
||||
activities: Object, // Resource Collection with data/links/meta
|
||||
contract_types: Array,
|
||||
account_types: { type: Array, default: () => [] },
|
||||
|
|
@ -46,7 +46,7 @@ const props = defineProps({
|
|||
|
||||
// Extract contracts array from Resource Collection
|
||||
const contractsArray = computed(() => {
|
||||
return props.contracts?.data || [];
|
||||
return props.contracts || [];
|
||||
});
|
||||
|
||||
// Contracts are always paginated now (Resource Collection)
|
||||
|
|
@ -356,19 +356,6 @@ const submitAttachSegment = () => {
|
|||
@create="openDrawerCreateContract"
|
||||
@attach-segment="openAttachSegment"
|
||||
/>
|
||||
<div v-if="contractsPaginated" class="border-t border-gray-200 p-4">
|
||||
<Pagination
|
||||
:links="contracts.links"
|
||||
:from="contracts.from"
|
||||
:to="contracts.to"
|
||||
:total="contracts.total"
|
||||
:per-page="contracts.per_page || 50"
|
||||
:last-page="contracts.last_page"
|
||||
:current-page="contracts.current_page"
|
||||
per-page-param="contracts_per_page"
|
||||
page-param="contracts_page"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user