From fe5f8afffc460356f4edd839850b6253d784e968 Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Mon, 28 Aug 2023 12:59:51 +0530 Subject: [PATCH] feat(certificate): add certificate type --- src/assets/locales/de/main.json | 3 + src/assets/locales/en/main.json | 3 + .../overlays/UpdateCertificate/index.tsx | 68 ++++++++++++++++++- .../pages/CertificateCredentials/index.tsx | 38 ++++++++--- .../certification/certificationApiSlice.tsx | 4 ++ 5 files changed, 104 insertions(+), 12 deletions(-) diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index cc798e320..6001f4636 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -1558,6 +1558,7 @@ "heading": "Zertifikate", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .", "search": "Search", + "noUploadMessage": "No certificates available. All supported certificates are requested or active for your company.", "tabs": { "uploadedCertificates": "Uploaded Certificates", "pending": "Pending", @@ -1575,6 +1576,8 @@ "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "selectLabel": "Type of certificate", "placeholder": "Please select", + "certificateTypeError": "Please select a value", + "noOptionsMessage": "No other options available", "uploadDocumentTitle": "Please upload your certificate proof:", "note": "Please upload only pdf files with maximum 1 MB.", "descriptionLabel": "Description for verification", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 90cffed4f..d92507ae9 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -1497,6 +1497,7 @@ "heading": "Company Certificates", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .", "search": "Search", + "noUploadMessage": "No certificates available. All supported certificates are requested or active for your company.", "tabs": { "uploadedCertificates": "Uploaded Certificates", "pending": "Pending", @@ -1514,6 +1515,8 @@ "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "selectLabel": "Type of certificate", "placeholder": "Please select", + "certificateTypeError": "Please select a value", + "noOptionsMessage": "No other options available", "uploadDocumentTitle": "Please upload your certificate proof:", "note": "Please upload only pdf files with maximum 1 MB.", "descriptionLabel": "Description for verification", diff --git a/src/components/overlays/UpdateCertificate/index.tsx b/src/components/overlays/UpdateCertificate/index.tsx index aa3731af6..9324b7582 100644 --- a/src/components/overlays/UpdateCertificate/index.tsx +++ b/src/components/overlays/UpdateCertificate/index.tsx @@ -17,7 +17,7 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { useState } from 'react' +import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' import { @@ -30,6 +30,8 @@ import { DropAreaProps, LoadingButton, Typography, + SelectList, + Tooltips, } from '@catena-x/portal-shared-components' import { Box, Dialog } from '@mui/material' import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline' @@ -39,17 +41,40 @@ import { closeOverlay, show } from 'features/control/overlay' import { store } from 'features/store' import { Dropzone } from '../../shared/basic/Dropzone' import { error } from 'services/NotifyService' -import { useAddCertificateMutation } from 'features/certification/certificationApiSlice' +import { + useAddCertificateMutation, + useFetchCertificateTypesQuery, +} from 'features/certification/certificationApiSlice' import './style.scss' +export type CertificateType = { + title: string +} + export default function UpdateCertificate({ id }: { id: string }) { const { t } = useTranslation() const dispatch = useDispatch() const [uploadedFile, setUploadedFile] = useState() const [submitClicked, setSubmitClicked] = useState(false) const [loading, setLoading] = useState(false) + const [certificatetypesArr, setCertificatetypesArr] = useState< + CertificateType[] + >([]) + const [selectedCertificate, setSelectedCertificate] = useState('') const [addCertificate] = useAddCertificateMutation() + const { data: certificateTypes } = useFetchCertificateTypesQuery() + + useEffect(() => { + certificateTypes?.map((item) => + setCertificatetypesArr((oldArray: CertificateType[]) => [ + ...oldArray, + { title: item }, + ]) + ) + certificateTypes?.length === 1 && + setSelectedCertificate(certificateTypes?.[0] ?? '') + }, [certificateTypes]) const renderDropArea = (props: DropAreaProps) => { return @@ -200,6 +225,43 @@ export default function UpdateCertificate({ id }: { id: string }) {
+ {certificatetypesArr?.length && ( + + setSelectedCertificate(e.title)} + keyTitle={'title'} + disabled={certificatetypesArr.length === 1} + /> +
+ } + /> + )} {t( 'content.certificates.updateCertificate.uploadDocumentTitle' @@ -243,7 +305,7 @@ export default function UpdateCertificate({ id }: { id: string }) { diff --git a/src/components/pages/CertificateCredentials/index.tsx b/src/components/pages/CertificateCredentials/index.tsx index 0e2d2c28d..53cc648ce 100644 --- a/src/components/pages/CertificateCredentials/index.tsx +++ b/src/components/pages/CertificateCredentials/index.tsx @@ -27,11 +27,15 @@ import { ViewSelector, SortOption, Button, + Tooltips, } from '@catena-x/portal-shared-components' import SortImage from 'components/shared/frame/SortImage' import './CertificateCredentials.scss' import { OVERLAYS } from 'types/Constants' -import { useFetchCertificatesQuery } from 'features/certification/certificationApiSlice' +import { + useFetchCertificateTypesQuery, + useFetchCertificatesQuery, +} from 'features/certification/certificationApiSlice' import CertificateElements from './CertificateElements' enum FilterType { @@ -105,6 +109,7 @@ export default function CertificateCredentials() { const { t } = useTranslation() const { data } = useFetchCertificatesQuery() + const { data: certificateTypes } = useFetchCertificateTypesQuery() const [{ searchExpr, showModal, selected, sortOption }, setState] = useReducer(reducer, initialState) @@ -221,14 +226,29 @@ export default function CertificateCredentials() {
- + {certificateTypes && ( + = 0 ? 'none' : 'block', + }} + tooltipPlacement="top-start" + tooltipText={t('content.certificates.noUploadMessage')} + children={ +
+ +
+ } + /> + )}
diff --git a/src/features/certification/certificationApiSlice.tsx b/src/features/certification/certificationApiSlice.tsx index 520dc8136..4003ade6d 100644 --- a/src/features/certification/certificationApiSlice.tsx +++ b/src/features/certification/certificationApiSlice.tsx @@ -125,6 +125,9 @@ export const apiSlice = createApi({ method: 'PUT', }), }), + fetchCertificateTypes: builder.query({ + query: () => '/api/administration/companydata/certificateTypes', + }), }), }) @@ -134,4 +137,5 @@ export const { useFetchCredentialsSearchQuery, useApproveCredentialMutation, useDeclineCredentialMutation, + useFetchCertificateTypesQuery, } = apiSlice