Added additional loaders in the summary for data sync and fixed loade…

…r icon issue + setup campaign file clean up (#1744) * code cleanup of setup campaign * updated the draft utils * taken latest pull * Added summary loaders
egovernments · Nov 5, 2024 · 2e8fd94 · 2e8fd94
1 parent 5faa6cd
commit 2e8fd94
Show file tree

Hide file tree

Showing 16 changed files with 1,029 additions and 1,117 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/example/package.json b/health/micro-ui/web/micro-ui-internals/example/package.json
@@ -14,7 +14,7 @@
     "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "@egovernments/digit-ui-module-core": "1.8.2-beta.13",
     "@egovernments/digit-ui-module-utilities": "1.0.1-beta.30",
-    "@egovernments/digit-ui-react-components": "1.8.2-beta.16",
+    "@egovernments/digit-ui-react-components": "1.8.2-beta.17",
     "@egovernments/digit-ui-module-hcmworkbench":"0.0.44",
     "@egovernments/digit-ui-module-campaign-manager": "0.2.1",
     "@egovernments/digit-ui-module-microplan":"0.0.1",

diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -10,11 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
   <title>DIGIT</title>
-  <!-- <link
-    rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"
-  /> -->
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
 

diff --git a/health/micro-ui/web/micro-ui-internals/package.json b/health/micro-ui/web/micro-ui-internals/package.json
@@ -49,7 +49,7 @@
     "*.{js,css,md}": "prettier --write"
   },
   "dependencies": {
-    "@egovernments/digit-ui-react-components": "1.8.2-beta.16",
+    "@egovernments/digit-ui-react-components": "1.8.2-beta.17",
     "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "ajv": "8.12.0",
     "lodash": "4.17.21",

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
@@ -131,7 +131,7 @@
   height: 31.25rem;
 }
 .stepper-card{
-  height: 36.5rem;
+  height: 30rem;
   margin-bottom: 1.5rem !important;
 }
 .stepper-subheader{

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json b/health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@cyntler/react-doc-viewer": "1.10.3",
     "@egovernments/digit-ui-components": "0.0.2-beta.49",
-    "@egovernments/digit-ui-react-components": "1.8.2-beta.16",
+    "@egovernments/digit-ui-react-components": "1.8.2-beta.17",
     "@rjsf/core": "5.10.0",
     "@rjsf/utils": "5.10.0",
     "@rjsf/validator-ajv8": "5.10.0",

diff --git a/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js b/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
@@ -1,10 +1,8 @@
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import React, { useEffect, useState,Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import { Button, EditIcon, Header, Loader, ViewComposer } from "@egovernments/digit-ui-react-components";
-import { Toast , Stepper , TextBlock ,Card  } from "@egovernments/digit-ui-components";
+import { Header, Loader, LoaderWithGap, ViewComposer } from "@egovernments/digit-ui-react-components";
+import { Toast, Stepper, TextBlock, Card } from "@egovernments/digit-ui-components";
 
-import { downloadExcelWithCustomName } from "../utils";
 
 
 
@@ -36,30 +34,15 @@ function boundaryDataGrp(boundaryData) {
 
 const BoundarySummary = (props) => {
   const { t } = useTranslation();
-  const history = useHistory();
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const searchParams = new URLSearchParams(location.search);
   const id = searchParams.get("id");
-  const noAction = searchParams.get("action");
   const [showToast, setShowToast] = useState(null);
-  const isPreview = searchParams.get("preview");
-  const [currentStep, setCurrentStep] = useState(2);
   const currentKey = searchParams.get("key");
   const [key, setKey] = useState(() => {
     const keyParam = searchParams.get("key");
     return keyParam ? parseInt(keyParam) : 1;
   });
-  const handleRedirect = (step, activeCycle) => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const id = urlParams.get("id");
-    urlParams.set("key", step);
-    urlParams.set("preview", false);
-    if (activeCycle) {
-      urlParams.set("activeCycle", activeCycle);
-    }
-    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-    history.push(newUrl);
-  };
 
   function updateUrlParams(params) {
     const url = new URL(window.location.href);
@@ -75,7 +58,7 @@ const BoundarySummary = (props) => {
     window.dispatchEvent(new Event("checking"));
   }, [key]);
 
-  const { isLoading, data, error, refetch } = Digit.Hooks.campaign.useSearchCampaign({
+  const { isLoading, data, error, refetch,isFetching } = Digit.Hooks.campaign.useSearchCampaign({
     tenantId: tenantId,
     filter: {
       ids: [id],
@@ -125,9 +108,7 @@ const BoundarySummary = (props) => {
     },
   });
 
-  if (isLoading) {
-    return <Loader />;
-  }
+
   const closeToast = () => {
     setShowToast(null);
   };
@@ -136,13 +117,10 @@ const BoundarySummary = (props) => {
       setTimeout(closeToast, 5000);
     }
   }, [showToast]);
-  const downloadUserCred = async () => {
-    downloadExcelWithCustomName(userCredential);
-  };
+
 
   useEffect(() => {
     setKey(currentKey);
-    setCurrentStep(currentKey);
   }, [currentKey]);
 
   const onStepClick = (currentStep) => {
@@ -155,8 +133,13 @@ const BoundarySummary = (props) => {
 
   const updatedObject = { ...data };
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
   return (
     <>
+    {(isLoading || (!data && !error) || isFetching) &&<LoaderWithGap text={t("DATA_SYNC_WITH_SERVER")} />}
      <div className="container-full">
         <div className="card-container">
           <Card className="card-header-timeline">

diff --git a/...o-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js b/...o-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
@@ -1,7 +1,7 @@
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { Button, EditIcon, Header, Loader, ViewComposer } from "@egovernments/digit-ui-react-components";
+import {  EditIcon, Header, Loader, LoaderWithGap, ViewComposer } from "@egovernments/digit-ui-react-components";
 import { Toast , Stepper , TextBlock ,Card } from "@egovernments/digit-ui-components";
 
 const CampaignDetailsSummary = (props) => {
@@ -49,7 +49,7 @@ const CampaignDetailsSummary = (props) => {
     window.dispatchEvent(new Event("checking"));
   }, [key]);
 
-  const { isLoading, data, error, refetch } = Digit.Hooks.campaign.useSearchCampaign({
+  const { isLoading, data, error, refetch ,isFetching} = Digit.Hooks.campaign.useSearchCampaign({
     tenantId: tenantId,
     filter: {
       ids: [id],
@@ -103,9 +103,6 @@ const CampaignDetailsSummary = (props) => {
     },
   });
 
-  if (isLoading) {
-    return <Loader />;
-  }
   const closeToast = () => {
     setShowToast(null);
   };
@@ -142,10 +139,13 @@ const CampaignDetailsSummary = (props) => {
     }
     else setKey(3);
   };
-
+  if (isLoading) {
+    return <Loader />;
+  }
 
   return (
     <>
+    {(isLoading || (!data && !error) || isFetching) &&<LoaderWithGap text={t("DATA_SYNC_WITH_SERVER")} />}
     <div className="container-full">
         <div className="card-container">
           <Card className="card-header-timeline">