Gepspatial map view (#1842)

* added minor css changes and basic logic for geospatial view * updated css version * updated chooseactivity screen * fixed syntax issue
egovernments · Nov 16, 2024 · 706044d · 706044d
1 parent e1767bf
commit 706044d
Show file tree

Hide file tree

Showing 21 changed files with 2,942 additions and 14 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js b/health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js
@@ -980,7 +980,7 @@ export const UICustomizations = {
           return row.status === "EXECUTION_TO_BE_DONE" ? (
             <ButtonNew
               label={t("START")}
-              variation="secondary"
+              variation="primary"
               icon={"ArrowForward"}
               style={{minWidth:"240px"}}
               type="button"
@@ -991,7 +991,7 @@ export const UICustomizations = {
           ) : row.status === "RESOURCE_ESTIMATIONS_APPROVED" ? (
             <ButtonNew
               label={t("WBH_DOWNLOAD")}
-              variation="secondary"
+              variation="primary"
               icon={"FileDownload"}
               style={{minWidth:"240px"}}
               type="button"
@@ -1001,7 +1001,7 @@ export const UICustomizations = {
           ) : (
             <ButtonNew
               label={t("WBH_EDIT")}
-              variation="secondary"
+              variation="primary"
               icon={"Edit"}
               style={{minWidth:"240px"}}
               type="button"

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss
@@ -317,6 +317,10 @@
     opacity: 1 !important;
   }
 
+  /* Target the first div directly inside .rdt_TableCol_Sortable */
+  > div:first-child {
+    white-space: normal;
+  }
   .__rdt_custom_sort_icon__{
     display: flex;
     align-items: center;

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
@@ -2686,7 +2686,10 @@ $border-color: rgba(214, 213, 212, 1);
 }
 
 .digit-card-component.primary.microPlanBulkTable {
-  max-width: 70vw !important;
+  overflow: hidden;
+  >div:first-child {
+   overflow: auto;
+  }
 }
 
 .loader-overlay {
@@ -2760,12 +2763,12 @@ $border-color: rgba(214, 213, 212, 1);
     margin-top: 0.5rem;
     width: 14rem
   }
-  .digit-dropdown-employee-select-wrap{
+  /*.digit-dropdown-employee-select-wrap{
     width: 27rem;
   }
   .digit-text-input-field{
     width: 27rem;
-  }
+  }*/
 }
 .popUpClass.new-assumption-pop{
   .digit-popup-footer{

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/index.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/index.scss
@@ -16,4 +16,5 @@
 @import "./pages/employee/formulaConfig.scss";
 @import "./pages/employee/microplanInbox.scss";
 
-@import "./pages/employee/checklist.scss";
+@import "./pages/employee/checklist.scss";
+@import "./pages/employee/mapview.scss";
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/mapview.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/mapview.scss
@@ -0,0 +1,304 @@
+.leaflet-control-layers {
+    &.leaftlet-control {
+        border-radius: 0rem !important;
+        background-color: transparent !important;
+        border: none !important;
+    }
+}
+
+.leaflet-bottom {
+    &.leaflet-left {
+        left: 1.5rem;
+        width: 32px;
+        height: 64px;
+        bottom: 88px;
+
+        .leaflet-control {
+            margin-left: 0px !important;
+
+            a {
+                color: theme(digitv2.lightTheme.primary) !important;
+            }
+        }
+    }
+}
+
+.leaflet-bottom .leaflet-control {
+    margin-bottom: 0px !important;
+}
+
+.map-container-main {
+    position: relative;
+
+    .top-right-map-subcomponents {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 550;
+        gap:1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end !important;
+    }
+
+    .bottom-left-map-subcomponents {
+        position: absolute;
+        bottom: 1.5rem;
+        left: 1.5rem;
+        z-index: 500;
+
+        .north-arrow{
+            width: 40px;
+            height: 40px;
+        }
+
+        .custom-scale {
+          width: 7.5rem;
+          margin-left: 0rem;
+          text-align: center;
+          border-bottom: 0.063rem solid #FFFFFF;
+          padding: 0 0;
+          color: #ffffff;
+          font-family: Roboto;
+          font-size: 0.75rem;
+          font-weight: 400;
+          position: relative;
+
+          .border-spikes {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 20%;
+            border-left: 0.063rem solid #ccc;
+            border-right: 0.063rem solid #ccc;
+          }
+        }
+      }
+
+    .base-map-selector {
+        display: flex !important;
+        flex-direction: column;
+        align-items: flex-end !important;
+        position: relative;
+        border-radius: 0.25rem;
+
+        .icon-first {
+            display: flex !important;
+            align-items: center;
+            margin-top: 0;
+            cursor: pointer;
+            box-shadow: none;
+
+            .map-filter-layers {
+                @extend .typography.heading-s;
+                margin: 0;
+                padding: 0;
+                color: theme(digitv2.lightTheme.paper);
+            }
+
+            .layer-icon {
+                margin-left: 0.5rem;
+                height: 1.667rem;
+            }
+        }
+
+        .base-map-area-wrapper {
+            position: absolute;
+            top: 2rem;
+            right: 1rem;
+            background-color: theme(digitv2.lightTheme.paper);
+            border-radius: 0.25rem;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            max-width: 27.5rem;
+            max-height: 9rem;
+            overflow-x: auto;
+            overflow-y: hidden;
+            white-space: nowrap;
+            @include custom-scrollbar;
+        }
+
+        .base-map-area {
+            display: flex !important;
+            width: fit-content;
+            white-space: nowrap;
+            padding: 0.5rem;
+            gap: 0.5rem;
+
+
+            .base-map-entity {
+                display: flex !important;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                width: 5.927rem !important;
+                cursor: pointer;
+                gap: 0.5rem;
+
+                .base-map-img {
+                    width: 5.927rem;
+                    height: 5.839rem;
+                    border: 0.063rem solid rgb(0, 0, 0, 0.1);
+                    border-radius: 0.25rem;
+                    object-fit: cover;
+                }
+
+                                p {
+                                    position: relative;
+                                    margin-left: auto;
+                                    margin-right: auto;
+                                    color: theme(digitv2.lightTheme.text-primary);
+                                    padding: 0;
+                                    margin: 0;
+                                    font-family: Roboto;
+                                    font-size: 12px;
+                                    font-weight: 400;
+                                    line-height: 14.06px;
+                                    text-align: center;
+                                    text-underline-position: from-font;
+                                    text-decoration-skip-ink: none;
+                                }
+            }
+
+            .selected {
+                background-color: rgba(255, 255, 255, 1);
+
+                .base-map-img {
+                    border: 0.125rem solid theme(digitv2.lightTheme.primary) !important;
+                }
+
+                p {
+                    @extend .typography.heading-xs;
+                    color: theme(digitv2.lightTheme.primary) !important;
+                    font-size: 0.75rem;
+                }
+            }
+        }
+    }
+
+    .filter-section,
+    .choropleth-section {
+      /*width: 14.438rem;*/
+      display: flex !important;
+      flex-direction: column;
+
+      .icon-rest {
+        display: flex !important;
+        align-items: center;
+        width: fit-content;
+        align-self: flex-end;
+        justify-content: flex-end;
+        cursor: pointer;
+
+        p {
+          margin: 0;
+          padding: 0;
+          @extend .typography.heading-s;
+          margin: 0;
+          padding: 0;
+          color: theme(digitv2.lightTheme.paper);
+        }
+
+        .filter-icon {
+          margin-left: 0.5rem;
+          height: 1.667rem;
+        }
+      }
+
+      .filter-section-option-wrapper,
+      .choropleth-section-option-wrapper {
+        position: absolute;
+        /*margin-top: 2rem;*/
+        max-height: 12.19rem;
+        /*width: 14.438rem;*/
+
+        .custom-box-wrapper {
+          display: block;
+          max-height: 9.752rem;
+          overflow-x: auto;
+          background-color: rgba(255, 255, 255, 1);
+
+          @include custom-scrollbar;
+
+          .custom-box {
+            padding: 0.7rem;
+            border-bottom: 0.063rem solid rgba(214, 213, 212, 1);
+
+            .mainClassName {
+              margin-bottom: 0;
+              display: flex;
+              align-items: center;
+            }
+
+            .inputWrapperClassName {
+              margin: 0;
+              padding: 0;
+            }
+
+            .labelClassName {
+              margin: 0;
+              margin-right: auto;
+            }
+
+            input:checked~.inputIconClassname {
+              border-color: $primary-theme-color;
+            }
+
+            .inputIconClassname {
+              margin: 0;
+            }
+
+            .inputClassName {
+              margin: 0;
+            }
+          }
+        }
+
+        .button-primary {
+          background-color: rgba(250, 250, 250, 1) !important;
+        }
+      }
+    }
+
+}
+
+.map-filter-by-boundary {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    position: absolute;
+    top: 48px;
+    z-index: 30;
+    left: 48px;
+
+    .map-filter-boundary-selection {
+        &.display-none {
+            display: none;
+        }
+
+        width: 17.5rem;
+        padding: 1rem;
+
+        button{
+            width: 100%;
+        }
+
+        .map-header-section {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .map-header-section-header {
+                @extend .typography.heading-m;
+                color: theme(digitv2.lightTheme.text-primary)
+            }
+        }
+    }
+}
+
+.hierarchy-selection-element{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/package.json b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/package.json
@@ -31,7 +31,14 @@
     "react-drag-drop-files": "^2.3.10",
     "@cyntler/react-doc-viewer": "1.10.3",
     "react-data-table-component": "7.6.2",
-    "styled-components": "5.0.0"
+    "styled-components": "5.0.0",
+    "leaflet": "^1.9.4",
+    "chroma-js": "^2.4.2",
+    "axios": "^1.6.8",
+    "exceljs": "^4.4.0",
+    "focus-trap-react": "^10.2.3",
+    "geojson-validation": "^1.0.2",
+    "jszip": "^3.10.1"
   },
   "author": "Jagankumar <[email protected]>",
   "license": "MIT"