moved mock syn group list item to component

domains/accounts/store_with_context.go

@@ -61,6 +61,10 @@ func (v_ctx *StoreWithContext) GetMockListing(acctID int64, platform Platform, s
 	return v_ctx.Store.GetMockListing(v_ctx.ctx, acctID, platform, shopID, listingID)
 }
 
+func (v_ctx *StoreWithContext) DeleteMockSyncGroup(acctID int64, syncGroupID int64) error {
+	return v_ctx.Store.DeleteMockSyncGroup(v_ctx.ctx, acctID, syncGroupID)
+}
+
 func (v_ctx *StoreWithContext) GetAccountPointerByUserID(userID string) (*Account, error) {
 	return v_ctx.Store.GetAccountPointerByUserID(v_ctx.ctx, userID)
 }
@@ -165,6 +169,10 @@ func (v_ctx *StoreWithContext) ListMockSyncGroups(acctID int64) ([]SyncGroup, er
 	return v_ctx.Store.ListMockSyncGroups(v_ctx.ctx, acctID)
 }
 
+func (v_ctx *StoreWithContext) GetMockSyncGroup(acctID int64, syncGroupID int64) (*SyncGroup, error) {
+	return v_ctx.Store.GetMockSyncGroup(v_ctx.ctx, acctID, syncGroupID)
+}
+
 func (v_ctx *StoreWithContext) listMockSyncGroupListings(tx pgx.Tx, acctID int64, syncGroupID int64) ([]SyncGroupListing, error) {
 	return v_ctx.Store.listMockSyncGroupListings(v_ctx.ctx, tx, acctID, syncGroupID)
 }

domains/accounts/sync_groups.go

@@ -1110,6 +1110,64 @@ func (db *Store) ListMockSyncGroups(ctx context.Context, acctID int64) ([]SyncGr
 	return grps, nil
 }
 
+func (db *Store) GetMockSyncGroup(ctx context.Context, acctID, syncGroupID int64) (*SyncGroup, error) {
+	tx, err := db.db.BeginTx(ctx, pgx.TxOptions{
+		AccessMode: pgx.ReadOnly,
+	})
+	if err != nil {
+		return nil, fmt.Errorf("failed to begin transaction: %w", err)
+	}
+	defer tx.Rollback(ctx)
+
+	rows, err := tx.Query(
+		ctx,
+		`
+			SELECT
+				name
+			FROM
+				mock.sync_groups
+			WHERE
+				account_id = @account_id
+				AND sync_group_id = @sync_group_id
+		`,
+		pgx.NamedArgs{
+			"account_id":    acctID,
+			"sync_group_id": syncGroupID,
+		},
+	)
+	if err != nil {
+		return nil, fmt.Errorf("failed to perform query: %w", err)
+	}
+
+	name, err := pgx.CollectExactlyOneRow(rows, pgx.RowTo[string])
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return nil, consts.ErrNotFound
+		}
+		return nil, fmt.Errorf("failed to scan rows: %w", err)
+	}
+
+	listings, err := db.listMockSyncGroupListings(ctx, tx, acctID, syncGroupID)
+	if err != nil {
+		return nil, fmt.Errorf("failed to load listings: %w", err)
+	}
+
+	if err := tx.Commit(ctx); err != nil {
+		return nil, fmt.Errorf("failed to commit transaction: %w", err)
+	}
+
+	return &SyncGroup{
+		SyncGroupIDs: SyncGroupIDs{
+			AccountIDs: AccountIDs{
+				AccountID: acctID,
+			},
+			SyncGroupID: syncGroupID,
+		},
+		Name:     name,
+		Listings: listings,
+	}, nil
+}
+
 // listMockSyncGroupListings will sort the returned listings by order_index.
 func (db *Store) listMockSyncGroupListings(ctx context.Context, tx pgx.Tx, acctID, syncGroupID int64) ([]SyncGroupListing, error) {
 	var listings []SyncGroupListing

styles/index.css

@@ -456,6 +456,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -468,6 +471,12 @@
   .basis-full {
     flex-basis: 100%;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -625,6 +634,9 @@
   .font-display {
     font-family: var(--display-family);
   }
+  .font-text {
+    font-family: var(--text-family);
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -648,6 +660,9 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -657,6 +672,10 @@
   .underline {
     text-decoration-line: underline;
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .outline-1 {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1231,6 +1250,26 @@
     }
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1313,26 +1352,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1350,6 +1369,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-outline-style: solid;
@@ -1369,11 +1393,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-content: "";
       --tw-leading: initial;
     }

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

@@ -0,0 +1,81 @@
+{{/* .SyncGroup: optional for performance  */}}
+
+{{- $syncGroupID := .PathParams.syncGroupID }}
+{{- $acctID := .PathParams.acctID }}
+
+{{- $grp := .SyncGroup }}
+{{- if not $grp }}
+	{{- $grp = .Accounts.GetMockSyncGroup $acctID $syncGroupID }}
+{{- end }}
+
+
+<li
+	id="sync-group-{{$grp.SyncGroupID}}"
+	class="
+		mx-[1em]
+	"
+>
+	{{- define "sync-group-accordion-header" }}
+		<h3 class="text-center">
+			{{ .Group.Name }}
+		</h3>
+	{{- end }}
+
+	{{- define "sync-group-accordion-body" }}
+		{{- $acctID := .Identity.Account.AccountID }}
+		<table>
+			<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>
+
+		{{- component "button"
+			"Class" "mt-[1em]"
+			"Text" "Delete Group"
+			"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID .Group.SyncGroupID)
+			"HXSwap" "none"
+		}}
+	{{- end }}
+
+	{{ component "accordion"
+		"Name" "sync-group-page"
+		"GroupName"			"sync-group"
+		"Group"				$grp
+		"Smooth"			false
+		"#accordion-header"	"sync-group-accordion-header"
+		"#accordion-body"	"sync-group-accordion-body"
+	}}
+</li>

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

@@ -37,62 +37,6 @@
 	</form>
 {{- end }}
 
-{{- define "sync-group-accordion-header" }}
-	<h3 class="text-center">
-		{{ .Group.Name }}
-	</h3>
-{{- end }}
-
-{{- define "sync-group-accordion-body" }}
-	{{- $acctID := .Identity.Account.AccountID }}
-	<table>
-		<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>
-
-	{{- component "button"
-		"Class" "mt-[1em]"
-		"Text" "Delete Group"
-		"HXDelete" (printf "/api/accounts/%d/inventory/sync-groups/mock/%d" $acctID .Group.SyncGroupID)
-		"HXSwap" "none"
-	}}
-{{- end }}
-
-
 <section
 	id="new-mock-sync-group"
 	class="
@@ -122,24 +66,9 @@
 	>
 
 	{{- range $grp := .Accounts.ListMockSyncGroups $acctID }}
-		<li
+		{{ component (printf "accounts/%d/inventory/sync-groups/mock/%d/list-item" $acctID $grp.SyncGroupID)
-			id="sync-group-{{$grp.SyncGroupID}}"
+			"SyncGroup" $grp
-			class="
-				mx-[1em]
-			"
-		>
-			{{ component "accordion"
-				"Name" "sync-group-page"
-				"GroupName"			"sync-group"
-				"Group"				$grp
-				"Smooth"			false
-				"#accordion-header"	"sync-group-accordion-header"
-				"#accordion-body"	"sync-group-accordion-body"
 		}}
-		</li>
 	{{- end }}
 	</ul>
-
-
-
 </section>