diff --git a/src/components/Issuance/IssuedCrdentials.tsx b/src/components/Issuance/IssuedCrdentials.tsx index 148f50150..6ceeb6d84 100644 --- a/src/components/Issuance/IssuedCrdentials.tsx +++ b/src/components/Issuance/IssuedCrdentials.tsx @@ -125,18 +125,18 @@ const CredentialList = () => { ), }, - { - data: issuedCredential?.isRevocable ? ( - - ) : ( - Non revocable - ), - }, + // { + // data: issuedCredential?.isRevocable ? ( + // + // ) : ( + // Non revocable + // ), + // }, ], }; }, @@ -192,7 +192,7 @@ const CredentialList = () => { { columnName: 'Schema Name' }, { columnName: 'Date' }, { columnName: 'Status' }, - { columnName: 'Action' }, + // { columnName: 'Action' }, ]; return ( diff --git a/src/components/organization/EditOrgdetailsModal.tsx b/src/components/organization/EditOrgdetailsModal.tsx index f6fadff90..b7d528f99 100644 --- a/src/components/organization/EditOrgdetailsModal.tsx +++ b/src/components/organization/EditOrgdetailsModal.tsx @@ -1,461 +1,454 @@ -import * as yup from "yup" - +import * as yup from 'yup'; import { Avatar, Button, Label, Modal } from 'flowbite-react'; import { Field, Form, Formik, FormikHelpers } from 'formik'; -import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted} from '../../config/CommonConstant' -import { calculateSize, dataURItoBlob } from "../../utils/CompressImage"; -import React, { useEffect, useState } from "react"; - -import { AlertComponent } from "../AlertComponent"; +import { + IMG_MAX_HEIGHT, + IMG_MAX_WIDTH, + apiStatusCodes, + imageSizeAccepted, +} from '../../config/CommonConstant'; +import { calculateSize, dataURItoBlob } from '../../utils/CompressImage'; +import React, { useEffect, useState } from 'react'; +import { AlertComponent } from '../AlertComponent'; import type { AxiosResponse } from 'axios'; -import { updateOrganization } from "../../api/organization"; -import type { Organisation } from "./interfaces"; -import defaultUserIcon from '../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg' +import { updateOrganization } from '../../api/organization'; +import type { Organisation } from './interfaces'; +import defaultUserIcon from '../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg'; interface Values { - website: any; - name: string; - description: string; + website: any; + name: string; + description: string; } interface ILogoImage { - logoFile: string | File - imagePreviewUrl: string | ArrayBuffer | null | File, - fileName: string + logoFile: string | File; + imagePreviewUrl: string | ArrayBuffer | null | File; + fileName: string; } interface EditOrgdetailsModalProps { - openModal: boolean; - setMessage: (message: string) => void; - setOpenModal: (flag: boolean) => void; - onEditSucess?: () => void; - orgData: Organisation | null; + openModal: boolean; + setMessage: (message: string) => void; + setOpenModal: (flag: boolean) => void; + onEditSucess?: () => void; + orgData: Organisation | null; } const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => { - const [logoImage, setLogoImage] = useState({ - logoFile: "", - imagePreviewUrl: props?.orgData?.logoUrl || "", - fileName: '' , - - }) - const [loading, setLoading] = useState(false) - const [isImageEmpty, setIsImageEmpty] = useState(true) - const [isPublic, setIsPublic] = useState(true) - - const [initialOrgData, setOrgData] = useState({ - name: props?.orgData?.name || "", - description: props?.orgData?.description || "", - website: props?.orgData?.website || "", - }) - - useEffect(() => { - - if (props.orgData) { - setOrgData({ - name: props.orgData.name || '', - description: props.orgData.description || '', - website: props?.orgData?.website || "", - }); - - setLogoImage({ - logoFile: "", - imagePreviewUrl: props.orgData.logoUrl || "", - fileName: '' - }); - } - }, [props]); - - - const [erroMsg, setErrMsg] = useState(null) - - const [imgError, setImgError] = useState('') - - useEffect(() => { - if (props.openModal === false) { - setOrgData({ - name: '', - description: '', - website:'' - }) - - setLogoImage({ - ...logoImage, - logoFile: "", - imagePreviewUrl: "" - }) - } - }, [props.openModal]) - - - const ProcessImg = (e: any): string | undefined => { - - const file = e?.target.files[0] - if (!file) { return } - - const reader = new FileReader() - reader.readAsDataURL(file) - - reader.onload = (event): void => { - const imgElement = document.createElement("img") - if (imgElement) { - imgElement.src = typeof event?.target?.result === 'string' ? event.target.result : "" - imgElement.onload = (e): void => { - let fileUpdated: File | string = file - let srcEncoded = '' - const canvas = document.createElement("canvas") - - const { width, height, ev } = calculateSize(imgElement, IMG_MAX_WIDTH, IMG_MAX_HEIGHT) - canvas.width = width - canvas.height = height - - const ctx = canvas.getContext("2d") - if (ctx && e?.target) { - ctx.imageSmoothingEnabled = true - ctx.imageSmoothingQuality = "high" - ctx.drawImage(ev, 0, 0, canvas.width, canvas.height) - srcEncoded = ctx.canvas.toDataURL(ev, file.type) - const blob = dataURItoBlob(srcEncoded, file.type) - fileUpdated = new File([blob], file.name, { type: file.type, lastModified: new Date().getTime() }) - setLogoImage({ - logoFile: fileUpdated, - imagePreviewUrl: srcEncoded, - fileName: file.name - }) - } - } - } - } - } - - const isEmpty = (object: any): boolean => { - for (const property in object) { - setIsImageEmpty(false) - return false - } - setIsImageEmpty(true) - return true - } - const handleImageChange = (event: any): void => { - setImgError('') - const reader = new FileReader() - const file = event?.target?.files - - const fieSize = Number((file[0]?.size / 1024 / 1024)?.toFixed(2)) - const extension = file[0]?.name?.substring(file[0]?.name?.lastIndexOf(".") + 1)?.toLowerCase() - if (extension === "png" || extension === "jpeg" || extension === "jpg") { - if (fieSize <= imageSizeAccepted) { - reader.onloadend = (): void => { - ProcessImg(event) - isEmpty(reader.result) - } - reader.readAsDataURL(file[0]) - event.preventDefault() - } else { - setImgError("Please check image size") - } - } else { - setImgError("Invalid image type") - } - } - - const submitUpdateOrganization = async (values: Values) => { - - setLoading(true) - - const orgData = { - orgId: props?.orgData?.id, - name: values.name, - description: values.description, - logo: logoImage?.imagePreviewUrl as string || props?.orgData?.logoUrl, - website: values.website, - isPublic: isPublic - } - - const resUpdateOrg = await updateOrganization(orgData, orgData.orgId?.toString() as string) - - const { data } = resUpdateOrg as AxiosResponse - setLoading(false) - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { - if (props?.onEditSucess) { - props?.onEditSucess() - } - props.setOpenModal(false) - } else { - setErrMsg(resUpdateOrg as string) - } - } - - return ( - { - setLogoImage({ - logoFile: "", - imagePreviewUrl: "", - fileName: '' - }) - setOrgData(initialOrgData) - props.setOpenModal(false) - } - }> - Edit Organization - - { - setErrMsg(null) - }} - /> - - ) => { - submitUpdateOrganization(values) - window.location.reload(); - }} - > - {(formikHandlers): JSX.Element => ( - -
-
-
- { - (typeof (logoImage.logoFile) === "string" && props?.orgData?.logoUrl) ? - Jese picture - : typeof (logoImage.logoFile) === "string" ? - : - Jese picture - } -
-

