account page: can now reorder entries under shops sections by drag and drop

2026-01-26 13:51:40 -07:00
parent a2d8993e0e
commit a50c0ef18d
14 changed files with 682 additions and 88 deletions
@@ -0,0 +1,96 @@
+{{- $acctID := .Identity.Account.AccountID }}
+{{- $platform := parsePlatform .PathParams.platform -}}
+{{- $orderIndex := .OrderIndex }}
+{{- if and (not $orderIndex) (ne .OrderIndex 0) }}
+	{{- $orderIndex = .Accounts.GetOrderOfPlatformOnAccountPage $acctID $platform -}}
+{{- end }}
+
+
+{{- $platformSegment := lowerCamelCase (printf "%s" $platform) }}
+{{- $path := 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}}"}'
+	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')"
+	draggable="true"
+>
+	<details
+		open
+		class="
+			group
+
+			details-content:opacity-[0]
+			open:details-content:opacity-[1]
+
+			details-content:transform-[translate(0px,-2em)]
+			open:details-content:transform-[translate(0px,0px)]
+
+			details-content:border-transparent
+			open:details-content:border-dotted
+			open:details-content:border-x-[0px]
+			open:details-content:border-x-transparent
+			open:details-content:border-b-[0px]
+			open:details-content:border-b-transparent
+			open:details-content:border-t-background
+			open:details-content:border-t-[0.25rem]
+			details-content:outline-transparent
+
+			details-content:transition-[opacity_transform]
+		"
+	>
+		<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]
+			border-dotted
+			*/}}
+			<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>
+	</details>
+</li>