Allow for more granular sort in lists

components/data-list-window-content.vue

@@ -1,5 +1,7 @@
 <!-- eslint-disable @typescript-eslint/sort-type-constituents -->
 <script lang="ts" setup>
+import type { JsonObject } from "type-fest";
+
 import type { DataListWindowItem, DataTypesEnum } from "@/types/global.d";
 import type { simpleTEIMetadata } from "@/types/teiCorpus.d";
 
@@ -25,7 +27,16 @@ const groupedItems = getGroupedItems(
 	["place.country", "place.region", "place.settlement", "dataType"],
 	"dataType",
 	props.params.dataTypes,
-	"label",
+	(a: JsonObject, b: JsonObject) => {
+		const amatch = Number((a as simpleTEIMetadata).label?.match(/[a-z]+(\d+)/i)?.at(1));
+		const bmatch = Number((b as simpleTEIMetadata).label?.match(/[a-z]+(\d+)/i)?.at(1));
+
+		if (!amatch || !bmatch)
+			return !a.label || !b.label ? 0 : a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+		else {
+			return amatch < bmatch ? -1 : amatch > bmatch ? 1 : 0;
+		}
+	},
 	props.params.filterListBy,
 ) as groupedByCountry;
 const openNewWindowFromAnchor = useAnchorClickHandler();
@@ -54,15 +65,16 @@ const debugString = debug ? JSON.stringify(groupedItems, null, 2) : "";
 			<div v-for="(itemsByPlace, region) in itemsByRegion" :key="region" class="p-2 text-base">
 				<h4 v-if="region !== ''" class="text-lg italic">
 					{{ region }}
-					<span>({{ Object.values(itemsByPlace).flat(2).length }})</span>
+					<span v-if="Object.values(itemsByPlace).flat(2).length > 1"
+						>({{ Object.values(itemsByPlace).flat(2).length }})</span
+					>
 				</h4>
 				<h4 v-else-if="Object.keys(itemsByRegion).length > 1" class="text-lg italic">
 					Unspecified region
 				</h4>
 				<div v-for="(itemsBydataType, place) in itemsByPlace" :key="place" class="p-2">
 					<h5 v-if="place !== ''" class="text-base font-bold">
 						{{ place.replace(/^zzz_/, "") }}
-						<span>({{ Object.values(itemsBydataType).flat().length }})</span>
 					</h5>
 					<h5 v-else class="text-base font-bold">Unspecified place</h5>
 					<div v-for="(items, dataType) in itemsBydataType as groupedByDataType" :key="dataType">

components/profile-window-content.vue

@@ -43,18 +43,19 @@ watch(content, () => {
 
 <style>
 /* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-type-no-unknown */
 
 .profileHeader img,
 .figure img {
 	@apply m-0;
 }
 
 .tbProfile {
-	@apply border border-solid border-[#59533c];
+	@apply border border-solid border-[#59533c] mt-0;
 }
 
 .tdHead {
-	@apply align-top w-[150px] pr-[5px] border-dotted border-primary border-b bg-primary text-on-primary text-right break-words;
+	@apply align-top !w-[150px] pr-[5px] border-dotted border-primary border-b bg-primary text-on-primary text-right break-words;
 }
 
 .tdProfileTableRight {
@@ -102,11 +103,19 @@ a:hover {
 }
 
 .pNorm {
-	@apply mb-[10px];
+	@apply mb-4;
+}
+
+gallery + .pNorm {
+	@apply my-6;
+}
+
+.pNorm:has(+ gallery) {
+	@apply mb-6;
 }
 
 .imgCaption {
-	@apply pb-2 italic text-xs text-center;
+	@apply p-2 italic text-[0.85rem] text-center;
 }
 
 .h3ProfileTypology {
@@ -127,6 +136,11 @@ a:hover {
 	height: 450px;
 }
 
+.pFigure,
+.lg-container {
+	@apply my-4;
+}
+
 .pFigure.fig-col-3 {
 	@apply grid grid-cols-3 gap-2;
 }

utils/groupByFourLevels.ts

@@ -17,9 +17,20 @@ export function getGroupedItems(
 	levelProperties: [string, string, string, string],
 	dataTypeProperty: string,
 	allowedDataTypes: Array<string>,
-	sortProperty: string,
+	sortProperty: string | ((a: JsonObject, b: JsonObject) => number),
 	filterListBy?: { key: string; value: string },
 ) {
+	const sortFunction =
+		typeof sortProperty === "string"
+			? (a: JsonObject, b: JsonObject) => {
+					const aLabel = deepGet(a, sortProperty, ""),
+						bLabel = deepGet(b, sortProperty, "");
+					if (aLabel && bLabel && typeof aLabel === "string" && typeof bLabel === "string") {
+						return aLabel.localeCompare(bLabel);
+					}
+					return 0;
+				}
+			: sortProperty;
 	// Group by L1
 	const collectedItems = items
 		.filter((item) => {
@@ -30,14 +41,7 @@ export function getGroupedItems(
 			if (typeof dataType !== "string") return false;
 			return isAllowedDataType && filterByIsTrue;
 		})
-		.sort((a, b) => {
-			const aLabel = deepGet(a, sortProperty, ""),
-				bLabel = deepGet(b, sortProperty, "");
-			if (aLabel && bLabel && typeof aLabel === "string" && typeof bLabel === "string") {
-				return aLabel.localeCompare(bLabel);
-			}
-			return 0;
-		});
+		.sort(sortFunction);
 
 	const grouped = Object.groupBy(collectedItems, (item: JsonObject) => {
 		const L1 = deepGet(item, levelProperties[0], "");
@@ -80,14 +84,7 @@ export function getGroupedItems(
 				for (const L4 in (grouped as groupedByL1)[L1]![L2]![L3]!) {
 					(grouped as groupedByL1)[L1]![L2]![L3]![L4] = (grouped as groupedByL1)[L1]![L2]![L3]![
 						L4
-					]!.sort((a, b) => {
-						const aLabel = deepGet(a, sortProperty, ""),
-							bLabel = deepGet(b, sortProperty, "");
-						if (aLabel && bLabel && typeof aLabel === "string" && typeof bLabel === "string") {
-							return aLabel.localeCompare(bLabel);
-						}
-						return 0;
-					});
+					]!.sort(sortFunction);
 				}
 			}
 		}