Links

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.
In the Employee module, we create the "home card" to show the birth module in the portal. The employee card contains the following metrics: "Total application", "Inbox", and "Create Birth-registration".

BRCard

In BrCard.js we are reusing the components that are already present in the DIGIT-UI-component. Import the Icon and EmployeeModuleCard.
import { PersonIcon, EmployeeModuleCard } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";
const BRCard = () => {
const ADMIN = Digit.Utils.hrmsAccess();
if (!ADMIN) {
return null;
}
const { t } = useTranslation();
const tenantId = Digit.ULBService.getCurrentTenantId();
const propsForModuleCard = {
Icon : <PersonIcon/>,
moduleName: t("Birth Registration"),
kpis: [
{
// count: isLoading ? "-" : data?.EmployeCount?.totalEmployee,
label: t("TOTAL Application"),
link: `/digit-ui/employee/br/Inbox`
},
],
links: [
{
label: t("Inbox"),
link: `/digit-ui/employee/br/Inbox`
},
{
label: t("Create Birth-Registration"),
link: `/digit-ui/citizen/br/birth`
}
]
}
return <EmployeeModuleCard {...propsForModuleCard} />
};
export default BRCard;
On the "Birth-Registration" card, we will add the Inbox link. Once we open the inbox, we can see the search, filter, create and list of applications.
Inbox.js
import React, { useState, useCallback , useEffect } from "react";
import { useTranslation } from "react-i18next";
import { format, isValid } from "date-fns";
import { Header ,Loader } from "@egovernments/digit-ui-react-components";
import DesktopInbox from "./DesktopInbox";
import axios from 'axios';
const Inbox = ({ tenants, parentRoute }) => {
const { t } = useTranslation()
Digit.SessionStorage.set("ENGAGEMENT_TENANTS", tenants);
const tenantId = Digit.ULBService.getCurrentTenantId();
const [pageSize, setPageSize] = useState(10);
const [pageOffset, setPageOffset] = useState(0);
const [searchParams, setSearchParams] = useState({
eventStatus: [],
range: {
startDate: null,
endDate: new Date(""),
title: ""
},
ulb: tenants?.find(tenant => tenant?.code === tenantId)
});
let isMobile = window.Digit.Utils.browser.isMobile();
const [data, setData] = useState([]);
const {isLoading } = data;
// Using useEffect to call the API once mounted and set the data
useEffect(() => {
(async () => {
const result = await axios("https://62f0e3e5e2bca93cd23f2ada.mockapi.io/birth");
setData(result.data);
console.log("gooo" ,result.data);
})();
}, []);
const getSearchFields = () => {
return [
{
label: t("EVENTS_ULB_LABEL"),
name: "ulb",
type: "ulb",
},
{
label: t("Baby's NAME"),
name: "babyLastName"
}
]
}
const links = [
{
text: t("Create Birth-Registration"),
link: "/digit-ui/citizen/br/birth",
}
]
const onSearch = (params) => {
let updatedParams = { ...params };
if (!params?.ulb) {
updatedParams = { ...params, ulb: { code: tenantId } }
}
setSearchParams({ ...searchParams, ...updatedParams });
}
const handleFilterChange = (data) => {
setSearchParams({ ...searchParams, ...data })
}
const globalSearch = (rows, columnIds) => {
// return rows;
return rows?.filter(row =>
(searchParams?.babyLastName ? row.original?.babyLastName?.toUpperCase().startsWith(searchParams?.babyLastName.toUpperCase()) : true)
) }
const fetchNextPage = useCallback(() => {
setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) + parseInt(pageSize))));
}, [pageSize])
const fetchPrevPage = useCallback(() => {
setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) - parseInt(pageSize))));
}, [pageSize])
const handlePageSizeChange = (e) => {
setPageSize((prevPageSize) => (e.target.value));
};
if (isLoading) {
return (
<Loader />
);
}
return (
<div>
<Header>
{t("Birth-registration")}
</Header>
<p>{}</p>
<DesktopInbox
t={t}
data={data}
links={links}
parentRoute={parentRoute}
searchParams={searchParams}
onSearch={onSearch}
globalSearch={globalSearch}
searchFields={getSearchFields()}
onFilterChange={handleFilterChange}
pageSizeLimit={pageSize}
totalRecords={data?.totalCount}
title={"Birth-registration"}
iconName={"calender"}
currentPage={parseInt(pageOffset / pageSize)}
onNextPage={fetchNextPage}
onPrevPage={fetchPrevPage}
onPageSizeChange={handlePageSizeChange}
/>
</div>
);
}
export default Inbox;

