make image clickable on dashboard

helsingborg-stad · Feb 26, 2025 · e7933f7 · e7933f7
1 parent 54b8ae5
commit e7933f7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/src/adverts/dashboard/AdvertsTable/types.ts b/src/adverts/dashboard/AdvertsTable/types.ts
@@ -36,7 +36,7 @@ export interface AdvertsTableContextType {
 }
 export interface AdvertTableRow {
     id: string
-    image: string
+    image: string[]
     title: string
     category: string
     tags: string[]

diff --git a/src/adverts/dashboard/createColumns.tsx b/src/adverts/dashboard/createColumns.tsx
@@ -18,17 +18,19 @@ export const createLink = (to: string | undefined, icon: ReactNode) => (
     </NavLink>
 )
 
-export const createAdvertImage = (image?: string) => (
-    <Box
-        component="img"
-        src={image ?? '/empty-advert.svg'}
-        sx={{
-            height: 48,
-            width: 48,
-            objectFit: 'cover',
-        }}
-    />
-)
+export const createAdvertImage = (imageUrl?: string, advertUrl?: string) =>
+    createLink(
+        advertUrl,
+        <Box
+            component="img"
+            src={imageUrl ?? '/empty-advert.svg'}
+            sx={{
+                height: 48,
+                width: 48,
+                objectFit: 'cover',
+            }}
+        />
+    )
 
 const createTagList = (tags?: string[]) => (
     <Stack direction="column">
@@ -49,7 +51,8 @@ export const createColumns = (
         headerAlign: 'center',
         sortable: false,
         headerName: phrase('DASHBOARD_HEADER_IMAGE', 'Bild'),
-        renderCell: ({ value }) => createAdvertImage(value),
+        renderCell: ({ value: [imageUrl, advertUrl] }) =>
+            createAdvertImage(imageUrl, advertUrl),
     },
     {
         field: 'title',

diff --git a/src/adverts/dashboard/createRows.tsx b/src/adverts/dashboard/createRows.tsx
@@ -5,7 +5,7 @@ import { AdvertTableRow } from './AdvertsTable/types'
 export const createRows = (adverts: Advert[]): AdvertTableRow[] =>
     adverts.map((advert) => ({
         id: advert.id,
-        image: advert.images[0]?.url,
+        image: [advert.images[0]?.url, `/advert/${advert.id}`],
         title: advert.title,
         category: advert.category,
         tags: advert.tags,