Merge pull request #74 from helsingborg-stad/feature/group-by-session

Feature/group-by-session

package.json

@@ -36,8 +36,11 @@
     ]
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@googlemaps/js-api-loader": "^1.15.1",
     "@googlemaps/markerclusterer": "^2.0.15",
+    "@mui/icons-material": "^5.15.13",
     "@react-google-maps/api": "^2.19.2",
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "@turf/center-of-mass": "^6.5.0",
@@ -88,4 +91,4 @@
     "typescript": "^5.0.2",
     "vite": "^4.3.0"
   }
-}
+}

src/api/event/event.ts

@@ -2,6 +2,7 @@ import { Event } from 'types/event';
 import { client } from '../baseAxios';
 
 export const getEvents = (filter?: string) => client.get<Event[]>(`/zones/events${filter !== '' ? `?${filter}` : ''}`);
+export const getGroupedEvents = (filter?: string) => client.get<Event[][]>(`/zones/events/grouped${filter !== '' ? `?${filter}` : ''}`);
 export const exportEvents = (filter?: string) => client.get<Blob>(
   `/zones/events/export${filter !== '' ? `?${filter}` : ''}`,
   {

src/components/Menu/Menu.tsx

@@ -32,12 +32,13 @@ export const Menu = () => {
       <Styled.MenuList>
         <Styled.SectionOne>
           <Styled.BoldText onClick={() => {
-            navigate('/');
+            navigate('/events');
             setIsOpen(false);
           }}
           >
-            Lista
+            Leveranser
           </Styled.BoldText>
+          <Styled.BoldText onClick={() => navigate('/events/grouped')}>Turer</Styled.BoldText>
           <Styled.BoldText onClick={() => navigate('/map')}>Karta</Styled.BoldText>
         </Styled.SectionOne>
         <Styled.SectionTwo>

src/hooks/useEventApi.ts

@@ -1,11 +1,13 @@
-import { getEvents, exportEvents } from 'api/event';
+import { getEvents, exportEvents, getGroupedEvents } from 'api/event';
 
 export const useEventApi = () => {
   const getAllEvents = (filter?: string) => getEvents(filter);
   const exportAllEvents = (filter?: string) => exportEvents(filter);
+  const getAllGroupedEvents = (filter?: string) => getGroupedEvents(filter);
 
   return {
     getAllEvents,
     exportAllEvents,
+    getAllGroupedEvents,
   };
 };

src/modules/Delivery/Delivery.tsx

@@ -1,13 +1,17 @@
 import { useAuth } from 'hooks/useAuth';
-import { useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { DeliveryLayout } from 'layouts/DeliveryLayout';
 import { useNavigate } from 'react-router-dom';
 import MapIcon from 'assets/map_icon.svg';
 import { Button } from 'components/Button';
 import * as Styled from './styled';
 import { DeliveryList } from './components';
 
-export const Delivery = () => {
+type Props = {
+  grouped?: boolean;
+};
+
+export const Delivery: FC<Props> = ({ grouped }) => {
   const { hasToken } = useAuth();
   const isAuthenticated = hasToken();
   const navigate = useNavigate();
@@ -28,8 +32,8 @@ export const Delivery = () => {
   return (
     <DeliveryLayout>
       <Styled.Container>
-        <Styled.Heading>Leveranser</Styled.Heading>
-        <DeliveryList />
+        <Styled.Heading>{grouped ? 'Turer' : 'Leveranser'}</Styled.Heading>
+        <DeliveryList grouped={grouped} />
       </Styled.Container>
       <Styled.ButtonContainer>
         <Button type="button" primary onClick={navigateToMap}>
@@ -42,3 +46,7 @@ export const Delivery = () => {
     </DeliveryLayout>
   );
 };
+
+Delivery.defaultProps = {
+  grouped: false,
+};

src/modules/Delivery/components/DeliveryList/DeliveryList.tsx

@@ -1,19 +1,27 @@
 import { useGetEventFilters, useGetEvents } from 'modules/Delivery/hooks';
 import { Button, Loading } from 'components';
-import { FilterList } from './FilterList';
-import { ListContent } from './ListContent';
-import { ListHeader } from './ListHeader';
+import { FC } from 'react';
+import { FilterList, ListContent, ListHeader } from './components';
 import * as Styled from './styled';
 
-export const DeliveryList = () => {
+type Props = {
+  grouped?: boolean;
+};
+
+export const DeliveryList: FC<Props> = ({ grouped }) => {
   const {
-    fetchEvents, exportEvents, events, error, isLoading,
+    fetchEvents, exportEvents, fetchGroupedEvents,
+    events, error, isLoading, groupedEvents,
   } = useGetEvents();
   const {
     filters, checkFilter, resetFilters, triggerReload, filterOptions,
     activeFilters, exportEventsToExcel,
     setDateTimeFilter,
-  } = useGetEventFilters({ fetchEvents, exportEvents });
+  } = useGetEventFilters({
+    fetchEvents: grouped ? fetchGroupedEvents : fetchEvents,
+    exportEvents,
+    grouped: !!grouped,
+  });
 
   if (isLoading) {
     return (
@@ -47,9 +55,14 @@ export const DeliveryList = () => {
         filterOptions={filterOptions}
         setDateTimeFilter={setDateTimeFilter}
         exportEventsToExcel={exportEventsToExcel}
+        showExportButton={!grouped}
       />
       <ListHeader />
-      <ListContent events={events} resetFilters={resetFilters} />
+      <ListContent events={events} groupedEvents={groupedEvents} resetFilters={resetFilters} />
     </Styled.Container>
   );
 };
+
+DeliveryList.defaultProps = {
+  grouped: false,
+};

src/modules/Delivery/components/DeliveryList/components/EventRow/EventRow.tsx

@@ -0,0 +1,74 @@
+import { FC } from 'react';
+import DistributionSvg from 'assets/distributor_icon.svg';
+import { ZoneType } from 'types';
+import CollecionSvg from 'assets/delivery_icon.svg';
+import { Event } from 'types/event';
+import { useDateConverter } from 'utils';
+import * as Styled from './styled';
+
+type Props = {
+  event: Event;
+};
+
+export const EventRow: FC<Props> = ({ event }) => {
+  const { getWeekday, getHourAndMin, getYYYYMMDD } = useDateConverter();
+  return (
+    <Styled.Container key={event.id}>
+      <Styled.Column>{getYYYYMMDD(event.enteredAt)}</Styled.Column>
+      <Styled.Column>
+        {getWeekday(event.enteredAt)}
+      </Styled.Column>
+      <Styled.Column>{getHourAndMin(event.exitedAt)}</Styled.Column>
+      <Styled.TypeColumn>
+        {event.zoneType === ZoneType.DISTRIBUTION
+          ? <Styled.SVGContainer src={DistributionSvg} alt="Distribution icon" />
+          : <Styled.SVGContainer src={CollecionSvg} alt="Collection icon" />}
+        <Styled.IconInfo>
+          <Styled.InfoText>
+            {
+                  event.zoneType === ZoneType.DISTRIBUTION
+                    ? 'Lager' : 'Leveransplats'
+                }
+          </Styled.InfoText>
+        </Styled.IconInfo>
+      </Styled.TypeColumn>
+      <Styled.PlaceColumn>
+        {event.name}
+        <Styled.SmallLabel>{event.address}</Styled.SmallLabel>
+      </Styled.PlaceColumn>
+      <Styled.Column>{event.area}</Styled.Column>
+      <Styled.CarrierColumn>
+        {event.organisation.name}
+        <Styled.InfoBox>
+          <Styled.InfoHeader>{event.organisation.name}</Styled.InfoHeader>
+          <Styled.InfoText>
+            Kontaktperson:
+            {' '}
+            {event.organisation.contactPerson}
+          </Styled.InfoText>
+          <Styled.InfoText>{event.organisation.email}</Styled.InfoText>
+          <Styled.InfoText>{event.organisation.mobileNumber}</Styled.InfoText>
+        </Styled.InfoBox>
+      </Styled.CarrierColumn>
+      <Styled.CarrierColumn>
+        {event.distributionOrganisation ? event.distributionOrganisation.name : ''}
+        {event.distributionOrganisation?.name && (
+          <Styled.InfoBox>
+            <Styled.InfoHeader>{event.distributionOrganisation.name}</Styled.InfoHeader>
+            <Styled.InfoText>
+              Kontaktperson:
+              {' '}
+              {event.distributionOrganisation.contactPerson}
+            </Styled.InfoText>
+            <Styled.InfoText>{event.distributionOrganisation.email}</Styled.InfoText>
+            <Styled.InfoText>{event.distributionOrganisation.mobileNumber}</Styled.InfoText>
+          </Styled.InfoBox>
+        )}
+      </Styled.CarrierColumn>
+
+      <Styled.Column>{event.sessionId}</Styled.Column>
+      <Styled.Column>{getHourAndMin(event.enteredAt)}</Styled.Column>
+      <Styled.Column>{event.os}</Styled.Column>
+    </Styled.Container>
+  );
+};

src/modules/Delivery/components/DeliveryList/components/EventRow/index.ts

@@ -0,0 +1 @@
+export * from './EventRow';

src/modules/Delivery/components/DeliveryList/ListContent/styled.ts → src/modules/Delivery/components/DeliveryList/components/EventRow/styled.ts

@@ -36,21 +36,6 @@ export const SVGContainer = styled.img`
   height: 16px;
 `;
 
-export const NoResultText = styled.p`
-  font-size: var(--font-size-body-xs);
-  font-weight: var(--font-weight-600);
-  line-height: var(--line-height-xxxs);
-  padding-top: 18px;
-`;
-
-export const RefreshLink = styled.span`
-  font-size: var(--font-size-body-xs);
-  font-weight: var(--font-weight-600);
-  line-height: var(--line-height-xxxs);
-  text-decoration: underline;
-  cursor: pointer;
-`;
-
 const fadeIn = keyframes`
   0% {
     opacity: 0;

src/modules/Delivery/components/DeliveryList/FilterList/FilterList.tsx → src/modules/Delivery/components/DeliveryList/components/FilterList/FilterList.tsx

@@ -23,13 +23,12 @@ type FilterListProps = {
   activeFilters: ActiveFilterType;
   setDateTimeFilter: (filterName: string) => (data: DateTimeFilterSelected) => void;
   exportEventsToExcel: (filter?: string) => void;
+  showExportButton: boolean;
 };
 
 export const FilterList: FC<FilterListProps> = ({
-  filters, checkFilter, resetFilters, triggerReload,
-  filterOptions,
-  activeFilters, setDateTimeFilter,
-  exportEventsToExcel,
+  filters, checkFilter, resetFilters, triggerReload, showExportButton,
+  filterOptions, activeFilters, setDateTimeFilter, exportEventsToExcel,
 }) => {
   if (!filters || !filterOptions) {
     return null;
@@ -105,13 +104,16 @@ export const FilterList: FC<FilterListProps> = ({
       }
 
       </Styled.FilterContainer>
+      {showExportButton && (
       <Button
         onClick={() => exportEventsToExcel()}
         type="button"
         buttonSize={ButtonSize.SMALL}
       >
         Exportera till excel
       </Button>
+      )}
+
     </Styled.Container>
   );
 };