diff --git a/src/components/Issuance/BulkIssuance.tsx b/src/components/Issuance/BulkIssuance.tsx index fc430f0d2..b9129abba 100644 --- a/src/components/Issuance/BulkIssuance.tsx +++ b/src/components/Issuance/BulkIssuance.tsx @@ -1,6 +1,6 @@ import { Button, Card, Pagination } from 'flowbite-react'; import React, { useEffect, useState } from 'react'; -import Select from 'react-select'; +import Select, { type SingleValue } from 'react-select'; import { DownloadCsvTemplate, getSchemaCredDef, getCsvFileData, issueBulkCredential, @@ -72,6 +72,20 @@ const BulkIssuance = () => { }; const [currentPage, setCurrentPage] = useState(initialPageState); + const [searchValue, setSearchValue] = useState(''); + + const onInputChange = (inputValue: string) => { + setSearchValue(inputValue); + setSchemaListAPIParameters(prevParams => { + const updatedParams = { + ...prevParams, + allSearch: inputValue, + }; + getSchemaCredentials(updatedParams); + return updatedParams; + }); + }; + const getSchemaCredentials = async (schemaListAPIParameters: GetAllSchemaListParameter) => { try { setLoading(true); @@ -95,6 +109,7 @@ const BulkIssuance = () => { currentSchemaType = SchemaTypes.schema_INDY; } + let dropDownOptions; setSchemaType(currentSchemaType); if ((currentSchemaType === SchemaTypes.schema_INDY && isAllSchema) || (currentSchemaType && orgId && !isAllSchema)) { const response = await getSchemaCredDef(currentSchemaType); @@ -103,7 +118,7 @@ const BulkIssuance = () => { if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { const { data: credentialDefsData } = data; - const options = credentialDefsData.map( + dropDownOptions = credentialDefsData.map( ({ schemaName, schemaVersion, @@ -123,7 +138,7 @@ const BulkIssuance = () => { }), ); - setCredentialOptionsData(options); + setCredentialOptionsData(dropDownOptions); } else { setUploadMessage({message: response as string, type: "failure"}); setSuccess(null) @@ -142,7 +157,7 @@ const BulkIssuance = () => { const credentialDefsData = data.data.data; - const options = credentialDefsData.map(({ + dropDownOptions = credentialDefsData.map(({ name, version, schemaLedgerId, @@ -157,7 +172,7 @@ const BulkIssuance = () => { schemaIdentifier: schemaLedgerId, attributes: Array.isArray(attributes) ? attributes : (attributes ? JSON.parse(attributes) : []), })); - setCredentialOptionsData(options); + setCredentialOptionsData(dropDownOptions); } else { setUploadMessage({message: response as string, type: "failure"}); setSuccess(null) @@ -166,12 +181,25 @@ const BulkIssuance = () => { setLoading(false); } } catch (error) { - setUploadMessage({message: error as string, type: "failure"}); + setUploadMessage({ message: (error as Error).message, type: "failure" }); setSuccess(null) setFailure(null) } }; + + const onSelectChange = (newValue: SingleValue) => { + const value = newValue as ICredentials | undefined; + if (schemaType === SchemaTypes.schema_INDY) { + setSelectedTemplate(value?.credentialDefinitionId); + setCredentialSelected(value ?? null); + } else if (schemaType === SchemaTypes.schema_W3C) { + setCredentialSelected(value ?? null); + setSelectedTemplate(value?.schemaIdentifier) + } + }; + + useEffect(() => { getSchemaCredentials(schemaListAPIParameters); }, [isAllSchema]); @@ -586,15 +614,9 @@ const BulkIssuance = () => { isSearchable={true} name="color" options={ credentialOptionsData} - onChange={(value: ICredentials | null) => { - if (schemaType === SchemaTypes.schema_INDY) { - setSelectedTemplate(value?.credentialDefinitionId); - setCredentialSelected(value ?? null); - } else if (schemaType === SchemaTypes.schema_W3C) { - setCredentialSelected(value ?? null); - setSelectedTemplate(value?.schemaIdentifier) - } - }} + onInputChange={onInputChange} + onChange={onSelectChange} + value={credentialOptionsData.find(option => option.value === searchValue)} ref={selectInputRef} />: null @@ -959,4 +981,4 @@ const BulkIssuance = () => { ); }; -export default BulkIssuance; +export default BulkIssuance; \ No newline at end of file diff --git a/src/components/Issuance/EmailIssuance.tsx b/src/components/Issuance/EmailIssuance.tsx index d8d047db4..c0258be07 100644 --- a/src/components/Issuance/EmailIssuance.tsx +++ b/src/components/Issuance/EmailIssuance.tsx @@ -5,7 +5,7 @@ import { pathRoutes } from '../../config/pathRoutes'; import BreadCrumbs from '../BreadCrumbs'; import BackButton from '../../commonComponents/backbutton'; import { Button, Card } from 'flowbite-react'; -import Select from 'react-select'; +import Select, { type SingleValue } from 'react-select'; import { AlertComponent } from '../AlertComponent'; import IssuancePopup from './IssuancePopup'; import type { AxiosResponse } from 'axios'; @@ -61,59 +61,71 @@ const EmailIssuance = () => { const [schemasIdentifier, setSchemasIdentifier] = useState(); const [schemaTypeValue, setSchemaTypeValue] = useState(); const [isAllSchemaFlagSelected, setIsAllSchemaFlagSelected] = useState(); - - const getSchemaCredentials = async (schemaListAPIParameter: GetAllSchemaListParameter) => { + const [searchValue, setSearchValue] = useState(''); + + const handleInputChange = (inputValue: string) => { + setSearchValue(inputValue); + setSchemaListAPIParameter(prevParams => { + const updatedParams = { + ...prevParams, + allSearch: inputValue, + }; + getSchemaCredentials(updatedParams); + return updatedParams; + }); + }; + const getSchemaCredentials = async (schemaListAPIParameter: GetAllSchemaListParameter) => { + try { setLoading(true); const orgId = await getFromLocalStorage(storageKeys.ORG_ID); const orgDid = await getFromLocalStorage(storageKeys.ORG_DID); const allSchemaSelectedFlag = await getFromLocalStorage(storageKeys.ALL_SCHEMAS) - if(allSchemaSelectedFlag === `false` || !allSchemaSelectedFlag){ + if (allSchemaSelectedFlag === `false` || !allSchemaSelectedFlag) { setIsAllSchemaFlagSelected(false) } - else if(allSchemaSelectedFlag ==='true'){ - setIsAllSchemaFlagSelected(true) - + else if (allSchemaSelectedFlag === 'true') { + setIsAllSchemaFlagSelected(true) } let currentSchemaType = schemaType; - if (orgDid?.includes(DidMethod.POLYGON)) { currentSchemaType = SchemaTypes.schema_W3C; setSchemaTypeValue(SchemaTypeValue.POLYGON) setCredentialType(CredentialType.JSONLD) - - } else if ( orgDid?.includes(DidMethod.KEY) || orgDid?.includes(DidMethod.WEB)) { + + } else if (orgDid?.includes(DidMethod.KEY) || orgDid?.includes(DidMethod.WEB)) { currentSchemaType = SchemaTypes.schema_W3C; setSchemaTypeValue(SchemaTypeValue.NO_LEDGER) setCredentialType(CredentialType.JSONLD) } - else if (orgDid?.includes(DidMethod.INDY)) { + else if (orgDid?.includes(DidMethod.INDY)) { setCredentialType(CredentialType.INDY) currentSchemaType = SchemaTypes.schema_INDY; } - setSchemaType(currentSchemaType); + setSchemaType(currentSchemaType); - //FIXME: Logic of API call as per schema selection - if((currentSchemaType === SchemaTypes.schema_INDY && orgId && isAllSchemaFlagSelected ) || (currentSchemaType && !isAllSchemaFlagSelected)){ + let options; - const response = await getSchemaCredDef(currentSchemaType); - const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + //FIXME: Logic of API call as per schema selection + if((currentSchemaType === SchemaTypes.schema_INDY && orgId + ) || (currentSchemaType ===SchemaTypes.schema_W3C && isAllSchemaFlagSelected === false)){ + const response = await getSchemaCredDef(currentSchemaType); + const { data } = response as AxiosResponse; + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { const credentialDefs = data.data; - - const options = credentialDefs.map(({ + + options = credentialDefs.map(({ schemaName, schemaVersion, credentialDefinition, credentialDefinitionId, schemaIdentifier, schemaAttributes - } : ICredentials) => ({ - value: schemaType===SchemaTypes.schema_INDY ? credentialDefinitionId : schemaVersion, + }: ICredentials) => ({ + value: schemaType === SchemaTypes.schema_INDY ? credentialDefinitionId : schemaVersion, label: `${schemaName} [${schemaVersion}]${currentSchemaType === SchemaTypes.schema_INDY ? ` - (${credentialDefinition})` : ''}`, schemaName: schemaName, schemaVersion: schemaVersion, @@ -125,53 +137,67 @@ const EmailIssuance = () => { typeof schemaAttributes === 'string' && JSON.parse(schemaAttributes), })); - - setCredentialOptions(options); - } else { - setSuccess(null); - setFailure(null); - } - setLoading(false); + + setCredentialOptions(options); + } else { + setSuccess(null); + setFailure(null); } + setLoading(false); + } + //FIXME: Logic of API call as per schema selection - - else if (currentSchemaType === SchemaTypes.schema_W3C && orgId && allSchemaSelectedFlag) { - const response = await getAllSchemas(schemaListAPIParameter,currentSchemaType); - const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + else if ((currentSchemaType === SchemaTypes.schema_W3C) && (orgId) && (allSchemaSelectedFlag)) { + const response = await getAllSchemas(schemaListAPIParameter, currentSchemaType); + const { data } = response as AxiosResponse; + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { const credentialDefs = data.data.data; - - const options = credentialDefs.map(({ + options = credentialDefs.map(({ name, version, schemaLedgerId, attributes, type - } : ICredentials) => ({ - value: version, + }: ICredentials) => ({ + value: version, label: `${name} [${version}]`, schemaName: name, - type:type, + type: type, schemaVersion: version, schemaIdentifier: schemaLedgerId, attributes: Array.isArray(attributes) ? attributes : (attributes ? JSON.parse(attributes) : []), - })); + })); setCredentialOptions(options); - - - } else { - setSuccess(null); - setFailure(null); - } - setLoading(false); - } - - } catch (error) { - setSuccess(null); - setFailure(null); - } - }; + } else { + setSuccess(null); + setFailure(null); + } + setLoading(false); + } + + + setCredentialOptions(options); + } catch (error) { + setSuccess(null); + setFailure(null); + } + }; + + + const handleSelectChange = (newValue: SingleValue | null) => { + const value = newValue as ICredentials | null; + setBatchName(value?.label ?? ''); + if (schemaType === SchemaTypes.schema_INDY) { + setCredDefId(value?.credentialDefinitionId); + setCredentialSelected(value ?? null); + } else if (schemaType === SchemaTypes.schema_W3C) { + setCredentialSelected(value ?? null); + setSchemasIdentifier(value?.schemaIdentifier); + } + setAttributes(value?.schemaAttributes ?? value?.attributes ?? []); + }; + useEffect(() => { @@ -406,25 +432,11 @@ const EmailIssuance = () => { isSearchable={true} id="long-value-select" instanceId="long-value-select" - name="color" options={credentialOptions} - onChange={(value: ICredentials | null) => { - setBatchName(value?.label ?? ''); - - if (schemaType === SchemaTypes.schema_INDY) { - - setCredDefId(value?.credentialDefinitionId); - setCredentialSelected(value ?? null); - } else if (schemaType === SchemaTypes.schema_W3C) { - - setCredentialSelected(value ?? null); - setSchemasIdentifier(value?.schemaIdentifier) - } - - setAttributes(value?.schemaAttributes ?? value?.attributes ?? []); - - }} + onInputChange={handleInputChange} + onChange={handleSelectChange} + value={credentialOptions.find(option => option.value === searchValue)} ref={selectInputRef} /> : @@ -980,4 +992,4 @@ const EmailIssuance = () => { ); }; -export default EmailIssuance; +export default EmailIssuance; \ No newline at end of file diff --git a/src/components/Issuance/interface.ts b/src/components/Issuance/interface.ts index ba2f27521..f7173d272 100644 --- a/src/components/Issuance/interface.ts +++ b/src/components/Issuance/interface.ts @@ -35,7 +35,7 @@ export interface ICredentials { value?:String; label?: string; credentialDefinitionId?: string; - schemaCredDefName: string; + schemaCredDefName?: string; schemaName: string; schemaVersion: string; schemaIdentifier: string;