@agilemotion/oui-react-js 0.1.0

package/src/lib/redux/store/DashboardStore.js

@@ -0,0 +1,67 @@
+import {sendRequest} from "../../RestUtils"
+
+const requestType = 'REQUEST';
+const receiveDashboardSettingsType = 'RECEIVE_DASHBOARD_SETTINGS';
+const activeRouteMenu = 'ACTIVE_ROUTE_MENU';
+const secondaryThemeColor = 'SECONDARY_THEME_COLOR';
+
+const initialState = {
+    dashboardSettings: {}, isLoading: false, error: false, activeRouteMenu: "Dashboard", secondaryThemeColor: "red"
+};
+
+let currentDashboardSettings = {};
+export const actionCreators = {
+    getDashboardSettings: (url) => async (dispatch) => {
+        dispatch({ type: requestType });
+        sendRequest(url, (response) => {
+            dispatch({ type: receiveDashboardSettingsType, dashboardSettings: response, error: false });
+        }, () => {
+            dispatch({ type: receiveDashboardSettingsType, dashboardSettings: null, error: true });
+        });
+    },
+    setActiveRoute: (route) => async (dispatch) => {
+        dispatch({ type: activeRouteMenu, activeRouteMenu: route });
+    },
+    setSecondaryThemeColor: (secondaryColor) => async (dispatch) => {
+        dispatch({ type: secondaryThemeColor, secondaryThemeColor: secondaryColor });
+    }
+};
+
+export const reducer = (state, action) => {
+    state = state || initialState;
+    if (action.type === requestType) {
+        return {
+            ...state,
+            isLoading: true,
+            dashboardSettings: currentDashboardSettings,
+            error: false
+        };
+    }
+
+    if (action.type === receiveDashboardSettingsType) {
+        currentDashboardSettings = action.dashboardSettings;
+
+        return {
+            ...state,
+            error: action.error,
+            dashboardSettings: currentDashboardSettings,
+            isLoading: false
+        };
+    }
+
+    if (action.type === activeRouteMenu) {
+        return {
+            ...state,
+            activeRouteMenu: action.activeRouteMenu,
+        };
+    }
+
+    if (action.type === secondaryThemeColor) {
+        return {
+            ...state,
+            secondaryThemeColor: action.secondaryThemeColor,
+        };
+    }
+
+    return state;
+};

package/src/lib/redux/store/History.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+const history = createBrowserHistory();
+export default history;

package/src/lib/redux/store/SecurityStore.js

@@ -0,0 +1,40 @@
+const requestType = 'REQUEST';
+const receiveUserDetailsType = 'RECEIVE_USER_DETAILS';
+
+const initialState = {
+    userDetails: {}, isLoading: false, error: false, currentMenuJson: ""
+};
+
+let currentUserDetails = {};
+
+export const actionCreators = {
+    login: (url, username, password) => async (dispatch) => {
+        dispatch({ type: requestType });
+        const response = await fetch(url);
+        const userDetails = await response.json();
+        dispatch({ type: receiveUserDetailsType, userDetails });
+    }
+};
+
+export const reducer = (state, action) => {
+    state = state || initialState;
+    if (action.type === requestType) {
+        return {
+            ...state,
+            isLoading: true,
+            error: false,
+            userDetails: {}
+        };
+    }
+
+    if (action.type === receiveUserDetailsType) {
+        currentUserDetails = JSON.parse(action.userDetails);
+        return {
+            ...state,
+            userDetails: currentUserDetails,
+            isLoading: false
+        };
+    }
+
+    return state;
+};

package/src/lib/security/TokenManager.js

