Merge branch 'feat/detail-view-integration'

components/custom-primary-details-actor.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { MapPinIcon } from 'lucide-vue-next';
+
+const {getUnprefixedId} = useIdPrefix();
+
+const t = useTranslations();
+
+const props = defineProps<{entity: EntityFeature}>();
+
+interface Place {
+	label: string,
+	id: string,
+	relationType: RelationType | null
+}
+
+const getRelationGroupTitle = (relation: RelationType) => {
+	if(props.entity.systemClass === 'person') {
+		return useRelationGroupTitle(relation, 'person')
+	}
+	return useRelationGroupTitle(relation)
+}
+
+
+const collapsibleRelations: Array<{
+	relationType: RelationType,
+	title: string
+}> = [
+	{
+		relationType: {
+			crmCode:"OA7"
+		},
+		title: t(getRelationGroupTitle({crmCode: "OA7"}))
+	},
+	{
+		relationType: {
+			crmCode: "P107",
+			inverse: true
+		},
+		title: t(getRelationGroupTitle({crmCode:"P107", inverse: true}))
+	},
+	{
+		relationType: {
+			crmCode: "P107"
+		},
+		title: t(getRelationGroupTitle({crmCode:"P107"}))
+	}
+]
+
+const handledRelations: Array<RelationType> = [
+	{
+		crmCode: "P107"
+	},
+	{
+		crmCode: "P74"
+	},
+	{
+		crmCode: "OA7"
+	},
+	{
+		crmCode: "OA8"
+	},
+	{
+		crmCode: "OA9"
+	}
+]
+
+const emit = defineEmits({
+	handledRelations(payload: Array<RelationType>) {
+		return payload;
+	}}
+);
+
+onMounted(() => {
+	emit("handledRelations", handledRelations);
+})
+
+
+</script>
+
+<template>
+	<GroupedRelationCollapsible
+		v-for="rel in collapsibleRelations"
+		:key="rel.relationType.crmCode + rel.relationType.inverse"
+		:title="rel.title"
+		:relations="entity.relations"
+		:relation-type="rel.relationType"
+	/>
+</template>

components/custom-primary-details-feature.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import {ChevronLeftIcon,ChevronRightIcon } from "lucide-vue-next"
+
+const t = useTranslations();
+
+const { getUnprefixedId } = useIdPrefix();
+
+const props = defineProps<{entity: EntityFeature}>();
+
+const { data, error, isPending, isPlaceholderData, suspense } = useGetBySystemClass(
+	computed(() => {
+		return { system_class: "feature"};
+	}),
+	computed(() => {
+		return { show: ["none"], limit: 0 };
+	})
+);
+
+const isLoading = computed(() => {
+	return isPending.value || isPlaceholderData.value;
+});
+
+const features = computed(() => {
+	return data.value?.enities.map((feat) => {return feat.features[0]}) ?? [];
+});
+
+const currentFeatureIndex = computed(() => {
+	return features.value.findIndex((feature) => feature?.['@id'] === props.entity['@id']);
+})
+
+const previousFeature = computed(() => {
+	if(currentFeatureIndex.value === 0) {
+		return null
+	}
+	return features.value[currentFeatureIndex.value - 1];
+})
+
+const nextFeature = computed(() => {
+	if(currentFeatureIndex.value === features.value.length - 1) {
+		return null
+	}
+	return features.value[currentFeatureIndex.value + 1];
+})
+
+const collapsibleRelations: Array<{
+	relationType: RelationType,
+	systemClass?: string,
+	title: string
+}> = [
+	{
+		relationType: {
+			crmCode:"P46"
+		},
+		systemClass: "artifact",
+		title: t("Relations.Artifacts")
+	},
+	{
+		relationType: {
+			crmCode:"P46"
+		},
+		systemClass: "human_remains",
+		title: t("Relations.HumanRemains")
+	},
+]
+
+const emit = defineEmits({
+	handledRelations(payload: Array<RelationType>) {
+		return payload;
+	}}
+);
+
+const handledRelations: Array<RelationType> = [
+	{
+		crmCode: "P46"
+	},
+]
+
+onMounted(() => {
+	emit("handledRelations", handledRelations);
+})
+
+</script>
+
+<template>
+	<div class="flex justify-between" >
+		<NavLink
+			v-if="previousFeature"
+			:href="{ path: `/entities/${ getUnprefixedId(previousFeature['@id'])}`}"
+			class="
+				flex items-center
+				underline decoration-dotted transition hover:no-underline focus-visible:no-underline
+				"
+		>
+			<ChevronLeftIcon class="size-4" />
+			<span>{{ previousFeature.properties.title }}</span>
+			<span class="sr-only">{{ t("EntitySidebar.PreviousFeature") }}</span>
+		</NavLink>
+		<NavLink
+			v-if="nextFeature"
+			:href="{ path: `/entities/${ getUnprefixedId(nextFeature['@id'])}`}"
+			class="
+				flex items-center
+				underline decoration-dotted transition hover:no-underline focus-visible:no-underline
+			"
+		>
+			<span>{{ nextFeature.properties.title }}</span>
+			<span class="sr-only">{{ t("EntitySidebar.NextFeature") }}</span>
+			<ChevronRightIcon class="size-4" />
+		</NavLink>
+	</div>
+	<GroupedRelationCollapsible
+		v-for="rel in collapsibleRelations"
+		:key="rel.relationType.crmCode + rel.relationType.inverse"
+		:title="rel.title"
+		:relations="entity.relations"
+		:system-class="rel.systemClass"
+		:relation-type="rel.relationType"
+	/>
+</template>

