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.

Sign up for GitHub

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

updated facilitypopup #1689

Merged
merged 4 commits into from
Oct 28, 2024
Merged

updated facilitypopup #1689

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f2b62c0
updated facilitypopup
Swathi-eGov Oct 28, 2024
614022f
Merge branch 'console' into FacilityPopup-Update
Swathi-eGov Oct 28, 2024
45fadca
Merge branch 'console' into FacilityPopup-Update
Swathi-eGov Oct 28, 2024
4779fa8
added review changes
Swathi-eGov Oct 28, 2024
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
16 changes: 16 additions & 0 deletions health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
.facility-popup{
max-width: 85% !important;
}
nipunarora-eGov marked this conversation as resolved.
Show resolved Hide resolved

.facilitypopup-serach-results-wrapper{
display: flex;
flex-direction: column;
gap: 1.5rem;
}
nipunarora-eGov marked this conversation as resolved.
Show resolved Hide resolved

.facility-popup-table-card{
border: 1px solid #d6d5d4;
}
nipunarora-eGov marked this conversation as resolved.
Show resolved Hide resolved

.facilitypopup-tab-serach-wrapper{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
231 changes: 134 additions & 97 deletions ...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { useState, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button, Tab, CheckBox, Card, Toast } from "@egovernments/digit-ui-components";
import { PopUp, Button, Tab, CheckBox, Card, Toast,SVG } from "@egovernments/digit-ui-components";
import SearchJurisdiction from "./SearchJurisdiction";
import { LoaderWithGap, Loader } from "@egovernments/digit-ui-react-components";
import DataTable from "react-data-table-component";
import AccessibilityPopUp from "./accessbilityPopUP";
import SecurityPopUp from "./securityPopUp";
import { tableCustomStyle } from "./tableCustomStyle";

const FacilityPopUp = ({ details, onClose }) => {
const { t } = useTranslation();
Expand Down Expand Up @@ -183,24 +184,12 @@ const FacilityPopUp = ({ details, onClose }) => {
}
}, [isLoadingPlanEmployee, isLoadingCampaign]);

