credebl · tipusinghaw · Aug 4, 2023 · Aug 4, 2023
diff --git a/src/api/connection.ts b/src/api/connection.ts
@@ -0,0 +1,21 @@
+import { apiRoutes } from '../config/apiRoutes';
+import { storageKeys } from '../config/CommonConstant';
+import { getHeaderConfigs } from '../config/GetHeaderConfigs';
+import { axiosGet } from '../services/apiRequests';
+import { getFromLocalStorage } from './Auth';
+
+export const getConnectionsByOrg = async () => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.Issuance.getAllConnections}?orgId=${orgId}`;
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
diff --git a/src/assets/coming-soon.svg b/src/assets/coming-soon.svg
diff --git a/src/components/Issuance/ConnectionList.tsx b/src/components/Issuance/ConnectionList.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import type { AxiosResponse } from "axios";
+import { ChangeEvent, useEffect, useState } from "react";
+import { getConnectionsByOrg } from "../../api/connection";
+import DataTable from "../../commonComponents/datatable";
+import type { TableData } from "../../commonComponents/datatable/interface";
+import { apiStatusCodes } from "../../config/CommonConstant";
+import { AlertComponent } from "../AlertComponent";
+
+
+const ConnectionList = () => {
+	const [connectionList, setConnectionList] = useState<TableData[]>([])
+	const [selectedConnectionList, setSelectedConnectionList] = useState<TableData[]>([])
+
+	const [loading, setLoading] = useState<boolean>(false)
+	const [searchText, setSearchText] = useState("");
+	const [error, setError] = useState<string | null>(null)
+
+	//This useEffect is called when the searchText changes 
+	useEffect(() => {
+		getConnections()
+	}, [])
+
+
+	//Fetch the connection list against organization id
+	const getConnections = async () => {
+		setLoading(true)
+		const response = await getConnectionsByOrg();
+		const { data } = response as AxiosResponse
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const connections = data?.data?.map((ele) => {
+				const userName = ele?.theirLabel ? ele.theirLabel : 'Not available';
+				const connectionId = ele.id ? ele.id : 'Not available'
+				return {
+					data: [{
+						data: <div className="flex items-center">
+							<input id="default-checkbox" type="checkbox"  React.MouseEvent<HTMLInputElement>) => {
+								const inputElement = event.target as HTMLInputElement;
+								selectConnection(userName, connectionId, inputElement.checked)
+							}}
+								value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer" />
+						</div>
+					},
+					{ data: userName }, { data: connectionId },
+					]
+				}
+			})
+
+			setConnectionList(connections)
+		} else {
+			setError(response as string)
+		}
+
+		setLoading(false)
+	}
+
+
+	const header = [
+		{ columnName: '', width: 'w-0.5' },
+		{ columnName: 'User' },
+		{ columnName: 'Connection ID' }
+	]
+
+	const selectedConnectionHeader = [
+		{ columnName: 'User' },
+		{ columnName: 'Connection ID' }
+	]
+
+	const selectConnection = (user: string, connectionId: string, checked: boolean) => {
+
+		if (checked) {
+			setSelectedConnectionList((prevList) => [...prevList, {
+				data: [
+					{
+						data: user,
+					}, {
+						data: connectionId,
+					}]
+			}]
+			)
+		} else {
+			setSelectedConnectionList((prevList) =>
+				prevList.filter((connection) => connection.data[1].data !== connectionId)
+			);
+		}
+	}
+
+	return (
+		<div>
+
+			<div className="flex items-center justify-between mb-4">
+				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+					Connection List
+				</h1>
+			</div>
+			<AlertComponent
+				message={error}
+				type={'failure'}
+				 => {
+					setError(null)
+				}}
+			/>
+			<div
+				className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+
+				<DataTable header={header} data={connectionList} loading={loading} ></DataTable>
+			</div>
+			<div className="flex items-center justify-between mb-4">
+				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+					Selected Users
+				</h1>
+			</div>
+			<div
+				className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+				<DataTable header={selectedConnectionHeader} data={selectedConnectionList} loading={false} ></DataTable>
+			</div>
+
+		</div>
+	)
+}
+
+export default ConnectionList
diff --git a/src/components/Issuance/Connections.tsx b/src/components/Issuance/Connections.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import BreadCrumbs from "../BreadCrumbs";
+import ConnectionList from "./ConnectionList";
+import EmailList from "./EmailList";
+
+const Connections = () => {
+
+	return (
+		<div className="px-4 pt-6">
+			<div className="pl-6 mb-4 col-span-full xl:mb-2">
+				<BreadCrumbs />
+			</div>
+
+			<div className="mb-4 border-b border-gray-200 dark:border-gray-700">
+				<ul className="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+					<li className="mr-2" role="presentation">
+						<button className="inline-block p-4 border-b-2 rounded-t-lg text-xl" id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Connection</button>
+					</li>
+					<li className="mr-2" role="presentation">
+						<button className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-xl" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Email</button>
+					</li>
+				</ul>
+			</div>
+			<div id="myTabContent">
+				<div className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+					<ConnectionList />
+				</div>
+				<div className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+				<EmailList />
+				</div>
+			</div>
+
+
+		</div>
+	)
+}
+
+export default Connections
diff --git a/src/components/Issuance/CredDefSelection.tsx b/src/components/Issuance/CredDefSelection.tsx
@@ -11,22 +11,9 @@ import type { TableData } from "../../commonComponents/datatable/interface";
 import SchemaCard from "../../commonComponents/SchemaCard";
 import { apiStatusCodes, storageKeys } from "../../config/CommonConstant";
 import { pathRoutes } from "../../config/pathRoutes";
+import { AlertComponent } from "../AlertComponent";
 import BreadCrumbs from "../BreadCrumbs";
-
-
-interface SchemaState {
-	schemaId: string;
-	issuerDid: string;
-	attributes: string[];
-	createdDateTime: string;
-}
-
-interface CredDefData {
-	credentialDefinitionId: string;
-	revocable: boolean;
-	schemaLedgerId: string;
-	tag: string;
-}
+import type { SchemaState, CredDefData } from "./interface";
 
 const CredDefSelection = () => {
 	const [schemaState, setSchemaState] = useState({ schemaName: '', version: '' })
@@ -75,7 +62,7 @@ const CredDefSelection = () => {
 		{ columnName: 'Revocable?' }
 	]
 
-	//Fetch all issued credential list
+	//Fetch credential definitions against schemaId
 	const getCredDefs = async (schemaId: string) => {
 		setLoading(true)
 		const response = await getCredentialDefinitions(schemaId);
@@ -135,7 +122,13 @@ const CredDefSelection = () => {
 					Credential definitions
 				</h1>
 			</div>
-
+			<AlertComponent
+				message={error}
+				type={'failure'}
+				 => {
+					setError(null)
+				}}
+			/>
 			<DataTable header={header} data={credDefList} loading={loading} callback={selectCredDef}></DataTable>
 		</div>
 	)

diff --git a/src/components/Issuance/EmailList.tsx b/src/components/Issuance/EmailList.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import ComingSoonImage from '../../assets/coming-soon.svg'
+const EmailList = () => {
+
+	return (
+		<div className="flex justify-center items-center flex-1 bg-gray-100">
+          <img src={ComingSoonImage} alt="Centered Image" className="max-w-md md:max-w-lg lg:max-w-2xl" />
+        </div>
+	)
+}
+
+export default EmailList
diff --git a/src/components/Issuance/interface.ts b/src/components/Issuance/interface.ts
@@ -0,0 +1,13 @@
+export interface SchemaState {
+	schemaId: string;
+	issuerDid: string;
+	attributes: string[];
+	createdDateTime: string;
+}
+
+export interface CredDefData {
+	credentialDefinitionId: string;
+	revocable: boolean;
+	schemaLedgerId: string;
+	tag: string;
+}
diff --git a/src/config/apiRoutes.ts b/src/config/apiRoutes.ts
@@ -46,6 +46,7 @@ export const apiRoutes = {
     },
 		Issuance:{
 			getIssuedCredentials:'/issue-credentials',
-			getCredDefBySchemaId :'/schemas/credential-definitions'
+			getCredDefBySchemaId :'/schemas/credential-definitions',
+			getAllConnections:'/connections'
 		}
 }
diff --git a/src/pages/organizations/issued-credentials/schemas/cred-defs/connections/index.astro b/src/pages/organizations/issued-credentials/schemas/cred-defs/connections/index.astro
@@ -0,0 +1,8 @@
+---
+import LayoutSidebar from "../../../../../../app/LayoutSidebar.astro";
+import Connections from "../../../../../../components/Issuance/Connections";
+---
+
+<LayoutSidebar>
+	<Connections client:load/>
+</LayoutSidebar>