From ff653f26ab62abff5a4ef91933167c6c0b778aa6 Mon Sep 17 00:00:00 2001 From: Tulika-eGov Date: Sun, 5 Nov 2023 15:21:13 +0530 Subject: [PATCH 1/2] PFM-4943 : added debouncing in employee side to tackle duplicate creation issue --- .../web/micro-ui-internals/package.json | 4 +- .../packages/Mukta/src/components/Captcha.js | 4 +- .../packages/modules/Contracts/package.json | 1 + .../CreateWorkOrder/CreateWorkOrderForm.js | 12 +- .../CreateEstimate/CreateEstimate.js | 143 +++++++++--------- .../packages/modules/Expenditure/package.json | 1 + .../CreateBills/CreatePurchaseBillForm.js | 12 +- .../packages/modules/Masters/package.json | 1 + .../CreateOrganizationForm.js | 13 +- .../ModifyWageSeeker/ModifyWageSeekerForm.js | 12 +- .../packages/modules/Project/package.json | 1 + .../CreateProject/CreateProjectForm.js | 12 +- .../packages/react-components/package.json | 5 +- frontend/micro-ui/web/package.json | 5 +- 14 files changed, 135 insertions(+), 91 deletions(-) diff --git a/frontend/micro-ui/web/micro-ui-internals/package.json b/frontend/micro-ui/web/micro-ui-internals/package.json index 0ee2275866..fe2e8dc722 100644 --- a/frontend/micro-ui/web/micro-ui-internals/package.json +++ b/frontend/micro-ui/web/micro-ui-internals/package.json @@ -9,7 +9,7 @@ "packages/react-components", "packages/modules/Estimate", "packages/modules/Expenditure", - "packages/Mukta" + "packages/Mukta" ], "author": "JaganKumar ", "license": "MIT", @@ -63,7 +63,7 @@ }, "dependencies": { "react-google-recaptcha": "^3.1.0", - "lodash": "4.17.21", + "lodash": "^4.17.21", "microbundle-crl": "0.13.11", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js b/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js index 8a55c219d0..7bd4a09479 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js @@ -4,7 +4,9 @@ import ReCAPTCHA from "react-google-recaptcha"; const Captcha = (props) => { - const key = globalConfigs?.getConfig("RECAPTCHA_SITE_KEY"); + + //use this key if running locally 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI + const key = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" || globalConfigs?.getConfig("RECAPTCHA_SITE_KEY"); const onChange = (value) => { if(value) diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/package.json b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/package.json index 7ab668f64c..af79198ddd 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/package.json +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "^1.5.0", + "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/src/pages/employee/CreateWorkOrder/CreateWorkOrderForm.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/src/pages/employee/CreateWorkOrder/CreateWorkOrderForm.js index 82ce3467c4..d06ade09d9 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/src/pages/employee/CreateWorkOrder/CreateWorkOrderForm.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Contracts/src/pages/employee/CreateWorkOrder/CreateWorkOrderForm.js @@ -5,6 +5,7 @@ import _ from "lodash"; import { createWorkOrderUtils } from "../../../../utils/createWorkOrderUtils"; import { useHistory } from "react-router-dom"; import getWOModalConfig from "../../../configs/getWOModalConfig"; +import debounce from 'lodash/debounce'; const navConfig = [ { @@ -180,7 +181,7 @@ const CreateWorkOrderForm = ({createWorkOrderConfig, sessionFormData, setSession updateAction : isModify ? "EDIT" : "", } - const onModalSubmit = async (modalData) => { + const debouncedOnModalSubmit = debounce(async (modalData) => { modalData = Digit.Utils.trimStringsInObject(modalData) const payload = createWorkOrderUtils({tenantId, estimate, project, inputFormdata, selectedApprover, modalData, createWorkOrderConfig, modifyParams, docConfigData}); if(isModify) { @@ -188,7 +189,12 @@ const CreateWorkOrderForm = ({createWorkOrderConfig, sessionFormData, setSession }else { handleResponseForCreateWO(payload); } - } + },500); + + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; const sendDataToResponsePage = (contractNumber, isSuccess, message, showID) => { history.push({ @@ -207,7 +213,7 @@ const CreateWorkOrderForm = ({createWorkOrderConfig, sessionFormData, setSession showModal && setShowModal(false)} - onSubmit={onModalSubmit} + onSubmit={handleSubmit} config={createWOModalConfig} /> } diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/Estimates/CreateEstimate/CreateEstimate.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/Estimates/CreateEstimate/CreateEstimate.js index f71ca9746c..e68cc51026 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/Estimates/CreateEstimate/CreateEstimate.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/Estimates/CreateEstimate/CreateEstimate.js @@ -6,6 +6,7 @@ import { createEstimateConfig } from './createEstimateConfig' import { createEstimatePayload } from './createEstimatePayload' import { useHistory,useLocation } from "react-router-dom"; import { editEstimateUtil } from './editEstimateUtil' +import debounce from 'lodash/debounce'; const configNavItems = [ @@ -254,93 +255,99 @@ const CreateEstimate = () => { setShowModal(true); }; - const onModalSubmit = async (_data) => { - _data = Digit.Utils.trimStringsInObject(_data) + const debouncedOnModalSubmit = debounce(async (_data) => { + _data = Digit.Utils.trimStringsInObject(_data); const completeFormData = { - ..._data, - ...inputFormData, - selectedApprover, - // selectedDept, - // selectedDesignation + ..._data, + ...inputFormData, + selectedApprover, + // selectedDept, + // selectedDesignation } - - - - const payload = createEstimatePayload(completeFormData, projectData,isEdit,estimate) + + + + const payload = createEstimatePayload(completeFormData, projectData,isEdit,estimate); setShowModal(false); - + //make a util for updateEstimatePayload since there are some deviations if(isEdit && estimateNumber){ - await EstimateUpdateMutation(payload, { + await EstimateUpdateMutation(payload, { onError: async (error, variables) => { - - setShowToast({ warning: true, label: error?.response?.data?.Errors?.[0].message ? error?.response?.data?.Errors?.[0].message : error }); - setTimeout(() => { - setShowToast(false); - }, 5000); + + setShowToast({ warning: true, label: error?.response?.data?.Errors?.[0].message ? error?.response?.data?.Errors?.[0].message : error }); + setTimeout(() => { + setShowToast(false); + }, 5000); }, onSuccess: async (responseData, variables) => { - - clearSessionFormData(); - const state = { - header: t("WORKS_ESTIMATE_RESPONSE_UPDATED_HEADER"), - id: responseData?.estimates[0]?.estimateNumber, - info: t("ESTIMATE_ESTIMATE_NO"), - // message: t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CREATE", { department: t(`ES_COMMON_${responseData?.estimates[0]?.executingDepartment}`) }), - links: [ - { - name: t("WORKS_GOTO_ESTIMATE_INBOX"), - redirectUrl: `/${window.contextPath}/employee/estimate/inbox`, - code: "", - svg: "GotoInboxIcon", - isVisible: true, - type: "inbox", - } - ], - } - - history.push(`/${window?.contextPath}/employee/estimate/response`, state); - + + clearSessionFormData(); + const state = { + header: t("WORKS_ESTIMATE_RESPONSE_UPDATED_HEADER"), + id: responseData?.estimates[0]?.estimateNumber, + info: t("ESTIMATE_ESTIMATE_NO"), +// message: t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CREATE", { department: t(`ES_COMMON_${responseData?.estimates[0]?.executingDepartment}`) }), + links: [ + { + name: t("WORKS_GOTO_ESTIMATE_INBOX"), + redirectUrl: `/${window.contextPath}/employee/estimate/inbox`, + code: "", + svg: "GotoInboxIcon", + isVisible: true, + type: "inbox", + } + ], + }; + + history.push(`/${window?.contextPath}/employee/estimate/response`, state); + }, - }); + }); } else{ - await EstimateMutation(payload, { + await EstimateMutation(payload, { onError: async (error, variables) => { - setShowToast({ warning: true, label: error?.response?.data?.Errors?.[0].message ? error?.response?.data?.Errors?.[0].message : error }); - setTimeout(() => { - setShowToast(false); - }, 5000); + setShowToast({ warning: true, label: error?.response?.data?.Errors?.[0].message ? error?.response?.data?.Errors?.[0].message : error }); + setTimeout(() => { + setShowToast(false); + }, 5000); }, onSuccess: async (responseData, variables) => { - clearSessionFormData(); - const state = { - header: t("WORKS_ESTIMATE_RESPONSE_CREATED_HEADER"), - id: responseData?.estimates[0]?.estimateNumber, - info: t("ESTIMATE_ESTIMATE_NO"), - // message: t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CREATE", { department: t(`ES_COMMON_${responseData?.estimates[0]?.executingDepartment}`) }), - links: [ - { - name: t("WORKS_GOTO_ESTIMATE_INBOX"), - redirectUrl: `/${window.contextPath}/employee/estimate/inbox`, - code: "", - svg: "GotoInboxIcon", - isVisible: true, - type: "inbox", - } - ], - } - - history.push(`/${window?.contextPath}/employee/estimate/response`, state); - + clearSessionFormData(); + const state = { + header: t("WORKS_ESTIMATE_RESPONSE_CREATED_HEADER"), + id: responseData?.estimates[0]?.estimateNumber, + info: t("ESTIMATE_ESTIMATE_NO"), +// message: t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CREATE", { department: t(`ES_COMMON_${responseData?.estimates[0]?.executingDepartment}`) }), + links: [ + { + name: t("WORKS_GOTO_ESTIMATE_INBOX"), + redirectUrl: `/${window.contextPath}/employee/estimate/inbox`, + code: "", + svg: "GotoInboxIcon", + isVisible: true, + type: "inbox", + } + ], + }; + + history.push(`/${window?.contextPath}/employee/estimate/response`, state); + }, - }); + }); } - } + }, 500); // Adjust the debounce delay (in milliseconds) as needed + + + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; // const { isLoading: mdmsLoading, data: mdmsData, isSuccess: mdmsSuccess } = Digit.Hooks.useCustomMDMS( // Digit.ULBService.getCurrentTenantId(), @@ -407,7 +414,7 @@ const CreateEstimate = () => { {showModal && setShowModal(false)} - onSubmit={onModalSubmit} + onSubmit={handleSubmit} config={config} /> } diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/package.json b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/package.json index 3f539fedb6..920ca5a679 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/package.json +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "^1.5.0", + "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/pages/employee/CreateBills/CreatePurchaseBillForm.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/pages/employee/CreateBills/CreatePurchaseBillForm.js index 91c0c51711..854859057b 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/pages/employee/CreateBills/CreatePurchaseBillForm.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/pages/employee/CreateBills/CreatePurchaseBillForm.js @@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"; import { createBillPayload } from "../../../utils/createBillUtils"; import { updateBillPayload } from "../../../utils/updateBillPayload"; import getModalConfig from "./config"; +import debounce from 'lodash/debounce'; const navConfig = [ { @@ -146,7 +147,7 @@ const CreatePurchaseBillForm = ({ }, [approvers]) - const onModalSubmit = async (_data) => { + const debouncedOnModalSubmit = debounce(async (_data) => { _data = Digit.Utils.trimStringsInObject(_data) //here make complete data in combination with _data and inputFormData and create payload accordingly //also test edit flow with this change @@ -185,7 +186,7 @@ const CreatePurchaseBillForm = ({ }, }); } - } + },500); const onFormSubmit = async(data) => { data = Digit.Utils.trimStringsInObject(data) @@ -218,11 +219,16 @@ const CreatePurchaseBillForm = ({ }; }); + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; + return ( {showModal && setShowModal(false)} - onSubmit={onModalSubmit} + onSubmit={handleSubmit} config={config} /> } diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/package.json b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/package.json index e97f6e0626..efa0429095 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/package.json +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "^1.5.0", + "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/src/pages/employee/Organisation/CreateOrganization/CreateOrganizationForm.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/src/pages/employee/Organisation/CreateOrganization/CreateOrganizationForm.js index a29a578e76..602606472c 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/src/pages/employee/Organisation/CreateOrganization/CreateOrganizationForm.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Masters/src/pages/employee/Organisation/CreateOrganization/CreateOrganizationForm.js @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import { useHistory } from 'react-router-dom'; import { FormComposer, Loader, Toast } from '@egovernments/digit-ui-react-components'; import { getTomorrowsDate, getBankAccountUpdatePayload, getOrgPayload } from '../../../../utils'; +import debounce from 'lodash/debounce'; const navConfig = [ { @@ -40,7 +41,6 @@ const CreateOrganizationForm = ({ createOrganizationConfig, sessionFormData, set const { mutate: CreateBankAccountMutation } = Digit.Hooks.bankAccount.useCreateBankAccount(); const { mutate: UpdateBankAccountMutation } = Digit.Hooks.bankAccount.useUpdateBankAccount(); - //location data const ULB = Digit.Utils.locale.getCityLocale(tenantId); const ORG_VALIDTO_DATE = '2099-03-31'; @@ -276,7 +276,7 @@ const CreateOrganizationForm = ({ createOrganizationConfig, sessionFormData, set - const onSubmit = async (data) => { + const debouncedOnModalSubmit = debounce(async (data) => { data = Digit.Utils.trimStringsInObject(data) //here call org search with mobile number and see if number is already there with some other org , do an early return @@ -329,7 +329,12 @@ const CreateOrganizationForm = ({ createOrganizationConfig, sessionFormData, set handleResponseForCreate(orgPayload, data); } } - } + },500); + + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; if(locationDataFetching || orgDataFetching) return return ( @@ -337,7 +342,7 @@ const CreateOrganizationForm = ({ createOrganizationConfig, sessionFormData, set { + const debouncedOnModalSubmit = debounce((data) => { data = Digit.Utils.trimStringsInObject(data) const validationError = validateSelectedSkills(data) if(validationError) return @@ -285,14 +286,19 @@ const ModifyWageSeekerForm = ({createWageSeekerConfig, sessionFormData, setSessi }else { handleResponseForCreate(wageSeekerPayload, data); } - } + },500); + + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; return ( { + const debouncedOnModalSubmit = debounce(async (data) => { const trimmedData = Digit.Utils.trimStringsInObject(data) //Transforming Payload to categories of Basic Details, Projects and Sub-Projects const transformedPayload = CreateProjectUtils.payload.transform(trimmedData); @@ -228,7 +229,7 @@ const CreateProjectForm = ({t, sessionFormData, setSessionFormData, clearSession }else { handleResponseForUpdate(payload); } - } + }, 500); const handleResponseForCreate = async (payload) => { await CreateProjectMutation(payload, { @@ -344,6 +345,11 @@ const CreateProjectForm = ({t, sessionFormData, setSessionFormData, clearSession } },[selectedProjectType]); + const handleSubmit = (_data) => { + // Call the debounced version of onModalSubmit + debouncedOnModalSubmit(_data); + }; + return ( @@ -358,7 +364,7 @@ const CreateProjectForm = ({t, sessionFormData, setSessionFormData, clearSession body: config?.body.filter((a) => !a.hideInEmployee), }; })} - onSubmit={onSubmit} + onSubmit={handleSubmit} submitInForm={false} fieldStyle={{ marginRight: 0 }} inline={false} diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/package.json b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/package.json index cc57c3bcc8..4bc401bd8a 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/package.json +++ b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/package.json @@ -24,7 +24,7 @@ "react-router-dom": "5.3.0" }, "devDependencies": { - + "babel-eslint": "10.1.0", "cross-env": "7.0.3", "gh-pages": "2.2.0", @@ -33,7 +33,7 @@ "microbundle-crl": "0.13.11", "react": "17.0.2", "react-dom": "17.0.2", - "react-router-dom": "5.3.0", + "react-router-dom": "5.3.0", "react-scripts": "^4.0.1", "react-responsive":"9.0.2" }, @@ -42,6 +42,7 @@ ], "dependencies": { "@googlemaps/js-api-loader": "1.13.10", + "lodash": "^4.17.21", "react-date-range": "1.3.0", "react-hook-form": "6.15.8", "react-i18next": "11.16.2", diff --git a/frontend/micro-ui/web/package.json b/frontend/micro-ui/web/package.json index 2036c0d1ab..3cf9b91d98 100644 --- a/frontend/micro-ui/web/package.json +++ b/frontend/micro-ui/web/package.json @@ -37,7 +37,8 @@ "react-query": "3.6.1", "react-router-dom": "5.3.0", "web-vitals": "1.1.2", - "webpack-cli": "4.10.0" + "webpack-cli": "4.10.0", + "lodash": "^4.17.21" }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "7.21.0", @@ -50,7 +51,7 @@ "build:prepare": "./build.sh", "clean": "rm -rf node_modules" }, - "eslintConfig": { +"eslintConfig": { "extends": [ "react-app" ] From 0dc652ab9981c316bea6ee3b7106bc4832065498 Mon Sep 17 00:00:00 2001 From: Tulika-eGov Date: Sun, 5 Nov 2023 15:24:48 +0530 Subject: [PATCH 2/2] PFM-4943 : removing unwanted code --- .../micro-ui-internals/packages/Mukta/src/components/Captcha.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js b/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js index 7bd4a09479..0482614b06 100644 --- a/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js +++ b/frontend/micro-ui/web/micro-ui-internals/packages/Mukta/src/components/Captcha.js @@ -6,7 +6,7 @@ const Captcha = (props) => { //use this key if running locally 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI - const key = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" || globalConfigs?.getConfig("RECAPTCHA_SITE_KEY"); + const key = globalConfigs?.getConfig("RECAPTCHA_SITE_KEY"); const onChange = (value) => { if(value)