@@ -0,0 +1,40 @@
+import Utils from "../Utils"
+import {sendRequest} from "../RestUtils";
+
+const MINUTE = 10000;
+const ACCESS_TOKEN_PROPERTY = "accessToken";
+const LAST_LOGIN = "lastLogin";
+const ID_TOKEN_PROPERTY = "idToken";
+const REFRESH_TOKEN_PROPERTY = "refreshToken";
+
+class TokenManager {
+
+    startTokenRefreshMonitor(url, username) {
+        setInterval(function () {
+            let lastLogin = sessionStorage.getItem(LAST_LOGIN);
+            let refreshToken = sessionStorage.getItem(REFRESH_TOKEN_PROPERTY);
+
+            if (!Utils.isNull(lastLogin) && !Utils.isNull(refreshToken)) {
+                let diff = ((new Date().getTime() - parseFloat(lastLogin)) / MINUTE);
+                if (diff >= 57) {
+                    console.log("Refreshing Token AT [" + diff + "]");
+                    let refreshUrl = `${url}?refreshToken=${refreshToken}&username=${username}`;
+                    sendRequest(refreshUrl, (
+                        response) => {
+                            sessionStorage.setItem(ACCESS_TOKEN_PROPERTY, response.accessToken);
+                            sessionStorage.setItem(ID_TOKEN_PROPERTY, response.idToken);
+                            sessionStorage.setItem(LAST_LOGIN, new Date().getTime());
+                        },
+                        (e) => {
+                            console.error('Error refreshing token');
+                        }, false)
+                }
+            }
+        }, MINUTE);
+    }
+}
+
+const instance = new TokenManager();
+Object.freeze(instance);
+
+export default instance;

package/src/lib/theme-default.js

@@ -0,0 +1,19 @@
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import {blue600, grey900} from 'material-ui/styles/colors';
+
+const themeDefault = getMuiTheme({
+    palette: {
+    },
+    appBar: {
+        height: 57,
+        color: blue600
+    },
+    drawer: {
+        width: 230
+    },
+    raisedButton: {
+        primaryColor: blue600,
+    }
+});
+
+export default themeDefault;

package/src/lib/view/Dashboard.jsx

