Improved scene actors filter.

components/scenes/scenes.vue

@@ -1,35 +1,18 @@
 <template>
 	<div class="page">
 		<Filters v-if="showFilters">
-			<ul class="filter-actors selected nolist">
-				<li
-					v-for="aggActor in selectedActors"
-					:key="`filter-actor-${aggActor.id}`"
-					class="filter-actor"
-					@click="updateFilter('actors', [...filters.actors, aggActor.id])"
-				>
-					{{ aggActor.name }}
-
-					<button
-						v-if="filters.actors.includes(aggActor.id)"
-						class="filter-actor-remove"
-						@click.stop="updateFilter('actors', filters.actors.filter((actorId) => actorId !== aggActor.id))"
-					><Icon icon="cross2" /></button>
-				</li>
-			</ul>
-
-			<ul class="filter-actors available nolist">
-				<li
-					v-for="aggActor in actors"
-					:key="`filter-actor-${aggActor.id}`"
-					class="filter-actor"
-					@click="updateFilter('actors', [...filters.actors, aggActor.id])"
-				>{{ aggActor.name }}</li>
-			</ul>
+			<ActorsFilter
+				:filters="filters"
+				:actors="actors"
+				@update="updateFilter"
+			/>
 		</Filters>
 
 		<div class="scenes-container">
-			<div class="scenes-header">
+			<div
+				v-if="showMeta"
+				class="scenes-header"
+			>
 				<div class="meta">{{ total }} results</div>
 			</div>
 
@@ -68,7 +51,7 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, inject } from 'vue';
 import { parse } from 'path-to-regexp';
 
 import navigate from '#/src/navigate.js';
@@ -76,6 +59,7 @@ import { get } from '#/src/api.js';
 import events from '#/src/events.js';
 
 import Filters from '#/components/filters/filters.vue';
+import ActorsFilter from '#/components/filters/actors.vue';
 import Scene from './tile.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -84,13 +68,15 @@ defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showMeta: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 const { pageProps, routeParams, urlParsed } = inject('pageContext');
 const { scope } = routeParams;
 
-console.log(scope);
-
 const {
 	actor,
 } = pageProps;
@@ -105,24 +91,6 @@ const filters = ref({
 	actors: urlParsed.search.actors?.split(',').filter(Boolean).map((actorId) => Number(actorId)) || [],
 });
 
-/*
-const sortedActors = computed(() => Array.from(actors.value).sort((actorA, actorB) => {
-	if (filters.value.actors.includes(actorA.id) && !filters.value.actors.includes(actorB.id)) {
-		return -1;
-	}
-
-	if (filters.value.actors.includes(actorB.id) && !filters.value.actors.includes(actorA.id)) {
-		return 1;
-	}
-
-	return 0;
-}));
-*/
-
-const selectedActors = computed(() => actors.value.filter((filterActor) => filters.value.actors.includes(filterActor.id)));
-
-console.log(filters.value.actors);
-
 function getPath(targetScope, preserveQuery) {
 	const path = parse(routeParams.path)
 		.map((segment) => {
@@ -152,8 +120,6 @@ async function search(resetPage = true) {
 
 	const query = {};
 
-	console.log(query);
-
 	const res = await get('/scenes', {
 		...query,
 		actors: [actor?.id, filters.value.actors].filter(Boolean).join(','), // if we're on an actor page, actor ID needs to be included
@@ -199,6 +165,7 @@ function updateFilter(prop, value, reload = true) {
 .scenes-container {
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 }
 
 .meta {
@@ -231,39 +198,4 @@ function updateFilter(prop, value, reload = true) {
 		font-weight: bold;
 	}
 }
-
-.filter-actors {
-	max-height: 15rem;
-
-	&.available {
-		overflow-y: auto;
-	}
-}
-
-.filter-actor {
-	display: flex;
-	justify-content: space-between;
-
-	&:hover {
-		color: var(--primary);
-		cursor: pointer;
-	}
-}
-
-.filter-actor-remove {
-	background: none;
-	border: none;
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.icon {
-			fill: var(--error);
-		}
-	}
-}
 </style>