Added Dummy Loader and Module Card enhance (#1483)

* added module card desc * added local * added * css update * css citizen fixes * css color code fixes. workbench Issue fixes * fixes * FIXES * FIXES * add dummy install loader / and module card enhance * css upgrad --------- Co-authored-by: NabeelAyubee <[email protected]>
egovernments · Oct 9, 2024 · ca944df · ca944df
1 parent 3bb9055
commit ca944df
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 45 deletions.
diff --git 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.38",
+ "version": "1.8.2-beta.39",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

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
@@ -654,3 +654,91 @@ digit-card-text.center {
  align-items: baseline !important;
  }
 }
+
+.sandbox-loader {
+ width: 50px;
+ aspect-ratio: 1;
+ display: grid;
+ border-radius: 50%;
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 30%, transparent 0 70%, rgba(0, 0, 0, 1) 0) 50% / 8% 100%,
+ linear-gradient(90deg, rgba(0, 0, 0, 0.25) 30%, transparent 0 70%, rgba(0, 0, 0, 0.75) 0) 50% / 100% 8%;
+ background-repeat: no-repeat;
+ animation: l23 1s infinite steps(12);
+}
+.sandbox-loader::before,
+.sandbox-loader::after {
+ content: "";
+ grid-area: 1/1;
+ border-radius: 50%;
+ background: inherit;
+ opacity: 0.915;
+ transform: rotate(30deg);
+}
+.sandbox-loader::after {
+ opacity: 0.83;
+ transform: rotate(60deg);
+}
+@keyframes l23 {
+ 100% {
+ transform: rotate(1turn);
+ }
+}
+
+.sandbox-loader-screen {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ background-color: #f5f5f5;
+ font-family: Arial, sans-serif;
+}
+
+.sandbox-installation-steps {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ margin-top: 5rem;
+}
+
+.sandbox-installation-steps li {
+ font-size: 18px;
+ margin: 10px 0;
+ color: #888;
+}
+
+.sandbox-installation-steps .sandbox-completed {
+ color: #2ecc71;
+}
+
+.sandbox-checkmark {
+ color: #2ecc71;
+ margin-right: 8px;
+}
+.sandbox-step {
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ transform: translateX(-100px); /* Slide in from left */
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ margin-bottom: 10px;
+}
+
+.sandbox-step.sandbox-visible {
+ opacity: 1;
+ transform: translateX(0); /* Slide to normal position */
+}
+
+.sandbox-step .sandbox-step-text {
+ margin-right: 10px; /* Space between text and tick */
+ width: 25rem;
+}
+
+.sandbox-step svg {
+ opacity: 0;
+ transition: opacity 0.3s ease 0.3s; /* Fade in tick mark after a short delay */
+}
+
+.sandbox-step.sandbox-visible svg {
+ opacity: 1;
+}
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js
@@ -6,6 +6,7 @@ import SignUp from "./pages/employee/SignUp";
 import Otp from "./pages/employee/Otp";
 import ViewUrl from "./pages/employee/ViewUrl";
 import CustomErrorComponent from "./components/CustomErrorComponent";
