From 60f3896b8bdc260d8250e081c4b1335ff411262d Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 17 May 2024 15:02:45 +0200
Subject: [PATCH] sortable file hierarchy progress

---
 website/src/lib/components/App.svelte         |  1 -
 .../CollapsibleTreeNode.svelte                |  1 +
 .../lib/components/collapsible-tree/index.ts  |  2 +
 .../lib/components/file-list/FileList2.svelte |  8 +-
 .../components/file-list/FileListNode.svelte  | 65 ++++++-------
 .../file-list/FileListNodeContent.svelte      | 95 +++++++++++++++++++
 ...stItem.svelte => FileListNodeStore.svelte} |  9 +-
 7 files changed, 139 insertions(+), 42 deletions(-)
 create mode 100644 website/src/lib/components/collapsible-tree/index.ts
 create mode 100644 website/src/lib/components/file-list/FileListNodeContent.svelte
 rename website/src/lib/components/file-list/{FileListItem.svelte => FileListNodeStore.svelte} (64%)

diff --git a/website/src/lib/components/App.svelte b/website/src/lib/components/App.svelte
index 5d00d132..a88486a4 100644
--- a/website/src/lib/components/App.svelte
+++ b/website/src/lib/components/App.svelte
@@ -19,7 +19,6 @@
 			<Map class="h-full" />
 			<LayerControl />
 			<GPXLayers />
