fix: images in service admin board detail

eclipse-tractusx · Oct 16, 2024 · fda511a · fda511a
1 parent 5d22205
commit fda511a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss b/src/components/pages/AdminBoardDetail/AdminBoardDetail.scss
@@ -55,11 +55,17 @@
         gap: 56px;
       }
 
-      .lead-image > img {
-        border-radius: 16px;
-        max-width: 100%;
-        width: 412px;
+      .lead-image {
+        width: 288px;
+        height: 288px;
+        overflow: hidden;
+        & > img {
+          border-radius: 16px;
+          max-width: 100%;
+          width: 412px;
+        }
       }
+
       .service-app-content {
         flex: 1;
       }

diff --git a/src/components/pages/ServiceAdminBoardDetail/index.tsx b/src/components/pages/ServiceAdminBoardDetail/index.tsx
@@ -22,10 +22,11 @@ import {
   Button,
   StaticTable,
   Typography,
+  Image,
+  LogoGrayData,
 } from '@catena-x/portal-shared-components'
 import { useNavigate, useParams } from 'react-router-dom'
 import '../AdminBoardDetail/AdminBoardDetail.scss'
-import { getAssetBase } from 'services/EnvironmentService'
 import {
   type ServiceDetailsType,
   useFetchBoardServiceDetailsQuery,
@@ -49,6 +50,7 @@ enum TableData {
 }
 
 export default function ServiceAdminBoardDetail() {
+  const [leadImg, setLeadImg] = useState<string>('')
   const { t } = useTranslation('servicerelease')
   const navigate = useNavigate()
   const { appId } = useParams()
@@ -64,6 +66,25 @@ export default function ServiceAdminBoardDetail() {
     }
   }, [isFetching, data])
 
+  useEffect(() => {
+    if (serviceData?.leadPictureId) {
+      setLeadingImg()
+    } else setLeadImg(LogoGrayData)
+  }, [serviceData])
+
+  const setLeadingImg = async () => {
+    try {
+      const response = await fetchDocument({
+        appId,
+        documentId: serviceData?.leadPictureId,
+      }).unwrap()
+      const file = response.data
+      setLeadImg(URL.createObjectURL(file))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   const getTypes = useCallback(() => {
     const newArr: string[] = []
     serviceData?.serviceTypes.forEach((serviceType: string) => {
@@ -132,10 +153,7 @@ export default function ServiceAdminBoardDetail() {
         <Box className="service-content">
           <div className="service-board-header">
             <div className="lead-image">
-              <img
-                src={`${getAssetBase()}/images/content/ServiceMarketplace.png`}
-                alt={serviceData.title}
-              />
+              <Image src={leadImg} alt={serviceData.title} />
             </div>
             <Box className="service-app-content">
               <Typography variant="h5" sx={{ pb: '6px', color: '#888888' }}>

diff --git a/src/features/adminBoard/serviceAdminBoardApiSlice.ts b/src/features/adminBoard/serviceAdminBoardApiSlice.ts
@@ -79,6 +79,7 @@ export interface ServiceDetailsType {
   }[]
   documents: { [key: string]: Array<DocumentData> }
   providerUri: string
+  leadPictureId: string
   contactEmail: string
   contactNumber: null
   technicalUserProfile?: {