updated mock sync group accordions: editing state; cancel editing

templates/components/accounts/{acctID.int64}/inventory/sync-groups/mock/{syncGroupID.int64}/list-item.html.tmpl

@@ -2,10 +2,9 @@
 
 {{- $syncGroupID := .PathParams.syncGroupID }}
 {{- $acctID := .PathParams.acctID }}
-{{- $open := false }}
-{{- if .Request }}
-	{{- $open = eq (.Request.URL.Query.Get "open") "true" }}
-{{- end }}
+{{- $isBeingEditing := .Accounts.MockSyncGroupIsBeingEdited $acctID $syncGroupID }}
+
+{{- $open := or $isBeingEditing (and .Request (eq (.Request.URL.Query.Get "open") "true")) }}
 
 {{- $grp := .SyncGroup }}
 {{- if not $grp }}
@@ -29,10 +28,21 @@
 		</h3>
 	{{- end }}
 
-	{{- define "sync-group-accordion-body" }}
+	{{- define "sync-group-accordion-editing-header" }}
+		<div class="flex flex-col items-center">
+		<h3 class="text-center">
+			{{ .Group.Name }}
+		</h3>
+		<h5>
+			Editing
+		</h5>
+		</div>
+	{{- end }}
+
+	{{- define "sync-group-accordion-static-body" }}
 		{{- $acctID := .Identity.Account.AccountID }}
 		{{- $syncGroupID := .Group.SyncGroupID }}
-		<table>
+		<table id="sync-group-data-{{$syncGroupID}}">
 			<thead>
 				<tr>
 					<th>
@@ -71,34 +81,107 @@
 			</tbody>
 		</table>
 
-		<div>
-			{{- $isBeingEditing := .Accounts.MockSyncGroupIsBeingEdited $acctID $syncGroupID }}
-			{{- if not $isBeingEditing }}
-				{{- component "button"
-					"Class" "mt-[1em]"
-					"Text" "Edit Group"
-					"HXPut" (printf "/api/accounts/%d/inventory/sync-groups/mock/editing" $acctID)
-					"HXVals" (printf `js:{"syncGroupID":%d}` $syncGroupID)
-					"HXSwap" "none"
-				}}
-			{{- end }}
+		<div
+			id="sync-group-{{$syncGroupID}}-buttons"
+			class="flex justify-center flex-grow-[1] gap-[0.5em]"
+		>
+			{{- component "button"
+				"Class" "mt-[1em]"
+				"Text" "Edit"
+				"HXPut" (printf "/api/accounts/%d/inventory/sync-groups/mock/editing" $acctID)
+				"HXVals" (printf `js:{"syncGroupID":%d}` $syncGroupID)
+				"HXSwap" "none"
+			}}
 
 			{{- component "button"
 				"Class" "mt-[1em]"
-				"Text" "Delete Group"
+				"Text" "Delete"
 				"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID $syncGroupID)
 				"HXSwap" "none"
 			}}
 		</div>
 	{{- end }}
 
+	{{- define "sync-group-accordion-form-body" }}
+		{{- $acctID := .Identity.Account.AccountID }}
+		{{- $syncGroupID := .Group.SyncGroupID }}
+		<form>
+			<table id="sync-group-{{$syncGroupID}}-form">
+				<thead>
+					<tr>
+						<th>
+							Name
+						</th>
+						<th>
+							SKU
+						</th>
+						<th>
+							Description
+						</th>
+						<th>
+							Count
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+				{{- $dot := . }}
+				{{- range $listing := .Group.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>
+
+			<div
+				id="sync-group-{{$syncGroupID}}-editing-buttons"
+				class="flex justify-center flex-grow-[1] gap-[0.5em]"
+			>
+				{{/* TODO: implement saving */}}
+				{{- component "button"
+					"Class" "mt-[1em]"
+					"Text" "Save"
+					"HXSwap" "none"
+				}}
+
+				{{- component "button"
+					"Class" "mt-[1em]"
+					"Text" "Cancel"
+					"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/editing" $acctID)
+					"HXSwap" "none"
+				}}
+			</div>
+		</form>
+	{{- end }}
+
+	{{- $accordionHeader := "sync-group-accordion-header" }}
+	{{- $accordionBody := "sync-group-accordion-static-body" }}
+	{{- $summaryClass := "" }}
+	{{- if $isBeingEditing }}
+		{{- $accordionBody = "sync-group-accordion-form-body" }}
+		{{- $accordionHeader = "sync-group-accordion-editing-header" }}
+		{{- $summaryClass = "bg-accent-secondary" }}
+	{{- end }}
 	{{ component "accordion"
 		"Name"				"sync-group-page"
 		"Open" 				$open
 		"GroupName"			"sync-group"
 		"Group"				$grp
 		"Smooth"			false
-		"#accordion-header"	"sync-group-accordion-header"
-		"#accordion-body"	"sync-group-accordion-body"
+		"SummaryClass"		$summaryClass
+		"#accordion-header"	$accordionHeader
+		"#accordion-body"	$accordionBody
 	}}
 </li>

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

@@ -47,7 +47,6 @@
 >
 	{{ component "accordion"
 		"Name" "sync-group-page"
-		"Open" true
 		"Class"	`
 			mx-[1em]
 			mb-[1em]