@@ -0,0 +1,396 @@
+import React from 'react';
+import Utils from "../Utils";
+import {DropdownItem, DropdownMenu, DropdownToggle, NavLink, UncontrolledDropdown} from "reactstrap";
+import Icon from '../components/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import {invokeRpc} from "../RestUtils";
+import RouteActionHandler from '../event/RouteActionHandler';
+import {sendRequest} from "../RestUtils";
+import applicationContext from "../ApplicationContext";
+
+const location = window.location.protocol + "//" + window.location.hostname;
+const DashboardCard = (props) => {
+    const [path, setPath] = React.useState(null);
+    const [name, setName] = React.useState(null);
+    const [displayType, setDisplayType] = React.useState(null);
+    const [ref] = React.useState(React.createRef());
+
+    React.useEffect(
+        () => {
+            if (!path) {
+                // TODO: Make the base URL dynamic
+                let url = location + "/agility/app/controller/dashboard?version=1.0&id=" + props.settings.path;
+                sendRequest(url,
+                    (data) => {
+                        let defaultDisplayType = !Utils.isNull(props.settings.parameters.map.displayType) ? props.settings.parameters.map.displayType
+                            : data.defaultDisplayType;
+
+                        if (Utils.isNull(defaultDisplayType)) {
+                            console.error("Could not determine display type for dashboard");
+                            return;
+                        }
+
+                        setDisplayType(defaultDisplayType);
+
+                        let defaultName = !Utils.isNull(props.settings.parameters.map.dashboardName) ? props.settings.parameters.map.dashboardName
+                            : data.defaultDashboardName;
+
+                        if (Utils.isNull(defaultDisplayType)) {
+                            console.error("Could not determine a default name for dashboard");
+                            return;
+                        }
+
+                        setName(defaultName);
+                        setPath(data.url.replace('.html', `${defaultDisplayType}.html`));
+                    }, (e) => {
+                        console.error(e);
+                    });
+            }
+        }
+    );
+
+    const saveDashboard = () => {
+        props.settings.parameters.type = "MapEntityDto";
+        props.settings.parameters.map.displayType = displayType;
+        props.settings.parameters.map.dashboardName = name;
+
+        let url = `${location}/agility/app/controller/dashboard/save?path=${props.settings.path}&parameters=${JSON.stringify(props.settings.parameters)}`;
+        if (!Utils.isNull(props.settings.id)) {
+            url += "&id=" + props.settings.id;
+        }
+
+        sendRequest(url, (data) => {
+        }, (e) => {
+            console.log(e);
+        })
+    };
+
+    const deleteDashboard = () => {
+        if (!Utils.isNull(props.settings) && !Utils.isNull(props.settings.id)) {
+            applicationContext.openConfirmDialog('Are you sure you want to delete this dashboard?', (result) => {
+                if (result === true) {
+                    let url = `${location}/agility/app/controller/dashboard/delete?id=${props.settings.id}`;
+                    sendRequest(url, (data) => {
+                        props.onDelete();
+                    }, (e) => {
+                        console.log(e);
+                    })
+                }
+            });
+        } else {
+            props.onDelete();
+        }
+    };
+
+    return (
+        <Paper style={{minWidth: '200px', marginLeft: props.settings.first ? '0' : '16px', minHeight: '40vh'}}
+               className={"col"} ref={ref}>
+            <div className={"row"}>
+                <div className={"col-*-*"}>
+                    <UncontrolledDropdown>
+                        <DropdownToggle
+                            color="default"
+                            data-toggle="dropdown"
+                            style={{width: '12px', height: '8px'}}
+                            nav
+                        >
+                            <IconButton
+                                aria-controls="menu-list-grow"
+                                aria-haspopup="true"
+                                style={{width: '8px'}}
+                            >
+                                <i className="fa fa-ellipsis-v fa-xs" aria-hidden="true" style={{padding: '3px'}}/>
+                            </IconButton>
+                        </DropdownToggle>{" "}
+                        {
+                            <DropdownMenu className="dropdown-navbar" left tag="ul">
+                                {
+                                    <NavLink tag="li">
+                                        <DropdownItem className="nav-item" onClick={() => {
+                                            saveDashboard()
+                                        }}>
+                                            {"SAVE"}
+                                        </DropdownItem>
+                                    </NavLink>
+                                }
+                                {
+                                    <NavLink tag="li">
+                                        <DropdownItem className="nav-item" onClick={() => {
+                                            deleteDashboard()
+                                        }}>
+                                            {"DELETE"}
+                                        </DropdownItem>{" "}
+                                    </NavLink>
+                                }
+                            </DropdownMenu>
+                        }
+                    </UncontrolledDropdown>{" "}
+                </div>
+                <div className={"col-*-*"} style={{padding: '14px 0 0 12px'}}>
+                    <p style={{fontSize: '24px'}}>{name}</p>
+                </div>
+            </div>
+            <div className={"row"} style={{margin: "16px", width: '100%', height: '32vh', padding: '8px 32px 0 0'}}>
+                {
+                    !Utils.isNull(path) ?
+                        <object data={path} title="" style={{width: '100%', height: '100%'}}/>
+                        :
+                        <p>Loading...</p>
+                }
+            </div>
+        </Paper>
+    )
+};
+
+const WorkFlowCard = (props) => {
+    const [sp, setSp] = React.useState(null);
+    const [minW, setMinW] = React.useState(null);
+    const routeAction = {
+        "actionType": "route",
+        "parent": true
+    };
+
+    React.useEffect(
+        () => {
+            if (window.innerWidth < 400) {
+                setSp(16);
+                setMinW(280);
+            } else {
+                setSp(48);
+                setMinW(300);
+            }
+        }, []);
+
+    return (
+        Utils.isNull(sp) || Utils.isNull(minW) ?
+            null :
+            <Paper style={{minWidth: `${minW}px`, margin: props.margin, height: '152px'}}
+                   className={"col"}>
+                <div className={"row"}>
+                    <div className={"col-*-*"} style={{width: '70%'}}>
+                        <div
+                            style={{padding: `16px ${sp}px 16px ${sp}px`, height: '8px', color: 'rgba(0, 0, 0, 0.54)'}}>
+                            Work Items
+                        </div>
+                        <div style={{padding: `16px ${sp}px 48px ${sp}px`, height: '0', fontSize: '20px'}}>
+                            {props.title}
+                        </div>
+                        <div style={{padding: `0 ${sp}px 16px ${sp}px`, fontSize: '30px'}}>
+                            {props.itemCount}
+                        </div>
+                    </div>
+                    <div className={"col-*-*"} style={{marginTop: '50px'}}>
+                        <Button
+                            variant={'contained'}
+                            color={'primary'}
+                            size="large"
+                            disabled={parseFloat(props.itemCount) === 0}
+                            onClick={() => {
+                                routeAction.path = props.path;
+                                RouteActionHandler.execute(routeAction, null, props.viewRef, 'dashboard');
+                            }}
+                        >
+                            View
+                        </Button>
+                    </div>
+                </div>
+            </Paper>
+    );
+};
+
+const Dashboard = React.memo(React.forwardRef((props, ref) => {
+    const [taskSummary, setTaskSummary] = React.useState(null);
+    const [menuItems, setMenuItems] = React.useState(null);
+    const [cardRows, setCardRows] = React.useState(null);
+    const [cardsPerRow, setCardsPerRow] = React.useState(null);
+    let dashboardCardCounter = 0;
+
+    const api = {
+        get id () {
+            return "dashboard";
+        }
+    };
+
+    const handle = {
+       "api": api
+    };
+
+    function setupCardRows(exclusion) {
+        let row = null;
+        let gridRows = [];
+        dashboardCardCounter = 0;
+        for (const userDashboard of props.settings.userDashboards) {
+            if (dashboardCardCounter++ % cardsPerRow === 0) {
+                row = [];
+                gridRows.push(row);
+            }
+
+            if (userDashboard !== exclusion) {
+                row.push(userDashboard);
+            }
+        }
+
+        for (const gridRow of gridRows) {
+            gridRow[0].first = true;
+        }
+
+        setCardRows(gridRows);
+    }
+
+    React.useEffect(
+        () => {
+            let rpcConfig = {
+                "type": "remoteObjectProxy",
+                "procedureName": "getWorkFlowSummary",
+                "serviceId": "SYSTEM.WorkFlow"
+            };
+
+            if (window.innerWidth < 400) {
+                setCardsPerRow(1);
+            } else {
+                setCardsPerRow(2);
+            }
+
+            if (Utils.isNull(taskSummary)) {
+                invokeRpc(rpcConfig, handle, "dashboard", (result) => {
+                        if (!Utils.isNull(result)) {
+                            setTaskSummary(result.data);
+                        }
+                    },
+                    (e) => {
+                        console.error(e);
+                        // TODO : Show error message
+                    }, null);
+            }
+
+            if (Utils.isNull(menuItems) && !Utils.isNull(props.settings.systemProfileDto.modules)) {
+                let dashboardMenuitems = [];
+                for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
+                    let module = props.settings.systemProfileDto.modules[i];
+                    if (!Utils.isNull(module.dashBoardMenuBar)) {
+                        for (let j = 0; j < module.dashBoardMenuBar.menus.length; j++) {
+                            let menu = module.dashBoardMenuBar.menus[j];
+                            for (const item of menu.items) {
+                                dashboardMenuitems.push(item);
+                            }
+                        }
+                    }
+                }
+
+                setMenuItems(dashboardMenuitems);
+            }
+
+            if (!Utils.isNull(props.settings) && !Utils.isNull(props.settings.userDashboards) && Utils.isNull(cardRows) && !Utils.isNull(cardsPerRow)) {
+                setupCardRows();
+            }
+        });
+
+    const addDashboardCard = (item) => {
+        let path = item.eventHandlingConfig.subscriptions[0].actions[0].path;
+        let settings = {};
+        settings.path = path;
+        settings.parameters = {};
+        settings.parameters.map = {};
+
+        props.settings.userDashboards.push(settings);
+        setupCardRows();
+    };
+
+    return (
+        <div ref={ref} style={{margin: '4px 0 0 0'}}>
+            {
+                !Utils.isNull(props.settings) ?
+                    <div>
+                        <div className={"row"}>
+                            <div className={"col-*-*"} style={{padding: '14px', width: '120px'}}>
+                                <p style={{fontSize: '24px'}}>Dashboard</p>
+                            </div>
+                            <div className={"col-*-*"}>
+                                <UncontrolledDropdown>
+                                    <DropdownToggle
+                                        color="default"
+                                        data-toggle="dropdown"
+                                        nav
+                                    >
+                                        <IconButton
+                                            aria-controls="menu-list-grow"
+                                            aria-haspopup="true"
+                                        >
+                                            <Icon id={'ADD'}/>
+                                        </IconButton>
+                                    </DropdownToggle>{" "}
+                                    {
+                                        !Utils.isNull(menuItems) ?
+                                            <DropdownMenu className="dropdown-navbar" right tag="ul">
+                                                {
+                                                    menuItems.map(item => (
+                                                        <NavLink tag="li">
+                                                            <DropdownItem className="nav-item" onClick={() => {
+                                                                addDashboardCard(item)
+                                                            }}>
+                                                                {item.attributes.label}{" "}
+                                                            </DropdownItem>{" "}
+                                                        </NavLink>
+                                                    ))
+                                                }
+                                            </DropdownMenu>
+                                            :
+                                            null
+                                    }
+                                </UncontrolledDropdown>{" "}
+                            </div>
+                        </div>
+                        <div style={{overflow: 'auto', maxHeight: 'calc(85vh - 4px)', padding: '0 0 64px 0'}}>
+                            {
+                                !Utils.isNull(taskSummary) ?
+                                    <div className={'row'} style={{paddingRight: '16px'}}>
+                                        <WorkFlowCard margin={'0 0 16px 16px'}
+                                                      title={'Assigned to Me'}
+                                                      itemCount={taskSummary.personalWorkItemCount}
+                                                      viewRef={ref}
+                                                      path={'workflow/personal-work-items.json'}
+                                        />
+                                        < WorkFlowCard margin={'0 0 16px 16px'}
+                                                       title={'Available'}
+                                                       itemCount={taskSummary.groupWorkItemCount}
+                                                       path={'workflow/group-work-items.json'}
+                                        />
+                                        <WorkFlowCard margin={'0 0 16px 16px'}
+                                                      title={'Due Today'}
+                                                      itemCount={taskSummary.dueTodayItemCount}
+                                                      path={'workflow/due-today-work-items.json'}
+                                        />
+                                    </div>
+                                    : null
+                            }
+                            {
+                                <div>
+                                    {
+                                        !Utils.isNull(cardRows) ?
+                                            cardRows.map(row => (
+                                                <div className={'row'} style={{margin: '0 0 16px 0'}}>
+                                                    {row.map(userDashboard => (
+                                                            <DashboardCard settings={userDashboard}
+                                                                           index={dashboardCardCounter}
+                                                                           key={dashboardCardCounter++}
+                                                                           onDelete={() => {
+                                                                               setupCardRows(userDashboard);
+                                                                           }}
+                                                            />
+                                                        )
+                                                    )}</div>)) : null
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    : null
+
+            }
+        </div>
+    );
+}));
+
+export default Dashboard;

package/src/lib/view/Settings.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Settings = (props) => {
+    return (
+        <div>
+            Holla Bosss
+        </div>
+    );
+};
+
+export default withRouter(connect(
+    dispatch => bindActionCreators(actionCreators, dispatch)
+)(Settings))