feat: support search functionality in issuance dropdown

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<ICredentials | undefined>) => {
+		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;

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<string>();
 	const [schemaTypeValue, setSchemaTypeValue] = useState<SchemaTypeValue>();
 	const [isAllSchemaFlagSelected, setIsAllSchemaFlagSelected] = useState<boolean>();
-
-	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<ICredentials> | 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;

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;