Files
inventory-plus-plus/templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl
T

213 lines
4.7 KiB
Cheetah

{{- .Auth.ByMatchingAccountID 2 }}
{{- $acctID := .Identity.Account.AccountID }}
{{- $stores := .Accounts.GetShops $acctID -}}
{{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}
<section
id="new-mock-sync-group"
class="py-[2em] flex flex-col items-center"
hx-swap-oob="true"
>
<details
class="
group
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]"
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 }}"
>
{{- range $grp := .Accounts.ListMockSyncGroups $acctID }}
<li
id="sync-group-{{$grp.SyncGroupID}}"
class="bg-card rounded-lg mx-[1em] p-[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>
</li>
{{- end }}
</ul>
</section>