DesktopInbox.js

import React, { useState, useCallback , useEffect } from "react";
import { useTranslation } from "react-i18next";
import { format, isValid } from "date-fns";
import { Header ,Loader } from "@egovernments/digit-ui-react-components";
import DesktopInbox from "./DesktopInbox";
import axios from 'axios';
const Inbox = ({ tenants, parentRoute }) => {
const { t } = useTranslation()
Digit.SessionStorage.set("ENGAGEMENT_TENANTS", tenants);
const tenantId = Digit.ULBService.getCurrentTenantId();
const [pageSize, setPageSize] = useState(10);
const [pageOffset, setPageOffset] = useState(0);
const [searchParams, setSearchParams] = useState({
eventStatus: [],
range: {
startDate: null,
endDate: new Date(""),
title: ""
},
ulb: tenants?.find(tenant => tenant?.code === tenantId)
});
let isMobile = window.Digit.Utils.browser.isMobile();
const [data, setData] = useState([]);
const {isLoading } = data;
// Using useEffect to call the API once mounted and set the data
useEffect(() => {
(async () => {
const result = await axios("https://62f0e3e5e2bca93cd23f2ada.mockapi.io/birth");
setData(result.data);
console.log("gooo" ,result.data);
})();
}, []);
const getSearchFields = () => {
return [
{
label: t("EVENTS_ULB_LABEL"),
name: "ulb",
type: "ulb",
},
{
label: t("Baby's NAME"),
name: "babyLastName"
}
]
}
const links = [
{
text: t("Create Birth-Registration"),
link: "/digit-ui/citizen/br/birth",
}
]
const onSearch = (params) => {
let updatedParams = { ...params };
if (!params?.ulb) {
updatedParams = { ...params, ulb: { code: tenantId } }
}
setSearchParams({ ...searchParams, ...updatedParams });
}
const handleFilterChange = (data) => {
setSearchParams({ ...searchParams, ...data })
}
const globalSearch = (rows, columnIds) => {
// return rows;
return rows?.filter(row =>
(searchParams?.babyLastName ? row.original?.babyLastName?.toUpperCase().startsWith(searchParams?.babyLastName.toUpperCase()) : true)
) }
const fetchNextPage = useCallback(() => {
setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) + parseInt(pageSize))));
}, [pageSize])
const fetchPrevPage = useCallback(() => {
setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) - parseInt(pageSize))));
}, [pageSize])
const handlePageSizeChange = (e) => {
setPageSize((prevPageSize) => (e.target.value));
};
if (isLoading) {
return (
<Loader />
);
}
return (
<div>
<Header>
{t("Birth-registration")}
</Header>
<p>{}</p>
<DesktopInbox
t={t}
data={data}
links={links}
parentRoute={parentRoute}
searchParams={searchParams}
onSearch={onSearch}
globalSearch={globalSearch}
searchFields={getSearchFields()}
onFilterChange={handleFilterChange}
pageSizeLimit={pageSize}
totalRecords={data?.totalCount}
title={"Birth-registration"}
iconName={"calender"}
currentPage={parseInt(pageOffset / pageSize)}
onNextPage={fetchNextPage}
onPrevPage={fetchPrevPage}
onPageSizeChange={handlePageSizeChange}
/>
</div>
);
}
export default Inbox;
This lists the birth registration applications in a table-like format.
We import the Table component already present in our digit-UI-react-component. In the table, we are passing the data, column, global search, onSearch, filter, pagination, pagesize limit, total record, current page, Next page, PreviousPage, pagesizechange.
import React from "react";
import { Table } from "@egovernments/digit-ui-react-components";
const ApplicationTable = ({
t,
data,
columns,
globalSearch,
onSearch,
getCellProps,
pageSizeLimit,
totalRecords,
currentPage,
onNextPage,
onPrevPage,
onPageSizeChange,
}) => {
return (
<Table
t={t}
data={data}
columns={columns}
onSearch={onSearch}
globalSearch={globalSearch}
manualGlobalFilter={true}
manualPagination={true}
pageSizeLimit={pageSizeLimit}
getCellProps={getCellProps}
totalRecords={totalRecords}
currentPage={currentPage}
onNextPage={onNextPage}
onPrevPage={onPrevPage}
onPageSizeChange={onPageSizeChange}
/>
)
}
export default ApplicationTable;
In this file, we will add code to create a "small card with a create link.
import React from "react";
import { Card, DocumentIcon, EventCalendar } from "@egovernments/digit-ui-react-components";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
const EventLink = ({ title = "Birth", links, icon = 'calender' }) => {
const { t } = useTranslation();
const GetLogo = () => (
<div className="header" style={{ justifyContent: "flex-start" }}>
<span className="logo" style={{ backgroundColor: "#fff" }}>
{icon === "calender" ? <EventCalendar /> : icon === "survey" ? 'surveyIcon' : <DocumentIcon />}
</span>
{" "}
<span className="text">{t(title)}</span>
</div>
);
return (
<Card className="employeeCard filter inboxLinks">
<div className="complaint-links-container">
{GetLogo()}
<div className="body">
{links.map(({ link, text, hyperlink = false, accessTo = [] }, index) => {
return (
<span className="link" key={index}>
<Link to={"citizen/br/birth"}>{"create"}</Link>
</span>
);
})}
</div>
</div>
</Card>
)
};
export default EventLink;
We will set up filters by date range here.
import React, { useState } from "react";
import { ActionBar, RemoveableTag, CloseSvg, Loader, DateRange, Localities, ApplyFilterBar, SubmitBar, Dropdown, RefreshIcon } from "@egovernments/digit-ui-react-components";
import { useTranslation } from "react-i18next";
const Filter = ({ type = "desktop", onClose, onSearch, onFilterChange, searchParams }) => {
const { t } = useTranslation();
const [localSearchParams, setLocalSearchParams] = useState(() => ({ ...searchParams }));
const tenantId = Digit.ULBService.getCurrentTenantId();
const state = tenantId?.split('.')[0];
const { isLoading, data } = Digit.Hooks.useCommonMDMS(state, "mseva", ["EventCategories"]);
const clearAll = () => {
setLocalSearchParams({ eventCategory: null, eventStatus: [], range: { startDate: null, endDate: new Date(""), title: "" } })
onFilterChange({ eventCategory: null, eventStatus: [], range: { startDate: null, endDate: new Date(""), title: "" } });
onClose?.();
};
const applyLocalFilters = () => {
onFilterChange(localSearchParams);
onClose?.();
};
const handleChange = (data) => {
setLocalSearchParams({ ...localSearchParams, ...data });
};
const onStatusChange = (e, type) => {
if (e.target.checked) handleChange({ eventStatus: [...(localSearchParams?.eventStatus || []), type] })
else handleChange({ eventStatus: localSearchParams?.eventStatus?.filter(status => status !== type) })
}
if (isLoading) {
return (
<Loader />
);
}
return (
<div className="filter">
<div className="filter-card">
<div className="heading">
<div className="filter-label">{t("ES_COMMON_FILTER_BY")}:</div>
<div className="clearAll" onClick={clearAll}>
{t("ES_COMMON_CLEAR_ALL")}
</div>
{type === "desktop" && (
<span className="clear-search" onClick={clearAll}>
<RefreshIcon />
</span>
)}
{type === "mobile" && (
<span onClick={onClose}>
<CloseSvg />
</span>
)}
</div>
<div className="filter-label">{`${t(`BR `)}`}</div>
<Dropdown option={data?.mseva?.EventCategories} optionKey="code" t={t} selected={localSearchParams?.eventCategory} select={val => handleChange({ eventCategory: val })} />
<DateRange t={t} values={localSearchParams?.range} onFilterChange={handleChange} labelClass="filter-label" />
{/* <div>
<Status onAssignmentChange={onStatusChange} searchParams={localSearchParams} />
</div> */}
<div>
<SubmitBar style={{ width: '100%' }} onSubmit={() => applyLocalFilters()} label={t("ES_COMMON_APPLY")} />
</div>
</div>
</div>
)
}
export default Filter;
import { PrivateRoute } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link, Switch, useLocation , Route } from "react-router-dom";
import Inbox from "./Inbox/Inbox";
import ResponseEmployee from "./ResponseEmployee";
const EmployeeApp = ({ path, url, userType ,tenants, parentRoute }) => {
const { t } = useTranslation();
const BRManageApplication = Digit?.ComponentRegistryService?.getComponent("BRManageApplication");
const RegisterDetails = Digit?.ComponentRegistryService?.getComponent("RegisterDetails");
const Inbox = Digit?.ComponentRegistryService?.getComponent("Inbox");
const ResponseEmployee = Digit?.ComponentRegistryService?.getComponent("ResponseEmployee");
return (
<Switch>
<React.Fragment>
<div className="ground-container">
<PrivateRoute path={`${path}/responseemp`} component={() => <ResponseEmployee/>} />
<PrivateRoute path={`${path}/inbox`} component={props => <Inbox {...props} tenants={tenants} parentRoute={parentRoute} />} />
{/* <PrivateRoute path={`${path}/details`} component={() => <RegisterDetails />} /> */}
<PrivateRoute path={`${path}/myapplication`} component={() => <BRManageApplication />} />
<PrivateRoute path={`${path}/details/:id`} component={(props) => <RegisterDetails {...props} />} />
</div>
</React.Fragment>
</Switch>
);
};
export default EmployeeApp;
This component shows the details of the application.
import { Header, ActionBar, SubmitBar, ExternalLinkIcon, Menu, GenericFileIcon, LinkButton } from '@egovernments/digit-ui-react-components';
import React, { useState , useEffect } from 'react'
import { useTranslation } from 'react-i18next';
import { openDocumentLink, openUploadedDocument } from '../../utils';
import axios from 'axios';
import { useParams } from "react-router-dom";
const RegisterDetails = ({ location, match, history, }) => {
const params = useParams();
const [data, setData] = useState([]);
useEffect(() => {
(async () => {
const result = await axios(`https://62f0e3e5e2bca93cd23f2ada.mockapi.io/birth/${params.id}`);
setData(result.data);
console.log("gooo" ,result.data);
})();
}, [params.id]);
let isMobile = window.Digit.Utils.browser.isMobile();
const { t } = useTranslation();
const [displayMenu, setDisplayMenu] = React.useState(false);
const [showModal, setShowModal] = useState(false);
function onActionSelect(action) {
// setSelectedAction(action);
history.push(`/digit-ui/employee/br/responseemp`)
}
return (
<div>
{/* {showModal ? <Confirmation
t={t}
heading={'CONFIRM_DELETE_DOC'}
docName={details?.name}
closeModal={() => setShowModal(!showModal)}
actionCancelLabel={'CS_COMMON_CANCEL'}
actionCancelOnSubmit={onModalCancel}
actionSaveLabel={'ES_COMMON_Y_DEL'}
actionSaveOnSubmit={onModalSubmit}
/>
: null} */}
<Header>{t(`Birth-Registration Details`)}</Header>
<div className="notice_and_circular_main gap-ten">
<div className="documentDetails_wrapper">
{/* <div className="documentDetails_row_items"><p className="documentDetails_title">{`${t('ULB')}:`}</p> <p>{data?.tenantId}</p> </div> */}
<div className="documentDetails_row_items"><p className="documentDetails_title">{`${t('Babys First NAME')}:`}</p> <p>{data?.babyFirstName}</p> </div>
<div className="documentDetails_row_items"><p className="documentDetails_title">{`${t('Babys Last NAME')}:`}</p> <p>{t(data?.babyLastName)}</p> </div>
<div className="documentDetails_row_items"><p className="documentDetails_title">{`${t('Father NAME')}:`}</p> <p>{t(data?.fatherName)}</p> </div>
<div className="documentDetails_row_items"><p className