const handleRowSelect = (row) => {
const isSelected = selectedRows.includes(row.id);
const newSelectedRows = isSelected
? selectedRows.filter((id) => id !== row.id)
: [...selectedRows, row.id];

const handleRowSelect = (event) => {
// Extract the IDs of all selected rows
const newSelectedRows = event.selectedRows.map(row => row.id);
// Update the state with the list of selected IDs
setSelectedRows(newSelectedRows);
setIsAllSelected(newSelectedRows.length === censusData.length);
};

const handleSelectAll = () => {
if (isAllSelected) {
setSelectedRows([]);
} else {
const allRowIds = censusData.map((row) => row.id);
setSelectedRows(allRowIds);
}
setIsAllSelected(!isAllSelected);
setIsAllSelected(event.allSelected);
};

const handleViewDetailsForAccessibility = (row) => {
Expand All @@ -216,25 +205,6 @@ const FacilityPopUp = ({ details, onClose }) => {
};

const columns = [
{
name: (
<CheckBox
onChange={handleSelectAll}
checked={isAllSelected}
label=""
/>
),
cell: (row) => (
<CheckBox
onChange={() => handleRowSelect(row)}
checked={selectedRows.includes(row.id)}
label=""
/>
),
sortable: false,
allowOverflow: true,
width: "6rem"
},
{
name: t("MP_FACILITY_VILLAGE"), // Change to your column name
selector: (row) => row.boundaryCode, // Replace with the appropriate field from your data
Expand All @@ -243,32 +213,22 @@ const FacilityPopUp = ({ details, onClose }) => {
{
name: t("MP_VILLAGE_ACCESSIBILITY_LEVEL"), // Change to your column type
cell: (row) => (
<span
style={{ color: "#f47738", textDecoration: "underline", cursor: "pointer" }}
onClick={() => handleViewDetailsForAccessibility(row)}
>
{t("VIEW_DETAILS")}
</span>
<Button label={t("VIEW_DETAILS")} onClick={() => handleViewDetailsForAccessibility(row)} variation="link" size={"medium"} style={{}} />
), // Replace with the appropriate field from your data
sortable: false,
},
{
name: t("MP_VILLAGE_SECURITY_LEVEL"), // Change to your column type
cell: (row) => (
<span
style={{ color: "#f47738", textDecoration: "underline", cursor: "pointer" }}
onClick={() => handleViewDetailsForSecurity(row)}
>
{t("VIEW_DETAILS")}
</span>
<Button label={t("VIEW_DETAILS")} onClick={() => handleViewDetailsForSecurity(row)} variation="link" size={"medium"} style={{}} />
), // Replace with the appropriate field from your data
sortable: false,
},
{
name: t("MP_FACILITY_TOTALPOPULATION"), // Change to your column type
selector: (row) => row.totalPopulation, // Replace with the appropriate field from your data
sortable: false,
}
},
// Add more columns as needed
];

Expand Down Expand Up @@ -349,6 +309,11 @@ const FacilityPopUp = ({ details, onClose }) => {
setCurrentPage(1); // Reset to first page when changing rows per page
};

const selectProps = {
hideLabel: true,
mainClassName: "data-table-select-checkbox",
};
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
{loader ? (
Expand All @@ -358,8 +323,8 @@ const FacilityPopUp = ({ details, onClose }) => {
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.facilityName}`}
children={[
<div>
<div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
<div className="facilitypopup-serach-results-wrapper">
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
<div className="facilitypopup-tab-serach-wrapper">
<Tab
activeLink={activeLink.code}
configItemKey="code"
Expand All @@ -370,64 +335,136 @@ const FacilityPopUp = ({ details, onClose }) => {
style={{
width: "auto", // Allow tab width to adjust automatically
whiteSpace: "nowrap", // Prevent text from breaking
padding: "10px 15px", // Add padding for spacing
}}
itemStyle={{ width: "unset !important" }}
/>
<SearchJurisdiction
key={searchKey} // Use key to force re-render
boundaries={boundaries}
jurisdiction={jurisdiction}
onSubmit={censusSearch}
style={{ border: "1px solid black", padding: "10px" }}
onClear={() => censusSearch([])}
/>
<Card className="facility-popup-table-card" type={"primary"}>
<SearchJurisdiction
key={searchKey} // Use key to force re-render
boundaries={boundaries}
jurisdiction={jurisdiction}
onSubmit={censusSearch}
style={{ padding: "0px" }}
onClear={() => censusSearch([])}
/>
</Card>
</div>
<div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
<Card className="facility-popup-table-card" type={"primary"}>
{selectedRows.length > 0 && (
<div className="card-container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', borderBottom: '1px solid #D6D5D4', padding: '1rem' }}>
<div>
{selectedRows.length} {selectedRows.length === 1 ? t('MICROPLAN_SELECTED') : t('MICROPLAN_SELECTED_PLURAL')}
<div className="selection-state-wrapper">
<div className="svg-state-wrapper">
<SVG.DoneAll width={"1.5rem"} height={"1.5rem"} fill={"#C84C0E"}></SVG.DoneAll>
nipunarora-eGov marked this conversation as resolved.
Show resolved Hide resolved
<div className={"selected-state"}>{`${selectedRows.length} ${
selectedRows?.length === 1 ? t("MICROPLAN_SELECTED") : t("MICROPLAN_SELECTED_PLURAL")
}`}</div>
</div>

<div className={`table-actions-wrapper`}>
<Button
className={"campaign-type-alert-button"}
variation="secondary"
label={
facilityAssignedStatus
? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
: `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
}
type="button"
onClick={handleAssignUnassign}
size={"large"}
icon={"AddIcon"}
/>
</div>
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={facilityAssignedStatus ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}` : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`}
onClick={handleAssignUnassign}
icon={"AddIcon"}
/>
</div>
)}
{tableLoader ? <Loader /> : censusData && (
<DataTable
columns={columns}
data={censusData}
pagination
paginationServer
paginationDefaultPage={currentPage}
paginationPerPage={rowsPerPage}
onChangePage={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
paginationRowsPerPageOptions={[10, 20, 50, 100]}
paginationTotalRows={totalCensusCount}
highlightOnHover
pointerOnHover
striped
style={{ marginTop: "20px", border: "1px solid #D6D5D4", borderRadius: "3px" }}
/>
{tableLoader ? (
<Loader />
) : (
censusData && (
<DataTable
columns={columns}
data={censusData}
pagination
paginationServer
paginationDefaultPage={currentPage}
paginationPerPage={rowsPerPage}
onChangePage={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
paginationRowsPerPageOptions={[10, 20, 50, 100]}
paginationTotalRows={totalCensusCount}
selectableRows
selectableRowsHighlight
noContextMenu
onSelectedRowsChange={handleRowSelect}
customStyles={tableCustomStyle}
selectableRowsComponent={CheckBox}
selectableRowsComponentProps={selectProps}
/>
)
)}
{viewDetails && accessibilityData && (
<AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />
{viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
{viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
</Card>
{/* <div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
{selectedRows.length > 0 && (
<div className="selection-state-wrapper">
<div className="svg-state-wrapper">
<SVG.DoneAll width={"1.5rem"} height={"1.5rem"} fill={"#C84C0E"}></SVG.DoneAll>
<div className={"selected-state"}>{`${selectedRows.length} ${
selectedRows?.length === 1 ? t("MICROPLAN_SELECTED") : t("MICROPLAN_SELECTED_PLURAL")
}`}</div>
</div>

<div className={`table-actions-wrapper`}>
<Button
className={"campaign-type-alert-button"}
variation="secondary"
label={
facilityAssignedStatus
? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
: `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
}
type="button"
onClick={handleAssignUnassign}
size={"large"}
icon={"AddIcon"}
/>
</div>
</div>
)}
{viewDetails && securityData && (
<SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />
{tableLoader ? (
<Loader />
) : (
censusData && (
<DataTable
columns={columns}
data={censusData}
pagination
paginationServer
paginationDefaultPage={currentPage}
paginationPerPage={rowsPerPage}
onChangePage={handlePageChange}
onChangeRowsPerPage={handleRowsPerPageChange}
paginationRowsPerPageOptions={[10, 20, 50, 100]}
paginationTotalRows={totalCensusCount}
// style={{ marginTop: "20px", border: "1px solid #D6D5D4", borderRadius: "3px" }}
selectableRows
selectableRowsHighlight
noContextMenu
onSelectedRowsChange={handleRowSelect}
customStyles={tableCustomStyle}
selectableRowsComponent={CheckBox}
selectableRowsComponentProps={selectProps}
/>
)
)}
</div>
{viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
{viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
</div> */}
nipunarora-eGov marked this conversation as resolved.
Show resolved Hide resolved
{showToast && (
<Toast
type={showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : showToast?.key === "warning" ? "warning" : "success"}
type={
showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : showToast?.key === "warning" ? "warning" : "success"
}
label={t(showToast.label)}
transitionTime={showToast.transitionTime}
onClose={() => setShowToast(null)}
Expand Down
10 changes: 5 additions & 5 deletions ...ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import { useMyContext } from "../utils/context";
import { Dropdown, MultiSelectDropdown } from "@egovernments/digit-ui-components";

const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, onClear = () => { } }) => {
const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, onClear = () => { } ,style={}}) => {
const { t } = useTranslation();
const {
state: { hierarchyType, boundaryHierarchy },
Expand Down Expand Up @@ -51,10 +51,10 @@ const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, on
}

return (
<div className={"search-wrapper"}>
<div className={"search-wrapper"} style={style}>
<div className={`search-field-wrapper search custom-both-clear-search`}>
<LabelFieldPair style={{ flexDirection: "column", gap: "0rem" }}>
<CardLabel>{t("SELECT_HIERARCHY_LEVEL")}</CardLabel>
<CardLabel style={{width:"100%"}}>{t("SELECT_HIERARCHY_LEVEL")}</CardLabel>
<Dropdown
t={t}
option={hierarchy}
Expand All @@ -66,8 +66,8 @@ const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, on
}}
/>
</LabelFieldPair>
<LabelFieldPair style={{ flexDirection: "column", gap: "0rem", marginBottom: 0 }}>
<CardLabel>{t("SELECT_BOUNDARIES")}</CardLabel>
<LabelFieldPair style={{ flexDirection: "column", gap: "0rem", , marginBottom: 0 }}>
<CardLabel style={{width:"100%"}}>{t("SELECT_BOUNDARIES")}</CardLabel>
<div style={{width: "100%" }}>
Swathi-eGov marked this conversation as resolved.
Show resolved Hide resolved
<MultiSelectDropdown
variant={"nestedmultiselect"}
Expand Down