Write Employee Module Code

Before starting with Employee Module Code, make sure you have set up the Project Structure, installed dependencies and imported the required components.

This section will walk you through the code that needs to be developed for the application. Detailed user screen wireframes should be available at this point for development.

Employee Module Card

In the Employee module, we create the "Sample card" to show the Create Application form.

SampleCard

In SampleCard.js we are reusing the components that are already present in the DIGIT-UI-component. Import the Icon and EmployeeModuleCard.

import { HRIcon, EmployeeModuleCard, AttendanceIcon, PropertyHouse } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";

const SampleCard = () => {
 
  const { t } = useTranslation();

  const propsForModuleCard = {
    Icon: <PropertyHouse />,
    moduleName: t("Sample"),
    kpis: [

    ],
    links: [
   
     
      {
        label: t("Inbox"),
        link: `/${window?.contextPath}/employee/sample/inbox`,

      },
      {
        label: t("Create Individual"),
        link: `/${window?.contextPath}/employee/sample/create-individual`,

      },
    ],
  };

  return <EmployeeModuleCard {...propsForModuleCard} />;
};

export default SampleCard;

Set Up Routes

Routing in a application is essential for navigation and managing different views or pages based on the URL.

Create the index.js under the following path: micro-ui-internals/packages/modules/sample/src/pages/employee/index.js In index.js, we will add the private route and we mention the path and component name which component we need to show or render when we hit that route. <PrivateRoute path={${path}/sample-create} component={() => } /> <PrivateRoute path={${path}/inbox} component={() => } /> Reference for routing and index.js file is given below:

Index.js

Registering All Components & Modules

module.js is the entry point where we can register all components and modules.

Create module.js under the following path:

micro-ui-internals/packages/modules/sample/src/Module.js

import { Loader} from "@egovernments/digit-ui-react-components";
import React from "react";
import { useRouteMatch } from "react-router-dom";
import { default as EmployeeApp } from "./pages/employee";
import SampleCard from "./components/SampleCard";

export const SampleModule = ({ stateCode, userType, tenants }) => {
 
  const { path, url } = useRouteMatch();
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const moduleCode = ["sample", "common","workflow"];
  const language = Digit.StoreData.getCurrentLanguage();
  const { isLoading, data: store } = Digit.Services.useStore({
    stateCode,
    moduleCode,
    language,
  });

  if (isLoading) {
    return <Loader />;
  }
  return <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants} />;
};

const componentsToRegister = {
  SampleModule,
  SampleCard
};
export const initSampleComponents = () => {
  Object.entries(componentsToRegister).forEach(([key, value]) => {
    Digit.ComponentRegistryService.setComponent(key, value);
  });
};

After registering all components, links and module code we need to enable it in two places:

1) In app.js we import the SampleModule, initSampleComponents, and and enable the Sample module. Add App.js file under the following path: micro-ui/web/src/App.js

const enabledModules = [
  "sample"
];

const moduleReducers = (initData) => ({
  initData,
});

const initDigitUI = () => {
  window.Digit.ComponentRegistryService.setupRegistry({});
  window.Digit.Customizations = {
    PGR: {},
    commonUiConfig: UICustomizations,
  };
  initSampleComponents();

};

initLibraries().then(() => {
  initDigitUI();
});

Reference for the App.js file is given below: App.js 2) In index.js, we will import the SampleModule, initSampleComponents, and enable the Sample module. create the index.js file under the following path: micro-ui-internals/example/src/index.js

 const enabledModules = [
  "Sample"
];

const initDigitUI = () => {
  window.contextPath = window?.globalConfigs?.getConfig("CONTEXT_PATH") || "digit-ui";
  window.Digit.Customizations = {
    commonUiConfig: UICustomizations
  };
  initSampleComponents();

Reference for the Index.js file is given below: Index.js

__All content on this website by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.