components/custom-primary-details-place.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+const t = useTranslations();
+
+const props = defineProps<{entity: EntityFeature}>();
+
+const collapsibleRelations: Array<{
+	relationType: RelationType,
+	systemClass?: string,
+	title: string
+}> = [
+	{
+		relationType: {
+			crmCode:"P46"
+		},
+		systemClass: "artifact",
+		title: t("Relations.Artifacts")
+	},
+	{
+		relationType: {
+			crmCode:"P46"
+		},
+		systemClass: "human_remains",
+		title: t("Relations.HumanRemains")
+	},
+]
+
+const emit = defineEmits({
+	handledRelations(payload: Array<RelationType>) {
+		return payload;
+	}}
+);
+
+const handledRelations: Array<RelationType> = [
+	{
+		crmCode: "P46"
+	},
+]
+
+onMounted(() => {
+	emit("handledRelations", handledRelations);
+})
+
+</script>
+
+<template>
+	<GroupedRelationCollapsible
+		v-for="rel in collapsibleRelations"
+		:key="rel.relationType.crmCode + rel.relationType.inverse"
+		:title="rel.title"
+		:relations="entity.relations"
+		:system-class="rel.systemClass"
+		:relation-type="rel.relationType"
+	/>
+</template>

components/data-map-view.vue

@@ -15,6 +15,8 @@ const router = useRouter();
 const route = useRoute();
 const t = useTranslations();
 
+const currentView = useGetCurrentView();
+
 const searchFiltersSchema = v.object({
 	category: v.fallback(v.picklist(categories), "entityName"),
 	search: v.fallback(v.string(), ""),
@@ -46,7 +48,7 @@ const { data, isPending, isPlaceholderData } = useGetSearchResults(
 					: [],
 			show: ["geometry", "when"],
 			centroid: true,
-			system_classes: ["place"],
+			system_classes: ["place", "object_location"],
 			limit: 0,
 		};
 	}),
