[FEAT-5438]: fixes for tonen objecten lijstweergave (#2767)

* Fixes Stop flickering when reverse address search gets new address. Put a delay on icon list on click handler. Capitalize assetlist titles. Change drawer top position logic. Fix scroll, rearrange DrawerOverlay.tsx, resize icon list image. Add padding objecten title for desktop. Add paddings and fit scrollbar. Change pdokInput.
Amsterdam · Nov 29, 2023 · d3a433b · d3a433b
1 parent 8a6c4d8
commit d3a433b
Show file tree

Hide file tree

Showing 19 changed files with 235 additions and 78 deletions.
diff --git a/src/components/DrawerOverlay/DrawerOverlay.tsx b/src/components/DrawerOverlay/DrawerOverlay.tsx
@@ -11,7 +11,6 @@ import {
   Drawer,
   DrawerContainer,
   DrawerContent,
-  DrawerContentWrapper,
   DrawerHandleDesktop,
   DrawerHandleMiniDesktop,
   DrawerHandleMobile,
@@ -115,7 +114,7 @@ export const DrawerOverlay = ({
           )}
 
           <DrawerContent style={drawerContentStyle} data-testid="drawerContent">
-            <DrawerContentWrapper>{children}</DrawerContentWrapper>
+            {children}
           </DrawerContent>
         </Drawer>
       </DrawerContainer>

diff --git a/src/components/DrawerOverlay/styled.ts b/src/components/DrawerOverlay/styled.ts
@@ -183,7 +183,7 @@ export const DrawerContent = styled.div`
   flex-grow: 1;
   max-width: 100%;
   min-height: 0;
-  overflow-y: auto;
+  height: 100%;
 
   @media screen and ${breakpoint('min-width', 'tabletM')} {
     width: ${MENU_WIDTH}px;

diff --git a/src/components/IconList/IconList.test.tsx b/src/components/IconList/IconList.test.tsx
@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2021 - 2022 Gemeente Amsterdam
-import { render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 
 import type configurationType from 'shared/services/configuration/__mocks__/configuration'
 import configuration from 'shared/services/configuration/configuration'
@@ -13,9 +13,14 @@ jest.mock('shared/services/configuration/configuration')
 const mockConfiguration = configuration as typeof configurationType
 
 describe('IconList', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
   afterEach(() => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     mockConfiguration.__reset()
+
+    jest.useRealTimers()
   })
 
   it('renders correctly', () => {
@@ -40,4 +45,33 @@ describe('IconList', () => {
     expect(screen.getByRole('list')).toBeInTheDocument()
     expect(screen.queryAllByRole('listitem').length).toBe(0)
   })
+
+  it('click checkbox', () => {
+    const onClickMock = jest.fn()
+    render(
+      withAppContext(
+        <IconList>
+          <IconListItem
+            iconUrl=""
+            item={{
+              id: '1',
+              name: 'test',
+              featureStatusType: 'test',
+            }}
+            onClick={onClickMock}
+          >
+            Icon
+          </IconListItem>
+        </IconList>
+      )
+    )
+
+    screen.getByRole('checkbox').click()
+
+    act(() => {
+      jest.runAllTimers()
+    })
+
+    expect(onClickMock).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2021-2023 Gemeente Amsterdam
 import type { ReactNode } from 'react'
+import { useCallback, useState } from 'react'
 
 import { List } from '@amsterdam/asc-ui'
 import styled from 'styled-components'
@@ -20,10 +21,10 @@ export interface IconListItemProps {
   iconSize?: number
   featureStatusType?: FeatureStatusType
   children: ReactNode
-  remove?: (item: Item) => void
+  onClick?: (item: Item) => void
   item?: Item
-  checked?: boolean
   checkboxDisabled?: boolean
+  checked?: boolean
 }
 
 export const IconListItem = ({
@@ -33,32 +34,54 @@ export const IconListItem = ({
   iconSize = 40,
   id,
   featureStatusType,
-  remove,
+  onClick,
   item,
-  checked,
   checkboxDisabled,
-}: IconListItemProps) => (
-  <StyledListItem data-testid={id} className={className}>
-    {!checkboxDisabled && (
-      <Checkbox
-        onClick={() => remove && item && remove(item)}
-        checked={checked}
-      />
-    )}
-    {iconUrl && (
-      <StyledImg alt="" height={iconSize} src={iconUrl} width={iconSize} />
-    )}
-    {featureStatusType && (
-      <StatusIcon
-        alt=""
-        height={20}
-        src={featureStatusType.icon.iconUrl}
-        width={20}
-      />
-    )}
-    {children}
-  </StyledListItem>
-)
+  checked,
+}: IconListItemProps) => {
+  const [checkedState, setCheckedState] = useState<boolean | undefined>(
+    undefined
+  )
+  const [disabled, setDisabled] = useState<boolean>(false)
+
+  const onClickWithDelay = useCallback(
+    (item) => {
+      if (onClick && !disabled) {
+        setDisabled(true)
+        setCheckedState(!checked)
+        const timeout = setTimeout(() => {
+          onClick(item)
+          setDisabled(false)
+        }, 600)
+        return () => clearTimeout(timeout)
+      }
+    },
+    [checked, disabled, onClick]
+  )
+
+  return (
+    <StyledListItem data-testid={id} className={className}>
+      {!checkboxDisabled && (
+        <Checkbox
+          onClick={() => onClickWithDelay(item)}
+          checked={checkedState === undefined ? checked : checkedState}
+        />
+      )}
+      {iconUrl && (
+        <StyledImg alt="" height={iconSize} src={iconUrl} width={iconSize} />
+      )}
+      {featureStatusType && (
+        <StatusIcon
+          alt=""
+          height={20}
+          src={featureStatusType.icon.iconUrl}
+          width={20}
+        />
+      )}
+      {children}
+    </StyledListItem>
+  )
+}
 
 const StyledList = styled(List)`
   margin: 0;

diff --git a/src/components/IconList/styled.tsx b/src/components/IconList/styled.tsx
@@ -14,12 +14,12 @@ export const StyledListItem = styled(ListItem)`
   padding: 0;
 
   ${Checkbox} {
+    margin-right: ${themeSpacing(0.5)};
     cursor: pointer;
   }
 `
 
 export const StyledImg = styled.img`
-  margin-right: ${themeSpacing(2)};
   flex-shrink: 0;
 `
 

diff --git a/src/signals/IncidentMap/components/IncidentMap/IncidentMap.tsx b/src/signals/IncidentMap/components/IncidentMap/IncidentMap.tsx
@@ -22,6 +22,7 @@ import {
   StyledViewerContainer,
   TopLeftWrapper,
   Wrapper,
+  DrawerContentWrapper,
 } from './styled'
 import usePaginatedIncidents from './usePaginatedIncidents'
 import { getFlyToZoom } from './utils'
@@ -227,24 +228,26 @@ export const IncidentMap = () => {
           incident={selectedIncident}
           DetailPanel={DetailPanel}
         >
-          <StyledParagraph>
-            Op deze kaart staan meldingen in de openbare ruimte waarmee we aan
-            het werk zijn. Vanwege privacy staat een klein deel van de meldingen
-            niet op de kaart.
-          </StyledParagraph>
-
-          {!isMobile(deviceMode) && (
-            <AddressLocation
-              setCoordinates={setCoordinates}
-              address={address}
+          <DrawerContentWrapper>
+            <StyledParagraph>
+              Op deze kaart staan meldingen in de openbare ruimte waarmee we aan
+              het werk zijn. Vanwege privacy staat een klein deel van de
+              meldingen niet op de kaart.
+            </StyledParagraph>
+
+            {!isMobile(deviceMode) && (
+              <AddressLocation
+                setCoordinates={setCoordinates}
+                address={address}
+              />
+            )}
+
+            <FilterPanel
+              filters={filters}
+              setFilters={setFilters}
+              setMapMessage={setMapMessage}
             />
-          )}
-
-          <FilterPanel
-            filters={filters}
-            setFilters={setFilters}
-            setMapMessage={setMapMessage}
-          />
+          </DrawerContentWrapper>
         </DrawerOverlay>
 
         <StyledViewerContainer

diff --git a/src/signals/IncidentMap/components/IncidentMap/styled.ts b/src/signals/IncidentMap/components/IncidentMap/styled.ts
@@ -65,3 +65,14 @@ export const StyledViewerContainer = styled(ViewerContainer)<{
     margin-left: ${themeSpacing(4)};
   }
 `
+
+export const DrawerContentWrapper = styled('div')`
+  width: 100%;
+  height: 100%;
+  padding: ${themeSpacing(5)};
+  overflow-y: auto;
+
+  @media screen and ${breakpoint('max-width', 'tabletM')} {
+    padding-top: 0;
+  }
+`
diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.test.tsx
@@ -54,6 +54,7 @@ jest.mock('components/IconList/IconList', () => ({
     iconUrl,
     featureStatusType,
     id,
+    onClick,
     ...props
   }: PropsWithChildren<IconListItemProps>) => {
     return (

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.tsx
@@ -5,6 +5,7 @@ import type { FunctionComponent } from 'react'
 import type { FeatureCollection } from 'geojson'
 
 import IconList from 'components/IconList/IconList'
+import { capitalize } from 'shared/services/date-utils'
 
 import { AssetListItem } from './AssetListItem'
 import { AssetListItemSelectable } from './AssetListItemSelectable'
@@ -51,10 +52,12 @@ const AssetList: FunctionComponent<AssetListProps> = ({
     (zoomLevel && zoomLevel >= 13) || (selection && selection.length > 0)
 
   return (
-    <div>
+    <>
       {renderAssetListHeading && (
         <>
-          <ListHeading>{objectTypePlural || 'Objecten'}</ListHeading>
+          <ListHeading>
+            {(objectTypePlural && capitalize(objectTypePlural)) || 'Objecten'}
+          </ListHeading>
           {featureTypes.length > 0 &&
             !(
               (selectableComponents && selectableComponents?.length > 0) ||
@@ -75,20 +78,20 @@ const AssetList: FunctionComponent<AssetListProps> = ({
           selection.length > 0 &&
           selection
             .filter(({ id }) => id)
-            .map((item, index) => (
+            .map((item) => (
               <AssetListItem
-                key={index}
+                key={item.id}
                 item={item}
                 featureTypes={featureTypes}
                 featureStatusTypes={featureStatusTypes}
-                remove={() => remove && remove(item)}
+                remove={remove}
               />
             ))}
         {Array.isArray(selectableComponents) &&
           selectableComponents.length > 0 &&
           selectableComponents}
       </IconList>
-    </div>
+    </>
   )
 }
 

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItem.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItem.tsx
@@ -91,7 +91,7 @@ export const AssetListItem: FunctionComponent<ItemType> = ({
           id={extendedId}
           iconUrl={icon?.iconUrl}
           featureStatusType={featureStatusType}
-          remove={remove}
+          onClick={remove}
           item={item}
           checked
         >

diff --git a/...signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItemSelectable.tsx b/...signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItemSelectable.tsx
@@ -33,7 +33,7 @@ export const AssetListItemSelectable = ({
         id={`${id}`}
         iconUrl={icon?.iconUrl}
         featureStatusType={featureStatusType}
-        remove={onClick}
+        onClick={onClick}
         item={item}
         checked={false}
       >

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/styled.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/styled.tsx
@@ -1,4 +1,4 @@
-import { Button, themeColor, themeSpacing } from '@amsterdam/asc-ui'
+import { breakpoint, Button, themeColor, themeSpacing } from '@amsterdam/asc-ui'
 import styled from 'styled-components'
 
 import { FeatureStatus } from '../../types'
@@ -35,7 +35,12 @@ export const SelectionNearby = styled.div`
 
 export const ListHeading = styled.p`
   font-weight: 700;
+  margin-top: 0;
   margin-bottom: ${themeSpacing(2)};
+
+  @media only screen and ${breakpoint('min-width', 'tabletM')} {
+    margin-top: ${themeSpacing(4)};
+  }
 `
 
 export const ListDescription = styled.p`