Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added CustomErrorComponent, RoleBasedEmployeeHome, css enhancement #1407

Merged
merged 5 commits into from
Sep 20, 2024
Merged

Added CustomErrorComponent, RoleBasedEmployeeHome, css enhancement #1407

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac32647
Added CustomErrorComponent, RoleBasedEmployeeHome, css enhancement
NabeelAyubee Sep 19, 2024
b649015
added new localisation module
NabeelAyubee Sep 19, 2024
3e9683f
Merge branch 'develop' into sandbox-enhancement
NabeelAyubee Sep 19, 2024
9e1ea59
upgrade ui component version
NabeelAyubee Sep 19, 2024
5670bc9
Merge branch 'develop' into sandbox-enhancement
nabeelmd-eGov Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@egovernments/digit-ui-module-utilities": "1.0.1-beta.39",
"@egovernments/digit-ui-module-open-payment":"0.0.1",
"@egovernments/digit-ui-module-engagement": "1.5.20",
"@egovernments/digit-ui-components": "0.0.2-beta.31",
"@egovernments/digit-ui-components": "0.0.2-beta.40",
"@egovernments/digit-ui-react-components": "1.8.2-beta.13",
"@egovernments/digit-ui-module-sandbox": "0.0.1",
"http-proxy-middleware": "^1.0.5",
Expand Down
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/example/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css/dist/index.css"/> -->
<!-- <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigs.js"></script> -->
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].32/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].34/dist/index.css" />
<script src="%REACT_APP_GLOBAL%"></script>