-			<FileList />
 			<Toaster richColors />
 		</div>
 		<div class="h-48 flex flex-row gap-2 overflow-hidden">
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
index f57d0c89..8eec85fa 100644
--- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
+++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
@@ -28,6 +28,7 @@
 			class="w-full flex flex-row {side === 'right'
 				? 'justify-between'
 				: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+			on:click
 		>
 			{#if side === 'left'}
 				{#if $open[id]}
diff --git a/website/src/lib/components/collapsible-tree/index.ts b/website/src/lib/components/collapsible-tree/index.ts
new file mode 100644
index 00000000..9b1298b9
--- /dev/null
+++ b/website/src/lib/components/collapsible-tree/index.ts
@@ -0,0 +1,2 @@
+export { default as CollapsibleTree } from './CollapsibleTree.svelte';
+export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';
\ No newline at end of file
diff --git a/website/src/lib/components/file-list/FileList2.svelte b/website/src/lib/components/file-list/FileList2.svelte
index a60e986b..28dc70c5 100644
--- a/website/src/lib/components/file-list/FileList2.svelte
+++ b/website/src/lib/components/file-list/FileList2.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
-	import FileListItem from '$lib/components/file-list/FileListItem.svelte';
+	import FileListNode from './FileListNode.svelte';
 
 	import { fileObservers } from '$lib/db';
 </script>
 
-<ScrollArea class="w-fit p-1 pr-4">
+<ScrollArea class="w-fit p-1 pr-4 border">
 	<div class="w-60 flex flex-col gap-1">
-		{#each Array.from($fileObservers.values()) as file}
-			<FileListItem {file} />
-		{/each}
+		<FileListNode node={$fileObservers} id="root" />
 	</div>
 </ScrollArea>
diff --git a/website/src/lib/components/file-list/FileListNode.svelte b/website/src/lib/components/file-list/FileListNode.svelte
index 047f08d1..947fdae4 100644
--- a/website/src/lib/components/file-list/FileListNode.svelte
+++ b/website/src/lib/components/file-list/FileListNode.svelte
@@ -1,45 +1,40 @@
 <script lang="ts">
-	import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-	import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
-	import { Button } from '$lib/components/ui/button';
+	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+	import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
+	import type { GPXFileWithStatistics } from '$lib/db';
+	import type { Readable } from 'svelte/store';
+	import FileListNodeContent from './FileListNodeContent.svelte';
+	import { createEventDispatcher } from 'svelte';
 
-	export let node: GPXTreeElement<AnyGPXTreeElement>;
+	export let node:
+		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+		| GPXTreeElement<AnyGPXTreeElement>
+		| ReadonlyArray<Readonly<Waypoint>>;
 	export let id: string;
 	export let index: number = 0;
+
+	const dispatch = createEventDispatcher();
+
+	function forwardId() {
+		dispatch('click', { id });
+	}
 </script>
 
-{#if node instanceof GPXFile}
-	<CollapsibleTreeNode {id}>
-		<span slot="trigger" class="truncate">{node.metadata.name}</span>
-		<div slot="content" class="flex flex-col gap-0.5">
-			{#each node.children as child, i}
-				<svelte:self node={child} id={`${id}-track-${i}`} index={i} />
-			{/each}
-			{#if node.wpt.length > 0}
-				<CollapsibleTreeNode id={`${id}-wpt`}>
-					<span slot="trigger">Waypoints</span>
-					<div slot="content" class="flex flex-col gap-0.5">
-						{#each node.wpt as wpt, i}
-							<Button variant="ghost" class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
-								><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
-							>
-						{/each}
-					</div>
-				</CollapsibleTreeNode>
+{#if node instanceof Map}
+	<FileListNodeContent {node} {id} />
+{:else}
+	<CollapsibleTreeNode {id} on:click={forwardId}>
+		<span slot="trigger" class="truncate">
+			{#if node instanceof GPXFile}
+				{node.metadata.name}
+			{:else if node instanceof Track}
+				{node.name ?? `Track ${index + 1}`}
+			{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
+				Waypoints
 			{/if}
+		</span>
+		<div slot="content">
+			<FileListNodeContent {node} {id} />
 		</div>
 	</CollapsibleTreeNode>
-{:else if node instanceof Track}
-	<CollapsibleTreeNode {id}>
-		<span slot="trigger" class="truncate">{node.name ?? `Track ${index + 1}`}</span>
-		<div slot="content" class="flex flex-col gap-0.5">
-			{#each node.children as child, i}
-				<svelte:self node={child} id={`${id}-segment-${i}`} index={i} />
-			{/each}
-		</div>
-	</CollapsibleTreeNode>
-{:else if node instanceof TrackSegment}
-	<Button variant="ghost" class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
-		>{`Segment ${index + 1}`}</Button
-	>
 {/if}
diff --git a/website/src/lib/components/file-list/FileListNodeContent.svelte b/website/src/lib/components/file-list/FileListNodeContent.svelte
new file mode 100644
index 00000000..e14ceaeb
--- /dev/null
+++ b/website/src/lib/components/file-list/FileListNodeContent.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
+	import { Button } from '$lib/components/ui/button';
+	import { onMount } from 'svelte';
+	import Sortable from 'sortablejs/Sortable';
+	import type { GPXFileWithStatistics } from '$lib/db';
+	import type { Readable } from 'svelte/store';
+	import FileListNodeStore from './FileListNodeStore.svelte';
+	import FileListNode from './FileListNode.svelte';
+
+	export let node:
+		| Map<string, Readable<GPXFileWithStatistics | undefined>>
+		| GPXTreeElement<AnyGPXTreeElement>
+		| ReadonlyArray<Readonly<Waypoint>>;
+	export let id: string;
+
+	let container: HTMLElement;
+	let sortableLevel =
+		node instanceof Map
+			? 'file'
+			: node instanceof GPXFile
+				? 'track'
+				: node instanceof Track
+					? 'segment'
+					: 'waypoint';
+	let sortable: Sortable;
+
+	onMount(() => {
+		sortable = Sortable.create(container, {
+			group: sortableLevel,
+			forceAutoScrollFallback: true,
+			multiDrag: true,
+			multiDragKey: 'Meta',
+			selectedClass: 'sortable-selected',
+			avoidImplicitDeselect: true
+		});
+	});
+
+	function handleClick(id: string) {
+		console.log('handle click for', id);
+	}
+</script>
+
+<div bind:this={container} class="flex flex-col gap-0.5">
+	{#if node instanceof Map}
+		{#each Array.from(node.values()) as file}
+			<div>
+				<FileListNodeStore {file} on:click={(e) => handleClick(e.detail.id)} />
+			</div>
+		{/each}
+	{:else if node instanceof GPXFile}
+		{#each node.children as child, i}
+			<div>
+				<FileListNode
+					node={child}
+					id={`${id}-track-${i}`}
+					index={i}
+					on:click={(e) => handleClick(e.detail.id)}
+				/>
+			</div>
+		{/each}
+		{#if node.wpt.length > 0}
+			<div>
+				<FileListNode node={node.wpt} id={`${id}-wpt`} on:click={(e) => handleClick(e.detail.id)} />
+			</div>
+		{/if}
+	{:else if node instanceof Track}
+		{#each node.children as child, i}
+			<div>
+				<Button
+					variant="ghost"
+					class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
+					on:click={() => handleClick(`${id}-seg-${i + 1}`)}>{`Segment ${i + 1}`}</Button
+				>
+			</div>
+		{/each}
+	{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
+		{#each node as wpt, i}
+			<div>
+				<Button
+					variant="ghost"
+					class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
+					on:click={() => handleClick(`${id}-${i + 1}`)}
+					><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
+				>
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style lang="postcss">
+	div :global(.sortable-selected) {
+		@apply bg-accent;
+	}
+</style>
diff --git a/website/src/lib/components/file-list/FileListItem.svelte b/website/src/lib/components/file-list/FileListNodeStore.svelte
similarity index 64%
rename from website/src/lib/components/file-list/FileListItem.svelte
rename to website/src/lib/components/file-list/FileListNodeStore.svelte
index 85da4c18..9785bc83 100644
--- a/website/src/lib/components/file-list/FileListItem.svelte
+++ b/website/src/lib/components/file-list/FileListNodeStore.svelte
@@ -3,13 +3,20 @@
 	import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
 	import type { GPXFileWithStatistics } from '$lib/db';
+	import { createEventDispatcher } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
 	export let file: Readable<GPXFileWithStatistics | undefined>;
+
+	const dispatch = createEventDispatcher();
+
+	function forwardId() {
+		dispatch('click', { id: $file?.file._data.id });
+	}
 </script>
 
 {#if $file}
 	<CollapsibleTree side="left" margin={4} defaultState="closed">
-		<FileListNode node={$file.file} id={$file.file._data.id} />
+		<FileListNode node={$file.file} id={$file.file._data.id} on:click={forwardId} />
 	</CollapsibleTree>
 {/if}