jdr-et-univers/pelican-jdr
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases 5 Activity

fix: better pagination

Browse source
This commit is contained in:
Kazhnuz 2023-02-14 20:33:30 +01:00
parent e99da55f13
commit f066f064f4
5 changed files with 180 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/tableaux/TableRenderer.vue
View file

@ -3,6 +3,7 @@ import { computed, reactive, onMounted } from "vue";
import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
import type { TableField, TableItem } from "@/utils/tables/types";
import type { PropType } from "vue";
import PageList from "./pagination/PageList.vue";
const props = defineProps({
fields: {
@ -53,12 +54,8 @@ const getTotalPage = computed(() => {
return table?.pageNumber;
});
function canGo(rel: number) {
return table?.canGo(rel);
}
function go(rel: number) {
table?.go(rel);
function goTo(page: number) {
table.currentPage = page - 1;
}
</script>
@ -94,29 +91,12 @@ function go(rel: number) {
</tr>
</tbody>
</table>
<div class="d-flex f-between f-middle nextprevious small-text">
<div>
<strong class="btn m-0 pages pl-0">
Page {{ currentPage + 1 }} / {{ getTotalPage + 1 }}
</strong>
</div>
<div>
<button
class="btn-grey btn-small m-0 mr-1"
:class="{ 'bg-grey': !canGo(-1), 'btn-secondary': canGo(-1) }"
@click="go(-1)"
>
Page précédante
</button>
<button
class="btn-grey btn-small m-0"
:class="{ 'bg-grey': !canGo(1), 'btn-secondary': canGo(1) }"
@click="go(1)"
>
Page suivante
</button>
</div>
<div class="d-flex f-end">
<PageList
:current-page="currentPage + 1"
:page-nbr="getTotalPage + 1"
@set-page="goTo"
></PageList>
</div>
</template>

0
src/components/tableaux/pagination/ElipsisPageButton.vue Normal file
View file

22
src/components/tableaux/pagination/PageButton.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{
page: number;
currentPage: number;
}>();
const isPage = computed(() => {
return props.page === props.currentPage;
});
</script>
<template>
<button
class="btn-small"
:class="{ 'btn-secondary': !isPage, 'bg-primary': isPage }"
:disabled="isPage"
>
{{ page }}
</button>
</template>

149
src/components/tableaux/pagination/PageList.vue Normal file
View file

@ -0,0 +1,149 @@
<script setup lang="ts">
import { computed } from "vue";
import PageButton from "./PageButton.vue";
const PAGE_NUMBER = 7;
const props = defineProps<{
pageNbr: number;
currentPage: number;
}>();
const emit = defineEmits(["setPage"]);
const pageToDraw = computed(() => {
return Math.min(props.pageNbr, PAGE_NUMBER);
});
const isAtStart = computed(() => {
return props.currentPage < 4;
});
const isAtEnd = computed(() => {
return props.currentPage > props.pageNbr - 2;
});
function setPage(page: number) {
emit("setPage", page);
}
</script>
<template>
<div>
<button
class="btn-small"
:disabled="currentPage <= 1"
:class="{ 'btn-secondary': currentPage > 1, 'bg-grey': currentPage <= 1 }"
@click="setPage(currentPage - 1)"
>
←
</button>
<span v-if="pageNbr <= PAGE_NUMBER">
<v-for v-for="index in pageToDraw" :key="index">
<PageButton
@click="setPage(index)"
:current-page="currentPage"
:page="index"
></PageButton>
</v-for>
</span>
<span v-else-if="isAtStart">
<PageButton
:current-page="currentPage"
:page="1"
@click="setPage(1)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="2"
@click="setPage(2)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="3"
@click="setPage(3)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="4"
@click="setPage(4)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="5"
@click="setPage(5)"
></PageButton>
<button disabled class="btn-small bg-grey disabled">…</button>
<PageButton :current-page="currentPage" :page="pageNbr"></PageButton>
</span>
<span v-else-if="isAtEnd">
<PageButton
:current-page="currentPage"
:page="1"
@click="setPage(1)"
></PageButton>
<button disabled class="btn-small bg-grey disabled">…</button>
<PageButton
:current-page="currentPage"
:page="pageNbr - 4"
@click="setPage(pageNbr - 4)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="pageNbr - 3"
@click="setPage(pageNbr - 3)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="pageNbr - 2"
@click="setPage(pageNbr - 2)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="pageNbr - 1"
@click="setPage(pageNbr - 1)"
></PageButton>
<PageButton
:current-page="currentPage"
:page="pageNbr"
@click="setPage(pageNbr)"
></PageButton>
</span>
<span v-else>
<PageButton
:current-page="currentPage"
:page="1"
@click="setPage(1)"
></PageButton>
<button disabled class="btn-small bg-grey disabled">…</button>
<PageButton
:current-page="currentPage"
:page="currentPage - 1"
@click="setPage(currentPage - 1)"
></PageButton>
<PageButton :current-page="currentPage" :page="currentPage"></PageButton>
<PageButton
:current-page="currentPage"
:page="currentPage + 1"
@click="setPage(currentPage + 1)"
></PageButton>
<button disabled class="btn-small bg-grey disabled">…</button>
<PageButton
:current-page="currentPage"
:page="pageNbr"
@click="setPage(pageNbr)"
></PageButton>
</span>
<button
class="btn-small"
:disabled="currentPage >= pageNbr"
:class="{
'btn-secondary': currentPage < pageNbr,
'bg-grey': currentPage >= pageNbr,
}"
@click="setPage(currentPage + 1)"
>
→
</button>
</div>
</template>

3
src/styles/mixins/_btns.scss
View file

@ -19,9 +19,6 @@
@mixin button-hover() {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
&:hover, &:active, &:focus {
background-color:transparent;
}
&:focus {
outline: none;