@@ -188,12 +190,13 @@ watch(data, () => {
 					</div>
 				</div>
 			</div>
+
 			<GeoMap
 				v-if="height && width"
 				:features="features"
 				:height="height"
 				:width="width"
-				:polygons="show"
+				:has-polygons="show"
 				@layer-click="onLayerClick"
 			>
 				<GeoMapPopup
@@ -209,7 +212,7 @@ watch(data, () => {
 						<strong class="font-medium">
 							<NavLink
 								class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-								:href="{ path: `/entities/${entity.properties._id}` }"
+								:href="{ path: `/entities/${entity.properties._id}/${currentView}` }"
 							>
 								<Component :is="getEntityIcon(entity.systemClass)" class="size-3.5 shrink-0" />
 								{{ entity.properties.title }}

components/data-network-view.vue

@@ -81,15 +81,17 @@ const systemClasses = computed(() => {
 
 <template>
 	<div :class="project.fullscreen ? 'relative grid' : 'relative grid grid-rows-[auto_1fr] gap-4'">
-		<NetworkSearchForm
-			:class="
-				project.fullscreen
-					? 'absolute z-10 bg-white/90 dark:bg-neutral-900 max-w-[800px] w-full m-3 rounded-md p-6 shadow-md'
-					: ''
-			"
-			:search="searchFilters.search"
-			@submit="onChangeSearchFilters"
-		/>
+		<div :class="project.fullscreen ? 'absolute z-10 flex w-full justify-center' : ''">
+			<NetworkSearchForm
+				:class="
+					project.fullscreen
+						? 'absolute z-10 bg-white/90 dark:bg-neutral-900 max-w-[800px] w-full m-3 rounded-md p-6 shadow-md'
+						: ''
+				"
+				:search="searchFilters.search"
+				@submit="onChangeSearchFilters"
+			/>
+		</div>
 
 		<VisualisationContainer
 			v-slot="{ height, width }"

components/entity-aliases.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{aliases: Array<{ alias: string }>}>();
+
+const aliasList = computed(() => {
+	return props.aliases.reduce((acc: string, a: {alias: string}) => {
+		if(acc.length === 0) {
+			return a.alias;
+		} else {
+			return  `${acc}, ` + a.alias;
+		}
+	},'');
+});
+
+</script>
+
+<template>
+	<CardDescription>
+		{{ aliasList }}
+	</CardDescription>
+</template>

components/entity-data-graph.vue

@@ -17,7 +17,7 @@ const graph = new Graph();
 
 const { entityColors } = colors;
 const defaultColor = project.colors.entityDefaultColor;
-const legendEntities: [string | undefined] = [""];
+const legendEntities = [""];
 
 watch(
 	() => {

components/entity-descriptions.vue

@@ -22,14 +22,23 @@ const descriptions = computed(() => {
 
 <template>
 	<template v-if="descriptions.length > 0">
-		<div v-for="(description, index) in descriptions" :key="index">
-			<div v-if="index > 0" class="h-px w-full bg-border" role="separator" />
-			<p class="text-md">{{ description }}</p>
-		</div>
-	</template>
-	<template v-else>
-		<p class="text-md">
-			{{ t("EntityDescriptionsDisplay.no-descriptions") }}
-		</p>
+		<template v-if="descriptions.length === 1">
+			<p class="text-md">{{ descriptions[0] }}</p>
+		</template>
+		<template v-else>
+			<Tabs default-value="0">
+				<TabsList>
+					<span class="mx-2 font-bold">{{ t("EntityDescriptionsDisplay.description", descriptions.length) + ": " }}</span>
+					<TabsTrigger v-for="(description, index) in descriptions" :key="`desc-tab-trigger-${index}`" :value="index.toString()">
+						<p class=" max-w-20 overflow-hidden text-ellipsis text-nowrap">{{description}}</p>
+					</TabsTrigger>
+				</TabsList>
+				<TabsContent v-for="(description, index) in descriptions" :key="`desc-tab-${index}`" :value="index.toString()">
+					<Card class="p-4">
+							<p class="text-md">{{ description }}</p>
+					</Card>
+				</TabsContent>
+			</Tabs>
+		</template>
 	</template>
 </template>