account page: fixed platform reordering bugs

templates/components/accounts/{acctID.int64}/shops/list-items/{platform}.html.tmpl

@@ -6,44 +6,48 @@
 {{- end }}
 
 
-{{- $platformSegment := lowerCamelCase (printf "%s" $platform) }}
-{{- $path := printf "/accounts/%d/platforms/%s/order-index" $acctID $platformSegment }}
+{{- $platformSegment := lowerSnakeCase (printf "%s" $platform) }}
+{{- $updatePath := printf "/accounts/%d/platforms/%s/order-index" $acctID $platformSegment }}
 <li
 	id="{{$platformSegment}}"
 	class="my-[1rem] rounded-lg bg-accent"
-	hx-drag-action="/api{{$path}}"
-	hx-drop='{"order-index": "{{$orderIndex}}"}'
+
+	{{/* the dragged <li> will be NOT be updated by the response (204 response), but instead the following sse events */}}
 	hx-drag="{}"
-	hx-trigger="sse:{{$path}}"
-	hx-get="/ui{{$path}}"
-	hx-on::sse-message="console.log('test')"
-	hx-on::sseMessage="console.log('test')"
-	hx-on::sseOpen="console.log('test')"
-	hx-on::sse-open="console.log('test')"
-	hx-on:htmx:sse-message="console.log('test')"
-	hx-on:htmx:sseMessage="console.log('test')"
-	hx-on:htmx:sseOpen="console.log('test')"
-	hx-on:htmx:sse-open="console.log('test')"
-	hx-on::htmx:sse-message="console.log('test')"
-	hx-on::htmx:sseMessage="console.log('test')"
-	hx-on::htmx:sseOpen="console.log('test')"
-	hx-on::htmx:sse-open="console.log('test')"
-	hx-on--sse-message="console.log('test')"
-	hx-on--sseMessage="console.log('test')"
-	hx-on--sseOpen="console.log('test')"
-	hx-on--sse-open="console.log('test')"
-	hx-on-htmx-sse-message="console.log('test')"
-	hx-on-htmx-sseMessage="console.log('test')"
-	hx-on-htmx-sseOpen="console.log('test')"
-	hx-on-htmx-sse-open="console.log('test')"
-	hx-on--htmx-sse-message="console.log('test')"
-	hx-on--htmx-sseMessage="console.log('test')"
-	hx-on--htmx-sseOpen="console.log('test')"
-	hx-on--htmx-sse-open="console.log('test')"
+	hx-drop='{"order-index": "{{$orderIndex}}"}'
+	hx-drag-action={{printf "/api/accounts/%d/platforms/%s/order-index" $acctID $platformSegment}}
+
+	hx-trigger={{printf "sse:accounts_%d_platforms_%s_order-index" $acctID $platformSegment }}
+	hx-get={{printf "/ui/accounts/%d/shops/list-items/%s" $acctID $platformSegment}}
+
 	draggable="true"
+	data-order-index={{$orderIndex}}
+	_="
+		on dragstart
+			set event.dataTransfer.effectAllowed to 'move'
+			event.dataTransfer.setData('platform-section', my id)
+			event.dataTransfer.setData('order-index', my dataset.orderIndex)
+
+		on dragover
+			if event.dataTransfer.types.includes('platform-section') then
+				event.preventDefault()
+			end
+
+		on drop
+			event.preventDefault()
+			set draggedID to event.dataTransfer.getData('platform-section')
+			set draggedOrderIndex to event.dataTransfer.getData('order-index')
+			set myOrderIndex to parseInt(my dataset.orderIndex)
+			set draggedSection to #{draggedID}
+			if draggedOrderIndex < myOrderIndex then
+				me.after(draggedSection)
+			else
+				me.before(draggedSection)
+			end
+	"
 >
 	<details
-		open
+		id="{{$platformSegment}}-details"
 		class="
 			group
 
@@ -65,18 +69,21 @@
 
 			details-content:transition-[opacity_transform]
 		"
+		hx-preserve
 	>
-		<summary class="
-			list-none
-			p-[1em]
-			after:content-['+']
-			group-open:after:content-['-']
-			after:float-right
-			after:font-bold
-			after:text-[2em]
-			after:leading-[1em]
-			cursor-pointer
-		">
+		<summary
+			class="
+				list-none
+				p-[1em]
+				after:content-['+']
+				group-open:after:content-['-']
+				after:float-right
+				after:font-bold
+				after:text-[2em]
+				after:leading-[1em]
+				cursor-pointer
+			"
+		>
 			{{/*
 			group-open:border-b-background
 			group-open:border-b-[0.25rem]
@@ -85,12 +92,12 @@
 			<h3 class="inline-block">{{$platform.PrettyPrint}}</h3>
 		</summary>
 
-		<div class="p-[1em] text-center">
-			{{- $pathSegment := lowerCamelCase (printf "%s" $platform) }}
-			{{-
-				component
-				(printf "/accounts/%d/shops/link-sections/%s" $acctID $pathSegment)
-			}}
+		<div
+			id="{{$platform}}-tab"
+			class="p-[1em] text-center"
+		>
+			{{- $pathSegment := lowerSnakeCase (printf "%s" $platform) }}
+			{{- component (printf "/accounts/%d/shops/link-sections/%s" $acctID $pathSegment) }}
 		</div>
 	</details>
 </li>