From 7fa3804503af5ba7388a291784c718e88a37c3a6 Mon Sep 17 00:00:00 2001 From: rakesh-wt-egov <73687298+rakesh-wt-egov@users.noreply.github.com> Date: Thu, 19 Oct 2023 14:08:26 +0530 Subject: [PATCH] Fixed HRMS UI issues --- .../components/pageComponents/Multiselect.js | 276 +++++++++++++++--- .../components/pageComponents/jurisdiction.js | 18 +- 2 files changed, 239 insertions(+), 55 deletions(-) diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js index 43c2fe704..5f1fffa09 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js @@ -1,85 +1,269 @@ -import React, { useRef, useState } from "react"; -import { ArrowDown, CheckSvg } from "@egovernments/digit-ui-react-components"; +import React, { useEffect, useReducer, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; -const MultiSelect = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "",BlockNumber=1,isOBPSMultiple=false}) => { +const MultiSelectDropdown = ({ + options, + optionsKey, + selected = [], + onSelect, + defaultLabel = "", + defaultUnit = "", + BlockNumber = 1, + isOBPSMultiple = false, + props = {}, + isPropsNeeded = false, + ServerStyle = {}, + config, + showSelectAll = false, +}) => { const [active, setActive] = useState(false); const [searchQuery, setSearchQuery] = useState(); const [optionIndex, setOptionIndex] = useState(-1); const dropdownRef = useRef(); const { t } = useTranslation(); - Digit.Hooks.useClickOutside(dropdownRef, () => setActive(false), active); + + const CheckSvg = ({ className, style = {} }) => ( + + + + + ); + + const ArrowDown = ({ className, onClick, styles, disable }) => ( + + + + + ); + + const RemoveableTag = ({ text, onClick, extraStyles, disabled = false }) => ( +
+ + {text} + + + + +
+ ); + function reducer(state, action) { + switch (action.type) { + case "ADD_TO_SELECTED_EVENT_QUEUE": + const newStateData = Array.isArray(action?.payload?.[1]) + ? action?.payload?.[1]?.map((items, index) => { + let obj = { + i18text: items?.i18text, + propsData: [action.payload?.[0], action.payload?.[1]?.[index]], + }; + return obj; + }) + : [...state, { [optionsKey]: action.payload?.[1]?.[optionsKey], propsData: action.payload }]; + return newStateData; + case "REMOVE_FROM_SELECTED_EVENT_QUEUE": + const newState = Array.isArray(action?.payload?.[1]) ? [] : state.filter((e) => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]); + onSelect( + newState?.map((e) => e?.propsData), + props + ); // Update the form state here + return newState; + case "REPLACE_COMPLETE_STATE": + return action.payload; + default: + return state; + } + } + + useEffect(() => { + dispatch({ type: "REPLACE_COMPLETE_STATE", payload: fnToSelectOptionThroughProvidedSelection(selected) }); + }, [selected?.length]); + + function fnToSelectOptionThroughProvidedSelection(selected) { + return selected?.map((e) => ({ [optionsKey]: e?.[optionsKey], propsData: [null, e] })); + } + + const [alreadyQueuedSelectedState, dispatch] = useReducer(reducer, selected, fnToSelectOptionThroughProvidedSelection); + + useEffect(() => { + if (!active) { + onSelect( + alreadyQueuedSelectedState?.map((e) => e.propsData), + props + ); + } + }, [active]); + + function handleOutsideClickAndSubmitSimultaneously() { + setActive(false); + } + + Digit.Hooks.useClickOutside(dropdownRef, handleOutsideClickAndSubmitSimultaneously, active, { capture: true }); const filtOptns = - searchQuery?.length > 0 ? options.filter((option) => t(option[optionsKey]&&typeof option[optionsKey]=="string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options; - + searchQuery?.length > 0 + ? options.filter( + (option) => + t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()) + .toLowerCase() + .indexOf(searchQuery.toLowerCase()) >= 0 + ) + : options; + function onSearch(e) { setSearchQuery(e.target.value); } -/* Custom function to scroll and select in the dropdowns while using key up and down */ - const keyChange = (e) => { + function onSelectToAddToQueue(...props) { + const isChecked = arguments[0].target.checked; + isChecked + ? dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: arguments }) + : dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: arguments }); + } + + /* Custom function to scroll and select in the dropdowns while using key up and down */ + const keyChange = (e) => { if (e.key == "ArrowDown") { - setOptionIndex(state =>state+1== filtOptns.length?0:state+1); - if(optionIndex+1== filtOptns.length){ - e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(0,0) - }else{ - optionIndex>2&& e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollBy?.(0,45) + setOptionIndex((state) => (state + 1 == filtOptns.length ? 0 : state + 1)); + if (optionIndex + 1 == filtOptns.length) { + e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(0, 0); + } else { + optionIndex > 2 && e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollBy?.(0, 45); } e.preventDefault(); } else if (e.key == "ArrowUp") { - setOptionIndex(state => state!==0? state - 1: filtOptns.length-1); - if(optionIndex===0){ - e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(100000,100000) - }else{ - optionIndex>2&&e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollBy?.(0,-45) - } + setOptionIndex((state) => (state !== 0 ? state - 1 : filtOptns.length - 1)); + if (optionIndex === 0) { + e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollTo?.(100000, 100000); + } else { + optionIndex > 2 && e?.target?.parentElement?.parentElement?.children?.namedItem("jk-dropdown-unique")?.scrollBy?.(0, -45); + } e.preventDefault(); - }else if(e.key=="Enter"){ - onSelect(e,filtOptns[optionIndex]); - } - } + } else if (e.key == "Enter") { + onSelectToAddToQueue(e, filtOptns[optionIndex]); + } + }; + + const filteredOptions = + searchQuery?.length > 0 + ? options.filter( + (option) => + t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey].toUpperCase()) + .toLowerCase() + .indexOf(searchQuery.toLowerCase()) >= 0 + ) + : options; + const handleSelectAll = (...data) => { + const isChecked = data[0].target.checked; + isChecked + ? dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: data }) + : dispatch({ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", payload: data }); + }; const MenuItem = ({ option, index }) => ( -
+
selectedOption[optionsKey] === option[optionsKey]) ? true : false} - onChange={(e) => isOBPSMultiple?onSelect(e, option,BlockNumber):onSelect(e, option)} - + checked={alreadyQueuedSelectedState.find((selectedOption) => selectedOption[optionsKey] === option[optionsKey]) ? true : false} + onChange={(e) => + isPropsNeeded + ? onSelectToAddToQueue(e, option, props) + : isOBPSMultiple + ? onSelectToAddToQueue(e, option, BlockNumber) + : onSelectToAddToQueue(e, option) + } + style={{ minWidth: "24px", width: "100%" }} />
- +
-

{t(option[optionsKey]&&typeof option[optionsKey]=="string" && option[optionsKey])}

+

+ {t(option[optionsKey] && typeof option[optionsKey] == "string" && option[optionsKey])} +

); - const Menu = () => { - const filteredOptions = - searchQuery?.length > 0 ? options.filter((option) => t(option[optionsKey]&&typeof option[optionsKey]=="string" && option[optionsKey].toUpperCase()).toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0) : options; - return filteredOptions.map((option, index) => ); + return ( +
+ {showSelectAll && ( +
+ handleSelectAll(e, filteredOptions)} // Create this function + style={{ minWidth: "24px", width: "100%" }} + /> +
+ +
+

{t("SELECT_ALL")}

+
+ )} + {filteredOptions.map((option, index) => ( + + ))} +
+ ); + // return filteredOptions?.map((option, index) => ); }; return ( -
-
- setActive(true)} value={searchQuery} onChange={onSearch} /> -
-

