Revert "[TM-3069] revert changes" (#2090)

* Revert "[TM-3069] revert changes (#2086)"

This reverts commit be2b442.

* [TM-2089] add position functionality for upload image

Author: LimberHope

src/components/elements/ImageGallery/ImageGallery.stories.tsx

@@ -45,7 +45,9 @@ const mockData: MediaDto[] = (() => {
       isCover: faker.datatype.boolean(),
       description: faker.lorem.sentence({ min: 4, max: 8 }),
       photographer: faker.person.fullName(),
-      createdByUserName: faker.person.fullName()
+      createdByUserName: faker.person.fullName(),
+      profileImageScale: faker.number.int({ min: 1, max: 10 }),
+      profileImagePosition: { x: faker.number.int({ min: 1, max: 10 }), y: faker.number.int({ min: 1, max: 10 }) }
     });
   }
   return data;

src/components/elements/ImageGallery/ImageGalleryItem.stories.tsx

@@ -48,7 +48,9 @@ export const Default: Story = {
       isCover: faker.datatype.boolean(),
       description: faker.lorem.sentence({ min: 4, max: 8 }),
       photographer: faker.person.fullName(),
-      createdByUserName: faker.person.fullName()
+      createdByUserName: faker.person.fullName(),
+      profileImageScale: faker.number.int({ min: 1, max: 10 }),
+      profileImagePosition: { x: faker.number.int({ min: 1, max: 10 }), y: faker.number.int({ min: 1, max: 10 }) }
     }
   }
 };

src/components/elements/ImageGallery/ImageGalleryItem.tsx

