Merge pull request #93 from credebl/161-issuance-new-flow

fix:Issuance flow

src/api/issuance.ts

@@ -7,7 +7,7 @@ import { getFromLocalStorage } from './Auth';
 
 export const getIssuedCredentials = async (state: IssueCredential) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Issuance.getIssuedCredentials}?orgId=${orgId}&state=${state}`;
+	const url = `${apiRoutes.Issuance.getIssuedCredentials}?orgId=${orgId}`;
 
 	const axiosPayload = {
 		url,

src/commonComponents/SchemaCard.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'flowbite-react';
 import { dateConversion } from '../utils/DateConversion';
 
-const SchemaCard = (props: { schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: string[], created: string, onClickCallback: (schemaId: string) => void; },) => {
+const SchemaCard = (props: {className:string, schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: string[], created: string, onClickCallback: (schemaId: string) => void; },) => {
   return (
     <Card onClick={() => {
       props.onClickCallback(props.schemaId)
@@ -15,11 +15,11 @@ const SchemaCard = (props: { schemaName: string, version: string, schemaId: stri
             Version: {props.version}
           </p>
         </div>
-        <div className='float-right ml-auto '>
+        {/* <div className='float-right ml-auto '>
           <p className='dark:text-white'>
             {dateConversion(props.created)}
           </p>
-        </div>
+        </div> */}
       </div>
       <div className="min-w-0 flex-1">
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">

src/commonComponents/datatable/index.tsx

@@ -6,9 +6,10 @@ interface DataTableProps {
 	data: TableData[];
 	loading: boolean;
 	callback?: (clickId: string | null | undefined) => void;
+	displaySelect?:boolean;
 }
 
-const DataTable: React.FC<DataTableProps> = ({ header, data, loading, callback }) => {
+const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loading, callback }) => {
 
 	return (
 		<div className="flex flex-col ">
@@ -41,13 +42,16 @@ const DataTable: React.FC<DataTableProps> = ({ header, data, loading, callback }
 								</thead>
 								<tbody className="bg-white dark:bg-gray-800">
 									{data.length ? data.map((ele, index) => (
-										<tr className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''} ${callback && ele.clickId ? 'cursor-pointer' : ''}`} onClick={() => callback ? callback(ele?.clickId) : ''}>
+										<tr className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''}`} onClick={() => callback ? callback(ele?.clickId) : ''}>
 											{ele.data.map(subEle => (
 												<td className={` p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white align-middle	`}>
 													<div>{subEle.data}</div>
 													{subEle.subData && subEle.subData}
 												</td>
 											))}
+													{displaySelect &&
+											<button onClick={() => callback ? callback(ele?.clickId) : ''} type="button" className="text-center mt-2 text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2">Select</button>
+									}
 										</tr>
 									)) : <tr className="text-center"><td className="p-2 text-center text-gray-500" colSpan={header.length}>No Data Found</td></tr>}
 								</tbody>

src/components/Issuance/CredDefSelection.tsx

@@ -117,8 +117,12 @@ const CredDefSelection = () => {
 							color="info"
 						/>
 					</div>
-					: <SchemaCard schemaName={schemaState?.schemaName} version={schemaState?.version} schemaId={schemaDetailsState.schemaId} issuerDid={schemaDetailsState.issuerDid} attributes={schemaDetailsState.attributes} created={schemaDetailsState.createdDateTime}
-						onClickCallback={schemaSelectionCallback} />}
+						: 
+						<div className="m-1 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+							<SchemaCard className=" col-span-1 sm:col-span-2 md:col-span-1" schemaName={schemaState?.schemaName} version={schemaState?.version} schemaId={schemaDetailsState.schemaId} issuerDid={schemaDetailsState.issuerDid} attributes={schemaDetailsState.attributes} created={schemaDetailsState.createdDateTime}
+							onClickCallback={schemaSelectionCallback} />
+						</div>
+						}
 			</div>
 
 			<div className="mb-4 col-span-full xl:mb-2 pt-5">
@@ -133,7 +137,7 @@ const CredDefSelection = () => {
 					setError(null)
 				}}
 			/>
-			<DataTable header={header} data={credDefList} loading={loading} callback={selectCredDef}></DataTable>
+			<DataTable header={header} data={credDefList} loading={loading} callback={selectCredDef} displaySelect={true}></DataTable>
 		</div>
 	)
 }

src/components/Issuance/Issuance.tsx

@@ -29,7 +29,7 @@ interface Attributes {
 	value: string
 }
 interface IssuanceFormPayload {
-	userName: string,
+	userName?: string,
 	connectionId: string,
 	attributes: Attributes[],
 	credentialDefinitionId: string,
@@ -71,7 +71,8 @@ const IssueCred = () => {
 		const attrObj = attributes.map(attr => ({ name: attr, value: '' }))
 		const issuancePayload = selectedUsers.map(user => {
 			return {
-				userName: user.userName, connectionId: user.connectionId,
+				// userName: user.userName, 
+				connectionId: user.connectionId,
 				attributes: attrObj, credentialDefinitionId: credDefId, orgId
 			}
 		})
@@ -147,7 +148,9 @@ const IssueCred = () => {
 				</h1>
 			</div>
 			{!schemaLoader ?
-				<Card className='transform transition duration-500 hover:scale-105 hover:bg-gray-50' style={{ width: '470px', height: '140px', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
+				<Card 
+				// className='transform transition duration-500 hover:scale-105 hover:bg-gray-50'
+				 style={{ width: '470px', height: '140px', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
 					<div className="flex justify-between items-start">
 						<div>
 							<h5 className="text-xl font-bold leading-none text-primary dark:text-white">