Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Commit

Permalink
Merge pull request #936 from egovernments/ISTE-391
Browse files Browse the repository at this point in the history 
ISTE-391: Dropdown Menu Enhancement and Role Display Issue
  • Loading branch information
@debasishchakraborty-egovt
debasishchakraborty-egovt authored Sep 11, 2024
2 parents 2a6dae2 + 992c9c3 commit e5eec50
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 110 deletions.
1 change: 1 addition & 0 deletions frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/dss/useMDMS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const useDssMDMS = (tenantId, moduleCode, type, config) => {
const useDssDashboard = () => {
return useQuery("DSS_DASHBOARD", () => MdmsService.getDssDashboard(tenantId, moduleCode), config);
};

const _default = () => {
return useQuery([tenantId, moduleCode, type], () => MdmsService.getMultipleTypes(tenantId, moduleCode, type), config);
};
Expand Down
124 changes: 92 additions & 32 deletions ...nd/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/SearchUserForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import { Loader, Header, Dropdown, LabelFieldPair, CardLabel, LinkLabel, SubmitB
import React, { useState, useMemo, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Controller, useForm, useWatch } from "react-hook-form";
import MultiSelectDropdown from "./MultiSelectDropdown";
import MultiSelectDropdown from "../components/pageComponents/Multiselect";

const XLSX = require("xlsx");

function filterKeys(data, keys) {
return data.map((item) => {
const filteredItem = {};
Expand Down Expand Up @@ -79,7 +82,7 @@ function buildTree(data, hierarchy) {
return tree;
}

const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles }) => {
const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles, employeeData }) => {
const { t } = useTranslation();
const [showToast, setShowToast] = useState(null);
const [hierarchy, setHierarchy] = useState([
Expand All @@ -92,7 +95,9 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
{ level: "code", value: 7, optionsKey: "name", isMandatory: false },
]);
const [tree, setTree] = useState(null);
const [rolesOptions, setRolesOptions] = useState(null)
const [rolesOptions, setRolesOptions] = useState(null);
const [isShowAllClicked, setIsShowAllClicked] = useState(false);

// const [zones,setZones] = useState([])
// const [circles,setCircles] = useState([])
// const [divisions,setDivisions] = useState([])
Expand Down Expand Up @@ -123,7 +128,7 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
name: "WSServiceRoles",
},
],
}
},
],
},
},
Expand All @@ -150,11 +155,13 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
const filteredResult = filterKeys(result, requiredKeys);
const resultInTree = buildTree(filteredResult, hierarchy);
const excludeCodes = ["HRMS_ADMIN", "LOC_ADMIN", "MDMS_ADMIN", "EMPLOYEE", "SYSTEM"];
setRolesOptions(data?.MdmsRes?.["ws-services-masters"]?.["WSServiceRoles"]?.filter(row => !excludeCodes.includes(row?.code)
&&
(row?.name === "Secretary" || row?.name === "Sarpanch" || row?.name === "Revenue Collector" || row?.name === "DIVISION ADMIN")
))

setRolesOptions(
data?.MdmsRes?.["ws-services-masters"]?.["WSServiceRoles"]?.filter(
(row) =>
!excludeCodes.includes(row?.code) &&
(row?.name === "Secretary" || row?.name === "Sarpanch" || row?.name === "Revenue Collector" || row?.name === "DIVISION ADMIN")
)
);
//updating to state roles as requested
// setRolesOptions([
// // {
Expand Down Expand Up @@ -208,27 +215,27 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
unregister,
} = useForm({
defaultValues: {
"zoneCode": "",
"circleCode": "",
"divisionCode": "",
"subDivisionCode": "",
"sectionCode": "",
"code": "",
"roles": []
zoneCode: "",
circleCode: "",
divisionCode: "",
subDivisionCode: "",
sectionCode: "",
code: "",
roles: [],
},
});

const formData = watch();

const clearSearch = () => {
reset({
"zoneCode": "",
"circleCode": "",
"divisionCode": "",
"subDivisionCode": "",
"sectionCode": "",
"code": "",
"roles": []
zoneCode: "",
circleCode: "",
divisionCode: "",
subDivisionCode: "",
sectionCode: "",
code: "",
roles: [],
});
setUniqueRoles(null);
setUniqueTenants(null);
Expand All @@ -246,6 +253,44 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
// })
};

useEffect(() => {
if (isShowAllClicked && employeeData) {
jsonToExcel(employeeData, "employees.xlsx");
setIsShowAllClicked(false);
}
}, [employeeData]);

function jsonToExcel(employeeData, fileName) {
const employees = employeeData.map((employee) => ({
"User Id": employee.code,
Name: employee.user.name,
"Type of User": employee?.assignments[0]?.department,
Designation: t(employee?.assignments[0]?.designation),
Username: employee?.user?.mobileNumber,
Status: employee?.isActive ? "Active" : "Inactive",
Tenant: t(employee?.tenantId),
}));

try {
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.json_to_sheet(employees);

XLSX.utils.book_append_sheet(wb, ws, "Employees");

XLSX.writeFile(wb, fileName);
} catch (error) {
console.log("Error occurred", error);
}
}

