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;