Merge pull request #11 from pepfar-datim/feat/DAT-2620#handle-unsuppo…

…rted-items

Feat/dat 2620#handle unsupported items

package.json

@@ -1,6 +1,6 @@
 {
   "name": "landing-page",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "homepage": ".",
   "dependencies": {
@@ -72,13 +72,13 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
-    "start": "REACT_APP_BASE_URL=https://jakub.datim.org/ node scripts/start.js",
+    "start": "REACT_APP_BASE_URL=https://jakub.testing.datim.org/ node scripts/start.js",
     "build": "node scripts/build.js && npm run build:zip",
     "build:zip": "(rm -f Landing-Page.zip && cd build && zip ../Landing-Page.zip -r .)",
-    "test_old": "REACT_APP_BASE_URL=https://jakub.datim.org/ node scripts/test.js",
+    "test_old": "REACT_APP_BASE_URL=https://jakub.testing.datim.org/ node scripts/test.js",
     "dep:copy": "sh node_modules/@pepfar-react-lib/dep-copy/bin/dep-copy.sh",
     "webpack:cache": "rm -rf node_modules/.cache",
-    "test": "REACT_APP_BASE_URL=https://jakub.datim.org/ node --experimental-modules node_modules/jest/bin/jest --roots ./src --testEnvironment jsdom --watch"
+    "test": "REACT_APP_BASE_URL=https://jakub.testing.datim.org/ node --experimental-modules node_modules/jest/bin/jest --roots ./src --testEnvironment jsdom --watch"
   },
   "eslintConfig": {
     "extends": [

src/components/dashboardItem.component.tsx

@@ -2,7 +2,10 @@ import {DashboardItem} from "../types/dashboard.type";
 import {getColumnSize, getWidth} from "../services/getWidthHeight.service";
 import React, {RefObject, useEffect, useRef} from "react";
 import {Grid, Paper} from "@mui/material"
+import { getBaseUrl } from "../utils";
 import "./css/dashboardItem.component.css"
+import NotSupported from "./notSupported.component";
+
 
 function resizeObject(object:HTMLObjectElement|null):any{
     let height:number = object?.contentDocument?.querySelector('html')?.offsetHeight as number;
@@ -15,21 +18,19 @@ function setupResize(ref:RefObject<HTMLObjectElement>){
     window.addEventListener('resize',()=>resizeObject(ref.current));
 }
 
-function getBaseUrl() {
-    const {origin, pathname} = window.location
-    return origin + pathname.substring(0, pathname.indexOf('/api'))
-}
-
 export function DashboardItemComponent({dashboardItem}:{dashboardItem:DashboardItem}){
     const objectRef=useRef<HTMLObjectElement>(null);
     useEffect(()=>setupResize(objectRef));
     return <Grid item md={getColumnSize(dashboardItem.width)} xs={12}>
         <Paper className={'Paper'}>
-            <object
-                ref={objectRef}
-                data={`${getBaseUrl()}/api/apps/Information/index.html?dashboardItemId=${dashboardItem.id}#/`}
-                type={'text/html'}
-            />
+            {dashboardItem?.appKey === 'Information' ? (
+                <object
+                    ref={objectRef}
+                    data={`${getBaseUrl()}/api/apps/Information/index.html?dashboardItemId=${dashboardItem.id}#/`}
+                    type={'text/html'}
+                />
+            ) : (<NotSupported dashboardItem={dashboardItem } />)}
+
         </Paper>
     </Grid>
 }

src/components/notSupported.component.tsx

@@ -0,0 +1,47 @@
+import { ItemType, DashboardItem } from "../types/dashboard.type";
+import { getBaseUrl } from "../utils";
+
+type itemInfoType = {name: string, itemKey: ItemType, link: Function, app: string}
+
+const itemTypeInfo: {[s: string]: itemInfoType} = {
+  'MAP': {
+    name: 'map',
+    itemKey: 'map',
+    link: (uid: string) => `${getBaseUrl()}/dhis-web-maps/?id=${uid}`,
+    app: 'Maps'
+  },
+  'EVENT_REPORT': {
+    name: 'event report',
+    itemKey: 'eventReport',
+    link: (uid: string) => `${getBaseUrl()}/dhis-web-event-reports/?id=${uid}`,
+    app: 'Event reports'
+  },
+  'VISUALIZATION': {
+    name: 'visualization',
+    itemKey: 'visualization',
+    link: (uid: string) => `${getBaseUrl()}/dhis-web-data-visualizer/#/${uid}`,
+    app: 'Visualizations'
+  }
+}
+
+const NotSupported = ({ dashboardItem }: { dashboardItem: DashboardItem }) => {
+  const { type: itemType } = dashboardItem
+  const itemInfo = itemTypeInfo?.[itemType]
+  const item = dashboardItem?.[itemInfo?.itemKey]
+  const name = item?.name || ''
+  const displayType = itemType.toLocaleLowerCase().replace('_', ' ')
+  return (
+    <div className="notSupportedItem">
+      <p>Dashboard item of type {displayType} is not currently supported.</p>
+      {
+        itemType in itemTypeInfo ? (
+          <p>
+            <a href={itemInfo.link(item?.id)} target="_blank">Click here to see '{name}' in the {itemInfo?.app} app</a>
+          </p>
+        ) : ''
+      }
+    </div>
+  )
+}
+
+export default NotSupported

src/index.css

@@ -13,4 +13,10 @@ body {
 
 #dhis2HeaderBar a > div {
     padding: 0;
+}
+
+.notSupportedItem {
+    font-family: Roboto;
+    margin-top: 10px;
+    padding: 0 16px;
 }

src/services/getDashboardInfo.service.ts

@@ -3,7 +3,7 @@ import {DashboardItem, DashboardInfo} from "../types/dashboard.type";
 
 export async function getDashboardInfo(dashboardId:string):Promise<DashboardInfo>{
     try {
-        let response:any = await datimApi.getJson(`/dashboards/${dashboardId}.json?fields=name,dashboardItems[id,appKey,width,height,x,y]`);
+        let response:any = await datimApi.getJson(`/dashboards/${dashboardId}.json?fields=name,dashboardItems[id,type,appKey,width,height,x,y,map(id,name),visualization(id,name),eventReport(id,name)]`);
         const dashboardItems = response.dashboardItems.sort((a:DashboardItem,b:DashboardItem)=>{
             if (a.y===b.y) return a.x-b.x;
             return a.y-b.y
@@ -25,7 +25,7 @@ export async function getDashboardInfo(dashboardId:string):Promise<DashboardInfo
             console.log('Created blank landing page dashboard: ' + createResponse)
             return {name: blankDashboard.name, dashboardItems: []}
         } catch (createErr) {
-            console.log('Failed to get dashboard items: ', createErr);
+            console.warn('Failed to get dashboard items: ', createErr);
             return {name: 'Error', dashboardItems: []};
         }
     }

src/types/dashboard.type.ts

@@ -1,11 +1,17 @@
+export type ItemType = 'map' | 'visualization' | 'eventReport';
+
 export type DashboardItem = {
     id: string,
+    type: ItemType,
     width: number,
     height: number
     x: number,
     y: number,
     content: string,
     appKey:string,
+    map?: {id: string, name: string},
+    visualization?: {id: string, name: string},
+    eventReport?: {id: string, name: string}
 }
 
 export type DashboardInfo = {

src/utils.ts

@@ -0,0 +1,4 @@
+export function getBaseUrl() {
+  const {origin, pathname} = window.location
+  return origin + pathname.substring(0, pathname.indexOf('/api'))
+}