traxxx-web/components/filters/actors.vue

<template>
	<div class="actors-container">
		<div class="actors-filters">
			<input
				v-model="search"
				type="search"
				placeholder="Filter actors"
				class="input input-inline actors-search"
			>

			<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"
				/>
			</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>

		<ul
			v-for="(group, groupKey) in groupedActors"
			:key="groupKey"
			class="filter-items nolist"
		>
			<li
				v-for="(actor, index) in group"
				:key="`filter-actor-${actor.id}`"
				class="filter-item"
				:class="{ selected: filters.actors.includes(actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }"
				@click="emit('update', 'actors', [actor.id])"
			>
				<div
					class="filter-include"
					@click.stop="toggleActor(actor)"
				>
					<Icon
						icon="checkmark"
						class="filter-add"
					/>

					<Icon
						icon="cross2"
						class="filter-remove"
					/>
				</div>

				<span class="filter-name actor-name">{{ actor.name }}</span>

				<span class="actor-details">
					<div class="actor-gender">
						<Gender
							:gender="actor.gender"
							class="gender"
						/>
					</div>

					<span
						v-if="actor.count"
						class="actor-count"
					>{{ actor.count }}</span>
				</span>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';

import Gender from '#/components/actors/gender.vue';

const props = defineProps({
	filters: {
		type: Object,
		default: null,
	},
	actors: {
		type: Array,
		default: null,
	},
});

const emit = defineEmits(['update']);

const search = ref('');
const searchRegexp = computed(() => new RegExp(search.value, 'i'));
const selectedGender = ref(null);
const order = ref('name');

const { pageProps } = inject('pageContext');
const { actor: pageActor } = pageProps;

const groupedActors = computed(() => ({
	selected: props.actors.filter((actor) => props.filters.actors.includes(actor.id)),
	available: props.actors
		.filter((actor) => !props.filters.actors.includes(actor.id)
			&& actor.id !== pageActor?.id
			&& searchRegexp.value.test(actor.name)
			&& (!selectedGender.value || actor.gender === selectedGender.value))
		.sort((actorA, actorB) => {
			if (order.value === 'count') {
				return actorB.count - actorA.count;
			}

			return actorA.name.localeCompare(actorB.name);
		}),
}));

const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);

function toggleActor(actor) {
	if (props.filters.actors.includes(actor.id)) {
		emit('update', 'actors', props.filters.actors.filter((actorId) => actorId !== actor.id));
		return;
	}

	emit('update', 'actors', props.filters.actors.concat(actor.id));
}

function selectGender() {
	console.log(genders.value);
	const genderIndex = genders.value.indexOf(selectedGender.value);

	if (genderIndex >= genders.value.length - 1) {
		selectedGender.value = genders.value[0];
		return;
	}

	selectedGender.value = genders.value[genderIndex + 1];
}
</script>

<style scoped>
.actors-container {
	box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
}

.actors-filters {
	display: flex;
	border-bottom: solid 1px var(--shadow-weak-30);
}

.actors-search {
	flex-grow: 1;
	border-bottom: none;
	width: 0;
}

.filter-sort {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	padding: 0 .5rem;
	cursor: pointer;
	font-weight: bold;
	color: var(--shadow);

	&.order {
		padding: 0 1rem 0 .25rem;
	}

	.icon {
		fill: var(--shadow);
	}

	&:hover {
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}

.gender-unselected {
	.icon {
		fill: var(--shadow);
	}
}

.filter-items {
	max-height: 15rem;
	overflow-y: auto;
}

.filter-item.first {
	border-top: solid 1px var(--shadow-weak-30);
}

.filter-name {
	height: 1rem;
	align-items: stretch;
	padding: .25rem .75rem .25rem .25rem;
}

.actor-name {
	display: flex;
	align-items: stretch;
}

.actor-details {
	display: flex;
	align-items: stretch;
	margin-left: .5rem;
}

.actor-gender {
	width: 1rem;
	display: flex;
	align-items: center;

	.gender {
		display: flex;
	}
}

.actor-count {
	width: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .25rem;
	overflow: hidden;
	color: var(--shadow-weak-10);
	font-size: .9rem;
}
</style>