mock shop page: search listings

This commit is contained in:
2026-02-05 11:02:29 -07:00
parent 02893511ba
commit 0924d0edb1
2 changed files with 94 additions and 65 deletions
@@ -79,7 +79,7 @@
<h3 class="col-[span_2] text-center">
New Listing
</h3>
<label for="name">
<label for="name" class="self-center">
Name:
</label>
<input
@@ -90,7 +90,7 @@
placeholder="What's in a name..."
class="bg-accent p-[0.25em] rounded-sm"
/>
<label for="sku">
<label for="sku" class="self-center">
SKU:
</label>
<input
@@ -99,7 +99,7 @@
required
class="bg-accent p-[0.25em] rounded-sm"
/>
<label for="description">
<label for="description" class="self-center">
Description:
</label>
<input
@@ -160,7 +160,7 @@
<h3 class="col-[span_2] text-center">
Edit Listing
</h3>
<label for="name">
<label for="name" class="self-center">
Name:
</label>
<input
@@ -171,7 +171,7 @@
placeholder="What's in a name..."
class="bg-accent p-[0.25em] rounded-sm"
/>
<label for="sku">
<label for="sku" class="self-center">
SKU:
</label>
<input
@@ -180,7 +180,7 @@
required
class="bg-accent p-[0.25em] rounded-sm"
/>
<label for="description">
<label for="description" class="self-center">
Description:
</label>
<input
@@ -212,63 +212,103 @@
}}
</form>
<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
<li
id="listing-{{$listing.ListingID}}"
<div>
<form
class="
grid
grid-cols-[max-content_1fr]
gap-[0.5em]
mb-[1em]
p-[1em]
grid grid-cols-[max-content_1fr] gap-x-[1em]
bg-card
h-fit
rounded-lg
"
_="
on click
send startEditingExistingListing(
listingID: '{{$listing.ListingID}}',
name: '{{$listing.Name}}',
sku: '{{$listing.SKU}}',
description: '{{$listing.Description}}'
) to #listings-container
send reset() to <li/> in the closest <ul/>
add .border-foreground to me
add .border to me
on reset
remove .border-foreground from me
remove .border from me
"
>
<span>
Name:
</span>
<span>
{{ $listing.Name }}
</span>
<label for="name" class="self-center">
Find Listing
</label>
<input
type="search"
name="name"
class="bg-accent p-[0.25em] rounded-sm"
_="
on input
set term to event.target.value
if (not term)
remove .hidden from <li/> in next <ul/>
else
for li in (<li/> in the next <ul/>)
set name to the (innerHTML of the first .listing-name in li).trim()
if not name.includes(term)
add .hidden to li
else
remove .hidden from li
end
end
end
"
/>
</form>
<span>
SKU:
</span>
<span>
{{ $listing.SKU }}
</span>
<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
<li
id="listing-{{$listing.ListingID}}"
class="
p-[1em]
grid grid-cols-[max-content_1fr] gap-x-[1em]
bg-card
rounded-lg
"
_="
on click
send startEditingExistingListing(
listingID: '{{$listing.ListingID}}',
name: '{{$listing.Name}}',
sku: '{{$listing.SKU}}',
description: '{{$listing.Description}}'
) to #listings-container
send reset() to <li/> in the closest <ul/>
add .border-foreground to me
add .border to me
<span>
Description:
</span>
<span>
{{ $listing.Description }}
</span>
on reset
remove .border-foreground from me
remove .border from me
"
>
<span>
Name:
</span>
<span class="listing-name">
{{ $listing.Name }}
</span>
<span>
Count:
</span>
<span>
{{ $listing.Count }}
</span>
</li>
{{- end }}
</ul>
<span>
SKU:
</span>
<span>
{{ $listing.SKU }}
</span>
<span>
Description:
</span>
<span>
{{ $listing.Description }}
</span>
<span>
Count:
</span>
<span>
{{ $listing.Count }}
</span>
</li>
{{- end }}
</ul>
</div>
</div>
</section>