connected village screen

egovernments · Oct 19, 2024 · 55c3165 · 55c3165
1 parent c0a9aa9
commit 55c3165
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js b/...icro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import DataTable from 'react-data-table-component';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@egovernments/digit-ui-components';
+import { useHistory } from "react-router-dom";
 
 const censusResponse = {
   "Census": [
@@ -189,15 +190,17 @@ const PopInboxTable = ({...props}) => {
 	const [loading, setLoading] = useState(false);
 	const [totalRows, setTotalRows] = useState(0);
 	const [perPage, setPerPage] = useState(10);
+    const history = useHistory();
 
+    const { campaignId, microplanId,  } = Digit.Hooks.useQueryParams();
 
   const columns = useMemo(() => {
     return [
       {
         name: t(`INBOX_VILLAGE`),
         cell: (row, index, column, id) => <Button
         label={t(`${row.boundaryCode}`)}
-        onClick={()=>console.log(row)}
+        onClick={()=>history.push(`village-view?campaignId=${campaignId}&microplanId=${microplanId}&boundaryCode=${row?.boundaryCode}`)}
         title={t(`${row.boundaryCode}`)}
         variation="link"
         style={{maxWidth:"1rem"}}

diff --git a/...ro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js b/...ro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js
@@ -11,10 +11,7 @@ import TimelinePopUpWrapper from '../../components/timelinePopUpWrapper';
 const VillageView = () => {
     const location = useLocation();
     const { t } = useTranslation();
-    const queryParams = new URLSearchParams(location.search);
-
-    const microplanId = queryParams.get('microplanId');
-    const boundaryCode = queryParams.get('boundaryCode');
+    const { campaignId, microplanId,boundaryCode  } = Digit.Hooks.useQueryParams();
     const tenantId = Digit.ULBService.getCurrentTenantId();
 
     // Custom hook to fetch census data based on microplanId and boundaryCode
@@ -94,17 +91,17 @@ const VillageView = () => {
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_DISCRICT_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_ADMIN_POST_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_LOCALITY_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
                 </Card>
 
@@ -182,27 +179,27 @@ const VillageView = () => {
                     {/* Five Label-Text Pairs */}
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_UPLOADED_TARGET_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.targetPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.targetPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_UPLOADED_TOTAL_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.totalPopulation}</span>
+                        <span className="label-text">{data?.totalPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair ">
                         <span className="label-heading">{t(`HCM_MICROPLAN_CONFIRM_TARGET_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.confirmedTargetPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.confirmedTargetPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_CONFIRM_TOTAL_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.confirmedTotalPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.confirmedTotalPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_ASSIGNED_DATA_APPROVER_LABEL`)}</span>
-                        <span className="label-text">{data.assignee}</span>
+                        <span className="label-text">{data?.assignee}</span>
                     </div>
                 </Card>
 
@@ -230,7 +227,7 @@ const VillageView = () => {
                 </Card>
 
                 {showCommentLogPopup && (
-                    <TimelinePopUpWrapper onClose={onCommentLogClose} businessId={data.id} heading="HCM_MICROPLAN_STATUS_LOG_LABEL" />
+                    <TimelinePopUpWrapper onClose={onCommentLogClose} businessId={data?.id} heading="HCM_MICROPLAN_STATUS_LOG_LABEL" />
                 )}
 
             </div>