</head>
Expand Down
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"dependencies": {
"lodash": "4.17.21",
"microbundle-crl": "0.13.11",
"@egovernments/digit-ui-components": "0.0.2-beta.31",
"@egovernments/digit-ui-components": "0.0.2-beta.40",
"@egovernments/digit-ui-react-components": "1.8.2-beta.13",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-css",
"version": "1.8.2-beta.22",
"version": "1.8.2-beta.24",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <[email protected]>",
Expand Down
25 changes: 24 additions & 1 deletion micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,9 +338,32 @@
}
}
.digit-popup-wrapper.setupMasterPopUp.alert {
.digit-popup-alert-content{
.digit-popup-alert-content {
.digit-popup-alert-heading {
color: #00703c;
}
}
}
.digit-popup-wrapper.setupMasterPopUp.error.alert {
.digit-popup-alert-content {
.digit-popup-alert-heading {
color: #b91800;
}
}
}
.digit-employee-card.customError {
width: 35rem;
}
.customErrorButton {
margin: auto;
}
.digit-employee-card.digit-landing-page-card {
display: flex;
flex-direction: column;
}
.digit-card-header.center {
text-align: center;
}
digit-card-text.center {
text-align: center;
}
3 changes: 2 additions & 1 deletion micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import useUpdateEvent from "./events/useUpdateEvent";
import {
useBulkPdfDetails, useDemandSearch, useFetchBillsForBuissnessService, useFetchCitizenBillsForBuissnessService, useFetchPayment, useGetPaymentRulesForBusinessServices, usePaymentSearch, usePaymentUpdate, useRecieptSearch
} from "./payment";
import { useInitStore } from "./store";
import { useInitStore, useInitTenantConfig } from "./store";
import useAccessControl from "./useAccessControl";
import { useApplicationsForBusinessServiceSearch } from "./useApplicationForBillSearch";
import useClickOutside from "./useClickOutside";
Expand Down Expand Up @@ -167,6 +167,7 @@ const Hooks = {
useGetPaymentRulesForBusinessServices,
useWorkflowDetails,
useInitStore,
useInitTenantConfig,
useClickOutside,
useUserSearch,
useApplicationsForBusinessServiceSearch,
Expand Down
12 changes: 12 additions & 0 deletions micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,15 @@ export const useInitStore = (stateCode, enabledModules,modulePrefix = "rainmaker
);
return { isLoading, error, isError, data };
};

export const useInitTenantConfig = (stateCode, enabledModules) => {
const { isLoading, error, isError, data } = useQuery(
["initTenantConfig", stateCode, enabledModules],
() => StoreService.getTenantConfig(stateCode, enabledModules),
{
staleTime: Infinity,
enabled: Digit.Utils.getMultiRootTenant()
}
);
return { isLoading, error, isError, data };
};
4 changes: 2 additions & 2 deletions micro-ui/web/micro-ui-internals/packages/libraries/src/services/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { useStore, useInitStore } from "../hooks/store";
import { useStore, useInitStore, useInitTenantConfig } from "../hooks/store";

export { useStore, useInitStore };
export { useStore, useInitStore, useInitTenantConfig };
106 changes: 79 additions & 27 deletions micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/Store/service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,49 @@ export const StoreService = {
});
return await Promise.all(allBoundries);
},
getTenantConfig: async (stateCode, enabledModules) => {
const tenantConfigs = await TenantConfigSearch.tenant(stateCode);
const tenantConfigSearch = tenantConfigs?.tenantConfigs?.length > 0 ? tenantConfigs?.tenantConfigs : null;
if (!tenantConfigSearch) {
localStorage.clear();
sessionStorage.clear();
window.location.href = `/${window?.globalPath}/user/invalid-url`;
jagankumar-egov marked this conversation as resolved.
Show resolved Hide resolved
return;
// throw new Error("Invalid URL")
// return;
}
const { MdmsRes } = await MdmsService.init(stateCode);
const stateInfo = MdmsRes["common-masters"]?.StateInfo?.[0] || {};
const uiHomePage = MdmsRes["common-masters"]?.uiHomePage?.[0] || {};
return {
languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
stateInfo: {
code: tenantConfigSearch?.[0]?.code,
name: tenantConfigSearch?.[0]?.name,
logoUrl: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "logoUrl")?.url,
statelogo: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "statelogo")?.url,
logoUrlWhite: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "logoUrlWhite")?.url,
bannerUrl: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "bannerUrl")?.url,
},
localizationModules: stateInfo.localizationModules,
modules:
MdmsRes?.tenant?.citymodule
?.filter((module) => module?.active)
?.filter((module) => enabledModules?.includes(module?.code))
?.sort((x, y) => x?.order - y?.order) || [],
uiHomePage: uiHomePage,
};
},
digitInitData: async (stateCode, enabledModules, modulePrefix) => {
const { MdmsRes } = await MdmsService.init(stateCode);
const stateInfo = MdmsRes["common-masters"]?.StateInfo?.[0] || {};
const uiHomePage = MdmsRes["common-masters"]?.uiHomePage?.[0] || {};
const tenantConfigFetch = Digit.Utils.getMultiRootTenant();
const localities = {};
const revenue_localities = {};
if (tenantConfigFetch) {
const tenantConfig = await StoreService.getTenantConfig(stateCode, enabledModules); // Await the async call
}
Comment on lines +98 to +100
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove redundant call to StoreService.getTenantConfig

The call to StoreService.getTenantConfig on line 99 is redundant because its result is not utilized. Additionally, getTenantConfig is called again inside fetchTenantConfig(), leading to an unnecessary API call.

Apply this diff to remove the redundant call:

-if (tenantConfigFetch) {
-  const tenantConfig = await StoreService.getTenantConfig(stateCode, enabledModules); // Await the async call
-}
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (tenantConfigFetch) {
const tenantConfig = await StoreService.getTenantConfig(stateCode, enabledModules); // Await the async call
}

const fetchTenantConfig = async () => {
const tenantConfigs = await TenantConfigSearch.tenant(stateCode);
const tenantConfigSearch = tenantConfigs?.tenantConfigs ? tenantConfigs?.tenantConfigs : null;
Expand All @@ -78,24 +114,34 @@ export const StoreService = {
bannerUrl: tenantConfigFetch ? tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "bannerUrl")?.url : stateInfo.bannerUrl,
},
localizationModules: stateInfo.localizationModules,
modules: MdmsRes?.tenant?.citymodule?.filter((module) => module?.active)?.filter((module) => enabledModules?.includes(module?.code))?.sort((x,y)=>x?.order-y?.order)|| [],
uiHomePage: uiHomePage
modules:
MdmsRes?.tenant?.citymodule
?.filter((module) => module?.active)
?.filter((module) => enabledModules?.includes(module?.code))
?.sort((x, y) => x?.order - y?.order) || [],
uiHomePage: uiHomePage,
};
};
const initData = tenantConfigFetch ? await fetchTenantConfig() : {
languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
stateInfo: {
code: stateInfo.code,
name: stateInfo.name,
logoUrl: stateInfo.logoUrl,
statelogo: stateInfo.statelogo,
logoUrlWhite: stateInfo.logoUrlWhite,
bannerUrl: stateInfo.bannerUrl,
},
localizationModules: stateInfo.localizationModules,
modules: MdmsRes?.tenant?.citymodule?.filter((module) => module?.active)?.filter((module) => enabledModules?.includes(module?.code))?.sort((x,y)=>x?.order-y?.order)|| [],
uiHomePage: uiHomePage
};
const initData = tenantConfigFetch
? await fetchTenantConfig()
: {
languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
stateInfo: {
code: stateInfo.code,
name: stateInfo.name,
logoUrl: stateInfo.logoUrl,
statelogo: stateInfo.statelogo,
logoUrlWhite: stateInfo.logoUrlWhite,
bannerUrl: stateInfo.bannerUrl,
},
localizationModules: stateInfo.localizationModules,
modules:
MdmsRes?.tenant?.citymodule
?.filter((module) => module?.active)
?.filter((module) => enabledModules?.includes(module?.code))
?.sort((x, y) => x?.order - y?.order) || [],
uiHomePage: uiHomePage,
};
initData.selectedLanguage = Digit.SessionStorage.get("locale") || initData.languages[0].value;