@@ -57,14 +57,17 @@ const ImageGalleryItem: FC<ImageGalleryItemProps> = ({
     onDelete?.(data.uuid);
   }, [data.uuid, onDelete]);
   const setImageCover = useCallback(async () => {
-    const result = await updateMedia({ isCover: true }, { id: data.uuid });
+    const result = await updateMedia(
+      { isCover: true, profileImageScale: data.profileImageScale, profileImagePosition: data.profileImagePosition },
+      { id: data.uuid }
+    );
     if (result) {
       openNotification("success", t("Success!"), t("Image set as cover successfully"));
       reloadGalleryImages?.();
     } else {
       openNotification("error", t("Error!"), t("Failed to set image as cover"));
     }
-  }, [data.uuid, openNotification, reloadGalleryImages, t]);
+  }, [data.profileImageScale, data.profileImagePosition, data.uuid, openNotification, reloadGalleryImages, t]);
   const openModalImageDetail = useCallback(() => {
     openModal(
       ModalId.MODAL_IMAGE_DETAIL,

src/components/elements/Inputs/FileInput/FilePreviewCard.tsx

@@ -41,7 +41,14 @@ const FilePreviewCard = ({
     (checked: boolean) => {
       if (file == null) return;
 
-      updateMedia({ isPublic: checked }, { id: file.uuid });
+      updateMedia(
+        {
+          isPublic: checked,
+          profileImageScale: file.profileImageScale!,
+          profileImagePosition: file.profileImagePosition!
+        },
+        { id: file.uuid }
+      );
     },
     [file]
   );

src/components/elements/Inputs/FileInput/FilePreviewTable.tsx

@@ -112,7 +112,14 @@ const FilePreviewTable: FC<FilePreviewTableProps> = ({ items, onDelete, updateFi
         updatedItems.forEach(item => updateFile?.(item));
 
         if (checked) {
-          await updateMedia({ isCover: checked }, { id: selectedItem.uuid });
+          await updateMedia(
+            {
+              isCover: checked,
+              profileImageScale: selectedItem.profileImageScale!,
+              profileImagePosition: selectedItem.profileImagePosition!
+            },
+            { id: selectedItem.uuid }
+          );
         }
       } catch (error) {
         Log.error("Error updating cover status:", error);
@@ -127,7 +134,14 @@ const FilePreviewTable: FC<FilePreviewTableProps> = ({ items, onDelete, updateFi
     (item: Partial<UploadedFile>, checked: boolean) => {
       showLoader();
       try {
-        updateMedia({ isPublic: checked }, { id: item.uuid });
+        updateMedia(
+          {
+            isPublic: checked,
+            profileImageScale: item.profileImageScale!,
+            profileImagePosition: item.profileImagePosition!
+          },
+          { id: item.uuid }
+        );
         updateFile?.({ ...item, isPublic: checked });
       } catch (error) {
         Log.error("Error updating public status:", error);

src/components/elements/Map-mapbox/Map.tsx

@@ -560,7 +560,7 @@ export const MapContainer = ({
     };
 
     const setImageCover = async (uuid: string) => {
-      const result = await updateMedia({ isCover: true }, { id: uuid });
+      const result = await updateMedia({ isCover: true, profileImageScale: 0, profileImagePosition: {} }, { id: uuid });
       if (result) {
         openNotification("success", t("Success!"), t("Image set as cover successfully"));
         setShouldRefetchMediaData(true);

src/components/extensive/Modal/ModalImageDetails.tsx

@@ -105,7 +105,9 @@ const ModalImageDetails: FC<ModalImageDetailProps> = ({
           photographer: formData.photographer,
           description: formData.description ?? undefined,
           isPublic: formData.is_public,
-          isCover: formData.is_cover
+          isCover: formData.is_cover,
+          profileImageScale: data.profileImageScale,
+          profileImagePosition: data.profileImagePosition
         },
         { id: data.uuid }
       );
@@ -114,7 +116,10 @@ const ModalImageDetails: FC<ModalImageDetailProps> = ({
     }
 
     if (formData.is_cover !== initialFormData.is_cover && formData.is_cover) {
-      const result = updateMedia({ isCover: true }, { id: data.uuid });
+      const result = updateMedia(
+        { isCover: true, profileImageScale: data.profileImageScale, profileImagePosition: data.profileImagePosition },
+        { id: data.uuid }
+      );
       updatePromises.push(result);
     }
 

src/connections/Media.ts

@@ -36,7 +36,10 @@ export const downloadImage = (uuid: string): Promise<Blob> => exportImage.fetchB
 
 export const prepareFileForUpload = async (
   file: File,
-  isPublic = true
+  isPublic = true,
+  isCover = false,
+  profileImageScale?: number,
+  profileImagePosition?: { x: number; y: number }
 ): Promise<WithFormData<MediaRequestAttributes>> => {
   let location: Awaited<ReturnType<typeof exifr.gps>> | undefined = undefined;
   try {
@@ -48,7 +51,15 @@ export const prepareFileForUpload = async (
   const formData = new FormData();
   formData.append("uploadFile", file);
   const { latitude, longitude } = location ?? { latitude: null, longitude: null };
-  return { isPublic, lat: latitude, lng: longitude, formData };
+  return {
+    isPublic,
+    lat: latitude,
+    lng: longitude,
+    isCover,
+    profileImageScale: profileImageScale ?? null,
+    profileImagePosition: profileImagePosition ?? null,
+    formData
+  };
 };
 
 export const fileUploadOptions = (

src/connections/Organisation.ts

@@ -10,6 +10,7 @@ import {
 import { connectionHook, connectionLoader } from "@/connections/util/connectionShortcuts";
 import { deleterAsync } from "@/connections/util/resourceDeleter";
 import { resourceCreator, resourceUpdater } from "@/connections/util/resourceMutator";
+import { MediaDto } from "@/generated/v3/entityService/entityServiceSchemas";
 import {
   createUserAssociation,
   organisationCreation,
@@ -25,7 +26,6 @@ import {
   FinancialReportLightDto,
   FundingTypeDto,
   LeadershipDto,
-  MediaDto,
   OrganisationFullDto,
   OrganisationLightDto,
   OrganisationUpdateAttributes,

src/generated/v3/entityService/entityServiceSchemas.ts

@@ -149,6 +149,7 @@ export type MediaDto = {
   photographer: string | null;
   createdByUserName: string | null;
   profileImageScale: number | null;
+  profileImagePosition: Record<string, any> | null;
 };
 
 export type ImpactStoryLightDto = {
@@ -640,6 +641,10 @@ export type MediaRequestBulkAttributes = {
    * The profile image scale
    */
   profileImageScale: number | null;
+  /**
+   * The profile image position
+   */
+  profileImagePosition: Record<string, any> | null;
 };
 
 export type MediaRequestBulkData = {
@@ -678,6 +683,10 @@ export type MediaRequestAttributes = {
    * Whether the media is a cover
    */
   isCover: boolean | null;
+  /**
+   * The profile image position
+   */
+  profileImagePosition: Record<string, any> | null;
 };
 
 export type MediaRequestData = {
@@ -718,6 +727,10 @@ export type MediaUpdateAttributes = {
    * The profile image scale
    */
   profileImageScale: number | null;
+  /**
+   * The profile image position
+   */
+  profileImagePosition: Record<string, any> | null;
 };
 
 export type MediaData = {
@@ -1978,6 +1991,7 @@ export type EmbeddedMediaDto = {
   description: string | null;
   photographer: string | null;
   profileImageScale: number | null;
+  profileImagePosition: Record<string, any> | null;
 };
 
 export type FinancialIndicatorDto = {