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

Added global search.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-02-22 05:08:06 +01:00
parent fc240710f3
commit 09df134558
15 changed files with 461 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/actors/bio.vue
View File

@@ -391,7 +391,7 @@ defineProps({
.flag {
height: 1rem;
margin: .25rem .25rem 0 0;
margin: .25rem .5rem 0 0;
}
.bio-name {

147
components/filters/actors.vue
View File

@@ -1,82 +1,89 @@
<template>
<div class="filter actors-container">
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${actors.length} actors`"
class="input input-inline filters-search"
>
<div
v-if="availableActors.length === 0"
class="filter-empty"
>No actors</div>
<template v-else>
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${actors.length} actors`"
class="input input-inline filters-search"
>
<div
class="filter-sort noselect"
@click="selectGender"
>
<div
v-if="!selectedGender"
class="gender-unselected"
><Icon icon="genders" /></div>
class="filter-sort noselect"
@click="selectGender"
>
<div
v-if="!selectedGender"
class="gender-unselected"
><Icon icon="genders" /></div>
<Gender
v-else
:gender="selectedGender"
class="gender"
/>
<Gender
v-else
:gender="selectedGender"
class="gender"
/>
</div>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
>
<Icon
icon="sort-alpha-asc"
/>
</div>
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'name'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
<ul
v-for="(actor, index) in selectedActors"
:key="`actor-${actor.id}`"
class="filter-items nolist"
>
<Icon
icon="sort-alpha-asc"
/>
</div>
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'name'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<ul
v-for="(actor, index) in selectedActors"
:key="`actor-${actor.id}`"
class="filter-items nolist"
>
<Actor
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="toggleActor"
type="selected"
@actor="(actor) => emit('update', 'actors', [actor])"
/>
</ul>
<UseVirtualList
:list="availableActors"
:options="{ itemHeight: 30 }"
style="height: 20rem;"
class="filter-items nolist"
>
<template #default="{ data: actor, index }">
<Actor
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="toggleActor"
type="available"
@actor="(actor) => emit('update', 'actors', [actor])"
:toggle-actor="(actor) => toggleActor(actor, true)"
type="selected"
@actor="(actor) => toggleActor(actor, false)"
/>
</template>
</UseVirtualList>
</ul>
<UseVirtualList
:list="availableActors"
:options="{ itemHeight: 30 }"
style="height: 20rem;"
class="filter-items nolist"
>
<template #default="{ data: actor, index }">
<Actor
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="(actor) => toggleActor(actor, true)"
type="available"
@actor="(actor) => toggleActor(actor, false)"
/>
</template>
</UseVirtualList>
</template>
</div>
</template>
@@ -124,13 +131,17 @@ const availableActors = computed(() => props.actors
const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
function toggleActor(actor) {
function toggleActor(actor, combine) {
if (props.filters.actors.some((filterActor) => filterActor.id === actor.id)) {
emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id));
return;
}
emit('update', 'actors', props.filters.actors.concat(actor));
if (combine) {
emit('update', 'actors', props.filters.actors.concat(actor));
} else {
emit('update', 'actors', [actor]);
}
}
function selectGender() {

133
components/filters/channels.vue
View File

@@ -1,75 +1,82 @@
<template>
<div class="filter channels-container">
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${channels.length} channels`"
class="input input-inline filters-search"
>
<div
v-if="entities.length === 0"
class="filter-empty"
>No channels</div>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
>
<Icon icon="sort-alpha-asc" />
<template v-else>
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${channels.length} channels`"
class="input input-inline filters-search"
>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
>
<Icon icon="sort-alpha-asc" />
</div>
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'name'"
>
<Icon icon="sort-numeric-desc" />
</div>
</div>
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'name'"
<ul
class="filter-items nolist"
>
<Icon icon="sort-numeric-desc" />
</div>
</div>
<ul
class="filter-items nolist"
>
<li
v-for="entity in entities"
:key="`filter-channel-${entity.id}`"
class="filter-item"
:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
@click="emit('update', 'entity', entity)"
>
<span class="filter-name">
<span
class="filter-text"
:title="entity.name"
>
<img
v-if="entity.isIndependent || entity.type === 'network'"
:src="`/logos/${entity.slug}/favicon_dark.png`"
class="favicon"
>
<Icon
v-else
icon="arrow-up4"
/>
{{ entity.name }}
</span>
<span class="filter-details">
<li
v-for="entity in entities"
:key="`filter-channel-${entity.id}`"
class="filter-item"
:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
@click="emit('update', 'entity', entity)"
>
<span class="filter-name">
<span
v-if="entity.count"
class="filter-count"
>{{ entity.count }}</span>
class="filter-text"
:title="entity.name"
>
<img
v-if="entity.isIndependent || entity.type === 'network'"
:src="`/logos/${entity.slug}/favicon_dark.png`"
class="favicon"
>
<Icon
v-if="filters.entity?.id === entity.id"
icon="cross2"
class="filter-remove"
@click.native.stop="emit('update', 'entity', null)"
/>
<Icon
v-else
icon="arrow-up4"
/>
{{ entity.name }}
</span>
<span class="filter-details">
<span
v-if="entity.count"
class="filter-count"
>{{ entity.count }}</span>
<Icon
v-if="filters.entity?.id === entity.id"
icon="cross2"
class="filter-remove"
@click.native.stop="emit('update', 'entity', null)"
/>
</span>
</span>
</span>
</li>
</ul>
</li>
</ul>
</template>
</div>
</template>

6
components/filters/filters.vue
View File

@@ -284,6 +284,12 @@ function toggleFilters(state) {
color: var(--shadow-weak-10);
font-size: .9rem;
}
.filter-empty {
padding: .5rem;
color: var(--shadow);
font-style: italic;
}
</style>
<style scoped>

167
components/filters/tags.vue
View File

@@ -1,91 +1,98 @@
<template>
<div class="filter tags-container">
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${tags.length} tags`"
class="input input-inline filters-search"
>
<div
v-if="tags.length === 0"
class="filter-empty"
>No tags</div>
<div
v-show="order === 'priority'"
class="filter-sort order noselect"
@click="order = 'name'"
>
<Icon
icon="star"
/>
</div>
<template v-else>
<div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${tags.length} tags`"
class="input input-inline filters-search"
>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
>
<Icon
icon="sort-alpha-asc"
/>
</div>
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'priority'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<ul
v-for="(group, groupKey) in groupedtags"
:key="groupKey"
class="filter-items nolist"
:class="groupKey"
>
<li
v-for="(tag, index) in group"
:key="`filter-tag-${tag.id}`"
class="filter-item"
:class="{
selected: filters.tags.includes(tag.slug),
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
disabled: groupKey === 'page',
}"
@click="emit('update', 'tags', [tag.slug])"
>
<div
class="filter-include"
@click.stop="toggleTag(tag)"
v-show="order === 'priority'"
class="filter-sort order noselect"
@click="order = 'name'"
>
<Icon
icon="checkmark"
class="filter-add"
/>
<Icon
icon="cross2"
class="filter-remove"
icon="star"
/>
</div>
<span class="filter-name tag-name">
<span
class="filter-text"
:title="tag.name"
>{{ tag.name }}</span>
<div
v-show="order === 'name'"
class="filter-sort order noselect"
@click="order = 'count'"
>
<Icon
icon="sort-alpha-asc"
/>
</div>
<span class="tag-details">
<div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'priority'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<ul
v-for="(group, groupKey) in groupedTags"
:key="groupKey"
class="filter-items nolist"
:class="groupKey"
>
<li
v-for="(tag, index) in group"
:key="`filter-tag-${tag.id}`"
class="filter-item"
:class="{
selected: filters.tags.includes(tag.slug),
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
disabled: groupKey === 'page',
}"
@click.stop="toggleTag(tag, false)"
>
<div
class="filter-include"
@click.stop="toggleTag(tag, true)"
>
<Icon
icon="checkmark"
class="filter-add"
/>
<Icon
icon="cross2"
class="filter-remove"
/>
</div>
<span class="filter-name tag-name">
<span
v-if="tag.count"
class="filter-count"
>{{ tag.count }}</span>
class="filter-text"
:title="tag.name"
>{{ tag.name }}</span>
<span class="tag-details">
<span
v-if="tag.count"
class="filter-count"
>{{ tag.count }}</span>
</span>
</span>
</span>
</li>
</ul>
</li>
</ul>
</template>
</div>
</template>
@@ -133,7 +140,7 @@ const priorityTags = [
'lesbian',
];
const groupedtags = computed(() => {
const groupedTags = computed(() => {
const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug));
const filtered = props.tags.filter((tag) => !props.filters.tags.includes(tag.slug)
&& tag.id !== pageTag?.id
@@ -173,13 +180,17 @@ const groupedtags = computed(() => {
};
});
function toggleTag(tag) {
function toggleTag(tag, combine) {
if (props.filters.tags.includes(tag.slug)) {
emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug));
return;
}
emit('update', 'tags', props.filters.tags.concat(tag.slug));
if (combine) {
emit('update', 'tags', props.filters.tags.concat(tag.slug));
} else {
emit('update', 'tags', [tag.slug]);
}
}
</script>

70
components/header/header.vue
View File

@@ -1,15 +1,15 @@
<template>
<header class="header">
<Link href="/">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<nav class="nav">
<Link href="/">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<ul class="nav-list nolist">
<li class="nav-item">
<Link
@@ -47,17 +47,42 @@
</li>
</ul>
</nav>
<form
class="search"
@submit.prevent="search"
>
<input
v-model="query"
type="search"
placeholder="Search"
class="input"
>
<Icon icon="search" />
</form>
</header>
</template>
<script setup>
import { ref, inject } from 'vue';
import navigate from '#/src/navigate.js';
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
const pageContext = inject('pageContext');
const query = ref(pageContext.urlParsed.search.q || '');
function search() {
navigate('/search', { q: query.value }, { redirect: true });
}
</script>
<style scoped>
.header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000; /* make sure shadow shows up above content */
box-shadow: 0 0 3px var(--shadow-weak-10);
}
@@ -78,7 +103,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
}
.nav {
display: inline-block;
display: flex;
align-items: center;
}
.nav-item .link {
@@ -100,4 +126,28 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
color: var(--primary);
}
}
.search {
height: 100%;
display: flex;
align-items: center;
flex-direction: row-reverse;
.input {
height: 100%;
border: none;
border-radius: 0;
border-left: solid 1px var(--shadow-weak-30);
background: var(--background);
}
.icon {
margin-right: .75rem;
fill: var(--shadow-weak-10);
}
.input:focus + .icon {
fill: var(--primary);
}
}
</style>

