mock shop page allows updating of listings
This commit is contained in:
+138
-26
@@ -27,9 +27,32 @@
|
||||
</h3>
|
||||
</header>
|
||||
|
||||
<div class="grid md:grid-cols-[1fr_1fr] gap-[1em] p-[1em]">
|
||||
<div
|
||||
id="listings-container"
|
||||
class="grid md:grid-cols-[1fr_1fr] gap-[1em] p-[1em]"
|
||||
_="
|
||||
on startEditingExistingListing(
|
||||
listingID,
|
||||
name,
|
||||
sku,
|
||||
description
|
||||
)
|
||||
send hide to #new-listing-form
|
||||
send show(
|
||||
listingID: listingID,
|
||||
name: name,
|
||||
sku: sku,
|
||||
description: description
|
||||
) to #edit-listing-form
|
||||
|
||||
on startEditingNewListing
|
||||
send show to #new-listing-form
|
||||
send hide to #edit-listing-form
|
||||
send reset to <li/> in <ul/> in me
|
||||
"
|
||||
>
|
||||
<form
|
||||
id="edit-listing-form"
|
||||
id="new-listing-form"
|
||||
hx-post={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings" $acctID $shopID }}
|
||||
hx-swap="none"
|
||||
class="
|
||||
@@ -43,21 +66,22 @@
|
||||
rounded-lg
|
||||
"
|
||||
_="
|
||||
on editListing(
|
||||
listingID,
|
||||
name,
|
||||
sku,
|
||||
description
|
||||
)
|
||||
set the value of the first <input[name='name']/> in me to name
|
||||
set the value of the first <input[name='sku']/> in me to sku
|
||||
set the value of the first <input[name='description']/> in me to description
|
||||
remove .hidden from <button#save-as-new-listing-button/>
|
||||
on hide
|
||||
add @disabled to <button#save-as-new-listing-button/>
|
||||
add .hidden to me
|
||||
set the value of the first <input[name='name']/> in me to ''
|
||||
set the value of the first <input[name='sku']/> in me to ''
|
||||
set the value of the first <input[name='description']/> in me to ''
|
||||
on show
|
||||
remove .hidden from me
|
||||
remove @disabled from <button#save-as-new-listing-button/>
|
||||
"
|
||||
>
|
||||
<h3 class="col-[span_2] text-center">
|
||||
New Listing
|
||||
</h3>
|
||||
<label for="name">
|
||||
Name:
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -68,7 +92,7 @@
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
<label for="sku">
|
||||
SKU:
|
||||
SKU:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -77,7 +101,7 @@
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
<label for="description">
|
||||
Description:
|
||||
Description:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -88,16 +112,104 @@
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
{{ component "button"
|
||||
"Text" "Save Listing"
|
||||
"Text" "Save"
|
||||
"Class" "self-center p-[1em] col-span-2"
|
||||
"_" "on click send reset() to <li/> in next <ul/>"
|
||||
"ID" "save-as-new-listing-button"
|
||||
}}
|
||||
</form>
|
||||
|
||||
<form
|
||||
id="edit-listing-form"
|
||||
hx-put={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings/{listingID}" $acctID $shopID }}
|
||||
hx-swap="none"
|
||||
class="
|
||||
grid
|
||||
grid-cols-[max-content_1fr]
|
||||
grid-rows-[auto_auto_auto]
|
||||
gap-[0.5em]
|
||||
p-[1em]
|
||||
bg-card
|
||||
h-fit
|
||||
rounded-lg
|
||||
hidden
|
||||
"
|
||||
_="
|
||||
on hide
|
||||
add @disabled to <button#save-listing-button/>
|
||||
add @disabled to <button#edit-new-listing-button/>
|
||||
add .hidden to me
|
||||
set the value of the first <input[name='name']/> in me to ''
|
||||
set the value of the first <input[name='sku']/> in me to ''
|
||||
set the value of the first <input[name='description']/> in me to ''
|
||||
on show(
|
||||
listingID,
|
||||
name,
|
||||
sku,
|
||||
description
|
||||
)
|
||||
set :listingID to listingID
|
||||
remove .hidden from me
|
||||
remove @disabled from <button#save-listing-button/>
|
||||
remove @disabled from <button#edit-new-listing-button/>
|
||||
set the value of the first <input[name='listingID']/> in me to listingID
|
||||
set the value of the first <input[name='name']/> in me to name
|
||||
set the value of the first <input[name='sku']/> in me to sku
|
||||
set the value of the first <input[name='description']/> in me to description
|
||||
set the innerHTML of the <h3/> in me to ('Editing ' + name)
|
||||
"
|
||||
>
|
||||
<h3 class="col-[span_2] text-center">
|
||||
Edit Listing
|
||||
</h3>
|
||||
<label for="name">
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
minlength="5"
|
||||
placeholder="What's in a name..."
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
<label for="sku">
|
||||
SKU:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="sku"
|
||||
required
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
<label for="description">
|
||||
Description:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
required
|
||||
minlength="10"
|
||||
placeholder="Anything will do..."
|
||||
class="bg-accent p-[0.25em] rounded-sm"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="listingID"
|
||||
value=""
|
||||
/>
|
||||
{{ component "button"
|
||||
"Text" "Save"
|
||||
"Class" "self-center p-[1em] col-span-2"
|
||||
"ID" "save-listing-button"
|
||||
"Disabled" true
|
||||
"_" "on click send reset to <li/> in next <ul/>"
|
||||
}}
|
||||
{{ component "button"
|
||||
"Text" "Save As New Listing"
|
||||
"Class" "self-center p-[1em] col-span-2 hidden"
|
||||
"ID" "save-as-new-listing-button"
|
||||
"Text" "New"
|
||||
"Class" "self-center p-[1em] col-span-2"
|
||||
"ID" "edit-new-listing-button"
|
||||
"Disabled" true
|
||||
"_" "on click event.preventDefault() then send reset() to <li/> in next <ul/>"
|
||||
"_" "on click event.preventDefault() then send startEditingNewListing to #listings-container"
|
||||
}}
|
||||
</form>
|
||||
|
||||
@@ -112,15 +224,15 @@
|
||||
"
|
||||
_="
|
||||
on click
|
||||
send reset() to <li/> in the closest <ul/>
|
||||
add .border-foreground to me
|
||||
add .border to me
|
||||
send editListing(
|
||||
send startEditingExistingListing(
|
||||
listingID: '{{$listing.ListingID}}',
|
||||
name: '{{$listing.Name}}',
|
||||
sku: '{{$listing.SKU}}',
|
||||
description: '{{$listing.Description}}'
|
||||
) to #edit-listing-form
|
||||
) 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
|
||||
|
||||
Reference in New Issue
Block a user