traxxx-web/pages/actors/+Page.vue

<template>
	<div class="page">
		<form
			class="filters"
			@submit.prevent
		>
			<div class="filter">
				<input
					v-model="q"
					type="search"
					placeholder="Search actors"
					class="input search"
					@search="search"
				>
			</div>

			<div class="filter">
				<RangeFilter
					label="age"
					:min="18"
					:max="100"
					:value="filters.age"
					:disabled="!filters.ageRequired"
					@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
					@input="(range) => updateFilter('age', range, false)"
					@change="(range) => updateFilter('age', range, true)"
				>
					<template #start><Icon icon="leaf" /></template>
					<template #end><Icon icon="tree3" /></template>
				</RangeFilter>
			</div>

			<div class="filter">
				<RangeFilter
					label="height"
					:min="50"
					:max="220"
					:value="filters.height"
					:disabled="!filters.heightRequired"
					unit="cm"
					@enable="(checked) => updateFilter('heightRequired', checked, filters.heightRequired !== checked)"
					@input="(range) => updateFilter('height', range, false)"
					@change="(range) => updateFilter('height', range, true)"
				>
					<template #start><Icon icon="height-short" /></template>
					<template #end><Icon icon="height" /></template>
				</RangeFilter>
			</div>

			<div class="filter">
				<RangeFilter
					label="weight"
					:min="30"
					:max="200"
					:value="filters.weight"
					:disabled="!filters.weightRequired"
					unit="kg"
					@enable="(checked) => updateFilter('weightRequired', checked, filters.weightRequired !== checked)"
					@input="(range) => updateFilter('weight', range, false)"
					@change="(range) => updateFilter('weight', range, true)"
				>
					<template #start><Icon icon="meter-slow" /></template>
					<template #end><Icon icon="meter-fast" /></template>
				</RangeFilter>
			</div>

			<div class="filter">
				<Checkbox
					:checked="avatarRequired"
					label="Require photo"
					@change="(checked) => { avatarRequired = checked; search(); }"
				/>
			</div>
		</form>

		<ul class="actors nolist">
			<li
				v-for="actor in actors"
				:key="`actor-${actor.id}`"
			>
				<ActorTile
					:actor="actor"
				/>
			</li>
		</ul>
	</div>
</template>

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

import navigate from '#/src/navigate.js';
import { get } from '#/src/api.js';

import ActorTile from '#/components/actors/tile.vue';
import Checkbox from '#/components/form/checkbox.vue';
import RangeFilter from '#/components/filters/range.vue';

const actors = ref([]);

const { pageProps, urlParsed } = inject('pageContext');

actors.value = pageProps.actors;

const q = ref(urlParsed.search.q);

const filters = ref({
	ageRequired: !!urlParsed.search.age,
	age: urlParsed.search.age?.split(',').map((age) => Number(age)) || [18, 100],
	heightRequired: !!urlParsed.search.height,
	height: urlParsed.search.height?.split(',').map((height) => Number(height)) || [50, 220],
	weightRequired: !!urlParsed.search.weight,
	weight: urlParsed.search.weight?.split(',').map((weight) => Number(weight)) || [30, 200],
});

const avatarRequired = ref(Object.hasOwn(urlParsed.search, 'avatar'));

async function search() {
	const query = {
		q: q.value || undefined,
		avatar: avatarRequired.value || undefined,
		age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
		height: filters.value.heightRequired ? filters.value.height.join(',') : undefined,
		weight: filters.value.weightRequired ? filters.value.weight.join(',') : undefined,
	};

	navigate('/actors', query, { redirect: false });

	const res = await get('/actors', query);

	actors.value = res.actors;
}

function updateFilter(prop, value, reload = true) {
	filters.value[prop] = value;

	if (reload) {
		search();
	}
}
</script>

<style scoped>
.page {
	height: 100%;
	display: flex;
	overflow: hidden;
}

.filters {
	flex-shrink: 0;
	padding: .5rem 0;
	border-right: solid 1px var(--shadow-weak-30);
	overflow-y: auto;

	.input {
		width: 100%;
	}
}

.filter {
	padding: .5rem;
}

.actors {
	display: grid;
	flex-grow: 1;
	grid-template-columns: repeat(auto-fill, 10rem);
	gap: .25rem;
	padding: 1rem;
	overflow-y: auto;
}
</style>