From 1a262505747018a09b64e1718a8e80aeddee59b1 Mon Sep 17 00:00:00 2001 From: Arnau Sanchez Date: Wed, 12 Jun 2024 12:56:06 +0200 Subject: [PATCH 01/51] poc: Use approval app as plugin --- package.json | 1 + src/components/utils/use-boolean.ts | 27 +++++ src/pages/data-approval/DataApprovalTable.tsx | 106 ++++++++++++------ yarn.lock | 42 +++++++ 4 files changed, 140 insertions(+), 36 deletions(-) create mode 100644 src/components/utils/use-boolean.ts diff --git a/package.json b/package.json index 8d70f811..4c9a163c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@eyeseetea/d2-api": "1.14.0", "@eyeseetea/d2-ui-components": "2.7.0", "@eyeseetea/feedback-component": "0.1.2", + "@krakenjs/post-robot": "^11.0.0", "@material-ui/core": "4.12.3", "@material-ui/icons": "4.11.3", "@material-ui/styles": "4.11.4", diff --git a/src/components/utils/use-boolean.ts b/src/components/utils/use-boolean.ts new file mode 100644 index 00000000..35b5cf1a --- /dev/null +++ b/src/components/utils/use-boolean.ts @@ -0,0 +1,27 @@ +import React from "react"; + +type Callback = () => void; + +type UseBooleanReturn = [boolean, UseBooleanActions]; + +interface UseBooleanActions { + set: (newValue: boolean) => void; + toggle: Callback; + enable: Callback; + disable: Callback; +} + +export function useBooleanState(initialValue: boolean): UseBooleanReturn { + const [value, setValue] = React.useState(initialValue); + + const actions = React.useMemo(() => { + return { + set: (newValue: boolean) => setValue(newValue), + enable: () => setValue(true), + disable: () => setValue(false), + toggle: () => setValue(value_ => !value_), + }; + }, [setValue]); + + return [value, actions]; +} diff --git a/src/pages/data-approval/DataApprovalTable.tsx b/src/pages/data-approval/DataApprovalTable.tsx index 0e8273a3..312da3c8 100644 --- a/src/pages/data-approval/DataApprovalTable.tsx +++ b/src/pages/data-approval/DataApprovalTable.tsx @@ -1,17 +1,9 @@ import React from "react"; import { LinearProgress } from "@material-ui/core"; // @ts-ignore -import { CssVariables } from "@dhis2/ui"; -// @ts-ignore -import { SelectionProvider } from "approval-app/es/selection-context"; -// @ts-ignore -import { AppProvider } from "approval-app/es/app-context"; -// @ts-ignore -import { Layout } from "approval-app/es/app/layout.js"; -// @ts-ignore -import { Display } from "approval-app/es/data-workspace/display"; -// @ts-ignore -import { useSelectionContext } from "approval-app/es/selection-context"; +import postRobot from "@krakenjs/post-robot"; +import { useBooleanState } from "../../components/utils/use-boolean"; +import { useAppContext } from "../../contexts/api-context"; export interface DataApprovalTableProps { dataSetId: string; @@ -20,41 +12,83 @@ export interface DataApprovalTableProps { attributeOptionComboId: string; } -const DataApprovalTable: React.FC = props => { +export function useDhis2Url(path: string) { + const { api, isDev } = useAppContext(); + return (isDev ? "/dhis2" : api.baseUrl) + path; +} + +export const DataApprovalTable: React.FunctionComponent = props => { + const pluginUrl = useDhis2Url("/dhis-web-approval/plugin.html"); + const iframeRef = React.useRef(null); + const isPluginReady = useDataApprovalPlugin(iframeRef, props); + return ( <> - + {!isPluginReady && } - - - - - +