Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2026-04-09 08:56:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve pagination (#662)

Browse Source
This commit is contained in:
Christoph
2026-04-05 19:03:32 +02:00
parent 72f9123592
commit f8e3b3f258
9 changed files with 216 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/views/ProfileView.vue
View File

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
import { profileStore } from "@/stores/profile";
import { peerStore } from "@/stores/peers";
import UserPeerEditModal from "@/components/UserPeerEditModal.vue";
import Pagination from "@/components/Pagination.vue";
import { settingsStore } from "@/stores/settings";
import { humanFileSize } from "@/helpers/utils";
@@ -66,7 +67,6 @@ onMounted(async () => {
await profile.LoadPeers()
await profile.LoadStats()
await profile.LoadInterfaces()
await profile.calculatePages(); // Forces to show initial page number
})
</script>
@@ -185,36 +185,33 @@ onMounted(async () => {
<hr>
<div class="mt-3">
<div class="row">
<div class="col-6">
<ul class="pagination pagination-sm">
<li :class="{ disabled: profile.pageOffset === 0 }" class="page-item">
<a class="page-link" @click="profile.previousPage">&laquo;</a>
</li>
<li v-for="page in profile.pages" :key="page" :class="{ active: profile.currentPage === page }" class="page-item">
<a class="page-link" @click="profile.gotoPage(page)">{{ page }}</a>
</li>
<li :class="{ disabled: !profile.hasNextPage }" class="page-item">
<a class="page-link" @click="profile.nextPage">&raquo;</a>
</li>
</ul>
<div class="col-12 col-md-6">
<Pagination
:currentPage="profile.currentPage"
:totalCount="profile.FilteredPeerCount"
:pageSize="profile.pageSize"
:hasNextPage="profile.hasNextPage"
:hasPrevPage="profile.hasPrevPage"
:onGotoPage="profile.gotoPage"
:onNextPage="profile.nextPage"
:onPrevPage="profile.previousPage"
/>
</div>
<div class="col-6">
<div class="col-12 col-md-6">
<div class="form-group row">
<label class="col-sm-6 col-form-label text-end" for="paginationSelector">
<label class="col-sm-6 col-form-label text-md-end" for="paginationSelector">
{{ $t('general.pagination.size')}}:
</label>
<div class="col-sm-6">
<select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @click="profile.afterPageSizeChange()">
<select id="paginationSelector" v-model.number="profile.pageSize" class="form-select" @change="profile.afterPageSizeChange()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="999999999">{{ $t('general.pagination.all') }}</option>
</select>
<option value="100">100</option>
<option value="999999999">{{ $t('general.pagination.all') }}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div></template>