Reinitialized commit. Update and actors overview with some filters.

pages/actors/+Page.vue

@@ -0,0 +1,173 @@
+<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>

pages/actors/+onBeforeRender.js

@@ -0,0 +1,27 @@
+import { fetchActors } from '#/src/actors.js';
+
+export async function onBeforeRender(pageContext) {
+	const query = pageContext.urlParsed.search;
+
+	const { actors, limit, total } = await fetchActors({
+		query: query.q,
+		requireAvatar: Object.hasOwn(query, 'avatar'),
+		age: query.age?.split(',').map((age) => Number(age)),
+		height: query.height?.split(',').map((height) => Number(height)),
+		weight: query.weight?.split(',').map((weight) => Number(weight)),
+	}, {
+		page: Number(pageContext.routeParams.page) || 1,
+		limit: Number(pageContext.urlParsed.search.limit) || 50,
+	});
+
+	return {
+		pageContext: {
+			title: 'actors',
+			pageProps: {
+				actors,
+				limit,
+				total,
+			},
+		},
+	};
+}

pages/actors/@actorId/+Page.vue

@@ -0,0 +1,11 @@
+<template>
+	<div class="page">
+		<h2>Actor</h2>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+const { routeParams } = inject('pageContext');
+</script>

pages/actors/@actorId/+route.js

@@ -0,0 +1 @@
+export default '/actors/@actorId/*';