reorganized account page component templates
This commit is contained in:
+149
@@ -0,0 +1,149 @@
|
||||
{{- $acctID := .PathParams.acctID }}
|
||||
{{- $platform := .PathParams.platform }}
|
||||
|
||||
<details
|
||||
open
|
||||
class="
|
||||
flex flex-col items-center
|
||||
open:mb-[2em]
|
||||
|
||||
group/create-mock-shop
|
||||
|
||||
|
||||
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.225rem]
|
||||
details-content:outline-transparent
|
||||
|
||||
details-content:transition-[opacity_transform]
|
||||
"
|
||||
>
|
||||
<summary
|
||||
class="
|
||||
flex-grow
|
||||
p-[0.5em]
|
||||
grid
|
||||
grid-cols-[2fr_8fr_2fr]
|
||||
gap-[1em]
|
||||
|
||||
list-none
|
||||
|
||||
after:content-['+']
|
||||
group-open/create-mock-shop:after:content-['-']
|
||||
after:font-bold
|
||||
after:text-[2em]
|
||||
after:leading-[1em]
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
<h4 class="inline-block col-2 content-center">
|
||||
Mock Shops
|
||||
</h4>
|
||||
</summary>
|
||||
|
||||
<form class="px-[2em] py-[0.5em]">
|
||||
<div
|
||||
class="
|
||||
grid grid-cols-[max-content_max-content]
|
||||
gap-[0.25em]
|
||||
p-[0.5em]
|
||||
"
|
||||
>
|
||||
<label>
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="
|
||||
ml-[1em]
|
||||
|
||||
bg-card
|
||||
border-input border-[1px] rounded
|
||||
"
|
||||
/>
|
||||
<!--label>
|
||||
TODO:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="
|
||||
ml-[1em]
|
||||
|
||||
bg-card
|
||||
border-input border-[1px] rounded
|
||||
"
|
||||
/-->
|
||||
</div>
|
||||
{{ component "button"
|
||||
"Text" "Create"
|
||||
"Class" ""
|
||||
}}
|
||||
</form>
|
||||
</details>
|
||||
|
||||
<details
|
||||
open
|
||||
class="
|
||||
flex flex-col items-center
|
||||
|
||||
group/link-shops
|
||||
|
||||
|
||||
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.225rem]
|
||||
details-content:outline-transparent
|
||||
|
||||
details-content:transition-[opacity_transform]
|
||||
"
|
||||
>
|
||||
<summary
|
||||
class="
|
||||
flex-grow
|
||||
p-[0.5em]
|
||||
grid
|
||||
grid-cols-[2fr_8fr_2fr]
|
||||
gap-[1em]
|
||||
|
||||
list-none
|
||||
|
||||
after:content-['+']
|
||||
group-open/link-shops:after:content-['-']
|
||||
after:font-bold
|
||||
after:text-[2em]
|
||||
after:leading-[1em]
|
||||
cursor-pointer
|
||||
"
|
||||
>
|
||||
<h4 class="inline-block col-2 content-center">
|
||||
Link Shops
|
||||
</h4>
|
||||
</summary>
|
||||
|
||||
{{/* TODO: how to remove the platform from the path twice? */}}
|
||||
{{ component ( printf "/accounts/%d/platforms/%s/link-sections/links/%s" $acctID $platform $platform ) }}
|
||||
</details>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
{{- $acctID := .Identity.Account }}
|
||||
|
||||
{{- $etsyUser := .Etsy.GetUserPointerByAccountID $acctID.AccountID }}
|
||||
{{- if $etsyUser }}
|
||||
<h3>Etsy User: {{ $etsyUser.UserID }}; Shop ID: {{ $etsyUser.ShopID }}</h3>
|
||||
{{- else }}
|
||||
<h3 class="m-[0.5em] px-[2em] italic">
|
||||
<a href="{{ printf "/api/webhooks/etsy/%d/new-account-link" $acctID.AccountID }}" hx-boost="false">
|
||||
Link Your Store!
|
||||
</a>
|
||||
</h3>
|
||||
{{- end }}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
{{- $acctID := .Identity.Account.AccountID }}
|
||||
{{- $platform := parsePlatform .PathParams.platform -}}
|
||||
{{- $orderIndex := .OrderIndex }}
|
||||
{{- if and (not $orderIndex) (ne .OrderIndex 0) }}
|
||||
{{- $orderIndex = .Accounts.GetOrderOfPlatformOnAccountPage $acctID $platform -}}
|
||||
{{- end }}
|
||||
|
||||
|
||||
{{- $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"
|
||||
|
||||
{{/* the dragged <li> will be NOT be updated by the response (204 response), but instead the following sse events */}}
|
||||
hx-drag="{}"
|
||||
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/platforms/%s/list-item" $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
|
||||
id="{{$platformSegment}}-details"
|
||||
class="
|
||||
group
|
||||
|
||||
{{/* TODO: make custom class for all this */}}
|
||||
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]
|
||||
"
|
||||
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
|
||||
"
|
||||
>
|
||||
{{/*
|
||||
group-open:border-b-background
|
||||
group-open:border-b-[0.25rem]
|
||||
border-dotted
|
||||
*/}}
|
||||
<h3 class="inline-block">{{$platform.PrettyPrint}}</h3>
|
||||
</summary>
|
||||
|
||||
<div
|
||||
id="{{$platform}}-tab"
|
||||
class="p-[1em] text-center"
|
||||
>
|
||||
{{- $pathSegment := lowerSnakeCase (printf "%s" $platform) }}
|
||||
{{- component (printf "/accounts/%d/platforms/%s/link-sections" $acctID $pathSegment) }}
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
Reference in New Issue
Block a user