mock shop sync group listing draft page
This commit is contained in:
+140
@@ -0,0 +1,140 @@
|
||||
{{/* optional props: .Listings = .Accounts.GetMockSyncGroupListingDrafts */}}
|
||||
|
||||
{{- $acctID := .PathParams.acctID }}
|
||||
{{- $orderIndex := .PathParams.orderIndex }}
|
||||
{{- $entry := .Accounts.GetMockSyncGroupListingDraft $acctID $orderIndex }}
|
||||
{{- $selectedShopPlatform := $entry.Platform }}
|
||||
{{- $selectedShopID := $entry.ShopID }}
|
||||
{{- $selectedListingID := $entry.ListingID }}
|
||||
|
||||
{{/* TODO: is this supposed to be the mock listings (not draft listings)? */}}
|
||||
{{- $listings := .Listings }}
|
||||
{{- if not $listings }}
|
||||
{{- $listings = .Accounts.GetMockSyncGroupListingDrafts $acctID }}
|
||||
{{- end }}
|
||||
|
||||
|
||||
<tr _="
|
||||
init
|
||||
set @data-filled-out to false
|
||||
|
||||
def setFilledOut(val)
|
||||
set @data-filled-out to val
|
||||
send rowUpdated() to closest <tbody/>
|
||||
end
|
||||
|
||||
on setListing(listing)
|
||||
call setFilledOut(true)
|
||||
|
||||
|
||||
on resetListing
|
||||
call setFilledOut(false)
|
||||
"
|
||||
>
|
||||
<td>
|
||||
{{/* TODO: filter out shops that are already selected */}}
|
||||
{{- $shops := .Accounts.GetMockShops $acctID -}}
|
||||
<select
|
||||
class="min-w-fit cursor-pointer"
|
||||
hx-put="/api/accounts/{{$acctID}}/inventory/sync-groups/mock/draft/listings/{{$orderIndex}}/shop"
|
||||
hx-vals='js:{
|
||||
platform: event.target.value.replace(/-[^ ]*/, ""),
|
||||
"shop-id": event.target.value.replace(/^[a-zA-Z_]*-/, "")
|
||||
}'
|
||||
hx-swap="none"
|
||||
_="
|
||||
on change
|
||||
send resetListing() to closest <tr/>
|
||||
"
|
||||
>
|
||||
<option disabled {{- if not $selectedShopID }}selected{{- end }}>- Shops -</option>
|
||||
{{- range $shop := $shops }}
|
||||
{{- $shopSelectedInOtherListing := false }}
|
||||
{{- if not (eq $shop.ShopID $selectedShopID ) }}
|
||||
{{- range $listing := $listings }}
|
||||
{{- if eq $listing.ShopID $shop.ShopID }}
|
||||
{{- $shopSelectedInOtherListing = true }}
|
||||
{{- break }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- if $shopSelectedInOtherListing }}
|
||||
{{- continue }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
{{- $isSelectedShop := and
|
||||
(eq $selectedShopPlatform $shop.Platform)
|
||||
(eq $selectedShopID $shop.ShopID)
|
||||
}}
|
||||
<option
|
||||
value="{{$shop.Platform}}-{{$shop.ShopID}}"
|
||||
{{- if $isSelectedShop }}selected{{- end }}
|
||||
>
|
||||
{{ $shop.Name }} - {{$shop.Platform}} - {{$shop.ShopID}} - {{(eq $selectedShopPlatform $shop.Platform)}} - {{(eq $selectedShopID $shop.ShopID)}}
|
||||
</option>
|
||||
{{- end }}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{- $selectedListing := "" }}
|
||||
{{- if $selectedShopID }}
|
||||
{{- $shopListings := .Accounts.GetMockListingsForShop $acctID $selectedShopPlatform $selectedShopID }}
|
||||
{{- if $shopListings }}
|
||||
<select
|
||||
class="min-w-fit cursor-pointer"
|
||||
|
||||
hx-put="/api/accounts/{{$acctID}}/inventory/sync-groups/mock/draft/listings/{{$orderIndex}}/listing"
|
||||
hx-vals='js:{
|
||||
"listing-id": event.target.value,
|
||||
}'
|
||||
hx-swap="none"
|
||||
|
||||
_="
|
||||
on input
|
||||
set dataset to (my selectedOptions)[0].dataset
|
||||
send setListing(listing: dataset) to the closest <tr/>
|
||||
"
|
||||
>
|
||||
<option disabled {{if not $selectedListingID}}selected{{end}}>- Listings -</option>
|
||||
{{- range $i, $shopListing := $shopListings }}
|
||||
{{- if eq $selectedListingID $shopListing.ListingID }}
|
||||
{{ $selectedListing = $shopListing }}
|
||||
{{- end }}
|
||||
<option
|
||||
value="{{$shopListing.ListingID}}"
|
||||
{{if eq $selectedListingID $shopListing.ListingID}}selected{{end}}
|
||||
data-name="{{ $shopListing.Name }}"
|
||||
data-sku="{{ $shopListing.SKU }}"
|
||||
data-description="{{ $shopListing.Description }}"
|
||||
data-count="{{ $shopListing.Count }}"
|
||||
>
|
||||
{{ $shopListing.Name }}
|
||||
</option>
|
||||
{{- end }}
|
||||
</select>
|
||||
{{- else }}
|
||||
no listings found
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
-
|
||||
{{- end }}
|
||||
</td>
|
||||
|
||||
<td data-id="sku">
|
||||
{{if $selectedListing}}{{$selectedListing.SKU}}{{else}}-{{end}}
|
||||
</td>
|
||||
|
||||
<td data-id="description">
|
||||
{{if $selectedListing}}{{$selectedListing.Description}}{{else}}-{{end}}
|
||||
</td>
|
||||
|
||||
<td data-id="remove">
|
||||
{{ component "button"
|
||||
"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/draft/listings/%d" $acctID $orderIndex)
|
||||
"HXTarget" "#accounts-acct-id-inventory-sync-groups-mock-draft-table"
|
||||
"HXSwap" "none"
|
||||
"Text" "Remove"
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
{{- $acctID := .PathParams.acctID }}
|
||||
|
||||
|
||||
{{- $button := component "button"
|
||||
"HXPost" (printf "/api/accounts/%d/inventory/sync-groups/mock/draft/listings" $acctID)
|
||||
"HXTarget" "#accounts-acct-id-inventory-sync-groups-mock-draft-table"
|
||||
"HXSwap" "none"
|
||||
"HXSelect" "#accounts-acct-id-inventory-sync-groups-mock-draft-table"
|
||||
"ID" "sync-groups-mock-draft-table-add-listing-button"
|
||||
"Class" "mt-[1em] mb-[1em]"
|
||||
"Text" "Add Listing"
|
||||
"_" `
|
||||
on click
|
||||
send rowUpdated to the first <tbody/> in #accounts-acct-id-inventory-sync-groups-mock-draft-table
|
||||
`
|
||||
}}
|
||||
{{/* $button */}}
|
||||
|
||||
{{-
|
||||
component "tutorial-tooltip"
|
||||
"AnchorTag" "div"
|
||||
"AnchorID" "sync-groups-mock-draft-table-add-listing-button"
|
||||
"AnchorClickedEventName" "anchorClicked"
|
||||
"AnchorContent" $button
|
||||
|
||||
"AnchorClass" ""
|
||||
"AnchorStyle" "display: inline;"
|
||||
|
||||
"PopoverID" "add-listing-popover"
|
||||
"PopoverContentIDPrefix" "add-listing-popover-content"
|
||||
"PopoverContents" (
|
||||
newHTMLSlice
|
||||
"Click to add a listing"
|
||||
"You need at least two to create a sync group!"
|
||||
"Keep adding listing until done!"
|
||||
)
|
||||
}}
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
{{- .Auth.ByMatchingAccountID 2 }}
|
||||
|
||||
|
||||
{{- $acctID := .PathParams.acctID }}
|
||||
|
||||
|
||||
<table
|
||||
id="accounts-acct-id-inventory-sync-groups-mock-draft-table"
|
||||
class="max-w-full overflow-x-auto"
|
||||
hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table" $acctID }}"
|
||||
hx-trigger="sse:{{ printf "accounts_%d_inventory_sync-groups_mock_draft" $acctID }},sse:{{ printf "accounts_%d_inventory_sync-groups_mock_draft_listings" $acctID }}"
|
||||
hx-select="#accounts-acct-id-inventory-sync-groups-mock-draft-table"
|
||||
hx-swap="morph:outerHTML"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Shop
|
||||
</th>
|
||||
<th>
|
||||
Listing
|
||||
</th>
|
||||
<th>
|
||||
SKU
|
||||
</th>
|
||||
<th>
|
||||
Description
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
_="
|
||||
init
|
||||
set element allRowsFilledOut to false
|
||||
set element numRows to 0
|
||||
|
||||
def checkIfAllRowsAreFilledOut()
|
||||
set rows to my children
|
||||
set element allRowsFilledOut to true
|
||||
set element numRows to rows.length
|
||||
for row in rows
|
||||
set filledOut to row.dataset.filledOut is 'true'
|
||||
if not filledOut then
|
||||
set element allRowsFilledOut to false
|
||||
break
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
on rowUpdated
|
||||
checkIfAllRowsAreFilledOut()
|
||||
send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-sync-group-button
|
||||
"
|
||||
>
|
||||
{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }}
|
||||
{{- range $listing := $listings }}
|
||||
{{- component (printf "accounts/%d/inventory/sync-groups/mock/draft/listings/%d" $acctID $listing.OrderIndex)
|
||||
"Listings" $listings
|
||||
}}
|
||||
{{- end }}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>
|
||||
Shop
|
||||
</th>
|
||||
<th>
|
||||
Listing
|
||||
</th>
|
||||
<th>
|
||||
SKU
|
||||
</th>
|
||||
<th>
|
||||
Description
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
{{/*
|
||||
<div
|
||||
hidden
|
||||
hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/draft/table/add-listing-button" $acctID }}"
|
||||
hx-trigger="{{ (printf "sse:accounts_%d_inventory_sync-groups_draft_listings" $acctID) }}"
|
||||
hx-target="#sync-groups-draft-table-add-listing-button"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
</div>
|
||||
*/}}
|
||||
|
||||
<div
|
||||
hidden
|
||||
hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table/save-sync-group-button" $acctID }}"
|
||||
hx-trigger="{{ (printf "sse:accounts_%d_inventory_sync-groups_mock_draft_listings" $acctID) }}"
|
||||
hx-target="#create-sync-group-button"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
</div>
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
{{/* TODO: save the listings as a sync group on click */}}
|
||||
|
||||
|
||||
{{- $acctID := .PathParams.acctID }}
|
||||
{{- $listings := .Accounts.GetSyncGroupListingDrafts $acctID }}
|
||||
|
||||
{{- $numCompletedListings := 0 }}
|
||||
{{- range $l := $listings }}
|
||||
{{- if and $l.ShopID $l.ListingID }}
|
||||
{{- $numCompletedListings = (addInt $numCompletedListings 1) }}
|
||||
{{- else }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
{{- $enoughListings := gt $numCompletedListings 1 }}
|
||||
{{- $allCompleted := len $listings | eq $numCompletedListings }}
|
||||
|
||||
|
||||
{{ component "button"
|
||||
"ID" "create-sync-group-button"
|
||||
"HXPost" (printf "/api/accounts/%d/sync-groups/mock" $acctID)
|
||||
"Class" "mt-[1em] mb-[1em]"
|
||||
"Text" "Save Sync Group"
|
||||
"Disabled" (or (not $enoughListings) (not $allCompleted))
|
||||
"_" `
|
||||
on setDisabled(disabled)
|
||||
if disabled then
|
||||
add @disabled to me
|
||||
else
|
||||
remove @disabled from me
|
||||
end
|
||||
`
|
||||
}}
|
||||
@@ -4,7 +4,7 @@
|
||||
{{- $stores := .Accounts.GetShops $acctID -}}
|
||||
|
||||
|
||||
{{- define "title" }} Inventory++ {{ end }}
|
||||
{{- define "title" }} Manage Inventory ⋅ Inventory++ {{ end }}
|
||||
|
||||
<h1 class="text-center mb-[0.5em]">Inventory</h1>
|
||||
|
||||
|
||||
@@ -4,22 +4,70 @@
|
||||
{{- $stores := .Accounts.GetShops $acctID -}}
|
||||
|
||||
|
||||
{{- define "title" }} Inventory++ {{ end }}
|
||||
{{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}
|
||||
|
||||
<h1 class="text-center mb-[0.5em]">Inventory</h1>
|
||||
|
||||
<h2 class="text-center mb-[0.5em]">Synced Listings</h2>
|
||||
<section class="py-[2em] flex flex-col items-center">
|
||||
<details
|
||||
class="
|
||||
group
|
||||
|
||||
<section class="w-full flex flex-col items-center">
|
||||
<h3 class="mb-[1.25rem]">
|
||||
Create a Sync Group
|
||||
</h3>
|
||||
{{/*
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/draft/table" $acctID) }}
|
||||
flex
|
||||
flex-col
|
||||
items-center
|
||||
|
||||
<div>
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/draft/table/add-listing-button" $acctID) }}
|
||||
{{ component (printf "accounts/%d/inventory/sync-groups/draft/table/save-sync-group-button" $acctID) }}
|
||||
</div>
|
||||
*/}}
|
||||
{{/* 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
|
||||
open
|
||||
>
|
||||
|
||||
<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) }}
|
||||
|
||||
<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>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
+6
-5
@@ -14,8 +14,8 @@
|
||||
|
||||
<section
|
||||
id="listing-section"
|
||||
hx-get={{ printf "/ui/accounts/%d/platforms/amazon/shops/mocks/%s" $acctID $shopID }}
|
||||
hx-trigger={{ printf "sse:accounts_%d_platforms_amazon_shops_mocks_%s_listings" $acctID $shopID }}
|
||||
hx-get={{ printf "/ui/accounts/%d/platforms/%s/shops/mocks/%s" $acctID .PathParams.platform $shopID }}
|
||||
hx-trigger={{ printf "sse:accounts_%d_platforms_%s_shops_mocks_%s_listings" $acctID .PathParams.platform $shopID }}
|
||||
hx-select="#listing-section"
|
||||
>
|
||||
<header class="p-[1em]">
|
||||
@@ -55,7 +55,7 @@
|
||||
>
|
||||
<form
|
||||
id="new-listing-form"
|
||||
hx-post={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings" $acctID $shopID }}
|
||||
hx-post={{ printf "/api/accounts/%d/platforms/%s/shops/mocks/%s/listings" $acctID .PathParams.platform $shopID }}
|
||||
hx-swap="none"
|
||||
class="
|
||||
grid
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
<form
|
||||
id="edit-listing-form"
|
||||
hx-put={{ printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings/{listingID}" $acctID $shopID }}
|
||||
hx-put={{ printf "/api/accounts/%d/platforms/%s/shops/mocks/%s/listings/{listingID}" $acctID .PathParams.platform $shopID }}
|
||||
hx-swap="none"
|
||||
class="
|
||||
grid
|
||||
@@ -316,6 +316,7 @@
|
||||
</form>
|
||||
|
||||
<ul class="max-h-[80vh] overflow-y-auto flex flex-col gap-[1em]">
|
||||
{{- $dot := . }}
|
||||
{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
|
||||
<li
|
||||
id="listing-{{$listing.ListingID}}"
|
||||
@@ -387,7 +388,7 @@
|
||||
{{ component "button"
|
||||
"Title" "Delete Listing"
|
||||
"Text" (rawHTML "🗑")
|
||||
"HXDelete" (printf "/api/accounts/%d/platforms/amazon/shops/mocks/%s/listings/%s" $acctID $shopID $listing.ListingID)
|
||||
"HXDelete" (printf "/api/accounts/%d/platforms/%s/shops/mocks/%s/listings/%s" $acctID $dot.PathParams.platform $shopID $listing.ListingID)
|
||||
"_" "on click event.preventDefault() then event.stopPropagation()"
|
||||
}}
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user