feat(certificate): added overlay business logic (#131)

eclipse-tractusx · Jul 12, 2023 · ba215f9 · ba215f9
1 parent 53425c2
commit ba215f9
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 61 deletions.
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -1478,7 +1478,9 @@
         "placeholder": "Please select",
         "uploadDocumentTitle": "Please upload your certificate proof:",
         "note": "Please upload only pdf files with maximum 1 MB.",
-        "descriptionLabel": "Description for verification"
+        "descriptionLabel": "Description for verification",
+        "error": "Something went wrong!",
+        "success": "Certificate uploaded successfully."
       },
       "successCertificate": {
         "title": "Certificate successfully uploaded.",
@@ -1494,7 +1496,8 @@
         "type": "Type: [ISO 9001]",
         "valid": "Valid until: ",
         "status": "Status: "
-      }
+      },
+      "noData": "Derzeit bestehen keine Zertifikate für das Unternehmen. Sie können mit dem Hochladen eines Zertifikats beginnen, indem Sie oben auf die Schaltfläche „Zertifikat hochladen“ klicken."
     }
   },
   "navigation": {

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -1440,7 +1440,9 @@
         "placeholder": "Please select",
         "uploadDocumentTitle": "Please upload your certificate proof:",
         "note": "Please upload only pdf files with maximum 1 MB.",
-        "descriptionLabel": "Description for verification"
+        "descriptionLabel": "Description for verification",
+        "error": "Something went wrong!",
+        "success": "Certificate uploaded successfully."
       },
       "successCertificate": {
         "title": "Certificate successfully uploaded.",
@@ -1456,7 +1458,8 @@
         "type": "Type: [ISO 9001]",
         "valid": "Valid until: ",
         "status": "Status: "
-      }
+      },
+      "noData": "Currently there are no certificates for the company. You can start uploading a certificate by clicking the 'Upload Certificate' button above."
     }
   },
   "navigation": {

diff --git a/src/components/overlays/UpdateCertificate/index.tsx b/src/components/overlays/UpdateCertificate/index.tsx
@@ -17,6 +17,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch } from 'react-redux'
 import {
   Button,
   Chip,
@@ -25,37 +28,51 @@ import {
   DialogHeader,
   DropArea,
   DropAreaProps,
+  LoadingButton,
   Typography,
 } from '@catena-x/portal-shared-components'
-import { useTranslation } from 'react-i18next'
-import { fetchAny } from 'features/admin/userOwn/actions'
-import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
 import { Box, Dialog } from '@mui/material'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import PendingOutlinedIcon from '@mui/icons-material/PendingOutlined'
 import { OVERLAYS } from 'types/Constants'
 import { closeOverlay, show } from 'features/control/overlay'
 import { store } from 'features/store'
 import { Dropzone } from '../../shared/basic/Dropzone'
+import { error, success } from 'services/NotifyService'
+import { useAddCertificateMutation } from 'features/certification/certificationApiSlice'
 import './style.scss'
 
 export default function UpdateCertificate({ id }: { id: string }) {
   const { t } = useTranslation()
   const dispatch = useDispatch<typeof store.dispatch>()
-  const [uploadedFile, setUploadedFile] = useState<any>()
+  const [uploadedFile, setUploadedFile] = useState<File>()
   const [submitClicked, setSubmitClicked] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
 
-  useEffect(() => {
-    dispatch(fetchAny(id))
-  }, [dispatch, id])
+  const [addCertificate] = useAddCertificateMutation()
 
   const renderDropArea = (props: DropAreaProps) => {
     return <DropArea {...props} size="small" />
   }
 
-  const handleSubmit = () => {
-    setSubmitClicked(true)
+  const handleSubmit = async () => {
+    setLoading(true)
+    try {
+      if (uploadedFile) {
+        const data = {
+          credentialTypeId: 'credentialType',
+          document: uploadedFile,
+        }
+        await addCertificate(data).unwrap()
+        setSubmitClicked(true)
+        setLoading(false)
+        dispatch(closeOverlay())
+        success(t('content.certificates.updateCertificate.success'))
+      }
+    } catch (err) {
+      setLoading(false)
+      error(t('content.certificates.updateCertificate.error'), '', '')
+    }
   }
 
   return (
@@ -207,13 +224,28 @@ export default function UpdateCertificate({ id }: { id: string }) {
             <Button variant="outlined" onClick={() => dispatch(closeOverlay())}>
               {t('global.actions.cancel')}
             </Button>
-            <Button
-              variant="contained"
-              onClick={handleSubmit}
-              disabled={uploadedFile === undefined}
-            >
-              {t('global.actions.submit')}
-            </Button>
+
+            {loading ? (
+              <LoadingButton
+                color="primary"
+                helperText=""
+                helperTextColor="success"
+                label=""
+                loadIndicator="Loading ..."
+                loading
+                size="medium"
+                onButtonClick={() => {}}
+                sx={{ marginLeft: '10px' }}
+              />
+            ) : (
+              <Button
+                variant="contained"
+                onClick={handleSubmit}
+                disabled={uploadedFile === undefined}
+              >
+                {t('global.actions.submit')}
+              </Button>
+            )}
           </DialogActions>
         </>
       )}

diff --git a/src/components/pages/CertificateCredentials/CertificateCredentials.scss b/src/components/pages/CertificateCredentials/CertificateCredentials.scss
@@ -103,4 +103,7 @@
       }
     }
   }
