Skip to content

Commit

Permalink
Side component (#1410)
Browse files Browse the repository at this point in the history
* sidebar component

* fix

* css

* Update Config.js

* pr fix (#1412)

Co-authored-by: aaradhya-egov <[email protected]>

* added util

* fix

---------

Co-authored-by: nabeelmd-eGov <[email protected]>
  • Loading branch information
aaradhya-egov and nabeelmd-eGov authored Sep 20, 2024
1 parent 78eecd1 commit ecce3f8
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 15 deletions.
1 change: 1 addition & 0 deletions micro-ui/web/micro-ui-internals/packages/css/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/css/package.json
Original file line number Diff line number Diff line change
@@ -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 <[email protected]>",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -407,9 +429,11 @@ export default {
getLocaleDefault,
getLocaleRegion,
getMultiRootTenant,
isContextPathMissing,
getGlobalContext,
getOTPBasedLogin,
getRoleBasedHomeCard,
sandboxAccess,
iconRender
iconRender,
transformURL
};
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -22,7 +23,7 @@ export const processLinkData = (newData, code, t) => {
}
link.link = link["navigationURL"];
link.i18nKey = t(link["name"]);

});
}
const newObj = {
Expand Down Expand Up @@ -92,7 +93,7 @@ const CitizenHome = ({
if (isLoading) {
return <Loader />;
}

return (
<React.Fragment>
<div className="citizen-all-services-wrapper">
Expand Down Expand Up @@ -121,14 +122,14 @@ const CitizenHome = ({
Info={
code === "OBPS"
? () => (
<CitizenInfoLabel
style={{ margin: "0px", padding: "10px" }}
info={t("CS_FILE_APPLICATION_INFO_LABEL")}
text={t(
`BPA_CITIZEN_HOME_STAKEHOLDER_INCLUDES_INFO_LABEL`
)}
/>
)
<CitizenInfoLabel
style={{ margin: "0px", padding: "10px" }}
info={t("CS_FILE_APPLICATION_INFO_LABEL")}
text={t(
`BPA_CITIZEN_HOME_STAKEHOLDER_INCLUDES_INFO_LABEL`
)}
/>
)
: null
}
isInfo={code === "OBPS" ? true : false}
Expand Down Expand Up @@ -191,8 +192,12 @@ export const AppHome = ({
/>
);
}
const isSuperUserWithMultipleRootTenant = Digit.UserService.hasAccess("SUPERUSER") && Digit.Utils.getMultiRootTenant()
return Digit.Utils.getRoleBasedHomeCard() ? (
<RoleBasedEmployeeHome modules={modules} additionalComponent={additionalComponent} />
<div className={isSuperUserWithMultipleRootTenant ? "homeWrapper" : ""}>
<RoleBasedEmployeeHome modules={modules} additionalComponent={additionalComponent} />
{isSuperUserWithMultipleRootTenant && <QuickSetupConfigComponent />}
</div>
) : (
<EmployeeHome modules={modules} additionalComponent={additionalComponent} />
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
<QuickSetupComponent config={QuickSetupConfig}></QuickSetupComponent>
);
};

export default QuickSetupConfigComponent;
Original file line number Diff line number Diff line change
@@ -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 (
<Card>
{config.map((section, sectionIndex) => (
<React.Fragment key={sectionIndex}>
<CardHeader>{t(section.sectionHeader)}</CardHeader>
{section.sections && section.sections.map((item, itemIndex) => (
<CardText key={itemIndex}>{t(item.label)}</CardText>
))}
{section.links && Object.values(section.links).map((linkGroup, linkIndex) => (
<div key={linkIndex}>
<CardText>{t(linkGroup.description)}</CardText>
{linkGroup.links.map((link, linkItemIndex) => (
<div key={linkItemIndex}>
<Link to={{ pathname: link.link, search: link.queryParams }} className="quickLink">
{t(link.label)}
</Link>
<CardText>{t(link.description)}</CardText>
</div>
))}
</div>
))}
</React.Fragment>
))}
</Card>
);
};

export default QuickSetupComponent;
2 changes: 1 addition & 1 deletion micro-ui/web/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].24/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].25/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#00bcd1" />
Expand Down

0 comments on commit ecce3f8

Please sign in to comment.