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

Added actors pagination.

This commit is contained in:
DebaucheryLibrarian 2024-01-04 01:49:16 +01:00
parent 424546029d
commit aad43e865a
17 changed files with 284 additions and 105 deletions

4
assets/css/inputs.css
View File

@ -182,7 +182,7 @@
.filter-label {
display: flex;
justify-content: space-between;
padding: .5rem 0 .25rem .5rem;
padding: .5rem 0 .25rem .25rem;
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
@ -209,7 +209,7 @@
height: 1.25rem;
appearance: none;
border-radius: 1rem;
background-color: var(--shadow-weak-30);
background-color: var(--shadow-weak-40);
background-image: radial-gradient(circle, var(--shadow-weak-10) .3rem, transparent calc(.3rem + 1px));
cursor: pointer;

2
assets/css/theme.css
View File

@ -57,5 +57,5 @@
--enabled-background: rgba(0, 255, 0, .1);
--disabled: #c20;
--disabled-background: rgba(255, 0, 0, .1);
--disabled-handle: #aaa;
--disabled-handle: var(--grey-light-10);
}

8
components/actors/tile.vue
View File

@ -62,12 +62,13 @@ defineProps({
.actor {
display: flex;
flex-direction: column;
width: 10rem;
height: 15rem;
width: 100%;
aspect-ratio: 2/3;
position: relative;
border-radius: .25rem;
margin: .25rem;
box-shadow: 0 0 3px var(--shadow-weak-30);
overflow: hidden;
&:hover {
box-shadow: 0 0 3px var(--shadow-weak-20);
@ -82,6 +83,9 @@ defineProps({
padding: .25rem .5rem;
font-weight: bold;
font-size: .9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: all;
}

4
components/form/range.vue
View File

@ -161,8 +161,8 @@ async function setRange(prop, value) {
border-radius: .625rem;
&.disabled {
--slider-range: var(--shadow-weak-30);
--slider-thumb: var(--grey-dark-10);
--slider-range: var(--shadow-weak-40);
--slider-thumb: var(--disabled-handle);
}
}

119
components/pagination/pagination.vue
View File

@ -3,17 +3,19 @@
<ul class="pages nolist">
<li>
<Link
:href="`/updates/${routeParams?.scope}/1`"
:href="getPath(1)"
:class="{ disabled: !hasPrevPage }"
class="page first nolink"
@click="(event) => go(1, event)"
><Icon icon="first2" /></Link>
</li>
<li>
<Link
:href="hasPrevPage ? `/updates/${routeParams?.scope}/${currentPage - 1}` : null"
: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>
@ -21,14 +23,15 @@
<div class="index">
<ul class="pages before wrap nolist">
<li
v-for="page in prevPages"
:key="`page-${page}`"
v-for="prevPage in prevPages"
:key="`page-${prevPage}`"
>
<Link
:href="`/updates/${routeParams?.scope}/${page}`"
:href="getPath(prevPage)"
:class="{ active: prevPage === currentPage }"
class="page nolink"
:class="{ active: page === currentPage }"
>{{ page }}</Link>
@click="(event) => go(prevPage, event)"
>{{ prevPage }}</Link>
</li>
</ul>
@ -40,14 +43,15 @@
<ul class="pages after wrap nolist">
<li
v-for="page in nextPages"
:key="`page-${page}`"
v-for="nextPage in nextPages"
:key="`page-${nextPage}`"
>
<Link
:href="`/updates/${routeParams?.scope}/${page}`"
:href="getPath(nextPage)"
:class="{ active: nextPage === currentPage }"
class="page nolink"
:class="{ active: page === currentPage }"
>{{ page }}</Link>
@click="(event) => go(nextPage, event)"
>{{ nextPage }}</Link>
</li>
</ul>
</div>
@ -55,17 +59,19 @@
<ul class="pages nolist">
<li>
<Link
:href="hasNextPage ? `/updates/${routeParams?.scope}/${currentPage + 1}` : null"
: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="`/updates/${routeParams?.scope}/${pageTotal}`"
:href="getPath(pageTotal)"
:class="{ disabled: !hasNextPage }"
class="page last nolink"
@click="(event) => go(pageTotal, event)"
><Icon icon="last2" /></Link>
</li>
</ul>
@ -73,41 +79,87 @@
</template>
<script setup>
import { inject } from 'vue';
import { computed, inject } from 'vue';
import { parse } from 'path-to-regexp';
const { routeParams, pageProps } = inject('pageContext');
const currentPage = Number(routeParams?.page);
const limit = Number(pageProps.limit) || 30;
const total = Number(pageProps.total);
const pageTotal = Math.ceil(total / limit);
const hasNextPage = currentPage + 1 <= pageTotal;
const hasPrevPage = currentPage - 1 >= 1;
const props = defineProps({
page: {
type: Number,
default: null,
},
total: {
type: Number,
default: null,
},
redirect: {
type: Boolean,
default: true,
},
includeQuery: {
type: Boolean,
default: true,
},
});
console.log(routeParams);
const emit = defineEmits(['navigation']);
const prevPages = Array.from({ length: 4 }, (value, index) => {
const page = currentPage - index - 1;
const pageContext = inject('pageContext');
const { routeParams, urlParsed, pageProps } = 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 hasNextPage = computed(() => currentPage.value + 1 <= pageTotal.value);
const hasPrevPage = computed(() => currentPage.value - 1 >= 1);
const prevPages = computed(() => Array.from({ length: 4 }, (value, index) => {
const page = currentPage.value - index - 1;
if (page < 1) {
return null;
}
return page;
}).filter(Boolean);
}).filter(Boolean));
const nextPages = Array.from({ length: 4 }, (value, index) => {
const page = currentPage + index + 1;
const nextPages = computed(() => Array.from({ length: 4 }, (value, index) => {
const page = currentPage.value + index + 1;
if (page > pageTotal) {
if (page > pageTotal.value) {
return null;
}
return page;
}).filter(Boolean);
}).filter(Boolean));
console.log(total, limit, currentPage);
console.log(prevPages);
console.log(nextPages);
function go(page, event) {
if (!props.redirect) {
event.preventDefault();
history.pushState({}, '', event.target.href); // eslint-disable-line no-restricted-globals
currentPage.value = page;
}
emit('navigation', {
href: event.target.href,
page,
});
}
function getPath(page) {
const path = parse(routeParams.path)
.map((segment) => (segment.name === 'page' ? String(page) : routeParams[segment.name] || segment))
.join('/');
if (props.includeQuery && urlParsed.searchOriginal) {
return `${path}${urlParsed.searchOriginal}`;
}
return path;
}
</script>
<style scoped>
@ -115,6 +167,7 @@ console.log(nextPages);
height: 5rem;
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 1rem;
font-size: 0;
overflow: hidden;

2
components/scenes/scenes.vue
View File

@ -34,7 +34,7 @@
</template>
<script setup>
import { defineProps, inject } from 'vue';
import { inject } from 'vue';
import Scene from './tile.vue';
import Pagination from '../pagination/pagination.vue';

23
package-lock.json generated
View File

@ -23,6 +23,7 @@
"manticoresearch": "^4.0.0",
"mitt": "^3.0.1",
"nanoid": "^5.0.4",
"path-to-regexp": "^6.2.1",
"pg": "^8.11.3",
"sirv": "^2.0.3",
"vike": "^0.4.150",
@ -4381,6 +4382,11 @@
"resolved": "https://registry.npmjs.org/express-query-boolean/-/express-query-boolean-2.0.0.tgz",
"integrity": "sha512-4dU/1HPm8lkTPR12+HFUXqCarcsC19OKOkb4otLOuADfPYrQMaugPJkSmxNsqwmWYjozvT6vdTiqkgeBHkzOow=="
},
"node_modules/express/node_modules/path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"node_modules/express/node_modules/safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -5840,9 +5846,9 @@
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
},
"node_modules/path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
},
"node_modules/pg": {
"version": "8.11.3",
@ -10758,6 +10764,11 @@
"vary": "~1.1.2"
},
"dependencies": {
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -11806,9 +11817,9 @@
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
},
"pg": {
"version": "8.11.3",

1
package.json
View File

@ -23,6 +23,7 @@
"manticoresearch": "^4.0.0",
"mitt": "^3.0.1",
"nanoid": "^5.0.4",
"path-to-regexp": "^6.2.1",
"pg": "^8.11.3",
"sirv": "^2.0.3",
"vike": "^0.4.150",

141
pages/actors/+Page.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="page">
<form
v-show="showFilters"
class="filters"
@submit.prevent
>
@ -192,7 +193,7 @@
v-if="!filters.country"
v-model="countryQuery"
type="search"
placeholder="Search country"
placeholder="Filter country"
class="input input-inline countries-search"
>
@ -221,16 +222,45 @@
</div>
</form>
<ul class="actors nolist">
<li
v-for="actor in actors"
:key="`actor-${actor.id}`"
<div class="actors-anchor">
<div
class="sidebar-toggle"
@click="toggleFilters"
>
<ActorTile
:actor="actor"
<Icon
v-show="showFilters"
icon="arrow-left3"
/>
</li>
</ul>
<Icon
v-show="!showFilters"
icon="arrow-right3"
/>
</div>
<div
ref="container"
class="actors-container"
>
<ul class="actors nolist">
<li
v-for="actor in actors"
:key="`actor-${actor.id}`"
>
<ActorTile
:actor="actor"
/>
</li>
</ul>
<Pagination
:page="currentPage"
:total="total"
:redirect="false"
@navigation="paginate"
/>
</div>
</div>
</div>
</template>
@ -242,16 +272,21 @@ import navigate from '#/src/navigate.js';
import { get } from '#/src/api.js';
import ActorTile from '#/components/actors/tile.vue';
import Pagination from '#/components/pagination/pagination.vue';
import Gender from '#/components/actors/gender.vue';
import Checkbox from '#/components/form/checkbox.vue';
import RangeFilter from '#/components/filters/range.vue';
import Countries from '#/components/filters/countries.vue';
const { pageProps, urlParsed } = inject('pageContext');
const pageContext = inject('pageContext');
const { pageProps, urlParsed, routeParams } = pageContext;
const q = ref(urlParsed.search.q);
const actors = ref([]);
const container = ref(null);
const showFilters = ref(true);
const countries = ref(pageProps.countries);
const countryQuery = ref('');
@ -266,6 +301,9 @@ actors.value = pageProps.actors;
const braSizes = 'ABCDEFGHIJKZ'.split('');
const naturalBoobsValues = [true, undefined, false];
const currentPage = ref(Number(routeParams.page));
const total = ref(Number(pageProps.total));
const filters = ref({
gender: urlParsed.search.gender,
ageRequired: !!urlParsed.search.age,
@ -284,9 +322,11 @@ const filters = ref({
avatarRequired: !!urlParsed.search.avatar,
});
console.log(filters.value.dobType);
async function search(resetPage = true) {
if (resetPage) {
currentPage.value = 1;
}
async function search() {
const query = {
q: q.value || undefined,
gender: filters.value.gender || undefined,
@ -301,12 +341,21 @@ async function search() {
avatar: filters.value.avatarRequired || undefined,
};
navigate('/actors', query, { redirect: false });
const res = await get('/actors', query);
const res = await get('/actors', { ...query, page: currentPage.value }); // client uses param rather than query pagination
actors.value = res.actors;
total.value = res.total;
countries.value = res.countries;
container.value.scrollTop = 0;
navigate(`/actors/${currentPage.value}`, query, { redirect: false });
}
function paginate({ page }) {
currentPage.value = page;
search(false);
}
function updateFilter(prop, value, reload = true) {
@ -316,6 +365,10 @@ function updateFilter(prop, value, reload = true) {
search();
}
}
function toggleFilters() {
showFilters.value = !showFilters.value;
}
</script>
<style>
@ -355,6 +408,7 @@ function updateFilter(prop, value, reload = true) {
.filters {
width: 17rem;
position: relative;
flex-shrink: 0;
border-right: solid 1px var(--shadow-weak-30);
overflow-y: auto;
@ -365,17 +419,57 @@ function updateFilter(prop, value, reload = true) {
}
.filter {
padding: .5rem .25rem;
border-bottom: solid 1px var(--shadow-weak-30);
padding: .5rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
}
}
.actors-anchor {
flex-grow: 1;
position: relative;
}
.sidebar-toggle {
width: 1.5rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: .5rem;
left: 0;
z-index: 10;
border-radius: 0 .25rem .25rem 0;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow);
}
&:hover {
cursor: pointer;
.icon {
fill: var(--primary);
}
}
}
.actors-container {
height: 100%;
box-sizing: border-box;
padding: 1rem;
overflow-y: auto;
}
.actors {
display: grid;
flex-grow: 1;
grid-template-columns: repeat(auto-fill, 10rem);
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: .25rem;
padding: 1rem;
overflow-y: auto;
}
.genders {
@ -430,10 +524,17 @@ function updateFilter(prop, value, reload = true) {
.select {
flex-grow: 1;
color: var(--shadow-strong-10);
option {
color: var(--text);
}
}
.countries-container {
border-bottom: solid 1px var(--shadow-weak-30);
padding: .25rem 0;
margin-bottom: .5rem;
}
.countries-search {

2
pages/actors/+onBeforeRender.js
View File

@ -9,7 +9,7 @@ export async function onBeforeRender(pageContext) {
total,
} = await fetchActors(curateActorsQuery(pageContext.urlQuery), {
page: Number(pageContext.routeParams.page) || 1,
limit: Number(pageContext.urlParsed.search.limit) || 50,
limit: Number(pageContext.urlParsed.search.limit) || 120,
});
return {

20
pages/actors/+route.js Normal file
View File

@ -0,0 +1,20 @@
import { match } from 'path-to-regexp';
// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
const path = '/actors/:page?';
const urlMatch = match(path, { decode: decodeURIComponent });
export default (pageContext) => {
const matched = urlMatch(pageContext.urlPathname);
if (matched) {
return {
routeParams: {
page: matched.params.page || '1',
path,
},
};
}
return false;
};

2
pages/actors/@actorId/+route.js
View File

@ -1 +1 @@
export default '/actors/@actorId/*';
export default '/actor/@actorId/*';

2
pages/updates/+onBeforeRender.js
View File

@ -1,4 +1,4 @@
import { fetchLatest, fetchUpcoming, fetchNew } from '../../src/scenes';
import { fetchLatest, fetchUpcoming, fetchNew } from '#/src/scenes.js';
async function fetchScenes(scope, page, limit) {
if (scope === 'new') {

41
pages/updates/+route.js
View File

@ -1,33 +1,20 @@
import { resolveRoute } from 'vike/routing';
import { match } from 'path-to-regexp';
// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
const path = '/updates/:scope?/:page?';
const urlMatch = match(path, { decode: decodeURIComponent });
export default (pageContext) => {
{
const result = resolveRoute('/updates/@scope/@page', pageContext.urlPathname);
const matched = urlMatch(pageContext.urlPathname);
if (result.match) {
return result;
}
}
{
const result = resolveRoute('/updates/@scope', pageContext.urlPathname);
if (result.match) {
result.routeParams.page = '1';
return result;
}
}
{
const result = resolveRoute('/updates', pageContext.urlPathname);
if (result.match) {
result.routeParams.scope = 'latest';
result.routeParams.page = '1';
return result;
}
if (matched) {
return {
routeParams: {
scope: matched.params.scope || 'latest',
page: matched.params.page || '1',
path,
},
};
}
return false;

14
src/actors.js
View File

@ -62,20 +62,23 @@ export async function fetchActorsById(actorIds) {
.groupBy('actors.id', 'avatars.id'),
]);
return actorIds.map((actorId) => {
const curatedActors = actorIds.map((actorId) => {
const actor = actors.find((actorEntry) => actorEntry.id === actorId);
if (!actor) {
console.warn(`Can't find ${actorId}`);
return null;
}
return curateActor(actor);
}).filter(Boolean);
return curatedActors;
}
function curateOptions(options) {
if (options?.limit > 100) {
throw new HttpError('Limit must be <= 100', 400);
if (options?.limit > 120) {
throw new HttpError('Limit must be <= 120', 400);
}
return {
@ -108,8 +111,6 @@ function buildQuery(filters) {
['gender', 'country'].forEach((attribute) => {
if (filters[attribute]) {
console.log(attribute, filters[attribute]);
query.bool.must.push({
equals: {
[attribute]: filters[attribute],
@ -197,6 +198,9 @@ export async function fetchActors(filters, rawOptions) {
const options = curateOptions(rawOptions);
const { query, expressions } = buildQuery(filters);
console.log(options);
console.log('offset', (options.page - 1) * options.limit);
const result = await searchApi.search({
index: 'actors',
query,

2
src/scenes.js
View File

@ -24,8 +24,6 @@ function curateScene(rawScene, assets) {
return null;
}
console.log(assets.channel);
return {
id: rawScene.id,
title: rawScene.title,

2
src/web/actors.js
View File

@ -26,7 +26,7 @@ export async function fetchActorsApi(req, res) {
total,
} = await fetchActors(curateActorsQuery(req.query), {
page: Number(req.query.page) || 1,
limit: Number(req.query.limit) || 50,
limit: Number(req.query.limit) || 120,
});
res.send({