updated templater library; added accordion component
This commit is contained in:
@@ -6,207 +6,138 @@
|
||||
|
||||
{{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}
|
||||
|
||||
{{- define "header-accordion-header" }}
|
||||
<h2 class="inline-block">
|
||||
New Sync Group
|
||||
</h2>
|
||||
{{- end }}
|
||||
|
||||
{{- define "header-accordion-body" }}
|
||||
{{- $acctID := .Identity.Account.AccountID }}
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }}
|
||||
|
||||
<form
|
||||
hx-post="{{ (printf "/api/accounts/%d/inventory/sync-groups/mock" $acctID) }}"
|
||||
>
|
||||
<label class="block text-center mt-[1em]">
|
||||
Name:
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
placeholder="New Sync Group"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="flex justify-center gap-[0.5em] mt-[1em]">
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }}
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }}
|
||||
</div>
|
||||
</form>
|
||||
{{- end }}
|
||||
|
||||
{{- define "sync-group-accordion-header" }}
|
||||
<h3 class="text-center">
|
||||
{{ .Group.Name }}
|
||||
</h3>
|
||||
{{- end }}
|
||||
|
||||
{{- define "sync-group-accordion-body" }}
|
||||
{{- $acctID := .Identity.Account.AccountID }}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
SKU
|
||||
</th>
|
||||
<th>
|
||||
Description
|
||||
</th>
|
||||
<th>
|
||||
Count
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{- $dot := . }}
|
||||
{{- range $listing := .Group.Listings }}
|
||||
<tr>
|
||||
{{- $val := $dot.Accounts.GetMockListing $acctID $listing.Platform $listing.ShopID $listing.ListingID }}
|
||||
<td>
|
||||
{{ $val.Name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.SKU }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.Description }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.Count }}
|
||||
</td>
|
||||
</tr>
|
||||
{{- end }}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{- component "button"
|
||||
"Class" "mt-[1em]"
|
||||
"Text" "Delete Group"
|
||||
"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID .Group.SyncGroupID)
|
||||
"HXSwap" "none"
|
||||
}}
|
||||
{{- end }}
|
||||
|
||||
|
||||
<section
|
||||
id="new-mock-sync-group"
|
||||
class="py-[2em] flex flex-col items-center"
|
||||
class="
|
||||
flex flex-col items-stretch
|
||||
|
||||
py-[1em]
|
||||
"
|
||||
hx-swap-oob="true"
|
||||
>
|
||||
<details
|
||||
class="
|
||||
group
|
||||
{{ component "accordion"
|
||||
"Open" true
|
||||
"Class" `
|
||||
mx-[1em]
|
||||
mb-[1em]
|
||||
`
|
||||
"#accordion-header" "header-accordion-header"
|
||||
"#accordion-body" "header-accordion-body"
|
||||
}}
|
||||
|
||||
flex
|
||||
flex-col
|
||||
items-center
|
||||
|
||||
{{/* 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="
|
||||
flex
|
||||
items-center
|
||||
gap-[1em]
|
||||
list-none
|
||||
p-[1em]
|
||||
mb-[1em]
|
||||
cursor-pointer
|
||||
bg-accent
|
||||
rounded-lg
|
||||
|
||||
after:content-['+']
|
||||
group-open:after:content-['-']
|
||||
after:font-bold
|
||||
after:text-[2em]
|
||||
after:leading-[1em]
|
||||
"
|
||||
>
|
||||
<h2 class="inline-block">
|
||||
New Sync Group
|
||||
</h2>
|
||||
</summary>
|
||||
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table" $acctID) }}
|
||||
|
||||
<form
|
||||
hx-post="{{ (printf "/api/accounts/%d/inventory/sync-groups/mock" $acctID) }}"
|
||||
>
|
||||
<label class="block text-center mt-[1em]">
|
||||
Name:
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
placeholder="New Sync Group"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="flex justify-center gap-[0.5em]">
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/add-listing-button" $acctID) }}
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID) }}
|
||||
</div>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
|
||||
{{- $dot := . }}
|
||||
<ul
|
||||
id="existing-mock-sync-groups-list"
|
||||
class="my-[1em] flex flex-col gap-[1em]"
|
||||
class="flex flex-col gap-[1em]"
|
||||
hx-get="{{ printf "/ui/accounts/%d/inventory/mock" $acctID }}"
|
||||
hx-select="#existing-mock-sync-groups-list"
|
||||
hx-swap="morph"
|
||||
hx-trigger="{{ printf "sse:accounts_%d_inventory_sync-groups_mock,sse:accounts_%d_inventory_mock" $acctID }}"
|
||||
|
||||
hx-trigger="{{ printf "sse:accounts_%d_inventory_sync-groups_mock,sse:accounts_%d_inventory_mock" $acctID $acctID }}"
|
||||
>
|
||||
|
||||
{{- range $grp := .Accounts.ListMockSyncGroups $acctID }}
|
||||
<li
|
||||
id="sync-group-{{$grp.SyncGroupID}}"
|
||||
class="bg-card rounded-lg mx-[1em] p-[1em]"
|
||||
class="
|
||||
mx-[1em]
|
||||
"
|
||||
>
|
||||
<details
|
||||
class="
|
||||
group
|
||||
|
||||
flex
|
||||
flex-col
|
||||
items-center
|
||||
|
||||
details-content:flex
|
||||
details-content:flex-col
|
||||
details-content:items-center
|
||||
|
||||
{{/* 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]
|
||||
"
|
||||
>
|
||||
<summary
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
gap-[1em]
|
||||
list-none
|
||||
p-[1em]
|
||||
group-open:mb-[1em]
|
||||
cursor-pointer
|
||||
bg-accent
|
||||
rounded-lg
|
||||
|
||||
after:content-['+']
|
||||
group-open:after:content-['-']
|
||||
after:font-bold
|
||||
after:text-[2em]
|
||||
after:leading-[1em]
|
||||
"
|
||||
>
|
||||
<h3>
|
||||
Name: {{ $grp.Name }}
|
||||
</h3>
|
||||
</summary>
|
||||
|
||||
<table class="mt-[1em]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
SKU
|
||||
</th>
|
||||
<th>
|
||||
Description
|
||||
</th>
|
||||
<th>
|
||||
Count
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{- range $listing := $grp.Listings }}
|
||||
<tr>
|
||||
{{- $val := $dot.Accounts.GetMockListing $acctID $listing.Platform $listing.ShopID $listing.ListingID }}
|
||||
<td>
|
||||
{{ $val.Name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.SKU }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.Description }}
|
||||
</td>
|
||||
<td>
|
||||
{{ $val.Count }}
|
||||
</td>
|
||||
</tr>
|
||||
{{- end }}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{- component "button"
|
||||
"Class" "mt-[1em]"
|
||||
"Text" "Delete Group"
|
||||
"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID $grp.SyncGroupID)
|
||||
"HXSwap" "none"
|
||||
}}
|
||||
</details>
|
||||
{{ component "accordion"
|
||||
"GroupName" "sync-group"
|
||||
"Group" $grp
|
||||
"#accordion-header" "sync-group-accordion-header"
|
||||
"#accordion-body" "sync-group-accordion-body"
|
||||
}}
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user