Pop inbox screen (#1588)

* updated pop up screen with api * updated css version * removed console logs * removed logs --------- Co-authored-by: rachana-egov <[email protected]> Co-authored-by: Nipun Arora <[email protected]>
egovernments · Oct 21, 2024 · 37b265c · 37b265c
1 parent 1bb57fd
commit 37b265c
Show file tree

Hide file tree

Showing 8 changed files with 624 additions and 378 deletions.
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
@@ -15,8 +15,8 @@
     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].2/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].3/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> -->

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/microplanInbox.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/microplanInbox.scss
@@ -1,5 +1,30 @@
 .pop-inbox-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem;
+}
+
+.pop-inbox-wrapper-filter-table-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 100%;
+
+  .filter-card-vertical {
+    max-width: 400px;
+  }
+
+  .pop-inbox-table-wrapper {
+    width: 100% !important;
+    max-width: 100%;
+  }
+}
+
+.table-actions-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: "center";
+  flex-wrap: "wrap";
+  margin-left: auto;
 }
diff --git a/...ui/web/micro-ui-internals/packages/modules/microplan/src/components/InboxFilterWrapper.js b/...ui/web/micro-ui-internals/packages/modules/microplan/src/components/InboxFilterWrapper.js
@@ -1,84 +1,97 @@
-import React, { Fragment, useState, } from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { FilterCard, LabelFieldPair, RadioButtons } from "@egovernments/digit-ui-components";
 
 const InboxFilterWrapper = (props) => {
   const { t } = useTranslation();
-
-  // defaultValue structure: {"key": value}
-  // defaultSelectedOption structure: { code: string, name: string }
-    const defaultSelectedOption = props.defaultValue 
-        ? { code: Object.keys(props.defaultValue)[0], name: `${t(Object.keys(props.defaultValue)[0])} (${Object.values(props.defaultValue)[0]})` } 
-        : null;
-
-    // Initialize state with the default selected option
-    const [selectedValue, setSelectedValue] = useState(defaultSelectedOption);
-
-    const createArrayFromObject = (obj, t) => {
-      if (!obj || typeof obj !== 'object' || typeof t !== 'function') {
-        console.error('Invalid input to createArrayFromObject');
-        return [];
-      }
-      return Object.entries(obj).map(([key, value]) => ({
-        code: key,
-        name: `${t(key)} (${value})`
-      }));
-    };
-
-    // Usage of the function
-    const resultArray = createArrayFromObject(props?.options, t); 
-
-    // Function to handle selection from the radio buttons
-    const handleSelect = (option) => {
-      setSelectedValue(option); // Update state with the selected option
-    };
-
-    // Function to handle applying the filters
-    const handleApplyFilters = () => {
-      if (props.onApplyFilters) {
-        props.onApplyFilters(selectedValue);  // Pass the filter data to the parent function
-      }
-    };
-
-    const clearFilters = () => {
-      setSelectedValue(null);
-      if (props.onApplyFilters) {
-        props.onApplyFilters(null);
-      }
+
+  // Default selected option
+  const defaultSelectedOption = props.defaultValue
+    ? { code: Object.keys(props.defaultValue)[0], name: `${t(Object.keys(props.defaultValue)[0])} (${Object.values(props.defaultValue)[0]})` }
+    : null;
+
+
+  // Initialize state with the default selected option
+  const [selectedValue, setSelectedValue] = useState(defaultSelectedOption);
+
+
+  // Update selected value when defaultValue changes
+  useEffect(() => {
+    setSelectedValue(defaultSelectedOption);
+  }, [props.defaultValue]);
+
+
+
+
+
+  const createArrayFromObject = (obj, t) => {
+    if (!obj || typeof obj !== "object" || Object.keys(obj).length === 0 || typeof t !== "function") {
+      return []; // Return an empty array if options object is empty or null
     }
-
-    return (
-      <FilterCard
-        layoutType={"vertical"}
-        onClose={props?.onClose}
-        onPrimaryPressed={handleApplyFilters}  // Trigger filter apply on primary action
-        onSecondaryPressed={clearFilters}  // Clear filters on secondary action
-        primaryActionLabel={t(props?.primaryActionLabel)}
-        secondaryActionLabel={t(props?.secondaryActionLabel)}
-        title={t(props?.title)}
-      >
+    return Object.entries(obj).map(([key, value]) => ({
+      code: key,
+      name: `${t(key)} (${value})`,
+    }));
+  };
+
+  // Generate options from props.options
+  const resultArray = createArrayFromObject(props?.options, t);
+
+  // Handle selection of radio button
+  const handleSelect = (option) => {
+    setSelectedValue(option); // Update selected value
+  };
+
+  // Apply filters when the user presses the primary action button
+  const handleApplyFilters = () => {
+    if (props.onApplyFilters) {
+      props.onApplyFilters(selectedValue); // Call the parent function with selected value
+    }
+  };
+
+  // Clear filters when the user presses the secondary action button
+  const clearFilters = () => {
+    setSelectedValue(null);
+    if (props.clearFilters) {
+      props.clearFilters();
+    }
+  };
+
+  return (
+    <FilterCard
+      layoutType={"vertical"}
+      onClose={props?.onClose}
+      onPrimaryPressed={handleApplyFilters} // Apply filters
+      onSecondaryPressed={clearFilters} // Clear filters
+      primaryActionLabel={resultArray.length > 0 && t(props?.primaryActionLabel)}
+      secondaryActionLabel={resultArray.length > 0 && t(props?.secondaryActionLabel)}
+      title={t(props?.title)}
+    >
+      {/* Only render LabelFieldPair if resultArray has items */}
+      {resultArray.length > 0 && (
         <LabelFieldPair>
           <RadioButtons
             options={resultArray}
-            optionsKey={"name"}  // Use "name" key by default
-            selectedOption={selectedValue}  // Pass the current selected option
+            optionsKey={"name"} // Use "name" key for display
+            selectedOption={selectedValue} // Pass current selected option
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: "1rem",  // Adds space between options
+              gap: "1rem", // Adds space between options
             }}
-            onSelect={handleSelect}  // Function to handle selection
+            onSelect={handleSelect} // Function to handle selection
           />
         </LabelFieldPair>
-       </FilterCard>
-    );
-  };
+      )}
+    </FilterCard>
+  );
+};
 
-  InboxFilterWrapper.defaultProps = {
-    primaryActionLabel: "ES_COMMON_APPLY_FILTERS",
-    secondaryActionLabel: "ES_COMMON_CLEAR_SEARCH",
-    title: "FILTERS",
-    optionsKey: "name"
-  };
+InboxFilterWrapper.defaultProps = {
+  primaryActionLabel: "ES_COMMON_APPLY_FILTERS",
+  secondaryActionLabel: "ES_COMMON_CLEAR_SEARCH",
+  title: "FILTERS",
+  optionsKey: "name",
+};
 
 export default InboxFilterWrapper;