From ecce3f89dff9bb85a91b653b69b43bcc6d1680f9 Mon Sep 17 00:00:00 2001 From: aaradhya-egov <137176709+aaradhya-egov@users.noreply.github.com> Date: Fri, 20 Sep 2024 15:45:13 +0530 Subject: [PATCH] Side component (#1410) * sidebar component * fix * css * Update Config.js * pr fix (#1412) Co-authored-by: aaradhya-egov * added util * fix --------- Co-authored-by: nabeelmd-eGov --- .../micro-ui-internals/packages/css/README.md | 1 + .../packages/css/package.json | 2 +- .../css/src/pages/employee/sandbox.scss | 43 ++++++++++ .../packages/libraries/src/utils/index.js | 28 ++++++- .../modules/core/src/components/Home.js | 27 ++++--- .../src/pages/employee/QuickStart/Config.js | 80 +++++++++++++++++++ .../src/pages/employee/QuickStart/index.js | 36 +++++++++ micro-ui/web/public/index.html | 2 +- 8 files changed, 204 insertions(+), 15 deletions(-) create mode 100644 micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/Config.js create mode 100644 micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/index.js diff --git a/micro-ui/web/micro-ui-internals/packages/css/README.md b/micro-ui/web/micro-ui-internals/packages/css/README.md index 853a46bddb5..5060139e737 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/README.md +++ b/micro-ui/web/micro-ui-internals/packages/css/README.md @@ -43,6 +43,7 @@ frontend/micro-ui/web/public/index.html 1.8.2-beta.24: added css for custom error component 1.8.2-beta.23: fixed css in pgr citizen complaint detail page +1.8.2-beta.24 added css for the side component ### Summary for Version [1.8.2-beta.1] - 2024-06-05 diff --git a/micro-ui/web/micro-ui-internals/packages/css/package.json b/micro-ui/web/micro-ui-internals/packages/css/package.json index f067161eb8f..b6ef41dc0e2 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/package.json +++ b/micro-ui/web/micro-ui-internals/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-beta.24", + "version": "1.8.2-beta.25", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss index b43418dca12..ede8f965759 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss +++ b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss @@ -408,6 +408,49 @@ digit-card-text.center { } } +.homeWrapper{ + display: flex; + justify-content: space-between; /* Ensure spacing between the two components */ + align-items: flex-start; +} + +.homeWrapper > :first-child { + flex-grow: 1; /* Makes the first child (RoleBasedEmployeeHome) take up remaining space */ + margin-right: 1rem; /* Optional: Add some spacing between the components */ +} + +.homeWrapper > :last-child { + width: 20.688rem; /* Fixed width for QuickSetupConfigComponent */ + flex-shrink: 0; /* Prevents it from shrinking */ + margin-left: auto; /* Aligns the component to the right end */ +} + +.homeWrapper{ + .digit-employee-card{ + .digit-card-header{ + color: #0b4b66 !important; + font-size: 1.87rem !important; + text-align: center; + font-weight: 700; + } + } +} + +.homeWrapper{ + .digit-employee-card{ + .digit-card-text{ + font-size: 1rem !important; + font-weight: 700; + } + } +} +.quickLink{ + color: #c84c0e; + text-decoration: none; + font-weight: 700; + font-size: 1.5rem; +} + .overlay { position: fixed; top: 0; diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/utils/index.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/utils/index.js index 879c71c24b8..575e2b90df1 100644 --- a/micro-ui/web/micro-ui-internals/packages/libraries/src/utils/index.js +++ b/micro-ui/web/micro-ui-internals/packages/libraries/src/utils/index.js @@ -124,7 +124,10 @@ const getStaticMapUrl = (latitude, longitude) => { const getLocaleRegion = () => { return window?.globalConfigs?.getConfig("LOCALE_REGION") || "IN"; }; - +const isContextPathMissing = (url) => { + const contextPath = window?.contextPath || ''; + return url?.indexOf(`/${contextPath}`) === -1; +} const getMultiRootTenant = () => { return window?.globalConfigs?.getConfig("MULTI_ROOT_TENANT") || false; }; @@ -358,6 +361,25 @@ const swAccess = () => { return SW_ACCESS?.length > 0; }; +const transformURL = (url = "", tenantId) => { + const DIGIT_UI_CONTEXTS = ["digit-ui", "works-ui", "workbench-ui", "health-ui", "sanitation-ui", "core-ui", "mgramseva-web", "sandbox-ui"]; + if (url == "/") { + return; + } + if (Digit.Utils.isContextPathMissing(url)) { + let updatedUrl = null; + if (getMultiRootTenant) { + url = url.replace("/sandbox-ui/employee", `/sandbox-ui/${tenantId}/employee`); + updatedUrl = url; + } else { + updatedUrl = DIGIT_UI_CONTEXTS?.every((e) => url?.indexOf(`/${e}`) === -1) ? "/employee/" + url : url; + } + return updatedUrl; + } else { + return url; + } +}; + /* to get the MDMS config module name */ const getConfigModuleName = () => { return window?.globalConfigs?.getConfig("UICONFIG_MODULENAME") || "commonUiConfig"; @@ -407,9 +429,11 @@ export default { getLocaleDefault, getLocaleRegion, getMultiRootTenant, + isContextPathMissing, getGlobalContext, getOTPBasedLogin, getRoleBasedHomeCard, sandboxAccess, - iconRender + iconRender, + transformURL }; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js index b023058f5fb..bdd9d0d916c 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js @@ -9,6 +9,7 @@ import { BackLink, CustomSVG } from "@egovernments/digit-ui-components"; import React, { Fragment } from "react"; import { useTranslation } from "react-i18next"; import { RoleBasedEmployeeHome } from "./RoleBasedEmployeeHome"; +import QuickSetupConfigComponent from "../pages/employee/QuickStart/Config"; /* Feature :: Citizen All service screen cards @@ -22,7 +23,7 @@ export const processLinkData = (newData, code, t) => { } link.link = link["navigationURL"]; link.i18nKey = t(link["name"]); - + }); } const newObj = { @@ -92,7 +93,7 @@ const CitizenHome = ({ if (isLoading) { return ; } - + return (
@@ -121,14 +122,14 @@ const CitizenHome = ({ Info={ code === "OBPS" ? () => ( - - ) + + ) : null } isInfo={code === "OBPS" ? true : false} @@ -191,8 +192,12 @@ export const AppHome = ({ /> ); } + const isSuperUserWithMultipleRootTenant = Digit.UserService.hasAccess("SUPERUSER") && Digit.Utils.getMultiRootTenant() return Digit.Utils.getRoleBasedHomeCard() ? ( - +
+ + {isSuperUserWithMultipleRootTenant && } +
) : ( ); diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/Config.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/Config.js new file mode 100644 index 00000000000..7054c075f11 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/Config.js @@ -0,0 +1,80 @@ +import React, { Fragment, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { CardText, CardLabelError, Toast, CardLabel, Card, CardHeader, LinkLabel,Loader } from "@egovernments/digit-ui-components"; +import QuickSetupComponent from "."; + +const QuickSetupConfigComponent = ({ onSelect, formData, control, formState, ...props }) => { + const { t } = useTranslation(); + const { isLoading, data } = Digit.Hooks.useAccessControl(); + const isMultiRootTenant = Digit.Utils.getMultiRootTenant(); + const tenantId = Digit.ULBService.getStateId(); + + // const transformURL = (url = "") => { + // if (url == "/") { + // return; + // } + // if (Digit.Utils.isContextPathMissing(url)) { + // let updatedUrl = null; + // if (isMultiRootTenant) { + // url = url.replace("/sandbox-ui/employee", `/sandbox-ui/${tenantId}/employee`); + // updatedUrl = url; + // } else { + // updatedUrl = DIGIT_UI_CONTEXTS?.every((e) => url?.indexOf(`/${e}`) === -1) ? "/employee/" + url : url; + // } + // return updatedUrl; + // } else { + // return url; + // } + // }; + + const configEmployeeSideBar = data?.actions + .filter((e) => e.url === "card" && e.parentModule) + .reduce((acc, item) => { + const module = item.parentModule; + if (!acc[module]) { + acc[module] = { + module: module, + label: Digit.Utils.locale.getTransformedLocale(`${module}_CARD_HEADER`), + links: [], + }; + } + const linkUrl = Digit.Utils.transformURL(item.navigationURL,tenantId); + const queryParamIndex = linkUrl.indexOf("?"); + acc[module].links.push({ + link: queryParamIndex === -1 ? linkUrl : linkUrl.substring(0, queryParamIndex), + label: t(Digit.Utils.locale.getTransformedLocale(`${module}_LINK_${item.displayName}`)), + queryParams: queryParamIndex === -1 ? null : linkUrl.substring(queryParamIndex), + description: t(Digit.Utils.locale.getTransformedLocale(`${module}_LINK_${item.displayName}_DESCRIPTION`)), + }); + return acc; + }, {}); + + if (!configEmployeeSideBar) { + return ""; + } + const QuickSetupConfig = [ + { + sectionHeader:"WELCOME_TO_SANDBOX", + sections:[ + { + label:"SANDBOX_DESCRIPTION_1" + }, + { + label:"SANDBOX_DESCRIPTION_2" + }, + { + label:"SANDBOX_DESCRIPTION_3" + } + ] + }, + { + sectionHeader:"QUICK_SETUP", + links:configEmployeeSideBar + } + ]; + return ( + + ); +}; + +export default QuickSetupConfigComponent; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/index.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/index.js new file mode 100644 index 00000000000..8d7e093e22c --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/QuickStart/index.js @@ -0,0 +1,36 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { CardText, Card, CardHeader, LinkLabel } from "@egovernments/digit-ui-components"; +import { Link } from "react-router-dom"; + +const QuickSetupComponent = ({ config }) => { + const { t } = useTranslation(); + + return ( + + {config.map((section, sectionIndex) => ( + + {t(section.sectionHeader)} + {section.sections && section.sections.map((item, itemIndex) => ( + {t(item.label)} + ))} + {section.links && Object.values(section.links).map((linkGroup, linkIndex) => ( +
+ {t(linkGroup.description)} + {linkGroup.links.map((link, linkItemIndex) => ( +
+ + {t(link.label)} + + {t(link.description)} +
+ ))} +
+ ))} + + ))} + + ); +}; + +export default QuickSetupComponent; diff --git a/micro-ui/web/public/index.html b/micro-ui/web/public/index.html index ccee92be749..e24770cf6db 100644 --- a/micro-ui/web/public/index.html +++ b/micro-ui/web/public/index.html @@ -7,7 +7,7 @@ - +