Merge pull request #115 from credebl/161-issuance-card-btn

fix: 161 issuance card btn

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, attributes: string[], issuerDid:string, created:string) => void; },) => {
+const SchemaCard = (props: {className:string, schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: string[], created: string, onClickCallback: (schemaId: string, attributes: string[], issuerDid:string, created:string) => void; },) => {
   return (
     <Card onClick={() => {
       props.onClickCallback(props.schemaId, props.attributes, props.issuerDid, props.created)

src/commonComponents/datatable/index.tsx

@@ -1,15 +1,16 @@
 import type { TableData, TableHeader } from "./interface"
-import { Spinner, Tooltip } from "flowbite-react";
+import { Button, Spinner, Tooltip } from "flowbite-react";
 
 interface DataTableProps {
 	header: TableHeader[];
 	data: TableData[];
 	loading: boolean;
 	callback?: (clickId: string | null | undefined) => void;
 	displaySelect?:boolean;
+	showBtn?:boolean
 }
 
-const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loading, callback }) => {
+const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loading, callback ,showBtn}) => {
 
 	return (
 		<div className="flex flex-col ">
@@ -43,17 +44,17 @@ const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loadi
 								<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' : ''}`} onClick={() => callback ? callback(ele?.clickId) : ''}>
+										<tr className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''}`} >
 
 											{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 &&
+													{displaySelect || showBtn &&
 											<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}>Empty data</td></tr>}
 								</tbody>

src/components/Issuance/CredDefSelection.tsx

@@ -114,8 +114,11 @@ 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 gap4">
+					<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">
@@ -130,7 +133,7 @@ const CredDefSelection = () => {
 					setError(null)
 				}}
 			/>
-			<DataTable header={header} data={credDefList} loading={loading} callback={selectCredDef}></DataTable>
+			<DataTable header={header} data={credDefList} loading={loading} callback={selectCredDef} showBtn={true}></DataTable>
 		</div>
 	)
 }