Added global search.
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user