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

feat: improve pagination (#662) (#663)
Some checks failed
Docker / Build and Push (push) Has been cancelled
Details
github-pages / deploy (push) Has been cancelled
Details
Docker / release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
h44z
2026-04-07 22:17:53 +02:00
committed by GitHub
parent 72f9123592
commit 401642701a
9 changed files with 216 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/views/UserView.vue
View File

@@ -1,8 +1,9 @@
<script setup>
import {userStore} from "@/stores/users";
import {ref, onMounted, computed} from "vue";
import UserEditModal from "../components/UserEditModal.vue";
import UserViewModal from "../components/UserViewModal.vue";
import UserEditModal from "@/components/UserEditModal.vue";
import UserViewModal from "@/components/UserViewModal.vue";
import Pagination from "@/components/Pagination.vue";
import {useI18n} from "vue-i18n";
const users = userStore()
@@ -165,28 +166,24 @@ onMounted(() => {
</table>
</div>
<hr>
<div class="mt-3">
<div class="row">
<div class="col-6">
<ul class="pagination pagination-sm">
<li :class="{disabled:users.pageOffset===0}" class="page-item">
<a class="page-link" @click="users.previousPage">&laquo;</a>
</li>
<li v-for="page in users.pages" :key="page" :class="{active:users.currentPage===page}" class="page-item">
<a class="page-link" @click="users.gotoPage(page)">{{page}}</a>
</li>
<li :class="{disabled:!users.hasNextPage}" class="page-item">
<a class="page-link" @click="users.nextPage">&raquo;</a>
</li>
</ul>
<div class="col-12 col-md-6">
<Pagination
:currentPage="users.currentPage"
:totalCount="users.FilteredCount"
:pageSize="users.pageSize"
:hasNextPage="users.hasNextPage"
:hasPrevPage="users.hasPrevPage"
:onGotoPage="users.gotoPage"
:onNextPage="users.nextPage"
:onPrevPage="users.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">{{ $t('general.pagination.size') }}:</label>
<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="users.pageSize" class="form-select" @click="users.afterPageSizeChange()">
<select id="paginationSelector" v-model.number="users.pageSize" class="form-select" @change="users.afterPageSizeChange()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
@@ -197,5 +194,4 @@ onMounted(() => {
</div>
</div>
</div>
</div>
</template>