12
components/pagination/pagination.vue
View File

@@ -95,6 +95,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
query: {
type: String,
default: null,
},
includeQuery: {
type: Boolean,
default: true,
@@ -148,6 +152,14 @@ function go(page, event) {
}
function getPath(page) {
if (!routeParams.path && props.includeQuery) {
return `${pageContext.urlParsed.pathname}${page}${urlParsed.searchOriginal}`;
}
if (!routeParams.path) {
return `${pageContext.urlParsed.pathname}${page}`;
}
const path = parse(routeParams.path)
.map((segment) => {
if (segment.name === 'page') {

57
components/scenes/scenes.vue
View File

@@ -6,6 +6,16 @@
v-if="showFilters"
:class="{ loading }"
>
<div class="filter">
<input
v-model="filters.search"
type="search"
placeholder="Search scenes"
class="search input"
@search="search"
>
</div>
<TagsFilter
:filters="filters"
:tags="aggTags"
@@ -38,12 +48,16 @@
<select
v-model="scope"
class="input"
@change="search"
@change="search({ autoScope: false })"
>
<option value="likes">Likes</option>
<option value="latest">Latest</option>
<option value="upcoming">Upcoming</option>
<option value="new">New</option>
<option
value="results"
:disabled="!filters.search"
>Relevance</option>
</select>
</div>
@@ -108,7 +122,7 @@ import Scene from '#/components/scenes/tile.vue';
import Pagination from '#/components/pagination/pagination.vue';
import Ellipsis from '#/components/loading/ellipsis.vue';
defineProps({
const props = defineProps({
showFilters: {
type: Boolean,
default: true,
@@ -121,6 +135,10 @@ defineProps({
type: Boolean,
default: false,
},
defaultScope: {
type: String,
default: 'latest',
},
});
const { pageProps, routeParams, urlParsed } = inject('pageContext');
@@ -137,7 +155,7 @@ const aggTags = ref(pageProps.aggTags || []);
const aggChannels = ref(pageProps.aggChannels || []);
const currentPage = ref(Number(routeParams.page));
const scope = ref(routeParams.scope);
const scope = ref(routeParams.scope || props.defaultScope);
const total = ref(Number(pageProps.total));
const loading = ref(false);
@@ -150,6 +168,7 @@ const channels = Object.fromEntries(aggChannels.value.filter((channel) => channe
const queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e];
const filters = ref({
search: urlParsed.search.q,
tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
entity: queryEntity,
actors: queryActors,
@@ -175,18 +194,37 @@ function getPath(targetScope, preserveQuery) {
return path;
}
async function search(resetPage = true) {
if (resetPage) {
async function search(options = {}) {
if (options.resetPage !== false) {
currentPage.value = 1;
}
const query = {};
if (options.autoScope !== false) {
if (filters.value.search) {
scope.value = 'results';
}
if (!filters.value.search && scope.value === 'results') {
scope.value = 'latest';
}
}
const query = {
q: filters.value.search || undefined,
};
const entity = filters.value.entity || pageEntity;
const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
loading.value = true;
navigate(getPath(scope.value, false), {
...query,
actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
tags: filters.value.tags.join(',') || undefined,
e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
}, { redirect: false });
const res = await get('/scenes', {
...query,
actors: [pageActor, ...filters.value.actors].filter(Boolean).map((filterActor) => getActorIdentifier(filterActor)).join(','), // if we're on an actor page, that actor ID needs to be included
@@ -205,13 +243,6 @@ async function search(resetPage = true) {
loading.value = false;
events.emit('scrollUp');
navigate(getPath(scope.value, false), {
...query,
actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
tags: filters.value.tags.join(',') || undefined,
e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
}, { redirect: false });
}
function updateFilter(prop, value, reload = true) {