updated templater

templates/components/accounts/{acctID}/inventory/sync-groups/draft/listings/{orderIndex}.html.tmpl

@@ -0,0 +1,126 @@
+{{/* TODO: make the save button disabled based on an api call */}}
+{{/* .Identity.Account.AccountID, .Accounts */}}
+
+{{- $dot := or .dot . -}}
+
+{{- $acctID := $dot.Identity.Account.AccountID }}
+
+{{- $orderIndex := or $dot.OrderIndex (parseInt $dot.PathParams.orderIndex) -}}
+{{- $entry := $dot.Accounts.GetSyncGroupListingDraft $acctID $orderIndex }}
+{{- $selectedShopPlatform := $entry.Platform }}
+{{- $selectedShopID := $entry.ShopID }}
+{{- $selectedListingID := $entry.ListingID }}
+
+
+<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>
+		{{- $shops := $dot.Accounts.GetShops $acctID -}}
+		<select
+			class="min-w-fit cursor-pointer"
+			hx-put="/api/accounts/{{$acctID}}/inventory/sync-groups/draft/listings/{{$orderIndex}}/shop"
+			hx-vals='js:{
+				platform: event.target.value.replace(/-[^ ]*/, ""),
+				"shop-id": event.target.value.replace(/[^ ]*-/, "")
+			}'
+			hx-target="#accounts-acct-id-inventory-sync-groups-draft-table"
+			hx-swap="outerHTML"
+			_="
+				on change
+					send resetListing() to closest <tr/>
+			"
+		>
+			<option disabled {{- if not $selectedShopID }}selected{{- end }}>- Shops -</option>
+		{{- range $shop := $shops }}
+			{{- $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}}
+			</option>
+		{{- end }}
+		</select>
+	</td>
+
+	<td>
+	{{- $selectedListing := "" }}
+	{{- if $selectedShopID }}
+		{{- $listings := $dot.Accounts.GetListingsForShop $acctID $selectedShopPlatform $selectedShopID }}
+		{{- if $listings }}
+			<select
+				class="min-w-fit cursor-pointer"
+
+				hx-put="/api/accounts/{{$acctID}}/inventory/sync-groups/draft/listings/{{$orderIndex}}/listing"
+				hx-vals='js:{
+					"listing-id": event.target.value,
+				}'
+				hx-target="#accounts-acct-id-inventory-sync-groups-draft-table"
+				hx-swap="outerHTML"
+
+				_="
+					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, $listing := $listings }}
+					{{- if eq $selectedListingID $listing.ListingID }}
+						{{ $selectedListing = $listing }}
+					{{- end }}
+					<option
+						value="{{$listing.ListingID}}"
+						{{if eq $selectedListingID $listing.ListingID}}selected{{end}}
+						data-name="{{ $listing.Name }}"
+						data-sku="{{ $listing.SKU }}"
+						data-description="{{ $listing.Description }}"
+						data-count="{{ $listing.Count }}"
+					>
+						{{ $listing.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/draft/listings/%d" $acctID $orderIndex)
+			"HXTarget" "#accounts-acct-id-inventory-sync-groups-draft-table"
+			"HXSwap" "outerHTML"
+			"Text" "Remove"
+		}}
+	</td>
+</tr>

templates/components/accounts/{acctID}/inventory/sync-groups/draft/table.html.tmpl

@@ -0,0 +1,88 @@
+{{- $dot := or .dot . }}
+{{- .Auth.ByMatchingAccountID 2 }}
+
+
+
+{{- $acctID := 0 }}
+{{- if $dot.Identity }}
+	{{- $acctID = $dot.Identity.Account.AccountID }}
+{{- else if .PathParams }}
+	{{- $acctID = $dot.PathParams.acctID | parseInt64 }}
+{{- else }}
+	{{- $acctID = $dot.AccountID }}
+{{- end }}
+{{- $stores := $dot.Accounts.GetShops $acctID -}}
+
+
+<table id="accounts-acct-id-inventory-sync-groups-draft-table" class="max-w-full overflow-x-auto">
+	<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 := $dot.Accounts.GetSyncGroupListingDrafts $acctID }}
+		{{- range $listing := $listings }}
+			{{- component "accounts/{acctID}/inventory/sync-groups/draft/listings/{orderIndex}"
+				"dot" ($dot | addPathParam "orderIndex" $listing.OrderIndex)
+			}}
+		{{- end }}
+	</tbody>
+	<tfoot>
+		<tr>
+			<th>
+				Shop
+			</th>
+			<th>
+				Listing
+			</th>
+			<th>
+				SKU
+			</th>
+			<th>
+				Description
+			</th>
+			<th>
+				
+			</th>
+		</tr>
+	</tfoot>
+</table>
+