Merge branch 'FEATURE/HCMPRE-007' of https://github.com/egovernments/DIGIT-Frontend into FEATURE/HCMPRE-007

Author: abishekTa-egov

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json

@@ -27,7 +27,9 @@
     "@rjsf/utils": "5.10.0",
     "@rjsf/validator-ajv8": "5.10.0",
     "ajv": "8.12.0",
+    "geojsonhint": "^2.0.0",
     "leaflet": "^1.9.4",
+    "proj4": "^2.15.0",
     "react": "17.0.2",
     "react-date-range": "1.4.0",
     "react-dom": "17.0.2",

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BaseMapSwitcher.js

@@ -0,0 +1,59 @@
+import "leaflet/dist/leaflet.css";
+import React from "react";
+import * as DigitSvgs from "@egovernments/digit-ui-svg-components";
+
+
+export const generatePreviewUrl = (baseMapUrl, center = [0, 0], zoom = 5) => {
+  const lon = Math.floor(((center[1] + 180) / 360) * Math.pow(0, zoom));
+  const lat = Math.floor(
+    ((1 - Math.log(Math.tan((center[0] * Math.PI) / 180) + 1 / Math.cos((center[0] * Math.PI) / 180)) / Math.PI) / 2) * Math.pow(2, zoom)
+  );
+  if (baseMapUrl) {
+    const updatedUrl = baseMapUrl.replace("{z}", zoom).replace("{x}", lat).replace("{y}", lon).replace("{s}", "a");
+    return updatedUrl;
+  }
+  // Return a default preview URL or handle this case as needed
+  return "default-preview-url.jpg"; // todo
+};
+
+
+
+const BaseMapSwitcher = ({ baseMaps, showBaseMapSelector, setShowBaseMapSelector, handleBaseMapToggle, selectedBaseMapName, basemapRef, t }) => {
+  if (!baseMaps) return null;
+  return (
+    <div className="base-map-selector">
+      <div
+        className="icon-first"
+        onClick={() => setShowBaseMapSelector((previous) => !previous)}
+        onKeyUp={() => setShowBaseMapSelector((previous) => !previous)}
+        tabIndex={0}
+        style={{display:"flex"}}
+      >
+        <p className="map-filter-layers">{t("LAYERS")}</p>
+        <div className="layer-icon">{DigitSvgs.Layers && <DigitSvgs.Layers width={"1.667rem"} height={"1.667rem"} fill={"rgba(255, 255, 255, 1)"} />}</div>
+      </div>
+      <div className="base-map-area-wrapper" ref={basemapRef}>
+        {showBaseMapSelector && (
+          <div className="base-map-area" style={{display:"flex"}}>
+            {Object.entries(baseMaps).map(([name, baseMap], index) => {
+              return (
+                <div key={index} className={`base-map-entity ${name === selectedBaseMapName ? "selected" : ""}`}>
+                  <img
+                    className="base-map-img"
+                    key={index}
+                    src={generatePreviewUrl(baseMap?.metadata?.url, [0, 0], 0)}
+                    alt={t("ERROR_LOADING_BASE_MAP")}
+                    onClick={() => handleBaseMapToggle(name)}
+                  />
+                  <p>{t(name)}</p>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BaseMapSwitcher;

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryFilter.js

@@ -0,0 +1,45 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { Card, Button, MultiSelectDropdown, TooltipWrapper, Tooltip , Dropdown } from "@egovernments/digit-ui-components";
+import { useTranslation } from "react-i18next";
+import { InfoIconOutline, CardLabel } from "@egovernments/digit-ui-react-components";
+
+const BoundaryFilter = ({t,filterOptions , onSelectBoundary}) => {
+  const  [boundaryType , setBoundaryType] = useState(); 
+
+  function convertFilterOptionsToArray(filterOptions) {
+    const keys = Object.keys(filterOptions);
+    return keys
+      .filter((key) => Array.isArray(filterOptions[key])) 
+      .map((key) => ({
+        code: key, 
+        name: key, 
+      }));
+  }
+
+  useEffect(() => {
+      onSelectBoundary({boundaryType: boundaryType });
+  }, [boundaryType]);
+
+  return (
+    <div className={`map-filter-by-boundary`}>
+      <Button
+        type="actionButton"
+        variation="secondary"
+        icon="FilterAlt"
+        label={t("BUTTON_FILTER_BY_BOUNDARY")}
+        title={t("BUTTON_FILTER_BY_BOUNDARY")}
+        options={convertFilterOptionsToArray(filterOptions)}
+        optionsKey="name"
+        showBottom={true}
+        isSearchable={false}
+        onOptionSelect={(value) => {
+          setBoundaryType(value?.code);
+        }}
+      />
+    </div>
+  );
+};
+
+export default BoundaryFilter;

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CustomScaleControl.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+
+const CustomScaleControl = ({ map }) => {
+  if (!map) return null;
+  const [scaleText, setScaleText] = useState("");
+  // Function to calculate and update the scale text
+  const updateScale = () => {
+    // Calculate the scale based on the map's current zoom level
+    const maxWidthMeters = map.containerPointToLatLng([0, map.getSize().y]).distanceTo(map.containerPointToLatLng([100, map.getSize().y]));
+    const scale = maxWidthMeters / 1000; // Convert to kilometers
+
+    // Format the scale text
+    const scaleTextData = scale < 1 ? `${Math.round(scale * 1000)} m` : `${Math.round(Math.round(scale.toFixed(0) / 10) * 10)} km`;
+
+    // Update the scale text in the container element
+    setScaleText(scaleTextData);
+  };
+
+  // Effect to update the scale text when the map component mounts and on map zoom change
+  useEffect(() => {
+    // Update the scale text initially
+    updateScale();
+
+    // Register the map's zoom events to update the scale text
+    map.on("zoomend", updateScale);
+
+    // Clean up event listener when the component unmounts
+    return () => {
+      map.off("zoomend", updateScale);
+    };
+  }, [map]);
+
+  return (
+    <div className="custom-scale" aria-live="polite">
+      {scaleText}
+      <div className="border-spikes" aria-hidden="true" />
+    </div>
+  );
+};
+
+export default CustomScaleControl;

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/MapFilterIndex.js

@@ -0,0 +1,41 @@
+import React,{Fragment} from "react";
+import * as DigitSvgs from "@egovernments/digit-ui-svg-components";
+
+const IconCollection = {...DigitSvgs };
+
+export const FilterItemBuilder = ({ item, MapFilters, t }) => {
+    let temp = MapFilters?.find((e) => e?.name === item)?.icon?.index;
+    let DynamicIcon = IconCollection?.[temp];
+    // let icon;
+    // if (typeof DynamicIcon === "function") icon = DynamicIcon({});
+    return DynamicIcon && typeof DynamicIcon === "function" ? (
+      <div className="filter-row">
+        <DynamicIcon width={"1.5rem"} height={"1.5rem"} fill={"white"} />
+        <p className="map-filter-layers">{t(item)}</p>
+      </div>
+    ) : (
+      // <div style={{width:"1.5rem"}}></div>
+      ""
+    );
+  };
+
+const MapFilterIndex = ({ filterSelections, MapFilters, t }) => {
+    return (
+      <div className="filter-index">
+        {filterSelections && filterSelections.length > 0 ? (
+          <>
+            {filterSelections.map((item, index) => (
+              // <div className="filter-row">
+              <FilterItemBuilder key={item?.id || index} item={item} MapFilters={MapFilters} t={t} />
+              //   <p>{t(item)}</p>
+              // </div>
+            ))}
+          </>
+        ) : (
+          ""
+        )}
+      </div>
+    );
+  };
+
+export default MapFilterIndex;