- Organization Logo -

-
- JPG, JPEG and PNG . Max size of 1MB -
-
- -
- - -
- -
-
-
-
-
-
-
- { - const value = e.target.value; - formikHandlers.setFieldValue( - 'name', - value, - ); - formikHandlers.setFieldTouched( - 'name', - true, - false - ); - - if (value.length > 50) { - formikHandlers.setFieldError( - 'name', - 'Organization name must be at most 50 characters', - ); - } - }} - /> - { - (formikHandlers?.errors?.name && formikHandlers?.touched?.name) && - {formikHandlers?.errors?.name} - } - -
- -
-
-
- - { - const value = e.target.value; - formikHandlers.setFieldValue( - 'description', - value, - ); - formikHandlers.setFieldTouched( - 'description', - true, - ); - - if (value.length > 50) { - formikHandlers.setFieldError( - 'description', - 'Description must be at most 50 characters', - ); - } else { - formikHandlers.setFieldError( - 'description', - undefined, - ); - } - }} - /> - { - (formikHandlers?.errors?.description && formikHandlers?.touched?.description) && - {formikHandlers?.errors?.description} - } -
-
-
-
- - -
-
- -
-
-
- setIsPublic(false)} - id="private" - name="private" - />PrivateOnly the connected organization can see your organization details -
-
-
-
- setIsPublic(true)} - checked={isPublic === true} - id="public" - name="public" - /> - Public - Your profile and organization details can be seen by everyone -
-
- -
- )} - - - - - - ) -} + const [logoImage, setLogoImage] = useState({ + logoFile: '', + imagePreviewUrl: props?.orgData?.logoUrl ?? '', + fileName: '', + }); + const [loading, setLoading] = useState(false); + const [isPublic, setIsPublic] = useState(); + const [initialOrgData, setInitialOrgData] = useState({ + name: props?.orgData?.name ?? '', + description: props?.orgData?.description ?? '', + website: props?.orgData?.website ?? '', + }); + + useEffect(() => { + if (props.orgData) { + setInitialOrgData({ + name: props.orgData.name ?? '', + description: props.orgData.description ?? '', + website: props?.orgData?.website ?? '', + }); + + setLogoImage({ + logoFile: '', + imagePreviewUrl: props.orgData.logoUrl ?? '', + fileName: '', + }); + + setIsPublic(props?.orgData?.publicProfile); + } + }, [props]); + + const [erroMsg, setErrMsg] = useState(null); + + const [imgError, setImgError] = useState(''); + + useEffect(() => { + if (props.openModal === false) { + setInitialOrgData({ + name: '', + description: '', + website: '', + }); + + setLogoImage({ + ...logoImage, + logoFile: '', + imagePreviewUrl: '', + }); + } + }, [props.openModal]); + + const ProcessImg = (e: any): string | undefined => { + const file = e?.target.files[0]; + if (!file) { + return; + } + + const reader = new FileReader(); + reader.readAsDataURL(file); + + reader.onload = (event): void => { + const imgElement = document.createElement('img'); + if (imgElement) { + imgElement.src = + typeof event?.target?.result === 'string' ? event.target.result : ''; + imgElement.onload = (e): void => { + let fileUpdated: File | string = file; + let srcEncoded = ''; + const canvas = document.createElement('canvas'); + + const { width, height, ev } = calculateSize( + imgElement, + IMG_MAX_WIDTH, + IMG_MAX_HEIGHT, + ); + canvas.width = width; + canvas.height = height; + + const ctx = canvas.getContext('2d'); + if (ctx && e?.target) { + ctx.imageSmoothingEnabled = true; + ctx.imageSmoothingQuality = 'high'; + ctx.drawImage(ev, 0, 0, canvas.width, canvas.height); + srcEncoded = ctx.canvas.toDataURL(ev, file.type); + const blob = dataURItoBlob(srcEncoded, file.type); + fileUpdated = new File([blob], file.name, { + type: file.type, + lastModified: new Date().getTime(), + }); + setLogoImage({ + logoFile: fileUpdated, + imagePreviewUrl: srcEncoded, + fileName: file.name, + }); + } + }; + } + }; + }; + + const isEmpty = (object: any): boolean => { + for (const property in object) { + return false; + } + return true; + }; + const handleImageChange = (event: any): void => { + setImgError(''); + const reader = new FileReader(); + const file = event?.target?.files; + + const fieSize = Number((file[0]?.size / 1024 / 1024)?.toFixed(2)); + const extension = file[0]?.name + ?.substring(file[0]?.name?.lastIndexOf('.') + 1) + ?.toLowerCase(); + if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') { + if (fieSize <= imageSizeAccepted) { + reader.onloadend = (): void => { + ProcessImg(event); + isEmpty(reader.result); + }; + reader.readAsDataURL(file[0]); + event.preventDefault(); + } else { + setImgError('Please check image size'); + } + } else { + setImgError('Invalid image type'); + } + }; + + const submitUpdateOrganization = async (values: Values) => { + setLoading(true); + + const orgData = { + orgId: props?.orgData?.id, + name: values.name, + description: values.description, + logo: (logoImage?.imagePreviewUrl as string) || props?.orgData?.logoUrl, + website: values.website, + isPublic: isPublic, + }; + + const resUpdateOrg = await updateOrganization( + orgData, + orgData.orgId?.toString() as string, + ); + + const { data } = resUpdateOrg as AxiosResponse; + setLoading(false); + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + if (props?.onEditSucess) { + props?.onEditSucess(); + } + props.setOpenModal(false); + } else { + setErrMsg(resUpdateOrg as string); + } + }; + + return ( + { + setLogoImage({ + logoFile: '', + imagePreviewUrl: '', + fileName: '', + }); + props.setOpenModal(false); + }} + > + Edit Organization + + { + setErrMsg(null); + }} + /> + , + ) => { + submitUpdateOrganization(values); + window.location.reload(); + }} + > + {(formikHandlers): JSX.Element => ( +
+
+
+ {typeof logoImage.logoFile === 'string' && + props?.orgData?.logoUrl ? ( + Jese picture + ) : typeof logoImage.logoFile === 'string' ? ( + + ) : ( + Jese picture + )} +
+

+ Organization Logo +

+
+ JPG, JPEG and PNG . Max size of 1MB +
+
+
+ +
+
+
+
+
+
+
+
+ { + const value = e.target.value; + formikHandlers.setFieldValue('name', value); + formikHandlers.setFieldTouched('name', true, false); + + if (value.length > 50) { + formikHandlers.setFieldError( + 'name', + 'Organization name must be at most 50 characters', + ); + } + }} + /> + {formikHandlers?.errors && + formikHandlers?.errors?.name && + formikHandlers?.touched?.name && ( + + {formikHandlers?.errors?.name} + + )} +
+ +
+
+
+ + { + const value = e.target.value; + formikHandlers.setFieldValue('description', value); + formikHandlers.setFieldTouched('description', true); + + if (value.length > 50) { + formikHandlers.setFieldError( + 'description', + 'Description must be at most 50 characters', + ); + } else { + formikHandlers.setFieldError('description', undefined); + } + }} + /> + {formikHandlers?.errors && + formikHandlers?.errors?.description && + formikHandlers?.touched && + formikHandlers?.touched?.description && ( + + {formikHandlers?.errors?.description} + + )} +
+
+
+
+ +
+
+
+
+
+ setIsPublic(false)} + id="private" + name="private" + /> + + Private + + Only the connected organization can see your organization + details + + +
+
+
+
+ setIsPublic(true)} + checked={isPublic === true} + id="public" + name="public" + /> + + Public + + Your profile and organization details can be seen by + everyone + + +
+
+ +
+ )} + + + + ); +}; export default EditOrgdetailsModal; diff --git a/src/components/publicProfile/OrganisationPublicProfile.tsx b/src/components/publicProfile/OrganisationPublicProfile.tsx index b2aa4537c..419a57c64 100644 --- a/src/components/publicProfile/OrganisationPublicProfile.tsx +++ b/src/components/publicProfile/OrganisationPublicProfile.tsx @@ -80,7 +80,7 @@ const OrganisationPublicProfile = () => { return (
-
+

Organizations

@@ -142,22 +142,22 @@ const OrganisationPublicProfile = () => { )}
) : ( - -
+
{organizationList && ( -
+
)}
)} -
-
+
{organizationList && organizationList?.length > 0 && (