+  .noData {
+    text-align: center;
+  }
 }
diff --git a/src/components/pages/CertificateCredentials/CertificateElements.tsx b/src/components/pages/CertificateCredentials/CertificateElements.tsx
@@ -0,0 +1,61 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useTranslation } from 'react-i18next'
+import { Grid } from '@mui/material'
+import { Typography } from '@catena-x/portal-shared-components'
+import { CertificateResponse } from 'features/certification/certificationApiSlice'
+import { CertificateCard } from 'components/shared/basic/CertificateCard'
+import './CertificateCredentials.scss'
+
+export interface CertificateProps {
+  item: CertificateResponse[]
+}
+
+export default function CertificateElements({ data }: any) {
+  const { t } = useTranslation()
+
+  if (data && data.length === 0) {
+    return (
+      <Typography variant="body1" className="noData">
+        {t('content.certificates.noData')}
+      </Typography>
+    )
+  }
+
+  return (
+    <Grid container spacing={2} className="certificate-section">
+      {data?.map((item: CertificateResponse) => (
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          md={6}
+          className="certificate-card"
+          key={item.credentialType}
+        >
+          <CertificateCard
+            credentialType={item.credentialType}
+            ssiDetailData={item.ssiDetailData}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
diff --git a/src/components/pages/CertificateCredentials/index.tsx b/src/components/pages/CertificateCredentials/index.tsx
@@ -19,7 +19,6 @@
 
 import { useReducer, useCallback } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
-import { Grid } from '@mui/material'
 import { useDispatch } from 'react-redux'
 import { show } from 'features/control/overlay'
 import {
@@ -32,11 +31,8 @@ import {
 import SortImage from 'components/shared/frame/SortImage'
 import './CertificateCredentials.scss'
 import { OVERLAYS } from 'types/Constants'
-import {
-  CertificateResponse,
-  useFetchCertificatesQuery,
-} from 'features/certification/certificationApiSlice'
-import { CertificateCard } from 'components/shared/basic/CertificateCard'
+import { useFetchCertificatesQuery } from 'features/certification/certificationApiSlice'
+import CertificateElements from './CertificateElements'
 
 enum FilterType {
   UPLOADED = 'Uploaded',
@@ -234,23 +230,7 @@ export default function CertificateCredentials() {
                 {t('content.certificates.uploadCertificate')}
               </Button>
             </div>
-            <Grid container spacing={2} className="certificate-section">
-              {data?.map((item: CertificateResponse) => (
-                <Grid
-                  item
-                  xs={12}
-                  sm={6}
-                  md={6}
-                  className="certificate-card"
-                  key={item.credentialType}
-                >
-                  <CertificateCard
-                    credentialType={item.credentialType}
-                    ssiDetailData={item.ssiDetailData}
-                  />
-                </Grid>
-              ))}
-            </Grid>
+            <CertificateElements data={data} />
           </div>
 
           <div style={{ height: '66px' }}></div>

diff --git a/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss b/src/components/pages/UsecaseParticipation/UsecaseParticipation.scss
@@ -105,6 +105,15 @@
             }
             .thirdSection {
               width: 30%;
+              color: #0f71cb;
+              cursor: pointer;
+              .framework {
+                display: flex;
+              }
+              svg {
+                font-size: 15px;
+                margin-top: 3px;
+              }
             }
             .forthSection {
               width: 35%;

diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx
@@ -25,13 +25,15 @@ import {
   Typography,
 } from '@catena-x/portal-shared-components'
 import PixIcon from '@mui/icons-material/Pix'
+import LaunchIcon from '@mui/icons-material/Launch'
 import uniqueId from 'lodash/uniqueId'
 import { show } from 'features/control/overlay'
 import { OVERLAYS } from 'types/Constants'
 import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb'
 import { useFetchUsecaseQuery } from 'features/usecase/usecaseApiSlice'
 import './UsecaseParticipation.scss'
 import { SubscriptionStatus } from 'features/apps/apiSlice'
+import { Link } from 'react-router-dom'
 
 export default function UsecaseParticipation() {
   const { t } = useTranslation()
@@ -156,12 +158,19 @@ export default function UsecaseParticipation() {
                                   {t('content.usecaseParticipation.version')}
                                 </Typography>
                               </Trans>
-                              <Typography
-                                variant="body3"
+                              <Link
+                                to={credential.externalDetailData.template}
+                                target="_blank"
                                 className="thirdSection"
                               >
-                                {t('content.usecaseParticipation.framework')}
-                              </Typography>
+                                <Typography
+                                  variant="body3"
+                                  className="framework"
+                                >
+                                  <LaunchIcon />
+                                  {t('content.usecaseParticipation.framework')}
+                                </Typography>
+                              </Link>
                               <Trans
                                 values={{
                                   expiry: credential.externalDetailData.expiry

diff --git a/src/components/shared/basic/CertificateCard/index.tsx b/src/components/shared/basic/CertificateCard/index.tsx
@@ -57,12 +57,11 @@ export const CertificateCard = ({
 
   const renderStatusIcon = () => {
     if (
-      ssiDetailData?.[0].participationStatus.toLowerCase() ===
-      StatusVariants.active
+      ssiDetailData?.participationStatus.toLowerCase() === StatusVariants.active
     ) {
       return <CheckCircleOutlineIcon className="statusIcon activeIcon" />
     } else if (
-      ssiDetailData?.[0].participationStatus.toLowerCase() ===
+      ssiDetailData?.participationStatus.toLowerCase() ===
       StatusVariants.pending
     ) {
       return <AccessTimeIcon className="statusIcon waitingIcon" />
@@ -84,9 +83,9 @@ export const CertificateCard = ({
         <Box className="detailBox">
           <Box className="statusDetail">
             {renderStatusIcon()}
-            {ssiDetailData?.[0].participationStatus.toLowerCase() !==
+            {ssiDetailData?.participationStatus.toLowerCase() !==
               StatusVariants.active &&
-              ssiDetailData?.[0].participationStatus.toLowerCase() !==
+              ssiDetailData?.participationStatus.toLowerCase() !==
                 StatusVariants.pending && (
                 <DeleteOutlineIcon className="deleteIcon" />
               )}
@@ -100,14 +99,14 @@ export const CertificateCard = ({
           {ssiDetailData && (
             <Typography variant="body3" className="expiryDate">
               {t('content.certificates.certificateCard.valid')}
-              {ssiDetailData[0].expiryDate.split('T')[0]}
+              {ssiDetailData.expiryDate.split('T')[0]}
             </Typography>
           )}
           <Typography variant="body3" className="status">
             {t('content.certificates.certificateCard.status')}
-            {ssiDetailData?.[0].participationStatus ?? StatusEnum.INACTIVE}
+            {ssiDetailData?.participationStatus ?? StatusEnum.INACTIVE}
           </Typography>
-          {ssiDetailData?.[0].participationStatus.toLowerCase() ===
+          {ssiDetailData?.participationStatus.toLowerCase() ===
             StatusVariants.pending && (
             <>
               <Box className="fileUploadMain">
@@ -131,7 +130,7 @@ export const CertificateCard = ({
                 <Chip
                   color="warning"
                   variant="filled"
-                  label={ssiDetailData?.[0].participationStatus}
+                  label={ssiDetailData?.participationStatus}
                   size="small"
                   className="verificationStatus"
                 />