+import DummyLoaderScreen from "./components/DummyLoader";
 
 export const DigitApp = ({ stateCode, modules, appTenants, logoUrl, initData, defaultLanding = "citizen" }) => {
  const history = useHistory();
@@ -112,6 +113,9 @@ export const DigitAppWrapper = ({ stateCode, modules, appTenants, logoUrl, initD
  <Route exact path={`/${window?.globalPath}/user/otp`}>
  <Otp />
  </Route>
+ <Route exact path={`/${window?.globalPath}/user/setup`}>
+ <DummyLoaderScreen />
+ </Route>
  <Route exact path={`/${window?.globalPath}/user/url`}>
  <ViewUrl />
  </Route>

diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/DummyLoader.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/DummyLoader.js
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { CheckCircle } from "@egovernments/digit-ui-svg-components";
+import { useHistory, useLocation } from "react-router-dom";
+
+const DummyLoaderScreen = () => {
+ const [currentStep, setCurrentStep] = useState(0);
+ const history = useHistory();
+ const location = useLocation();
+ const { tenant } = location.state || {};
+ const steps = [
+ "SANDBOX_GUIDE_SETUP_ACCOUNT",
+ "SANDBOX_GUIDE_DEFAULT_MASTER_DATA",
+ "SANDBOX_GUIDE_CONFIGURING_COMPLAINTS",
+ "SANDBOX_GUIDE_CONFIGURING_EMPLOYEE_MANAGEMENT",
+ "SANDBOX_GUIDE_SETTING_UP_CITIZEN_PORTAL",
+ "SANDBOX_GUIDE_SETTING_UP_EMPLOYEE_PORTAL",
+ "SANDBOX_GUIDE_LOADING_CONFIGURATION_INTERFACE",
+ "SANDBOX_GUIDE_CREATING_DASHBOARD",
+ "SANDBOX_GUIDE_ALL_SETUP_DONE",
+ ];
+ useEffect(() => {
+ const stepInterval = setInterval(() => {
+ if (currentStep < steps.length) {
+ setCurrentStep((prev) => prev + 1);
+ }
+ }, 1000); // 1 second delay for each step
+
+ if (currentStep === steps.length) {
+ clearInterval(stepInterval); // Clear the interval to stop further updates
+ const navigateTimeout = setTimeout(() => {
+ history.push({
+ pathname: `/${window?.globalPath}/user/url`,
+ state: { tenant: tenant },
+ });
+ }, 1000);
+
+ return () => clearTimeout(navigateTimeout); // Cleanup timeout
+ }
+
+ return () => {
+ clearInterval(stepInterval);
+ };
+ }, [currentStep]);
+
+ return (
+ <div className="sandbox-loader-screen">
+ <div className="sandbox-loader"></div>
+ <ul className="sandbox-installation-steps">
+ {steps.map((step, index) => (
+ <li key={index} className={`sandbox-step ${index < currentStep ? "sandbox-visible" : ""}`}>
+ <span className="sandbox-step-text">{step}</span>
+ {index < currentStep && <CheckCircle fill="#00703C" />}
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+};
+
+export default DummyLoaderScreen;
diff --git a/...o-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js b/...o-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState , useEffect} from "react";
+import React, { Fragment, useState, useEffect } from "react";
 import { LandingPageCard, Loader } from "@egovernments/digit-ui-components";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -12,9 +12,8 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
  const { t } = useTranslation();
  const history = useHistory();
  const tenantId = Digit.ULBService.getStateId();
- let sortedConfigEmployeesSidebar= null;
- const [mdmsOrderData, setMdmsOrderData]= useState([{}]);
-
+ let sortedConfigEmployeesSidebar = null;
+ const [mdmsOrderData, setMdmsOrderData] = useState([{}]);
 
  const { data: MdmsRes } = Digit.Hooks.useCustomMDMS(
  tenantId,
@@ -31,9 +30,8 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
  }
  );
 
-
  useEffect(() => {
-  setMdmsOrderData(MdmsRes);
+ setMdmsOrderData(MdmsRes);
  }, [MdmsRes]);
 
  const transformURL = (url = "") => {
@@ -84,7 +82,7 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
  // 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}`)),
- displayName: item.displayName
+ displayName: item.displayName,
  });
  return acc;
  }, {});
@@ -102,74 +100,70 @@ export const RoleBasedEmployeeHome = ({ modules, additionalComponent }) => {
  const sortedModules = Object.keys(configEmployeeSideBar)
  .sort((a, b) => {
  // Find the card order in mdmsOrderData based on module names (HRMS, PGR, etc.)
- const cardOrderA = mdmsOrderData?.find(item => item.moduleType === "card" && item.name === a)?.order || null;
- const cardOrderB = mdmsOrderData?.find(item => item.moduleType === "card" && item.name === b)?.order || null;
+ const cardOrderA = mdmsOrderData?.find((item) => item.moduleType === "card" && item.name === a)?.order || null;
+ const cardOrderB = mdmsOrderData?.find((item) => item.moduleType === "card" && item.name === b)?.order || null;
  return cardOrderA - cardOrderB;
  })
  .reduce((acc, module) => {
  // Sort links based on the order in MdmsRes
  const sortedLinks = configEmployeeSideBar?.[module]?.links?.sort((linkA, linkB) => {
  const labelA = linkA?.displayName;
  const labelB = linkB?.displayName;
- 
+
  // Find the order for links inside the module
- const orderA = mdmsOrderData?.find(item => item.moduleType === "link" && item.name === `${module}.${labelA.replace(/\s+/g, '_')}`)?.order || null;
- const orderB = mdmsOrderData?.find(item => item.moduleType === "link" && item.name === `${module}.${labelB.replace(/\s+/g, '_')}`)?.order || null;
-
+ const orderA =
+ mdmsOrderData?.find((item) => item.moduleType === "link" && item.name === `${module}.${labelA.replace(/\s+/g, "_")}`)?.order || null;
+ const orderB =
+ mdmsOrderData?.find((item) => item.moduleType === "link" && item.name === `${module}.${labelB.replace(/\s+/g, "_")}`)?.order || null;
+
  return orderA - orderB;
  });
- 
+
  acc[module] = {
  ...configEmployeeSideBar[module],
  links: sortedLinks,
  };
- 
+
  return acc;
  }, {});
- 
+
  return sortedModules;
  };
 
- if(isMultiRootTenant){
- sortedConfigEmployeesSidebar= sortCardAndLink(configEmployeeSideBar);
- }
- else{
+ if (isMultiRootTenant) {
+ sortedConfigEmployeesSidebar = sortCardAndLink(configEmployeeSideBar);
+ } else {
  sortedConfigEmployeesSidebar = configEmployeeSideBar;
  }
 
  const children = Object.keys(sortedConfigEmployeesSidebar)?.map((current, index) => {
  const moduleData = sortedConfigEmployeesSidebar?.[current];
+ const configureData = moduleData?.links?.find((item) => item?.label === "Configure");
  const propsForModuleCard = {
- // Icon: moduleData?.icon,
  icon: "SupervisorAccount",
  moduleName: t(moduleData?.label),
  metrics: [],
- links: moduleData.links,
- centreChildren:[
- <div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>
- ] 
+ links: Digit.Utils.getMultiRootTenant() ? moduleData.links?.filter((item) => item.label !== "Configure") : moduleData.links,
+ centreChildren: [<div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>],
+ endChildren: Digit.Utils.getMultiRootTenant()
+ ? [
+ <Button
+ variation="teritiary"
+ label={configureData?.label}
+ icon={configureData?.icon}
+ type="button"
+ size={"medium"}
+ onClick={() => history?.push(configureData?.link)}
+ style={{ padding: "0px" }}
+ />,
+ ]
+ : null,
  };
  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) => {
- 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 <EmployeeModuleCard {...propsForModuleCard} />;
- })} */}
- {React.Children.map(children, (child) => React.cloneElement(child))}
- </div>
- </div>
+ <LandingPageWrapper>{React.Children.map(children, (child) => React.cloneElement(child))}</LandingPageWrapper>
  </>
  );
 };
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Otp/index.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Otp/index.js
@@ -76,7 +76,7 @@ const Otp = ({ isLogin = false }) => {
  if (user?.info?.roles?.length > 0) user.info.roles = filteredRoles;
  Digit.UserService.setUser(user);
  setEmployeeDetail(user?.info, user?.access_token);
- let redirectPath = `/${window?.globalPath}/user/url`;
+ let redirectPath = `/${window?.globalPath}/user/setup`;
  let redirectPathOtpLogin = `/${window?.contextPath}/employee/user/landing`;
 
  if (isLogin) {

diff --git a/micro-ui/web/public/index.html b/micro-ui/web/public/index.html
@@ -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].38/dist/index.css" />
+ <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].39/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" />