ApiCacheService.saveSetting(MdmsRes["DIGIT-UI"]?.ApiCachingSettings);
Expand All @@ -104,17 +150,15 @@ export const StoreService = {
.map((module) => module.tenants)
.flat()
.reduce((unique, ele) => (unique.find((item) => item.code === ele.code) ? unique : [...unique, ele]), []);
initData.tenants = MdmsRes?.tenant?.tenants
.map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));
// .filter((item) => !!moduleTenants.find((mt) => mt.code === item.code))
// .map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));
initData.tenants = MdmsRes?.tenant?.tenants.map((tenant) => ({
i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`,
...tenant,
}));
// .filter((item) => !!moduleTenants.find((mt) => mt.code === item.code))
// .map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));

await LocalizationService.getLocale({
modules: [
`${modulePrefix}-common`,
`digit-ui`,
`${modulePrefix}-${stateCode.toLowerCase()}`
],
modules: [`${modulePrefix}-common`, `digit-ui`, `${modulePrefix}-${stateCode.toLowerCase()}`],
locale: initData.selectedLanguage,
tenantId: stateCode,
});
Expand All @@ -128,9 +172,17 @@ export const StoreService = {
},
defaultData: async (stateCode, moduleCode, language, modulePrefix) => {
let moduleCodes = [];
if(typeof moduleCode !== "string") moduleCode.forEach(code => { moduleCodes.push(modulePrefix ? `${modulePrefix}-${code.toLowerCase()}` : `${code.toLowerCase()}`) });
if (typeof moduleCode !== "string")
moduleCode.forEach((code) => {
moduleCodes.push(modulePrefix ? `${modulePrefix}-${code.toLowerCase()}` : `${code.toLowerCase()}`);
});
const LocalePromise = LocalizationService.getLocale({
modules: typeof moduleCode == "string" ? modulePrefix ? [`${modulePrefix}-${moduleCode.toLowerCase()}`] : [`${moduleCode.toLowerCase()}`] : moduleCodes,
modules:
typeof moduleCode == "string"
? modulePrefix
? [`${modulePrefix}-${moduleCode.toLowerCase()}`]
: [`${moduleCode.toLowerCase()}`]
: moduleCodes,
Comment on lines +180 to +185
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplify nested ternary operators for better readability

The nested ternary operators in lines 181-185 make the code difficult to read and maintain. Consider refactoring the logic using clearer conditional statements.

Refactored code:

let modulesList;
if (typeof moduleCode === "string") {
  if (modulePrefix) {
    modulesList = [`${modulePrefix}-${moduleCode.toLowerCase()}`];
  } else {
    modulesList = [`${moduleCode.toLowerCase()}`];
  }
} else {
  modulesList = moduleCodes;
}
const LocalePromise = LocalizationService.getLocale({
  modules: modulesList,
  locale: language,
  tenantId: stateCode,
});

This approach improves readability and makes future maintenance easier.

locale: language,
tenantId: stateCode,
});
Expand Down
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/modules/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"prepublish": "yarn build"
},
"dependencies": {
"@egovernments/digit-ui-components": "0.0.2-beta.31",
"@egovernments/digit-ui-components": "0.0.2-beta.40",
"@egovernments/digit-ui-react-components": "1.8.2-beta.13",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
4 changes: 4 additions & 0 deletions micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import EmployeeApp from "./pages/employee";
import SignUp from "./pages/employee/SignUp";
import Otp from "./pages/employee/Otp";
import ViewUrl from "./pages/employee/ViewUrl";
import CustomErrorComponent from "./components/CustomErrorComponent";

export const DigitApp = ({ stateCode, modules, appTenants, logoUrl, initData, defaultLanding = "citizen" }) => {
const history = useHistory();
Expand Down Expand Up @@ -98,6 +99,9 @@ export const DigitAppWrapper = ({ stateCode, modules, appTenants, logoUrl, initD
}
>
<Switch>
<Route exact path={`/${window?.globalPath}/user/invalid-url`}>
<CustomErrorComponent />
</Route>
<Route exact path={`/${window?.globalPath}/user/sign-up`}>
<SignUp stateCode={stateCode} />
</Route>
Expand Down
49 changes: 49 additions & 0 deletions micro-ui/web/micro-ui-internals/packages/modules/core/src/components/CustomErrorComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useHistory } from "react-router-dom";
import Background from "./Background";
import { Button, Card, CardHeader, CardText } from "@egovernments/digit-ui-components";
import Header from "./Header";

const CustomErrorComponent = (props) => {
const { state = {} } = useLocation();
// const module = state?.module;
const { t } = useTranslation();
const stateInfo = props.stateInfo;

const history = useHistory();
const ModuleBasedErrorConfig = {
sandbox: {
imgUrl: `https://s3.ap-south-1.amazonaws.com/egov-qa-assets/error-image.png`,
infoHeader: "WRONG_TENANT_SIGN_UP",
infoMessage: "WRONG_TENANT_SIGN_UP_MESSAGE",
buttonInfo: "WRONG_TENANT_SIGN_UP_BUTTON",
action: () => {
history.push(`/${window.globalPath}/`);
},
},
};
Comment on lines +15 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider making the error handling more generic to improve reusability.

The error handling in the CustomErrorComponent is specific to a "sandbox" module, which might limit its reusability in other parts of the application. Consider making the error handling more generic by allowing the configuration object to be passed as a prop to the component. This way, the component can be reused for different types of errors across the application.

const config = ModuleBasedErrorConfig["sandbox"];

return (
<Background>
<Card className={`digit-employee-card customError`}>
<Header showTenant={false} />
<CardHeader className={"center"}>{t(config.infoHeader)}</CardHeader>
<CardText className={"center"}>{t(config.infoMessage)}</CardText>
<Button
className="customErrorButton"
label={t(config?.buttonInfo)}
variation={"primary"}
isSuffix={true}
onClick={(e) => {
e.preventDefault();
config?.action();
}}
/>
</Card>
</Background>
);
};

