account page: can now reorder entries under shops sections by drag and drop
This commit is contained in:
@@ -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>
|
||||
@@ -18,6 +18,7 @@
|
||||
<script src="/scripts/htmx-ext-sse.js"></script>
|
||||
<script src="/scripts/htmx-ext-path-params.js"></script>
|
||||
<script src="/scripts/idiomorph-ext.js"></script>
|
||||
<script src="/scripts/hx-drag.js"></script>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||||
@@ -35,7 +36,7 @@
|
||||
|
||||
<body
|
||||
class="basis-full grow bg-background flex flex-col items-stretch"
|
||||
hx-ext="morph,path-params,sse"
|
||||
hx-ext="morph,path-params,sse,drag"
|
||||
{{/* get requests to just replace the body - until we start replacing the head, this will be good */}}
|
||||
hx-boost="true"
|
||||
|
||||
|
||||
@@ -50,14 +50,20 @@
|
||||
|
||||
|
||||
<section
|
||||
id="shops-section"
|
||||
class="
|
||||
m-[1rem]
|
||||
pb-[1rem]
|
||||
border-b-[2px]
|
||||
border-sidebar-border
|
||||
"
|
||||
|
||||
hx-trigger="{{printf "sse:accounts_%d_platforms" $acctID}}"
|
||||
hx-get="{{printf "/ui/accounts/%d" $acctID}}"
|
||||
hx-select="#shops-section"
|
||||
hx-swap="morph"
|
||||
>
|
||||
<details class="flex flex-col items-stretch">
|
||||
<details class="flex flex-col items-stretch" open>
|
||||
<summary class="list-none cursor-pointer self-center">
|
||||
<h2 class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg">
|
||||
Shops
|
||||
@@ -65,74 +71,9 @@
|
||||
</summary>
|
||||
|
||||
<ul class="list-none">
|
||||
{{- define "shop-list-entry" }}
|
||||
{{/* .Platform, .AccountID */}}
|
||||
<li class="my-[1rem] rounded-lg bg-accent">
|
||||
<details
|
||||
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}}</h3>
|
||||
</summary>
|
||||
|
||||
<div class="p-[1em] text-center">
|
||||
{{- $pathSegment := lowerCamelCase .Platform }}
|
||||
{{-
|
||||
component
|
||||
(printf "/accounts/%d/shops/link-sections/%s" .AccountID $pathSegment)
|
||||
}}
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
{{- range $i, $platform := .Accounts.GetOrderOfPlatformsOnAccountPage $acctID }}
|
||||
{{ component (printf "/accounts/%d/shops/list-items/%s" $acctID $platform) "OrderIndex" $i }}
|
||||
{{- end }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Amazon" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Big Cartel" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "eBay" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Etsy" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Ecwid" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Shopify" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Square Online" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Squarespace" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Tiktok" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Walmart Marketplace" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Wix" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Woo Commerce" "AccountID" $acctID) }}
|
||||
{{- template "shop-list-entry" (props "Platform" "Zoho" "AccountID" $acctID) }}
|
||||
</ul>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user