Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added facility search #1556

Merged
merged 3 commits into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.facility-popup{
max-width: 85% !important;
}
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "./hcmworkbench.scss";
@import "../../typography.scss";
@import "./villageView.scss";
@import "./facility.scss";
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved

.digit-topbar-container {
width: 100%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import CampaignBoundary from "./components/CampaignBoundary";
import FormulaConfigWrapper from "./components/FormulaConfigWrapper";
import AssumptionsList from "./components/AssumptionsList";
import FormulaConfigScreen from "./components/FormulaConfigScreen";
import FacilityPopup from "./components/FacilityPopup";

export const MicroplanModule = ({ stateCode, userType, tenants }) => {
const { path, url } = useRouteMatch();
Expand Down Expand Up @@ -72,9 +73,8 @@ const componentsToRegister = {
SummaryScreen,
CampaignBoundary,
AssumptionsList,
FormulaConfigScreen


FormulaConfigScreen,
FacilityPopup,
Comment on lines +76 to +77
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

LGTM: FacilityPopup registered correctly. Minor suggestion for consistency.

The FacilityPopup component is correctly added to the componentsToRegister object. The trailing comma after FormulaConfigScreen is a good practice.

For consistency, consider adding a trailing comma after FacilityPopup as well:

 FormulaConfigScreen,
-FacilityPopup
+FacilityPopup,

This will maintain consistency and make future additions easier.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
FormulaConfigScreen,
FacilityPopup,
FormulaConfigScreen,
FacilityPopup,

};

export const initMicroplanComponents = () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { useState, useMemo, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
import facilityMappingConfig from "../configs/FacilityMappingConfig";
Comment on lines +1 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider reorganizing imports for better readability.

The imports are relevant and there are no unused imports. However, consider organizing them in the following order for better readability:

  1. React and related libraries
  2. External libraries (e.g., react-i18next)
  3. Internal components and utilities

Here's a suggested reorganization:

import React, { useState, useMemo, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
import facilityMappingConfig from "../configs/FacilityMappingConfig";


const FacilityPopUp = ({ details, onClose }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider adding prop-types for better type checking.

To improve the component's robustness and documentation, consider adding prop-types. This will help catch potential issues early and provide better documentation for the component's API.

Example:

import PropTypes from 'prop-types';

// ... component code ...

FacilityPopUp.propTypes = {
  details: PropTypes.shape({
    additionalDetails: PropTypes.shape({
      name: PropTypes.string
    })
  }),
  onClose: PropTypes.func.isRequired
};

Would you like assistance in implementing prop-types for this component?

const { t } = useTranslation();

const config = facilityMappingConfig();

return (
<>
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
children={[
<InboxSearchComposer
configs={config} // dummy config
></InboxSearchComposer>,
]}
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
onOverlayClick={onClose}
footerChildren={[
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
/>,
]}
className={"facility-popup"}
/>
</>
);
};
Comment on lines +7 to +37
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Improve JSX structure and prop usage.

There are several improvements that can be made to the JSX structure:

  1. Use self-closing tags for elements without children.
  2. Avoid passing children as a prop to PopUp.
  3. Add key props to elements in iterables.

Apply these changes to address the issues:

 <PopUp
   onClose={onClose}
   heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
-  children={[
-    <InboxSearchComposer
-      configs={config} // dummy config
-    ></InboxSearchComposer>,
-  ]}
+  >
+    <InboxSearchComposer
+      configs={config} // dummy config
+    />
   onOverlayClick={onClose}
   footerChildren={[
     <Button
+      key="close-button"
       className={"campaign-type-alert-button"}
       type={"button"}
       size={"large"}
       variation={"secondary"}
       label={t(`MICROPLAN_CLOSE_BUTTON`)}
       onClick={onClose}
-    />,
+    />
   ]}
   className={"facility-popup"}
 />

These changes will improve the component's structure and address the static analysis warnings.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const FacilityPopUp = ({ details, onClose }) => {
const { t } = useTranslation();
const config = facilityMappingConfig();
return (
<>
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
children={[
<InboxSearchComposer
configs={config} // dummy config
></InboxSearchComposer>,
]}
onOverlayClick={onClose}
footerChildren={[
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
/>,
]}
className={"facility-popup"}
/>
</>
);
};
const FacilityPopUp = ({ details, onClose }) => {
const { t } = useTranslation();
const config = facilityMappingConfig();
return (
<>
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
>
<InboxSearchComposer
configs={config} // dummy config
/>
onOverlayClick={onClose}
footerChildren={[
<Button
key="close-button"
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
/>
]}
className={"facility-popup"}
/>
</>
);
};
🧰 Tools
🪛 Biome

[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)


[error] 17-17: Avoid passing children using a prop

The canonical way to pass children in React is to use JSX elements

(lint/correctness/noChildrenProp)


[error] 18-20: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)


[error] 24-31: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)


export default FacilityPopUp;
Comment on lines +1 to +39
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove unused Card import.

The Card component is imported but not used in the component. Remove the unused import to keep the code clean:

- import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
+ import { PopUp, Button } from "@egovernments/digit-ui-components";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import React, { useState, useMemo, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
import facilityMappingConfig from "../configs/FacilityMappingConfig";
const FacilityPopUp = ({ details, onClose }) => {
const { t } = useTranslation();
const config = facilityMappingConfig();
return (
<>
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
children={[
<InboxSearchComposer
configs={config} // dummy config
></InboxSearchComposer>,
]}
onOverlayClick={onClose}
footerChildren={[
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
/>,
]}
className={"facility-popup"}
/>
</>
);
};
export default FacilityPopUp;
import React, { useState, useMemo, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button } from "@egovernments/digit-ui-components";
import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
import facilityMappingConfig from "../configs/FacilityMappingConfig";
const FacilityPopUp = ({ details, onClose }) => {
const { t } = useTranslation();
const config = facilityMappingConfig();
return (
<>
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
children={[
<InboxSearchComposer
configs={config} // dummy config
></InboxSearchComposer>,
]}
onOverlayClick={onClose}
footerChildren={[
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
/>,
]}
className={"facility-popup"}
/>
</>
);
};
export default FacilityPopUp;
🧰 Tools
🪛 Biome

[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)


[error] 17-17: Avoid passing children using a prop

The canonical way to pass children in React is to use JSX elements

(lint/correctness/noChildrenProp)


[error] 18-20: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)


[error] 24-31: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { useMyContext } from "../utils/context";

const facilityMappingConfig = () => {
const { state, dispatch } = useMyContext();
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
return {
label: "",
type: "search",
apiDetails: {
serviceName: "/plan-service/plan/facility/_search",
requestParam: {},
requestBody: {
PlanFacilitySearchCriteria: {
},
},
minParametersForSearchForm: 1,
masterName: "commonUiConfig",
moduleName: "FacilityMappingConfig",
tableFormJsonPath: "requestBody.PlanFacilitySearchCriteria",
filterFormJsonPath: "requestBody.PlanFacilitySearchCriteria",
searchFormJsonPath: "requestBody.PlanFacilitySearchCriteria",
},
sections: {
search: {
uiConfig: {
headerStyle: null,
formClassName: "custom-both-clear-search",
primaryLabel: "ES_COMMON_FILTER",
secondaryLabel: "ES_COMMON_CLEAR_FILTER",
minReqFields: 1,
showFormInstruction: "",
defaultValues: {
facilityName: "",
facilityType: "",
status: "",
residingVillage: "",
},
fields: [
{
label: "MICROPLAN_FACILITY_NAME",
type: "text",
isMandatory: false,
disable: false,
preProcess: {
convertStringToRegEx: ["populators.validation.pattern"],
},
populators: {
name: "facilityName",
error: "MICROPLAN_PATTERN_ERR_MSG",
validation: {
pattern: '^[^\\$"<>?\\\\~`!@$%^()+={}\\[\\]*:;“”‘’]{1,50}$',
minlength: 2,
},
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
},
},
{
label: "MICROPLAN_FACILITY_TYPE",
type: "dropdown",
isMandatory: false,
disable: false,
populators: {
name: "facilityType",
optionsKey: "name",
optionsCustomStyle: {
top: "2.3rem",
},
options:state?.facilityType || []
},
},
{
label: "CORE_COMMON_STATUS",
type: "dropdown",
isMandatory: false,
disable: false,
populators: {
"optionsCustomStyle": {
"top": "2.3rem"
},
name: "status",
optionsKey: "name",
options:state?.facilityStatus || []
},
},
{
label: "MICROPLAN_RESIDING_VILLAGE",
type: "text",
isMandatory: false,
disable: false,
preProcess: {
convertStringToRegEx: ["populators.validation.pattern"],
},
populators: {
name: "residingVillage",
error: "MICROPLAN_PATTERN_ERR_MSG",
validation: {
pattern: '^[^\\$"<>?\\\\~`!@$%^()+={}\\[\\]*:;“”‘’]{1,50}$',
minlength: 2,
},
},
},
],
},
label: "",
children: {},
show: true,
},
searchResult: {
label: "",
uiConfig: {
columns: [
{
label: "MICROPLAN_FACILITY_NAME",
jsonPath: "additionalDetails.name",
},
{
label: "MICROPLAN_FACILITY_TYPE",
jsonPath: "additionalDetails.facilityType",
},
{
label: "MICROPLAN_FACILITY_STATUS",
jsonPath: "additionalDetails.status",
},
{
label: "MICROPLAN_FACILITY_CAPACITY",
jsonPath: "additionalDetails.capacity",
},
{
label: "MICROPLAN_FACILITY_ASSIGNED_VILLAGES",
jsonPath: "additionalDetails.assignedVillage",
},
{
label: "MICROPLAN_FACILITY_SERVINGPOPULATION",
jsonPath: "additionalDetails.servingPopulation",
},
{
label: "MICROPLAN_FACILITY_FIXEDPOST",
jsonPath: "additionalDetails.fixedPost",
},
{
label: "MICROPLAN_FACILITY_RESIDINGVILLAGE",
jsonPath: "residingBoundary",
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
},
{
label: "MICROPLAN_FACILITY_ACTION",
jsonPath: "",
additionalCustomization: true,
},
],
enableGlobalSearch: false,
enableColumnSort: true,
resultsJsonPath: "PlanFacility",
},
children: {},
show: true,
},
},
additionalSections: {},
};
};

export default facilityMappingConfig;
Loading