makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

fix(F-04): include crop/color fields in item queries and use dominantColor in GearImage

Browse Source 
getAllItems and getItemById were not selecting dominantColor, cropZoom,
cropX, cropY from the database. GearImage was ignoring the dominantColor
prop. Now the fields flow end-to-end from DB to UI background fill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-04-12 22:34:19 +02:00
parent 581872b534
commit e3124e49c9
2 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/client/components/GearImage.tsx
View File

@@ -12,7 +12,7 @@ interface GearImageProps {
export function GearImage({ export function GearImage({
src, src,
alt, alt,
dominantColor: _dominantColor, dominantColor,
cropZoom, cropZoom,
cropX, cropX,
cropY, cropY,
@@ -20,6 +20,7 @@ export function GearImage({
cover = false, cover = false,
}: GearImageProps) { }: GearImageProps) {
const hasCrop = cropZoom != null && cropZoom > 1; const hasCrop = cropZoom != null && cropZoom > 1;
const bgStyle = dominantColor ? { backgroundColor: dominantColor } : undefined;
if (cover) { if (cover) {
return ( return (
@@ -33,24 +34,28 @@ export function GearImage({
if (hasCrop) { if (hasCrop) {
return ( return (
<img <div className="w-full h-full overflow-hidden" style={bgStyle}>
src={src} <img
alt={alt} src={src}
className={`w-full h-full object-cover ${className}`} alt={alt}
style={{ className={`w-full h-full object-cover ${className}`}
transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`, style={{
transformOrigin: "center center", transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
}} transformOrigin: "center center",
/> }}
/>
</div>
); );
} }
return ( return (
<img <div className="w-full h-full flex items-center justify-center" style={bgStyle}>
src={src} <img
alt={alt} src={src}
className={`w-full h-full object-contain ${className}`} alt={alt}
/> className={`w-full h-full object-contain ${className}`}
/>
</div>
); );
} }

8
src/server/services/item.service.ts
View File

@@ -38,6 +38,10 @@ export async function getAllItems(db: Db, userId: number) {
brand: sql< brand: sql<
string | null string | null
>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"), >`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
dominantColor: items.dominantColor,
cropZoom: items.cropZoom,
cropX: items.cropX,
cropY: items.cropY,
createdAt: items.createdAt, createdAt: items.createdAt,
updatedAt: items.updatedAt, updatedAt: items.updatedAt,
categoryName: categories.name, categoryName: categories.name,
@@ -82,6 +86,10 @@ export async function getItemById(db: Db, userId: number, id: number) {
brand: sql< brand: sql<
string | null string | null
>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"), >`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
dominantColor: items.dominantColor,
cropZoom: items.cropZoom,
cropX: items.cropX,
cropY: items.cropY,
createdAt: items.createdAt, createdAt: items.createdAt,
updatedAt: items.updatedAt, updatedAt: items.updatedAt,
categoryName: categories.name, categoryName: categories.name,