export default CustomErrorComponent;
38 changes: 31 additions & 7 deletions ...o-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Fragment } from "react";
import { Loader } from "@egovernments/digit-ui-components";
import { LandingPageCard, Loader } from "@egovernments/digit-ui-components";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { EmployeeModuleCard } from "@egovernments/digit-ui-react-components";
Expand Down Expand Up @@ -48,7 +48,17 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
const queryParamIndex = linkUrl.indexOf("?");
acc[module].links.push({
// link: linkUrl,
link: queryParamIndex === -1 ? linkUrl : linkUrl.substring(0, queryParamIndex),
link: linkUrl,
icon: linkUrl.includes("create")
? "Person"
: linkUrl.includes("inbox")
? "AllInbox"
: linkUrl.includes("search")
? "Search"
: linkUrl.includes("edit")
? "Edit"
: "PhonelinkSetup",
// link: queryParamIndex === -1 ? linkUrl : linkUrl.substring(0, queryParamIndex),
queryParams: queryParamIndex === -1 ? null : linkUrl.substring(queryParamIndex),
label: t(Digit.Utils.locale.getTransformedLocale(`${module}_LINK_${item.displayName}`)),
});
Expand All @@ -63,20 +73,34 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
return "";
}

const children = Object.keys(configEmployeeSideBar)?.map((current, index) => {
const moduleData = configEmployeeSideBar?.[current];
const propsForModuleCard = {
// Icon: moduleData?.icon,
icon: "SupervisorAccount",
moduleName: t(moduleData?.label),
metrics: [],
links: moduleData.links,
};
return <LandingPageCard buttonSize={"medium"} {...propsForModuleCard} />;
});
return (
<>
<div className="employee-app-container digit-home-employee-app">
<div className="ground-container moduleCardWrapper gridModuleWrapper digit-home-moduleCardWrapper">
{Object.keys(configEmployeeSideBar)?.map((current, index) => {
{/* {Object.keys(configEmployeeSideBar)?.map((current, index) => {
const moduleData = configEmployeeSideBar?.[current];
const propsForModuleCard = {
Icon: moduleData?.icon,
// Icon: moduleData?.icon,
icon: "SupervisorAccount",
moduleName: t(moduleData?.label),
kpis: [],
metrics: [],
links: moduleData.links,
};
return <EmployeeModuleCard {...propsForModuleCard} />;
})}
return <LandingPageCard buttonSize={"medium"} {...propsForModuleCard} />;
// return <EmployeeModuleCard {...propsForModuleCard} />;
})} */}
{React.Children.map(children, (child) => React.cloneElement(child))}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a key property to the elements in the iterable.

When rendering elements in an iterable using React.Children.map, it is recommended to provide a unique key property to each element. The key helps React efficiently update and reorder the list if needed.

Apply this diff to add a key property to the elements:

-{React.Children.map(children, (child) => React.cloneElement(child))}
+{React.Children.map(children, (child, index) => React.cloneElement(child, { key: index }))}
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{React.Children.map(children, (child) => React.cloneElement(child))}
{React.Children.map(children, (child, index) => React.cloneElement(child, { key: index }))}

</div>
</div>
</>
Expand Down
Loading