DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fixed SQL total and pagination, showing end of result info. Hiding heart from scene tiles when not logged in.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-03-17 22:15:11 +01:00
parent 3f36c0ae0a
commit 3238e678ef
6 changed files with 114 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/pagination/pagination.vue
View File

@@ -1,81 +1,88 @@
<template>
<nav class="pagination">
<ul class="pages nolist">
<li>
<Link
:href="getPath(1)"
:class="{ disabled: !hasPrevPage }"
class="page first nolink"
@click="(event) => go(1, event)"
><Icon icon="first2" /></Link>
</li>
<div class="pagination-container">
<div
v-if="currentPage === pageTotal && total > env.maxMatches"
class="more"
>Results are truncated, apply a filter to find more.</div>
<li>
<Link
:href="hasPrevPage ? getPath(currentPage - 1) : null"
:class="{ disabled: !hasPrevPage }"
class="page prev nolink"
@click="(event) => hasPrevPage && go(currentPage - 1, event)"
><Icon icon="arrow-left" /></Link>
</li>
</ul>
<div class="index">
<ul class="pages before wrap nolist">
<li
v-for="prevPage in prevPages"
:key="`page-${prevPage}`"
>
<nav class="pagination">
<ul class="pages nolist">
<li>
<Link
:href="getPath(prevPage)"
:class="{ active: prevPage === currentPage }"
class="page nolink"
@click="(event) => go(prevPage, event)"
>{{ prevPage }}</Link>
:href="getPath(1)"
:class="{ disabled: !hasPrevPage }"
class="page first nolink"
@click="(event) => go(1, event)"
><Icon icon="first2" /></Link>
</li>
<li>
<Link
:href="hasPrevPage ? getPath(currentPage - 1) : null"
:class="{ disabled: !hasPrevPage }"
class="page prev nolink"
@click="(event) => hasPrevPage && go(currentPage - 1, event)"
><Icon icon="arrow-left" /></Link>
</li>
</ul>
<div class="index">
<ul class="pages before wrap nolist">
<li
v-for="prevPage in prevPages"
:key="`page-${prevPage}`"
>
<Link
:href="getPath(prevPage)"
:class="{ active: prevPage === currentPage }"
class="page nolink"
@click="(event) => go(prevPage, event)"
>{{ prevPage }}</Link>
</li>
</ul>
<ul class="pages nolist">
<li>
<div class="page active">{{ currentPage }}</div>
</li>
</ul>
<ul class="pages after wrap nolist">
<li
v-for="nextPage in nextPages"
:key="`page-${nextPage}`"
>
<Link
:href="getPath(nextPage)"
:class="{ active: nextPage === currentPage }"
class="page nolink"
@click="(event) => go(nextPage, event)"
>{{ nextPage }}</Link>
</li>
</ul>
</div>
<ul class="pages nolist">
<li>
<div class="page active">{{ currentPage }}</div>
</li>
</ul>
<ul class="pages after wrap nolist">
<li
v-for="nextPage in nextPages"
:key="`page-${nextPage}`"
>
<Link
:href="getPath(nextPage)"
:class="{ active: nextPage === currentPage }"
class="page nolink"
@click="(event) => go(nextPage, event)"
>{{ nextPage }}</Link>
:href="hasNextPage ? getPath(currentPage + 1) : null"
:class="{ disabled: !hasNextPage }"
class="page next nolink"
@click="(event) => hasNextPage && go(currentPage + 1, event)"
><Icon icon="arrow-right" /></Link>
</li>
<li>
<Link
:href="getPath(pageTotal)"
:class="{ disabled: !hasNextPage }"
class="page last nolink"
@click="(event) => go(pageTotal, event)"
><Icon icon="last2" /></Link>
</li>
</ul>
</div>
<ul class="pages nolist">
<li>
<Link
:href="hasNextPage ? getPath(currentPage + 1) : null"
:class="{ disabled: !hasNextPage }"
class="page next nolink"
@click="(event) => hasNextPage && go(currentPage + 1, event)"
><Icon icon="arrow-right" /></Link>
</li>
<li>
<Link
:href="getPath(pageTotal)"
:class="{ disabled: !hasNextPage }"
class="page last nolink"
@click="(event) => go(pageTotal, event)"
><Icon icon="last2" /></Link>
</li>
</ul>
</nav>
</nav>
</div>
</template>
<script setup>
@@ -103,18 +110,28 @@ const props = defineProps({
type: Boolean,
default: true,
},
useMaxMatches: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['navigation']);
const pageContext = inject('pageContext');
const { routeParams, urlParsed, pageProps } = pageContext;
const {
routeParams,
urlParsed,
pageProps,
env,
} = pageContext;
const currentPage = computed(() => props.page || Number(routeParams?.page));
const limit = computed(() => props.limit || Number(pageProps.limit) || 30);
const total = computed(() => props.total || Number(pageProps.total));
const pageTotal = computed(() => Math.ceil(total.value / limit.value));
const pageTotal = computed(() => Math.ceil((props.useMaxMatches ? Math.min(total.value, env.maxMatches) : total.value) / limit.value));
const hasNextPage = computed(() => currentPage.value + 1 <= pageTotal.value);
const hasPrevPage = computed(() => currentPage.value - 1 >= 1);
@@ -179,6 +196,12 @@ function getPath(page) {
</script>
<style scoped>
.pagination-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.pagination {
height: 5rem;
display: flex;
@@ -242,4 +265,11 @@ function getPath(page) {
.next {
margin-left: .5rem;
}
.more {
padding: 2rem;
text-align: center;
color: var(--shadow-strong-10);
font-size: 1.1rem;
}
</style>