th-413: Add avatars to order card business, corrects markers, styles. (…

…BinaryStudioAcademy#426)

* th-413: * change some styles

* th-413: + getting avatar url

* th-413: + avatar to card

* th-413: * repair markers

* th-413: * repair markers

* th-413: * conflicts

* th-413: * dropdown

* th-413: * conflicts

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

@@ -29,6 +29,8 @@ class OrderRepository implements Omit<IRepository, 'find'> {
 
   private driversSchema: DatabaseSchema['drivers'];
 
+  private fileSchema: DatabaseSchema['files'];
+
   public constructor(
     database: Pick<IDatabase, 'driver'>,
     {
@@ -37,9 +39,10 @@ class OrderRepository implements Omit<IRepository, 'find'> {
       users,
       shifts,
       drivers,
+      files,
     }: Pick<
       DatabaseSchema,
-      'orders' | 'users' | 'trucks' | 'shifts' | 'drivers'
+      'orders' | 'users' | 'trucks' | 'shifts' | 'drivers' | 'files'
     >,
   ) {
     this.db = database;
@@ -48,6 +51,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
     this.usersSchema = users;
     this.shiftsSchema = shifts;
     this.driversSchema = drivers;
+    this.fileSchema = files;
   }
 
   public async findById(id: OrderEntityT['id']): Promise<OrderEntityT | null> {
@@ -73,6 +77,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
           email: this.usersSchema.email,
           phone: this.usersSchema.phone,
           driverLicenseNumber: this.driversSchema.driverLicenseNumber,
+          avatarUrl: this.fileSchema.key,
         },
         truck: {
           id: this.shiftsSchema.truckId,
@@ -92,6 +97,10 @@ class OrderRepository implements Omit<IRepository, 'find'> {
         this.driversSchema,
         eq(this.driversSchema.userId, this.shiftsSchema.driverId),
       )
+      .innerJoin(
+        this.fileSchema,
+        eq(this.driversSchema.avatarId, this.fileSchema.id),
+      )
       .innerJoin(
         this.trucksSchema,
         eq(this.trucksSchema.id, this.shiftsSchema.truckId),
@@ -141,6 +150,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
           email: this.usersSchema.email,
           phone: this.usersSchema.phone,
           driverLicenseNumber: this.driversSchema.driverLicenseNumber,
+          avatarUrl: this.fileSchema.key,
         },
         truck: {
           id: this.shiftsSchema.truckId,
@@ -160,6 +170,10 @@ class OrderRepository implements Omit<IRepository, 'find'> {
         this.driversSchema,
         eq(this.driversSchema.userId, this.shiftsSchema.driverId),
       )
+      .innerJoin(
+        this.fileSchema,
+        eq(this.driversSchema.avatarId, this.fileSchema.id),
+      )
       .innerJoin(
         this.trucksSchema,
         eq(this.trucksSchema.id, this.shiftsSchema.truckId),
@@ -201,6 +215,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
           email: this.usersSchema.email,
           phone: this.usersSchema.phone,
           driverLicenseNumber: this.driversSchema.driverLicenseNumber,
+          avatarUrl: this.fileSchema.key,
         },
         truck: {
           id: this.shiftsSchema.truckId,
@@ -220,6 +235,10 @@ class OrderRepository implements Omit<IRepository, 'find'> {
         this.driversSchema,
         eq(this.driversSchema.userId, this.shiftsSchema.driverId),
       )
+      .innerJoin(
+        this.fileSchema,
+        eq(this.driversSchema.avatarId, this.fileSchema.id),
+      )
       .innerJoin(
         this.trucksSchema,
         eq(this.trucksSchema.id, this.shiftsSchema.truckId),
@@ -268,6 +287,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
           email: this.usersSchema.email,
           phone: this.usersSchema.phone,
           driverLicenseNumber: this.driversSchema.driverLicenseNumber,
+          avatarUrl: this.fileSchema.key,
         },
         truck: {
           id: this.shiftsSchema.truckId,
@@ -287,6 +307,10 @@ class OrderRepository implements Omit<IRepository, 'find'> {
         this.driversSchema,
         eq(this.driversSchema.userId, this.shiftsSchema.driverId),
       )
+      .innerJoin(
+        this.fileSchema,
+        eq(this.driversSchema.avatarId, this.fileSchema.id),
+      )
       .innerJoin(
         this.trucksSchema,
         eq(this.trucksSchema.id, this.shiftsSchema.truckId),
@@ -380,6 +404,7 @@ class OrderRepository implements Omit<IRepository, 'find'> {
   public async getUserOrBusinessTotal(
     search: Partial<{
       ownerId: number | null;
+      businessId: OrderEntityT['businessId'];
       status: OrderEntityT['status'];
     }>,
   ): Promise<number> {

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

@@ -5,6 +5,8 @@ import { type SocketService } from '~/libs/packages/socket/socket.service.js';
 
 import { type BusinessService } from '../business/business.service.js';
 import { type DriverService } from '../drivers/driver.service.js';
+import { getFilePublicUrl } from '../files/files.js';
+import { type FilesService } from '../files/files.service.js';
 import { type MapService } from '../map/map.service.js';
 import { type ShiftService } from '../shifts/shift.service.js';
 import { convertCurrencyToCents } from '../stripe/libs/helpers/helpers.js';
@@ -48,6 +50,8 @@ class OrderService implements Omit<IService, 'find'> {
 
   private mapService: MapService;
 
+  private filesService: FilesService;
+
   public constructor({
     businessService,
     orderRepository,
@@ -57,6 +61,7 @@ class OrderService implements Omit<IService, 'find'> {
     userService,
     mapService,
     socket,
+    filesService,
   }: {
     orderRepository: OrderRepository;
     businessService: BusinessService;
@@ -66,6 +71,7 @@ class OrderService implements Omit<IService, 'find'> {
     userService: UserService;
     mapService: MapService;
     socket: SocketService;
+    filesService: FilesService;
   }) {
     this.orderRepository = orderRepository;
 
@@ -85,6 +91,8 @@ class OrderService implements Omit<IService, 'find'> {
 
     this.socketService = socket;
 
+    this.filesService = filesService;
+
     this.mapService = mapService;
   }
 
@@ -123,6 +131,9 @@ class OrderService implements Omit<IService, 'find'> {
     }
 
     const driver = await this.userService.findById(shift.driverId);
+    const avatarUrl = shift.avatarId
+      ? await this.filesService.findById(shift.avatarId)
+      : null;
 
     if (!driver) {
       throw new NotFoundError({
@@ -160,6 +171,7 @@ class OrderService implements Omit<IService, 'find'> {
         email: driver.email,
         phone: driver.phone,
         driverLicenseNumber: shift.driverLicenseNumber,
+        avatarUrl: avatarUrl?.key ?? null,
       },
       truck: { id: truck.id, licensePlateNumber: truck.licensePlateNumber },
     }).toObject();
@@ -255,6 +267,7 @@ class OrderService implements Omit<IService, 'find'> {
         email: foundOrder.driver.email,
         phone: foundOrder.driver.phone,
         driverLicenseNumber: driver.driverLicenseNumber,
+        avatarUrl: driver.avatarUrl,
       },
       truck: { id: truck.id, licensePlateNumber: truck.licensePlateNumber },
     };
@@ -348,15 +361,28 @@ class OrderService implements Omit<IService, 'find'> {
 
     const total = query.status
       ? await this.orderRepository.getUserOrBusinessTotal({
-          ownerId: business.id,
+          businessId: business.id,
           status: query.status,
         })
       : await this.orderRepository.getUserOrBusinessTotal({
-          ownerId: business.id,
+          businessId: business.id,
         });
 
+    const items = usersOrders.map((it) => {
+      const order = OrderEntity.initialize(it).toObject();
+
+      if (order.shift.driver) {
+        const avatarUrl = order.shift.driver.avatarUrl;
+        order.shift.driver.avatarUrl = avatarUrl
+          ? getFilePublicUrl(avatarUrl)
+          : null;
+      }
+
+      return order;
+    });
+
     return {
-      items: usersOrders.map((it) => OrderEntity.initialize(it).toObject()),
+      items,
       total,
     };
   }

backend/src/packages/orders/orders.ts

@@ -4,6 +4,7 @@ import { socket } from '~/libs/packages/socket/socket.js';
 
 import { businessService } from '../business/business.js';
 import { driverService } from '../drivers/drivers.js';
+import { filesService } from '../files/files.js';
 import { mapService } from '../map/map.js';
 import { shiftService } from '../shifts/shift.js';
 import { truckService } from '../trucks/trucks.js';
@@ -22,6 +23,7 @@ const orderService = new OrderService({
   userService,
   mapService,
   socket,
+  filesService,
 });
 const orderController = new OrderController({
   logger,

backend/src/packages/shifts/shift.repository.ts

@@ -64,10 +64,12 @@ class ShiftRepository implements IRepository {
     return shift;
   }
 
-  public async getOpenedByTruckWithBusiness(
-    truckId: number,
-  ): Promise<
-    | (ShiftDatabaseModel & { businessId: number; driverLicenseNumber: string })
+  public async getOpenedByTruckWithBusiness(truckId: number): Promise<
+    | (ShiftDatabaseModel & {
+        businessId: number;
+        driverLicenseNumber: string;
+        avatarId: number | null;
+      })
     | null
   > {
     const [shift = null] = await this.db
@@ -91,6 +93,7 @@ class ShiftRepository implements IRepository {
           ...shift.shifts,
           businessId: shift.driver_details.businessId,
           driverLicenseNumber: shift.driver_details.driverLicenseNumber,
+          avatarId: shift.driver_details.avatarId,
         }
       : null;
   }

backend/src/packages/shifts/shift.service.ts

@@ -79,10 +79,13 @@ class ShiftService implements IService {
     return shift ? ShiftEntity.initialize(shift).toObject() : null;
   }
 
-  public async findOpenedByTruckWithBusiness(
-    truckId: number,
-  ): Promise<
-    (ShiftEntityT & { businessId: number; driverLicenseNumber: string }) | null
+  public async findOpenedByTruckWithBusiness(truckId: number): Promise<
+    | (ShiftEntityT & {
+        businessId: number;
+        driverLicenseNumber: string;
+        avatarId: number | null;
+      })
+    | null
   > {
     const shiftDatabase =
       await this.shiftRepository.getOpenedByTruckWithBusiness(truckId);
@@ -96,6 +99,7 @@ class ShiftService implements IService {
       ...shift,
       businessId: shiftDatabase.businessId,
       driverLicenseNumber: shiftDatabase.driverLicenseNumber,
+      avatarId: shiftDatabase.avatarId,
     };
   }
 

frontend/src/libs/components/dropdown/styles.module.scss

@@ -3,7 +3,6 @@
 .container {
   .control {
     height: 20px;
-    min-height: auto;
     background: transparent;
     border: none;
     outline: none;

frontend/src/libs/components/order-list-card-business/order-list-card-business.tsx

@@ -38,6 +38,8 @@ const OrderListCardBusiness: React.FC<Properties> = ({
 
   const statusBadge = mapOrderStatusToReadable[status];
 
+  const driverAratar = driver?.avatarUrl ?? ImgPath.AVATAR_DEFAULT;
+
   return (
     <div
       className={styles.container}
@@ -47,11 +49,13 @@ const OrderListCardBusiness: React.FC<Properties> = ({
         <p className={getValidClassNames('textMdBold', styles.cardName)}>
           Order {id}
         </p>
-        <Badge color={statusBadge.color}>{statusBadge.name}</Badge>
+        <Badge color={statusBadge.color} className={styles.badge}>
+          {statusBadge.name}
+        </Badge>
       </div>
       <div className={styles.content}>
         <img
-          src={ImgPath.AVATAR_DEFAULT}
+          src={driverAratar}
           alt={driver?.firstName}
           className={styles.avatar}
         />

frontend/src/libs/components/order-list-card-business/styles.module.scss

@@ -34,6 +34,10 @@
   border-radius: 50%;
 }
 
+.badge {
+  width: 100px;
+}
+
 .driver {
   display: flex;
   margin-left: 25px;

frontend/src/libs/hooks/use-app-map/libs/helpers/set-map-service.helper.ts

@@ -31,7 +31,7 @@ const setMapService = ({
       center: center,
       zoom,
     });
-    mapService.current.addMarker(center, false);
+    mapService.current.addMarkerStatic(center);
   } else {
     const bounds = getBounds(points);
 
@@ -41,7 +41,7 @@ const setMapService = ({
       zoom,
     });
     for (const point of points) {
-      mapService.current.addMarker(point, false);
+      mapService.current.addMarkerStatic(point);
     }
   }
 };

frontend/src/libs/hooks/use-app-map/use-app-map.hook.ts

@@ -109,7 +109,7 @@ const useAppMap = ({
 
       for (const point of points) {
         mapService.current.removeMarkers();
-        mapService.current.addMarker(point, false);
+        mapService.current.addMarkerStatic(point);
       }
     }
   }, [points]);

frontend/src/libs/packages/map/map.package.ts

@@ -1,3 +1,4 @@
+import { ImgPath } from '~/libs/enums/img-path.enum.js';
 import { ApplicationError } from '~/libs/exceptions/exceptions.js';
 import { type Coordinates } from '~/libs/types/types.js';
 
@@ -326,6 +327,18 @@ class MapService implements IMapService {
     return marker;
   }
 
+  public addMarkerStatic(
+    position: google.maps.LatLngLiteral,
+  ): google.maps.Marker {
+    this.throwIfMapNotInitialized();
+
+    return new google.maps.Marker({
+      position,
+      map: this.map,
+      icon: ImgPath.TRUCK_SM,
+    });
+  }
+
   public async addRoute({ startPoint, endPoint }: PlaceLatLng): Promise<void> {
     this.throwIfMapNotInitialized();
 
@@ -347,7 +360,7 @@ class MapService implements IMapService {
     startPoint,
     endPoint,
   }: PlaceLatLng): Promise<void> {
-    const anchor = this.addMarker(endPoint, false);
+    const anchor = this.addMarkerStatic(endPoint);
 
     const startAddress = await this.getPointAddress(startPoint);
     const endAddress = await this.getPointAddress(endPoint);