const showAllData = () => {
clearSearch();
setIsShowAllClicked(true);
const listOfUniqueTenants = getUniqueLeafCodes(tree);

setUniqueTenants(() => listOfUniqueTenants);
setUniqueRoles(() => rolesOptions?.filter((row) => row.code)?.map((role) => role.code));
};
const onSubmit = (data) => {
//assuming atleast one hierarchy is entered

Expand Down Expand Up @@ -302,7 +347,7 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
//this is the list of tenants under the current subtree
const listOfUniqueTenants = getUniqueLeafCodes(currentLevel);
setUniqueTenants(() => listOfUniqueTenants);
setUniqueRoles(() => data?.roles?.filter(row => row.code)?.map(role => role.code));
setUniqueRoles(() => data?.roles?.filter((row) => row.code)?.map((role) => role.code));
};

const optionsForHierarchy = (level, value) => {
Expand Down Expand Up @@ -330,8 +375,9 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
const renderHierarchyFields = useMemo(() => {
return hierarchy.map(({ level, optionsKey, isMandatory, ...rest }, idx) => (
<LabelFieldPair>
<CardLabel style={{ marginBottom: "0.4rem" }}>{`${t(Digit.Utils.locale.getTransformedLocale(`HR_SU_${level}`))} ${isMandatory ? "*" : ""
}`}</CardLabel>
<CardLabel style={{ marginBottom: "0.4rem" }}>{`${t(Digit.Utils.locale.getTransformedLocale(`HR_SU_${level}`))} ${
isMandatory ? "*" : ""
}`}</CardLabel>
<Controller
render={(props) => (
<Dropdown
Expand Down Expand Up @@ -365,6 +411,12 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
));
}, [formData]);

useEffect(() => {
rolesOptions?.forEach((option) => {
option.i18text = "ACCESSCONTROL_ROLES_ROLES_" + option?.code;
});
}, [rolesOptions]);

if (isLoading || !setTree) {
return <Loader />;
}
Expand All @@ -384,7 +436,7 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
<div style={{ display: "grid", gridAutoFlow: "row" }}>
<MultiSelectDropdown
options={rolesOptions}
optionsKey={"name"}
optionsKey={"i18text"}
props={props} //these are props from Controller
isPropsNeeded={true}
onSelect={(e) => {
Expand All @@ -394,19 +446,19 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
return row?.[1] ? row[1] : null;
})
.filter((e) => e)
)
);
}}
selected={props?.value || []}
defaultLabel={t("HR_SU_SELECT_ROLES")}
defaultUnit={t("COMMON_ROLES_SELECTED")}
showSelectAll={true}
t={t}
// config={config}
// disable={false}
// optionsDisable={config?.optionsDisable}
// config={config}
// disable={false}
// optionsDisable={config?.optionsDisable}
/>
</div>
)
);
}}
rules={{}}
defaultValue={[]}
Expand All @@ -424,6 +476,14 @@ const SearchUserForm = ({ uniqueTenants, setUniqueTenants, roles, setUniqueRoles
{t("HR_SU_CLEAR_SEARCH")}
</LinkLabel>
<SubmitBar label={t("HR_SU_SEARCH")} submit="submit" disabled={false} />
<LinkLabel
style={{ marginBottom: 0, whiteSpace: "nowrap" }}
onClick={() => {
showAllData();
}}
>
{t("HR_SHOW_ALL_DATA")}
</LinkLabel>
</div>
</div>
</div>
Expand Down
27 changes: 12 additions & 15 deletions ...web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,10 @@ const MultiSelectDropdown = ({
}, [selected?.length]);

function fnToSelectOptionThroughProvidedSelection(selected) {
return selected?.map((e) => (
{
[optionsKey]: e?.i18text? e.i18text : `ACCESSCONTROL_ROLES_ROLES_${e.code}`,
propsData: [null, e]
}
));
return selected?.map((e) => ({
[optionsKey]: e?.i18text ? e.i18text : `ACCESSCONTROL_ROLES_ROLES_${e.code}`,
propsData: [null, e],
}));
}

const [alreadyQueuedSelectedState, dispatch] = useReducer(reducer, selected, fnToSelectOptionThroughProvidedSelection);
Expand All @@ -107,16 +105,15 @@ const MultiSelectDropdown = ({
}
}, [active]);

useEffect(()=>{
if (alreadyQueuedSelectedState?.length === filteredOptions?.length){
if(alreadyQueuedSelectedState?.length != 0 && filteredOptions?.length != 0){
setIsSelected(true)
}
}else{
setIsSelected(false)

useEffect(() => {
if (alreadyQueuedSelectedState?.length === filteredOptions?.length) {
if (alreadyQueuedSelectedState?.length != 0 && filteredOptions?.length != 0) {
setIsSelected(true);
}
} else {
setIsSelected(false);
}
},[alreadyQueuedSelectedState])
}, [alreadyQueuedSelectedState]);

function handleOutsideClickAndSubmitSimultaneously() {
setActive(false);
Expand Down
Loading

0 comments on commit e5eec50

Please sign in to comment.