Feat xlsx and time spans (#73)

resolves #46, resolves #71, resolves #72

tests are not resolving but should be running, i will do some tuning tomorrow

---------

Co-authored-by: Robin Kaggl <[email protected]>

components/app-header.vue

@@ -62,7 +62,7 @@ const links = computed(() => {
 					>
 						<MenuItems
 							as="div"
-							class="absolute right-0 mt-1 flex w-56 flex-col divide-y rounded bg-gray-50 shadow-lg ring"
+							class="absolute right-0 z-50 mt-1 flex w-56 flex-col divide-y rounded bg-gray-50 shadow-lg ring"
 						>
 							<MenuItem v-for="(link, key) of links" :key="key" class="flex" as="div">
 								<NuxtLink

components/download-menu.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { Download, FileJson, X } from "lucide-vue-next";
+
+import { downloadAsJson } from "@/lib/helpers";
+
+defineProps<{
+	data: object;
+	collection: "viecpro_courts" | "viecpro_institutions" | "viecpro_persons" | "viecpro_places";
+}>();
+</script>
+
+<template>
+	<Menu v-slot="{ open }" as="div" class="relative z-40 inline-block">
+		<ClientOnly>
+			<MenuButton
+				as="button"
+				class="rounded-full p-2 transition hover:bg-slate-200 active:bg-slate-300"
+			>
+				<X v-if="open" class="h-6 w-6 shrink-0" />
+				<Download v-else class="h-6 w-6 shrink-0" />
+				<span class="sr-only">Open/Close Menu</span>
+			</MenuButton>
+		</ClientOnly>
+		<Transition
+			enter-active-class="transition duration-100 ease-out"
+			enter-from-class="transform scale-95 -translate-y-8 opacity-0"
+			enter-to-class="transform scale-100 translate-y-0 opacity-100"
+			leave-active-class="transition duration-75 ease-in"
+			leave-from-class="transform scale-100 opacity-100"
+			leave-to-class="transform scale-95 opacity-0"
+		>
+			<MenuItems
+				as="div"
+				class="absolute right-0 mt-1 flex gap-2 divide-y rounded border bg-gray-50 p-2 shadow-lg"
+			>
+				<MenuItem>
+					<button
+						class="rounded border shadow hover:bg-slate-200 active:bg-slate-300"
+						@click="
+							downloadAsJson(
+								{ entity: data.entity.data, details: data.details.data },
+								String(data.entity.data?.name),
+							)
+						"
+					>
+						<span class="sr-only">Download as .JSON</span>
+						<FileJson class="m-2 h-6 w-6 shrink-0" />
+					</button>
+				</MenuItem>
+				<MenuItem>
+					<XlsxButton
+						class="rounded border shadow hover:bg-slate-200 active:bg-slate-300"
+						:data="data"
+						:collection="collection"
+					/>
+				</MenuItem>
+			</MenuItems>
+		</Transition>
+	</Menu>
+</template>

components/indicator.vue

@@ -6,14 +6,17 @@ defineProps<{
 
 <template>
 	<div class="flex gap-1 rounded border p-2">
-		<div :class="status === 'red' ? 'bg-red-500' : 'bg-slate-300'" class="h-6 w-6 rounded-full" />
+		<div
+			:class="status === 'red' ? 'bg-red-500' : 'bg-slate-300'"
+			class="aspect-square w-1/3 rounded-full"
+		/>
 		<div
 			:class="status === 'yellow' ? 'bg-yellow-500' : 'bg-slate-300'"
-			class="h-6 w-6 rounded-full"
+			class="aspect-square w-1/3 rounded-full"
 		/>
 		<div
 			:class="status === 'green' ? 'bg-green-500' : 'bg-slate-300'"
-			class="h-6 w-6 rounded-full"
+			class="aspect-square w-1/3 rounded-full"
 		/>
 	</div>
 </template>

components/locale-switch.vue

@@ -29,7 +29,9 @@ defineProps<{
 				leave-from-class="transform scale-100 opacity-100"
 				leave-to-class="transform scale-95 opacity-0"
 			>
-				<MenuItems class="fixed ml-4 mt-4 flex -translate-x-4 flex-col rounded bg-white shadow-lg">
+				<MenuItems
+					class="fixed z-50 ml-4 mt-4 flex -translate-x-4 flex-col rounded bg-white shadow-lg"
+				>
 					<MenuItem
 						v-for="loc in locales"
 						:key="loc.code"

components/range-slider.vue

@@ -2,21 +2,34 @@
 import { debounce } from "@acdh-oeaw/lib";
 import { Slider } from "@ark-ui/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([min, max]);
+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];
+	},
+);
+
 watch(range, (from, to) => {
 	debouncer(to);
 });