th-213: Business Journey - FE: Order List (#295)

* th-213: + orders

* th-213: + orders

* th-213: + orders state

* th-213: * order list

* th-213: - null in order response dto

* th-213: + add route building

* th-213: + add route building

* th-213: + order-list-card for business

* th-213: * chenge map center to optional, card hover

* th-213: * selector

* th-213: + info window on the map

* th-213: * correct helper

* th-213: * correct styles

* th-213: * create icon helper, small changes

* th-213: * type Map options

* th-123: * image path enum

* th-213: * mapper, small changes

* th-213: * rename, move helper

* th-213: * onSelect

Author: TetianaDoroshko

backend/src/packages/orders/order.entity.ts

@@ -116,7 +116,9 @@ class OrderEntity implements IEntity {
     shiftId,
     customerName,
     customerPhone,
-  }: Omit<OrderEntityT, 'id' | 'driver' | 'truck'> & {
+    driver,
+    truck,
+  }: Omit<OrderEntityT, 'id'> & {
     shiftId: number;
   }): OrderEntity {
     return new OrderEntity({
@@ -132,8 +134,8 @@ class OrderEntity implements IEntity {
       customerName,
       customerPhone,
       shiftId,
-      driver: null,
-      truck: null,
+      driver,
+      truck,
     });
   }
 

frontend/src/assets/img/avatar-default.png

@@ -16,9 +16,12 @@ export { Image } from './image/image.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { LocationInput } from './location-input/location-input.js';
+export { Map } from './map/map.js';
 export { Modal } from './modal/modal.js';
 export { Notification } from './notification/notification.js';
 export { OrderCard } from './order-card/order-card.js';
+export { OrderList } from './order-list/order-list.js';
+export { OrderListCardBusiness } from './order-list-card-business/order-list-card-business.js';
 export { PageLayout } from './page-layout/page-layout.js';
 export { Pagination } from './pagination/pagination.js';
 export { PlainSvgIcon } from './plain-svg-icon/plain-svg-icon.js';

frontend/src/assets/img/tow-truck-small.svg

@@ -0,0 +1,3 @@
+const DEFAULT_ZOOM = 10;
+
+export { DEFAULT_ZOOM };

frontend/src/libs/components/components.ts

@@ -0,0 +1,18 @@
+import { OrderStatus } from '~/libs/enums/enums.js';
+import { type OrderStatusValues } from '~/libs/types/types.js';
+
+import { type ReadableStatusWithColor } from '../types/readable-status-with-color.type.js';
+
+const mapOrderStatusToReadable: Record<
+  OrderStatusValues,
+  ReadableStatusWithColor
+> = {
+  [OrderStatus.PENDING]: { name: 'Pending', color: 'grey-light' },
+  [OrderStatus.CONFIRMED]: { name: 'On the way', color: 'blue-light' },
+  [OrderStatus.CANCELED]: { name: 'Canceled', color: 'red' },
+  [OrderStatus.DONE]: { name: 'Done', color: 'grey-dark' },
+  [OrderStatus.PICKING_UP]: { name: 'Arrived', color: 'green' },
+  [OrderStatus.REJECTED]: { name: 'Rejected', color: 'red-light' },
+};
+
+export { mapOrderStatusToReadable };

frontend/src/libs/components/map/libs/constants/constants.ts

@@ -0,0 +1 @@
+export { mapOrderStatusToReadable } from './map-order-status-to-readable.map.js';

frontend/src/libs/components/order-list-card-business/libs/map/map-order-status-to-readable.map.ts

@@ -0,0 +1,7 @@
+import { type Color } from '~/libs/types/color.type.js';
+
+type ReadableStatusWithColor = {
+  name: string;
+  color: Color;
+};
+export { type ReadableStatusWithColor };

frontend/src/libs/components/order-list-card-business/libs/map/maps.ts

@@ -0,0 +1 @@
+export { type ReadableStatusWithColor } from './readable-status-with-color.type.js';

frontend/src/libs/components/order-list-card-business/libs/types/readable-status-with-color.type.ts

@@ -0,0 +1,78 @@
+import { IconName, ImgPath } from '~/libs/enums/enums.js';
+import {
+  getValidClassNames,
+  jsonToLatLngLiteral,
+} from '~/libs/helpers/helpers.js';
+import { useCallback } from '~/libs/hooks/hooks.js';
+import { type PlaceLatLng } from '~/libs/packages/map/libs/types/types.js';
+import { type OrderResponseDto } from '~/libs/types/types.js';
+
+import { Badge, Icon } from '../components.js';
+import { getFullName } from '../header/libs/helpers/helpers.js';
+import { mapOrderStatusToReadable } from './libs/map/maps.js';
+import styles from './styles.module.scss';
+
+type Properties = {
+  order: OrderResponseDto;
+  onSelect: ({ startPoint, endPoint }: PlaceLatLng) => void;
+};
+
+const OrderListCardBusiness: React.FC<Properties> = ({
+  order,
+  onSelect,
+}: Properties) => {
+  const {
+    id,
+    status,
+    startPoint,
+    endPoint,
+    shift: { driver, truck },
+  } = order;
+
+  const handleSelectCard = useCallback(
+    (startPoint: string, endPoint: string) => () => {
+      onSelect({
+        startPoint: jsonToLatLngLiteral(startPoint),
+        endPoint: jsonToLatLngLiteral(endPoint),
+      });
+    },
+    [onSelect],
+  );
+
+  const statusBadge = mapOrderStatusToReadable[status];
+
+  return (
+    <div
+      className={styles.container}
+      onMouseEnter={handleSelectCard(startPoint, endPoint)}
+    >
+      <div className={styles.header}>
+        <p className={getValidClassNames('textMdBold', styles.cardName)}>
+          Order {id}
+        </p>
+        <Badge color={statusBadge.color}>{statusBadge.name}</Badge>
+      </div>
+      <div className={styles.content}>
+        <img
+          src={ImgPath.AVATAR_DEFAULT}
+          alt={driver?.firstName}
+          className={styles.avatar}
+        />
+        <div className={styles.driver}>
+          <p className={getValidClassNames('textMdBold')}>
+            {driver && getFullName(driver.firstName, driver.lastName)}
+          </p>
+          <p className={getValidClassNames('textMd', styles.driverPhone)}>
+            {driver?.phone}
+          </p>
+        </div>
+        <div className={styles.truck}>
+          <Icon iconName={IconName.TRUCK} className={styles.icon} />
+          <p className={styles.truckNumber}>{truck?.licensePlateNumber}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { OrderListCardBusiness };