feat(web): improve alt text (#7596)

* alt text

* memory lane alt text

* revert sql generator change

* use getAltText

* oops

* handle large number of people in asset

* nit

* add aria-label to search button

* update api

* fixed tests

* fixed typing

* fixed spacing

* fix displaying null

server/src/domain/asset/asset.service.spec.ts

@@ -286,27 +286,22 @@ describe(AssetService.name, () => {
 
   describe('getMapMarkers', () => {
     it('should get geo information of assets', async () => {
+      const asset = assetStub.withLocation;
+      const marker = {
+        id: asset.id,
+        lat: asset.exifInfo!.latitude!,
+        lon: asset.exifInfo!.longitude!,
+        city: asset.exifInfo!.city,
+        state: asset.exifInfo!.state,
+        country: asset.exifInfo!.country,
+      };
       partnerMock.getAll.mockResolvedValue([]);
-      assetMock.getMapMarkers.mockResolvedValue(
-        [assetStub.withLocation].map((asset) => ({
-          id: asset.id,
-
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-          lat: asset.exifInfo!.latitude!,
-
-          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-          lon: asset.exifInfo!.longitude!,
-        })),
-      );
+      assetMock.getMapMarkers.mockResolvedValue([marker]);
 
       const markers = await sut.getMapMarkers(authStub.user1, {});
 
       expect(markers).toHaveLength(1);
-      expect(markers[0]).toEqual({
-        id: assetStub.withLocation.id,
-        lat: 100,
-        lon: 100,
-      });
+      expect(markers[0]).toEqual(marker);
     });
   });
 

server/src/domain/asset/response-dto/map-marker-response.dto.ts

@@ -9,4 +9,13 @@ export class MapMarkerResponseDto {
 
   @ApiProperty({ format: 'double' })
   lon!: number;
+
+  @ApiProperty()
+  city!: string | null;
+
+  @ApiProperty()
+  state!: string | null;
+
+  @ApiProperty()
+  country!: string | null;
 }

server/src/domain/repositories/asset.repository.ts

@@ -1,4 +1,9 @@
-import { AssetSearchOneToOneRelationOptions, AssetSearchOptions, SearchExploreItem } from '@app/domain';
+import {
+  AssetSearchOneToOneRelationOptions,
+  AssetSearchOptions,
+  ReverseGeocodeResult,
+  SearchExploreItem,
+} from '@app/domain';
 import { AssetEntity, AssetJobStatusEntity, AssetType, ExifEntity } from '@app/infra/entities';
 import { FindOptionsRelations, FindOptionsSelect } from 'typeorm';
 import { Paginated, PaginationOptions } from '../domain.util';
@@ -25,7 +30,7 @@ export interface MapMarkerSearchOptions {
   fileCreatedAfter?: Date;
 }
 
-export interface MapMarker {
+export interface MapMarker extends ReverseGeocodeResult {
   id: string;
   lat: number;
   lon: number;

server/src/infra/repositories/asset.repository.ts

@@ -507,6 +507,9 @@ export class AssetRepository implements IAssetRepository {
       select: {
         id: true,
         exifInfo: {
+          city: true,
+          state: true,
+          country: true,
           latitude: true,
           longitude: true,
         },
@@ -532,12 +535,11 @@ export class AssetRepository implements IAssetRepository {
 
     return assets.map((asset) => ({
       id: asset.id,
-
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       lat: asset.exifInfo!.latitude!,
-
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
       lon: asset.exifInfo!.longitude!,
+      city: asset.exifInfo!.city,
+      state: asset.exifInfo!.state,
+      country: asset.exifInfo!.country,
     }));
   }