Merge branch '61-content-component-profile-view' into 81-create-featu…

…re-component

components/profile-window-content.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+interface Props {
+	params: TextWindowItem["params"];
+}
+
+const props = defineProps<Props>();
+const { params } = toRefs(props);
+
+const { data, isPending, isPlaceholderData } = useProfileById(params);
+const openNewWindowFromAnchor = useAnchorClickHandler();
+
+const isLoading = computed(() => {
+	return isPending.value || isPlaceholderData.value;
+});
+</script>
+
+<template>
+	<div
+		class="relative isolate grid h-full w-full overflow-auto"
+		:class="{ 'opacity-50 grayscale': isLoading }"
+	>
+		<!-- eslint-disable-next-line vue/no-v-html, vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+		<div v-if="data" class="prose max-w-3xl p-8" @click="openNewWindowFromAnchor" v-html="data" />
+
+		<Centered v-if="isLoading">
+			<LoadingIndicator />
+		</Centered>
+	</div>
+</template>
+
+<style>
+/* stylelint-disable-next-line selector-class-pattern */
+.tbHeader {
+	margin: 0;
+}
+</style>

components/text-window-content.vue

@@ -7,7 +7,7 @@ const props = defineProps<Props>();
 const { params } = toRefs(props);
 
 const { data, isPending, isPlaceholderData } = useTextById(params);
-const onClick = useAnchorClickHandler();
+const openNewWindowFromAnchor = useAnchorClickHandler();
 
 const isLoading = computed(() => {
 	return isPending.value || isPlaceholderData.value;
@@ -20,7 +20,7 @@ const isLoading = computed(() => {
 		:class="{ 'opacity-50 grayscale': isLoading }"
 	>
 		<!-- eslint-disable-next-line vue/no-v-html, vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-		<div v-if="data" class="prose max-w-3xl p-8" @click="onClick" v-html="data" />
+		<div v-if="data" class="prose max-w-3xl p-8" @click="openNewWindowFromAnchor" v-html="data" />
 
 		<Centered v-if="isLoading">
 			<LoadingIndicator />

components/window-content.vue

@@ -9,5 +9,6 @@ const props = defineProps<Props>();
 <template>
 	<GeoMapWindowContent v-if="props.item.kind === 'geo-map'" :params="props.item.params" />
 	<TextWindowContent v-if="props.item.kind === 'text'" :params="props.item.params" />
+	<ProfileWindowContent v-if="props.item.kind === 'profile'" :params="props.item.params" />
 	<pre v-else>{{ props }}</pre>
 </template>

composables/use-anchor-click-handler.ts

@@ -9,7 +9,7 @@ export function useAnchorClickHandler() {
 	/**
 	 * Intercept anchor clicks to open window instead of navigating.
 	 */
-	function onClick(event: MouseEvent) {
+	function openNewWindowFromAnchor(event: MouseEvent) {
 		const element = event.target;
 
 		if (element instanceof HTMLAnchorElement) {
@@ -31,5 +31,5 @@ export function useAnchorClickHandler() {
 		}
 	}
 
-	return onClick;
+	return openNewWindowFromAnchor;
 }

composables/use-profile-by-id.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/vue-query";
+
+export function useProfileById(params: MaybeRef<{ id: string }>, options?: { enabled?: boolean }) {
+	const api = useApiClient();
+
+	return useQuery({
+		enabled: options?.enabled,
+		queryKey: ["get-profile-by-id", params] as const,
+		async queryFn({ queryKey: [, params] }) {
+			const response = await api.vicav.getProfile(params, {
+				headers: { accept: "application/xml" },
+			});
+			return response.text();
+		},
+	});
+}

stores/use-windows-store.ts

@@ -64,6 +64,13 @@ export interface TextWindowItem extends WindowItemBase {
 	};
 }
 
+export interface ProfileWindowItem extends WindowItemBase {
+	kind: "profile";
+	params: {
+		id: string;
+	};
+}
+
 export type WindowItem =
 	| BibliographyQueryWindowItem
 	| CorpusQueryWindowItem
@@ -73,6 +80,7 @@ export type WindowItem =
 	| DictionaryEntryWindowItem
 	| DictionaryQueryWindowItem
 	| GeoMapWindowItem
+	| ProfileWindowItem
 	| SampleTextWindowItem
 	| TextWindowItem;
 

utils/is-window-type.ts

@@ -12,6 +12,7 @@ export const windowTypeMap: Record<WindowType, WindowItemKind> = {
 	SampleText: "sample-text",
 	Text: "text",
 	WMap: "geo-map",
+	Profile: "profile",
 };
 
 export function isWindowType(value: string | undefined): value is WindowType {