{selected.length > 0 ? `${selected.length} ${defaultUnit}` : defaultLabel}

- +
+
+
+ setActive(true)} + value={searchQuery} + onChange={onSearch} + /> +
+

{alreadyQueuedSelectedState.length > 0 ? `${alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}

+ +
+ {active ? ( +
+ +
+ ) : null}
- {active ? ( -
- + {config?.isDropdownWithChip ? ( +
+ {alreadyQueuedSelectedState.length > 0 && + alreadyQueuedSelectedState.map((value, index) => { + return ( + onSelectToAddToQueue(e, value, props) : (e) => onSelectToAddToQueue(e, value)} + /> + ); + })}
) : null}
); }; -export default MultiSelect; \ No newline at end of file +export default MultiSelectDropdown; \ No newline at end of file diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js index 6d0958315..84a756542 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js @@ -1,7 +1,7 @@ -import { CardLabel, Dropdown, LabelFieldPair, Loader, RemoveableTag, MultiSelectDropdown } from "@egovernments/digit-ui-react-components"; +import { CardLabel, Dropdown, LabelFieldPair, Loader, RemoveableTag } from "@egovernments/digit-ui-react-components"; import React, { useEffect, useState } from "react"; import cleanup from "../Utils/cleanup"; -// import MultiSelectDropdown from "./Multiselect"; +import MultiSelectDropdown from "./Multiselect"; const makeDefaultValues = (sessionFormData) => { return sessionFormData?.Jurisdictions?.map((ele, index) => { @@ -225,10 +225,6 @@ const Jurisdictions = ({ t, config, onSelect, userType, formData }) => { let boundaryTypeoption = []; const [focusIndex, setFocusIndex] = useState(-1); - function getboundarydata() { - return []; - } - function getroledata() { if (STATE_ADMIN) { // Specify the role codes you want to filter @@ -242,7 +238,12 @@ const Jurisdictions = ({ t, config, onSelect, userType, formData }) => { return { code: role.code, name: role?.name ? role?.name : " ", labelKey: "ACCESSCONTROL_ROLES_ROLES_" + role.code }; }); } else { - return data?.MdmsRes?.["ws-services-masters"].WSServiceRoles?.map((role) => { + // Specify the role codes you want to filter + const roleCodesToFilter = ["HRMS_ADMIN", "DIV_ADMIN"]; + // Use the filter method to extract roles with the specified codes + return data?.MdmsRes?.["ws-services-masters"].WSServiceRoles?.filter((role) => { + return !roleCodesToFilter.includes(role.code); + })?.map((role) => { return { code: role.code, name: role?.name ? role?.name : " ", labelKey: "ACCESSCONTROL_ROLES_ROLES_" + role.code }; }); } @@ -276,7 +277,6 @@ const Jurisdictions = ({ t, config, onSelect, userType, formData }) => { hierarchylist={hierarchylist} divisions={uniqueDivisions} boundaryTypeoption={boundaryTypeoption} - getboundarydata={getboundarydata} getroledata={getroledata} handleRemoveUnit={handleRemoveUnit} /> @@ -300,7 +300,6 @@ const Jurisdictions = ({ t, config, onSelect, userType, formData }) => { hierarchylist={hierarchylist} divisions={uniqueDivisions} boundaryTypeoption={boundaryTypeoption} - getboundarydata={getboundarydata} getroledata={getroledata} handleRemoveUnit={handleRemoveUnit} /> @@ -584,6 +583,7 @@ function Jurisdiction({ } onSelect={selectDivisionBoundary} optionsKey="i18text" + showSelectAll={true} t={t} />
0 && "50px", overflowY: "scroll" }}>