Add expand all & collapse all buttons (#358)

* add expand all & collapse all buttons * i forgor 💀 * accidentally removed this👎 * show total weight in profile selector * remembered to format this time 🙏 * pov me when i forget git checkout * Change key name as the required space was confusing --------- Co-authored-by: Kaeso <[email protected]>
EliteFarmers · Jan 16, 2025 · eef4ec3 · eef4ec3
1 parent 8c4a907
commit eef4ec3
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/src/routes/@[id=id]/[[profile]]/contests/+page.svelte b/src/routes/@[id=id]/[[profile]]/contests/+page.svelte
@@ -6,8 +6,18 @@
 	import type { PageData } from './$types';
 	import * as Accordion from '$ui/accordion';
 	import { Switch } from '$ui/switch';
+	import { Button } from '$ui/button';
 
 	let timeType = $state(false);
+	let accordionValues = $state<string[]>([]);
+
+	function expandAll() {
+		accordionValues = Object.keys(data.years ?? {}).map((year) => `year-${year}`);
+	}
+
+	function collapseAll() {
+		accordionValues = [];
+	}
 
 	interface Props {
 		data: PageData;
@@ -41,9 +51,14 @@
 			</div>
 		</div>
 
-		<Accordion.Root type="multiple" class="mx-4 w-full max-w-6xl items-center">
+		<div class="mb-4 flex gap-4">
+			<Button onclick={expandAll}>Expand All</Button>
+			<Button onclick={collapseAll}>Collapse All</Button>
+		</div>
+
+		<Accordion.Root type="multiple" class="mx-4 w-full max-w-6xl items-center" value={accordionValues}>
 			{#each Object.entries(data.years ?? {}).sort((a, b) => +b[0] - +a[0]) as [year, conts] (year)}
-				<Accordion.Item value="{year} ">
+				<Accordion.Item value="year-{year}">
 					<Accordion.Trigger class="flex justify-center hover:no-underline">
 						<div class="mr-4 flex flex-col items-center justify-center gap-2">
 							<div class="flex w-full flex-row items-center justify-between">
@@ -70,7 +85,7 @@
 
 					<Accordion.Content>
 						<div class="flex flex-wrap justify-center gap-4">
-							{#each conts ?? [] as contest (`${contest.timestamp ?? 0}${contest?.crop ?? 0}`)}
+							{#each conts ?? [] as contest}
 								<div class="basis-64">
 									<Contest {contest} irlTime={timeType} />
 								</div>