add density selector to dashboard

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

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/src/adverts/dashboard/AdvertsTable/AdvertsTable.tsx b/src/adverts/dashboard/AdvertsTable/AdvertsTable.tsx
@@ -2,6 +2,7 @@ import { Stack } from '@mui/material'
 import {
     DataGrid,
     GridColumnVisibilityModel,
+    GridDensity,
     GridPaginationModel,
     GridSortModel,
     GridToolbar,
@@ -34,6 +35,10 @@ export const AdvertsTable: FC<{
             columns.reduce((p, c) => ({ ...p, [c.field]: true }), {})
         )
 
+    const [density, onDensityChange] = useLocalStorage<GridDensity>(
+        'haffa-my-adverts-v2-density',
+        'standard'
+    )
     // Transform sort model to serverside model
     const onSortModelChange = useCallback(
         ([model]: GridSortModel) =>
@@ -71,8 +76,8 @@ export const AdvertsTable: FC<{
             <DataGrid
                 getRowHeight={() => 'auto'}
                 slots={{ toolbar: GridToolbar }}
-                disableDensitySelector
                 disableColumnFilter
+                onDensityChange={(density) => onDensityChange(density)}
                 sortingMode="server"
                 onSortModelChange={onSortModelChange}
                 sortingOrder={['asc', 'desc']}
@@ -93,7 +98,7 @@ export const AdvertsTable: FC<{
                 rowSelectionModel={selected}
                 columnVisibilityModel={visibilityModel}
                 onColumnVisibilityModelChange={onColumnVisibilityModelChange}
-                rows={createRows(adverts)}
+                rows={createRows(adverts, density)}
                 columns={columns}
                 initialState={{
                     pagination: {

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

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