diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 155ed18..57e9a97 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -24,6 +24,7 @@ import CloseIcon from "@mui/icons-material/Close"; import { useSearchParams } from "next/navigation"; import SummaryDetails from "@/components/summary_card"; import { projectConfig } from "@/config/config"; +import ConsumeDisplayComponent from "@/components/consume_content"; interface SnackMessage { message: string; @@ -105,8 +106,12 @@ const AttachButton = ({ export default function Client() { const searchParams = useSearchParams(); - console.log("params: ", searchParams); const name = searchParams.get("name") ?? ""; + const [consumeContent, setConsumeContent] = useState(null); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState< + SnackMessage | undefined + >(undefined); const { entity: entity } = useGetEntityByNameOrDid(name); const { @@ -139,16 +144,16 @@ export default function Client() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const [snackbarOpen, setSnackbarOpen] = useState(false); - const [snackbarMessage, setSnackbarMessage] = useState< - SnackMessage | undefined - >(undefined); - const closeSnackBar = () => { setSnackbarMessage(undefined); setSnackbarOpen(false); }; + // Consume + const handleConsumeContent = (content: any) => { + setConsumeContent(content); + }; + if (services_loading) return ; if (!services) return Client not found; @@ -185,17 +190,26 @@ export default function Client() { ], }} /> -
-

Client View

- +
+
+

Service Consumer View

+ +
+ {consumeContent && ( +
+

Service Output

+ +
+ )}
-

Service View

+

Service Producer View

); } + +const ClientTable = () => { + return ( +
+ {/*

Client View

+ */} +
+ ); +}; diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx index 88b2c82..096ddaf 100644 --- a/pkgs/ui/src/components/consume_action/index.tsx +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -1,15 +1,25 @@ -import { Button } from "@mui/material"; +import { Button, CircularProgress, Snackbar } from "@mui/material"; import { useState } from "react"; import axios from "axios"; -const ConsumeAction = ({ endpoint }: { endpoint: string }) => { - const [data, setData] = useState(null); +const ConsumeAction = ({ + endpoint, + onConsume, +}: { + endpoint: string; + rowData?: any; + onConsume?: any; +}) => { const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); - if (data) console.log("Data in state", data); - if (error) console.log("Error in state", error); + if (error) console.error("Error in state", error); + + const handleConsume = () => { + if (loading) return; + + setLoading(true); - const onConsume = () => { const axiosConfig = { url: endpoint, method: "GET", @@ -23,20 +33,40 @@ const ConsumeAction = ({ endpoint }: { endpoint: string }) => { axios(axiosConfig) .then((response) => { - setData(response.data); - console.log("I got the data from consume: ", response.data); + if (onConsume) { + onConsume(response.data); + console.log("I got the data from consume: ", response.data); + } }) .catch((error) => { + if (onConsume) onConsume(null); console.error("Error happened during consume: ", error); setError(error); }) - .finally(() => {}); + .finally(() => { + setLoading(false); + }); + }; + + const handleCloseSnackbar = () => { + setError(null); }; return ( - + <> + + {error && ( + + )} + ); }; diff --git a/pkgs/ui/src/components/consume_content/index.tsx b/pkgs/ui/src/components/consume_content/index.tsx new file mode 100644 index 0000000..8ce7a74 --- /dev/null +++ b/pkgs/ui/src/components/consume_content/index.tsx @@ -0,0 +1,9 @@ +const ConsumeDisplayComponent = ({ htmlContent }: { htmlContent: any }) => { + return ( +
+
+
+ ); +}; + +export default ConsumeDisplayComponent; diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 5c31ce8..719da6f 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -1,5 +1,11 @@ import { IEntityActions } from "@/types"; -import { Button, Snackbar, Alert, AlertColor } from "@mui/material"; +import { + Button, + Snackbar, + Alert, + AlertColor, + CircularProgress, +} from "@mui/material"; import { useState } from "react"; import { deleteEntity } from "@/api/entities/entities"; import axios from "axios"; @@ -24,17 +30,23 @@ const EntityActions = ({ endpointData, rowData }: Props) => { const [registerData, setRegisterData] = useState(null); const [registerError, setRegisterError] = useState(null); + const [loadingRegister, setLoadingRegister] = useState(false); const [DeregisterData, setDeRegisterData] = useState(null); const [DeregisterError, setDeRegisterError] = useState(null); + const [loadingDeRegister, setLoadingDeRegister] = useState(false); + + const [loadingDelete, setLoadingDelete] = useState(false); if (registerData) console.log("Register Data in state", registerData); - if (registerError) console.log("Register Error in state", registerError); + if (registerError) console.error("Register Error in state", registerError); if (DeregisterData) console.log("Register Data in state", DeregisterData); - if (DeregisterError) console.log("Register Error in state", DeregisterError); + if (DeregisterError) + console.error("Register Error in state", DeregisterError); const onDeleteEntity = async () => { + setLoadingDelete(true); if (rowData) try { const response = await deleteEntity({ @@ -52,10 +64,16 @@ const EntityActions = ({ endpointData, rowData }: Props) => { message: "Failed to delete entity.", severity: "error", }); + } finally { + setLoadingDelete(false); } }; const onRegisterEntity = (endpoint: string) => { + if (loadingRegister) return; + + setLoadingRegister(true); + const axiosConfig = { url: endpoint, method: "GET", @@ -76,10 +94,16 @@ const EntityActions = ({ endpointData, rowData }: Props) => { console.error("Error happened during register: ", error); setRegisterError(error); }) - .finally(() => {}); + .finally(() => { + setLoadingRegister(false); + }); }; const onDeregisterEntity = (endpoint: string) => { + if (loadingDeRegister) return; + + setLoadingDeRegister(true); + const axiosConfig = { url: endpoint, method: "GET", @@ -95,7 +119,9 @@ const EntityActions = ({ endpointData, rowData }: Props) => { console.error("Error happened during deregister: ", error); setDeRegisterError(error); }) - .finally(() => {}); + .finally(() => { + setLoadingDeRegister(false); + }); }; const handleCloseSnackbar = () => { @@ -108,8 +134,10 @@ const EntityActions = ({ endpointData, rowData }: Props) => { {endpointData.map( ({ name, endpoint }: IEntityActions, index: number) => { const isRegister = name && name.toLocaleLowerCase() === "register"; + // const isDeRegister = name && name.toLocaleLowerCase() === "deregister"; return (
{ +const CustomTable = ({ + configuration, + data, + loading, + tkey, + onConsumeAction, +}: ICustomTable) => { if (loading) return ; @@ -23,7 +29,11 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { const renderTableCell = ( value: any, cellKey: string, - render?: (param: any, data?: any) => void | undefined, + render?: ( + param: any, + data?: any, + onFunc?: (param: any) => void, + ) => void | undefined, rowData?: any, ) => { let renderedValue = value; @@ -36,7 +46,7 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { renderedValue = ; // cover use case if we want to render a component - if (render) renderedValue = render(value, rowData); + if (render) renderedValue = render(value, rowData, onConsumeAction); // catch use case where the value is an object but the render function is not provided in the table config if ( diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index aaa15af..8d26e61 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -13,8 +13,14 @@ export const ClientTableConfig = [ { key: "endpoint_url", label: "End Point", - render: (value: any) => { - return ; + render: (value: any, rowData: any, onConsume: any) => { + return ( + + ); }, }, // { diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts index 28fe7f0..477338e 100644 --- a/pkgs/ui/src/types/index.ts +++ b/pkgs/ui/src/types/index.ts @@ -1,7 +1,7 @@ export interface CustomTableConfiguration { key: string; label: string; - render?: (param: any) => void; + render?: (param: any, rowData?: any, onConsume?: any) => void; } export interface ICustomTable { @@ -9,6 +9,7 @@ export interface ICustomTable { data: any; loading?: boolean; tkey: string; + onConsumeAction?: (param: any) => void; } export interface EntityDetails {