feat(web): add Exif-Rating (#11580)

* Add Exif-Rating

* Integrate star rating as own component

* Add e2e tests for rating and validation

* Rename component and async handleChangeRating

* Display rating can be enabled in app settings

* Correct i18n reference

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* Star rating: change from slider to buttons

* Star rating for clarity

* Design updates.

* Renaming and code optimization

* chore: clean up

* chore: e2e formatting

* light mode border and default value

---------

Co-authored-by: Christoph Suter <christoph@suter-burri.ch>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Mert <101130780+mertalev@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

server/src/dtos/asset.dto.ts

@@ -9,6 +9,8 @@ import {
   IsNotEmpty,
   IsPositive,
   IsString,
+  Max,
+  Min,
   ValidateIf,
 } from 'class-validator';
 import { BulkIdsDto } from 'src/dtos/asset-ids.response.dto';
@@ -46,6 +48,12 @@ export class UpdateAssetBase {
   @IsLongitude()
   @IsNotEmpty()
   longitude?: number;
+
+  @Optional()
+  @IsInt()
+  @Max(5)
+  @Min(0)
+  rating?: number;
 }
 
 export class AssetBulkUpdateDto extends UpdateAssetBase {

server/src/dtos/exif.dto.ts

@@ -25,6 +25,7 @@ export class ExifResponseDto {
   country?: string | null = null;
   description?: string | null = null;
   projectionType?: string | null = null;
+  rating?: number | null = null;
 }
 
 export function mapExif(entity: ExifEntity): ExifResponseDto {
@@ -50,6 +51,7 @@ export function mapExif(entity: ExifEntity): ExifResponseDto {
     country: entity.country,
     description: entity.description,
     projectionType: entity.projectionType,
+    rating: entity.rating,
   };
 }
 
@@ -62,5 +64,6 @@ export function mapSanitizedExif(entity: ExifEntity): ExifResponseDto {
     projectionType: entity.projectionType,
     exifImageWidth: entity.exifImageWidth,
     exifImageHeight: entity.exifImageHeight,
+    rating: entity.rating,
   };
 }

server/src/dtos/user-preferences.dto.ts

@@ -16,6 +16,11 @@ class MemoryUpdate {
   enabled?: boolean;
 }
 
+class RatingUpdate {
+  @ValidateBoolean({ optional: true })
+  enabled?: boolean;
+}
+
 class EmailNotificationsUpdate {
   @ValidateBoolean({ optional: true })
   enabled?: boolean;
@@ -45,6 +50,11 @@ class PurchaseUpdate {
 }
 
 export class UserPreferencesUpdateDto {
+  @Optional()
+  @ValidateNested()
+  @Type(() => RatingUpdate)
+  rating?: RatingUpdate;
+
   @Optional()
   @ValidateNested()
   @Type(() => AvatarUpdate)
@@ -76,6 +86,10 @@ class AvatarResponse {
   color!: UserAvatarColor;
 }
 
+class RatingResponse {
+  enabled!: boolean;
+}
+
 class MemoryResponse {
   enabled!: boolean;
 }
@@ -97,6 +111,7 @@ class PurchaseResponse {
 }
 
 export class UserPreferencesResponseDto implements UserPreferences {
+  rating!: RatingResponse;
   memories!: MemoryResponse;
   avatar!: AvatarResponse;
   emailNotifications!: EmailNotificationsResponse;