Skip to content

Commit

Permalink
updated facilitypopup (#1689)
Browse files Browse the repository at this point in the history 
* updated facilitypopup

* added review changes
  • Loading branch information
@Swathi-eGov
Swathi-eGov authored Oct 28, 2024
1 parent 354e9db commit 0c7f3c4
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 105 deletions.
16 changes: 16 additions & 0 deletions health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
.facility-popup{
max-width: 85% !important;
}

.facilitypopup-serach-results-wrapper{
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.facility-popup-table-card{
border: 1px solid #d6d5d4;
}

.facilitypopup-tab-serach-wrapper{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
179 changes: 80 additions & 99 deletions ...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
View file
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",
};

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">
<div className="facilitypopup-tab-serach-wrapper">
<Tab
activeLink={activeLink.code}
configItemKey="code"
Expand All @@ -370,64 +335,80 @@ 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>
<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" }}
/>
)}
{viewDetails && accessibilityData && (
<AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />
)}
{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}
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} />}
</Card>
{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
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%" }}>
<MultiSelectDropdown
variant={"nestedmultiselect"}
Expand Down
2 changes: 1 addition & 1 deletion .../web/micro-ui-internals/packages/modules/microplan/src/components/timelinePopUpWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const TimelinePopUpWrapper = ({ onClose, businessId, heading }) => {

// Map API response to timeline steps
const steps = workflowData.ProcessInstances.map((instance, index) => ({
label: instance.state.applicationStatus,
label: t(instance.state.applicationStatus),
variant: 'completed',
subElements: [Digit.Utils.microplanv1.epochToDateTime(instance?.auditDetails?.lastModifiedTime),
instance?.assignes?.length > 0 ? instance.assignes[0]?.name : 'NA',
Expand Down

0 comments on commit 0c7f3c4

Please sign in to comment.