ability to delete mock sync groups

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

@@ -70,12 +70,16 @@
 				value="{{$shop.Platform}}-{{$shop.ShopID}}"
 				{{- if $isSelectedShop }}selected{{- end }}
 			>
-				{{ $shop.Name }} - {{$shop.Platform}} - {{$shop.ShopID}} - {{(eq $selectedShopPlatform $shop.Platform)}} - {{(eq $selectedShopID $shop.ShopID)}}
+				{{ $shop.Name }}
 			</option>
 		{{- end }}
 		</select>
 	</td>
 
+	<td>
+		{{- if $entry.Platform }}{{ $entry.Platform }}{{ else }}-{{ end }}
+	</td>
+
 	<td>
 	{{- $selectedListing := "" }}
 	{{- if $selectedShopID }}

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

@@ -17,6 +17,9 @@
 			<th>
 				Shop
 			</th>
+			<th>
+				Platform
+			</th>
 			<th>
 				Listing
 			</th>
@@ -52,7 +55,7 @@
 
 			on rowUpdated
 				checkIfAllRowsAreFilledOut()
-				send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-sync-group-button
+				send setDisabled(disabled: not allRowsFilledOut or numRows < 2) to #create-mock-sync-group-button
 		"
 	>
 		{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }}
@@ -67,6 +70,9 @@
 			<th>
 				Shop
 			</th>
+			<th>
+				Platform
+			</th>
 			<th>
 				Listing
 			</th>
@@ -98,7 +104,7 @@
 	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-target="#create-mock-sync-group-button"
 	hx-swap="outerHTML"
 >
 </div>

templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/draft/table/save-sync-group-button.html.tmpl

@@ -2,7 +2,7 @@
 
 
 {{- $acctID := .PathParams.acctID }}
-{{- $listings := .Accounts.GetSyncGroupListingDrafts $acctID }}
+{{- $listings := .Accounts.GetMockSyncGroupListingDrafts $acctID }}
 
 {{- $numCompletedListings := 0 }}
 {{- range $l := $listings }}
@@ -17,8 +17,7 @@
 
 
 {{ component "button"
-	"ID" "create-sync-group-button"
-	"HXPost" (printf "/api/accounts/%d/sync-groups/mock" $acctID)
+	"ID" "create-mock-sync-group-button"
 	"Class" "mt-[1em] mb-[1em]"
 	"Text" "Save Sync Group"
 	"Disabled" (or (not $enoughListings) (not $allCompleted))

templates/components/button.html.tmpl

@@ -39,7 +39,7 @@
 		hx-swap="{{.HXSwap}}"
 	{{- end }}
 	{{- if .HXVals }}
-		hx-vals="{{.HXVals}}"
+		hx-vals='{{.HXVals}}'
 	{{- end }}
 	{{- if .Disabled}}
 		disabled

templates/pages/accounts/{acctID.int64}/inventory/mock.html.tmpl

@@ -7,7 +7,11 @@
 {{- define "title" }} Manage Mock Inventory ⋅ Inventory++ {{ end }}
 
 
-<section class="py-[2em] flex flex-col items-center">
+<section
+	id="new-mock-sync-group"
+	class="py-[2em] flex flex-col items-center"
+	hx-swap-oob="true"
+>
 	<details
 		class="
 			group
@@ -36,7 +40,6 @@
 			details-content:transition-[opacity_transform]
 		"
 		hx-preserve
-		open
 	>
 
 		<summary
@@ -65,9 +68,145 @@
 
 		{{ 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>
+		<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>