More feedback features (#80)

resolves #74, resolves #76 --------- Co-authored-by: Robin Kaggl <[email protected]>
acdh-oeaw · Mar 1, 2024 · a3b334f · a3b334f
1 parent 91bdc3d
commit a3b334f
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 65 deletions.
diff --git a/components/range-slider.vue b/components/range-slider.vue
@@ -1,38 +1,33 @@
 <script lang="ts" setup>
-import { debounce } from "@acdh-oeaw/lib";
 import { Slider } from "@ark-ui/vue";
+import type { ModelRef } from "vue";
 
-const route = useRoute();
-
-const emit = defineEmits<{
-	change: [value: [number, number]];
-}>();
-
-const props = defineProps<{
-	init?: [number, number];
-}>();
-
-const min = 1600;
-const max = 1900;
-
-const range: Ref<[number, number]> = ref(props.init ?? [min, max]);
-
-const { Root, Control, Thumb, MarkerGroup, Marker, Range, Track } = Slider; // important
-
-const debouncer = debounce((range: [number, number]) => {
-	emit("change", range);
-}, 500);
-
-watch(
-	() => route.name,
-	() => {
-		range.value = props.init ?? [min, max];
+defineProps({
+	min: {
+		type: Number,
+		default: 0,
+		validator(value: number, propsEnt: { min: number; max: number }) {
+			return value <= propsEnt.max;
+		},
+	},
+	max: {
+		type: Number,
+		default: 100,
+		validator(value: number, propsEnt: { min: number; max: number }) {
+			return value >= propsEnt.max;
+		},
+	},
+	nMarker: {
+		type: Number,
+		default: 7,
 	},
-);
+});
 
-watch(range, (from, to) => {
-	debouncer(to);
+const range: ModelRef<[number, number]> = defineModel({
+	default: [0, 100] as [number, number],
 });
+
+const { Root, Control, Thumb, MarkerGroup, Marker, Range, Track } = Slider; // important
 </script>
 
 <template>
@@ -48,10 +43,6 @@ watch(range, (from, to) => {
 					:min="min"
 					:max="max"
 					name="start_year"
-					@input="
-						(event: Event) =>
-							(range = [(event.target as HTMLInputElement).valueAsNumber, Number(range[1])])
-					"
 				/>
 			</div>
 			<div>
@@ -64,10 +55,6 @@ watch(range, (from, to) => {
 					:min="min"
 					:max="max"
 					name="end_year"
-					@change="
-						(event: Event) =>
-							(range = [Number(range[0]), (event.target as HTMLInputElement).valueAsNumber])
-					"
 				/>
 			</div>
 		</div>
@@ -87,13 +74,12 @@ watch(range, (from, to) => {
 			/>
 		</Control>
 		<MarkerGroup class="mx-1 h-4">
-			<Marker :value="1600" class="text-slate-400">1600</Marker>
-			<Marker :value="1650" class="text-slate-400">&#183;</Marker>
-			<Marker :value="1700" class="text-slate-400">1700</Marker>
-			<Marker :value="1750" class="text-slate-400">&#183;</Marker>
-			<Marker :value="1800" class="text-slate-400">1800</Marker>
-			<Marker :value="1850" class="text-slate-400">&#183;</Marker>
-			<Marker :value="1900" class="text-slate-400">1900</Marker>
+			<Marker v-for="(n, i) in nMarker" :key="n" :value="min + (i * (max - min)) / (nMarker - 1)">
+				<span v-if="i % 2">&#183;</span>
+				<span v-else>
+					{{ Math.floor(min + (i * (max - min)) / (nMarker - 1)) }}
+				</span>
+			</Marker>
 		</MarkerGroup>
 	</Root>
 </template>
diff --git a/lib/facets.ts b/lib/facets.ts
@@ -40,7 +40,7 @@ export const typesenseQueryToFacetObject = (
 		} else {
 			const [key, value] = facetString.split(":");
 			if (key !== undefined && value !== undefined) {
-				retObject[key] = value.replace(/\[(\d*)\.\.(\d*),\d*\]/, "$1;$2").split(";"); // converts format [yyyy..yyyy,y] to classic [yyyy,yyyy]
+				retObject[key] = value.replace(/\[(\d+)\.\.(\d+),?\d*\]/, "$1;$2").split(";"); // converts formats [yyyy..yyyy,y] and [yyyy..yyyy] to classic [yyyy,yyyy]
 			}
 		}
 	});

diff --git a/locales/de.json b/locales/de.json
@@ -255,7 +255,8 @@
 		"additional": "Weitere Informationen",
 		"courtrelated": "Bezüge zum Wiener Hof",
 		"relations": "Bezüge",
-		"coords": "Koordinaten"
+		"coords": "Koordinaten",
+		"related_places": "Bezüge zu Orten"
 	},
 	"ui": {
 		"showing-results": "Zeige {first} - {last} von {all} Ergebnissen",

diff --git a/locales/en.json b/locales/en.json
@@ -254,7 +254,8 @@
 		"additional": "Additional Information",
 		"courtrelated": "Court Relations",
 		"relations": "Relations",
-		"coords": "Coordinates"
+		"coords": "Coordinates",
+		"related_places": "Place Relations"
 	},
 	"ui": {
 		"showing-results": "Showing {first} - {last} out of {all}",

diff --git a/pages/detail/persons/[id].vue b/pages/detail/persons/[id].vue
@@ -348,6 +348,14 @@ definePageMeta({
 					grid-class="grid-cols-3"
 					:collection-name="collection"
 				/>
+				<DetailDisclosure
+					:title="t('detail-page.related_places')"
+					:rels="data.details.data.related_places"
+					:headers="relCols"
+					grid-class="grid-cols-4"
+					collection-name="place_person"
+					link-to
+				/>
 				<h2 class="text-2xl text-gray-500">{{ t("detail-page.additional") }}</h2>
 				<DetailDisclosure
 					:title="t('collection-keys.viecpro_persons.marriages_and_family_relations')"

diff --git a/pages/search.vue b/pages/search.vue
@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import { isEmpty } from "lodash-es";
-import { ArrowLeftRight, CalendarRange, MapPin, School2, User, Users } from "lucide-vue-next";
+import {
+	ArrowLeftRight,
+	CalendarRange,
+	CalendarSearch,
+	MapPin,
+	School2,
+	User,
+	Users,
+} from "lucide-vue-next";
 
 import GenericDisclosure from "@/components/generic-disclosure.vue";
 import RangeSlider from "@/components/range-slider.vue";
@@ -9,6 +17,9 @@ import type { NavLink } from "@/types/misc.d.ts";
 
 const t = useTranslations();
 const localePath = useLocalePath();
+
+const route = useRoute();
+
 const links = computed(() => {
 	return {
 		people: {
@@ -44,8 +55,16 @@ const links = computed(() => {
 	} satisfies Record<string, NavLink>;
 });
 
+const updateFacets = async () => {
+	const { query } = route;
+
+	if (query.facets?.start_date_int) {
+		await addToFacets(typesenseQueryToFacetObject(String(query.facets)).start_date_int);
+	} else await addToFacets([1600, 1900]);
+};
+
 const addToFacets = async (range: [number, number]) => {
-	const { query } = useRoute();
+	const { query } = route;
 	const router = useRouter();
 	const facetObject = typesenseQueryToFacetObject(String(query.facets));
 
@@ -62,32 +81,49 @@ const addToFacets = async (range: [number, number]) => {
 			await router.push({
 				query: {
 					...query,
-					facets: facetObjectToTypesenseQuery(facetObject),
+					facets: facetObjectToTypesenseQuery(facetObject, false, includeDateless.value),
 				},
 			});
 		}
 	} else {
 		await router.push({
 			query: {
 				...query,
-				facets: facetObjectToTypesenseQuery({
-					...facetObject,
-					start_date_int: range,
-					end_date_int: range,
-				}),
+				facets: facetObjectToTypesenseQuery(
+					{
+						...facetObject,
+						start_date_int: range,
+						end_date_int: range,
+					},
+					false,
+					includeDateless.value,
+				),
 			},
 		});
 	}
 };
 
 const queryRange = computed(() => {
-	const { query } = useRoute();
+	const { query } = route;
 
 	const facetObject = typesenseQueryToFacetObject(String(query.facets));
 
-	return facetObject.start_date_int as [number, number] | undefined;
+	return (facetObject.start_date_int ?? [1600, 1900]) as [number, number];
 });
 
+const includeDateless = ref(true);
+
+if (route.query.facets && /\[\d+..\d+\]/.test(String(route.query.facets))) {
+	includeDateless.value = false;
+}
+
+const slider: Ref<[number, number]> = ref(queryRange.value.map(Number) as [number, number]);
+
+watch(
+	() => route.name,
+	() => (slider.value = [1600, 1900]),
+);
+
 definePageMeta({
 	title: "pages.search.title",
 });
@@ -118,14 +154,43 @@ definePageMeta({
 				<div class="mx-4 xl:max-w-sm">
 					<ClientOnly>
 						<GenericDisclosure :title="t('ui.timespan')" default-open>
-							<div class="p-2">
-								<RangeSlider
-									:init="queryRange"
-									class="p-1"
-									@change="(value) => addToFacets(value)"
-								/>
-								<div class="mt-1 text-xs text-gray-400">
-									note: also includes entities without date information
+							<div class="flex flex-col gap-1 p-2">
+								<RangeSlider v-model="slider" :min="1600" :max="1900" :n-marker="7" class="p-1" />
+								<div class="flex items-center justify-between gap-1">
+									<div class="flex gap-2">
+										<input
+											id="dateCheck"
+											v-model="includeDateless"
+											type="checkbox"
+											class="accent-primary-500"
+											@change="updateFacets()"
+										/>
+										<label for="dateCheck" class="text-sm text-gray-600">
+											Include Entities without date information
+										</label>
+									</div>
+									<div class="mt-1 flex">
+										<NuxtLink
+											class="rounded border bg-slate-100 p-2 shadow transition hover:bg-slate-200 active:bg-slate-300"
+											:to="{
+												query: {
+													...route.query,
+													facets: facetObjectToTypesenseQuery(
+														{
+															...typesenseQueryToFacetObject(String(route.query.facets)),
+															start_date_int: slider,
+															end_date_int: slider,
+														},
+														false,
+														includeDateless,
+													),
+												},
+											}"
+										>
+											<CalendarSearch class="h-5 w-5" />
+											<span class="sr-only">Apply time filters</span>
+										</NuxtLink>
+									</div>
 								</div>
 							</div>
 						</GenericDisclosure>

diff --git a/types/schema.d.ts b/types/schema.d.ts
@@ -138,6 +138,7 @@ export interface PersonDetail {
 	marriages_and_family_relations: Array<DetailRelation>;
 	relations_to_church_and_orders: Array<DetailRelation>;
 	non_court_functions: Array<DetailRelation>;
+	related_places: Array<DetailRelation>;
 }
 
 export interface GenericRelation {