HLM-5342: Inbox Search Composer enhacement for MultiTab

micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss

@@ -99,6 +99,14 @@
                     @extend .light-text-color-primary;
                     height: fit-content;
                 }
+                &.tab{
+                    display: block;
+                    background-color: #eee;
+                    box-shadow: none;
+                    .search-wrapper{
+                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
+                    }
+                }
             }
         }
     }

micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss

@@ -530,20 +530,28 @@
 }
 
 .search-tabs-container {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin-bottom: 35px;
   display: flex;
   justify-content: space-between;
+  background-color: #eee;
 
   .search-tab-head {
     padding: 10px 35px;
+    font-weight: 700;
+    font-size: 1rem;
+    border: 1px solid #d6d5d4;
+    border-radius: 0.5rem 0.5rem 0 0;
   }
 
   .search-tab-head-selected {
     padding: 10px 35px;
     color: rgb(244, 119, 56);
+    background-color: #fff;
+    border: 1px solid #f47738;
+    border-radius: 0.5rem 0.5rem 0 0;
     border-bottom: 4px solid rgb(244, 119, 56);
-    font-weight: bold;
+    font-weight: 700;
+    font-size: 1.125rem;
+    margin-bottom: -1rem;
   }
 
   .search-tab-head-selected:focus {

micro-ui/web/micro-ui-internals/packages/react-components/README.md

@@ -83,11 +83,57 @@ Syntax for the FormComposersV2
       />
     </React.Fragment>
 ```
-
+
+To use the InboxSearchComposer component for managing multiple tabs, follow these steps:
+  1. Set `ShowTab: true` in the Inboxconfig.
+  2. In the Config array, include configuration objects for each tab. For example:
+        ```javascript
+      [
+        {
+          ...
+        },
+        {
+          ...
+        }
+      ]
+     ```
+  3. Implement custom limit offset by adding customDefaultPagination under uiConfig in the searchResult:
+        ```javascript         
+            customDefaultPagination: {
+                  limit: 5,
+                  offset: 0,
+            },
+        ```
+  4. For custom table sizes, add an array of page sizes in customPageSizesArray under uiConfig in the searchResult:
+        ```javascript   
+       customPageSizesArray: [5, 10, 15, 20],
+        ```
+  5. In the Inbox Screen, initialize the following states:
+      This state will by default take first object from array config
+        ```javascript
+      const [config, setConfig] = useState(myCampaignConfig?.myCampaignConfig?.[0]);
+        ```
+      TabData state used to fetch which tab is active
+        ```javascript
+      const [tabData, setTabData] = useState(myCampaignConfig?.myCampaignConfig?.map((i, n) => ({ key: n, label: i.label, active: n === 0 ? true : false })));
+        ```
+      Add function to perform when tab changes. Here we are setting the respective tab active and updaing its config
+        ```javascript
+      const onTabChange = (n) => {
+        setTabData((prev) => prev.map((i, c) => ({ ...i, active: c === n ? true : false })));
+        setConfig(myCampaignConfig?.myCampaignConfig?.[n]);
+      };
+        ```
+  6 At last pass all these in InboxSearchComposer props.
+
+```jsx
+      <InboxSearchComposer configs={config} showTab={true} tabData={tabData} onTabChange={onTabChange}></InboxSearchComposer>
+```
 
 ### Changelog
 
 ```bash
+1.8.1-beta.6 Added feature for Multi Tab in InboxSearchComposer
 1.8.1-beta.5 Added without labelfieldpair config for removing default card
 1.8.1-beta.4 Added Previous button in From Composer
 1.8.1-beta.3 Added XlsPreview component to preview Xls file.

micro-ui/web/micro-ui-internals/packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-react-components",
-  "version": "1.8.1-beta.5",
+  "version": "1.8.1-beta.6",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js

@@ -9,12 +9,13 @@ import SubmitBar from "../atoms/SubmitBar";
 import Toast from "../atoms/Toast";
 import { FilterIcon, RefreshIcon } from "./svgindex";
 
-const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullConfig, data }) => {
+const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullConfig, data, showTab, tabData, onTabChange }) => {
   const { t } = useTranslation();
   const { state, dispatch } = useContext(InboxContext)
   const [showToast, setShowToast] = useState(null)
   let updatedFields = [];
   const { apiDetails } = fullConfig
+  const customDefaultPagination = fullConfig?.sections?.searchResult?.uiConfig?.customDefaultPagination || null
 
   if (fullConfig?.postProcessResult) {
     //conditions can be added while calling postprocess function to pass different params
@@ -119,6 +120,21 @@ const SearchComponent = ({ uiConfig, header = "", screenType = "search", fullCon
 
   return (
     <React.Fragment>
+      {showTab && <div className="search-tabs-container">
+            <div>
+              {tabData?.map((i,num) => (
+                  <button
+                  className={i?.active === true ? "search-tab-head-selected" : "search-tab-head"}
+                  onClick={() => {
+                      clearSearch({});
+                      onTabChange(num);
+                    }}>
+                    {t(i?.label)}
+                  </button>
+                ))}
+            </div>
+          </div>
+        }
       <div className={'search-wrapper'}>
         {header && renderHeader()}
         <form onSubmit={handleSubmit(onSubmit)} onKeyDown={(e) => checkKeyDown(e)}>

micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js

@@ -64,7 +64,8 @@ const Table = ({
   tableSelectionHandler = () => {},
   onClickRow= ()=>{},
   rowClassName = "",
-  noColumnBorder=false
+  noColumnBorder=false,
+  customPageSizesArray = null
 }) => {
   const {
     getTableProps,
@@ -227,11 +228,17 @@ const Table = ({
             style={{ marginRight: "15px" }}
             onChange={manualPagination ? onPageSizeChange : (e) => setPageSize(Number(e.target.value))}
           >
-            {[10, 20, 30, 40, 50].map((pageSize) => (
+            {customPageSizesArray ?
+              customPageSizesArray.map((pageSize) => (
+                <option key={pageSize} value={pageSize}>
+                  {pageSize}
+                </option>
+              )): 
+              [10, 20, 30, 40, 50].map((pageSize) => (
               <option key={pageSize} value={pageSize}>
                 {pageSize}
               </option>
-            ))}
+              ))}
           </select>
           <span>
             <span>

micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js

@@ -16,17 +16,21 @@ import Header from "../atoms/Header";
 import { useTranslation } from "react-i18next";
 
 
-const InboxSearchComposer = ({configs,headerLabel,additionalConfig,onFormValueChange=()=>{}}) => {
+const InboxSearchComposer = ({configs,headerLabel,additionalConfig,onFormValueChange=()=>{},showTab,tabData,onTabChange}) => {
     const { t } = useTranslation();
 
     const [enable, setEnable] = useState(false);
-    const [state, dispatch] = useReducer(reducer, initialInboxState);
+    const [state, dispatch] = useReducer(reducer, initialInboxState(configs));
     const [showToast, setShowToast] = useState(false);
     //for mobile view
     const [type, setType] = useState("");
     const [popup, setPopup] = useState(false);
 
-    const apiDetails = configs?.apiDetails
+    const [apiDetails, setApiDetails] = useState(configs?.apiDetails);
+
+    useEffect(()=>{
+        setApiDetails(configs?.apiDetails)
+    },[configs])
 
     const mobileSearchSession = Digit.Hooks.useSessionStorage("MOBILE_SEARCH_MODAL_FORM", 
         {}
@@ -172,13 +176,16 @@ const InboxSearchComposer = ({configs,headerLabel,additionalConfig,onFormValueCh
                 }
                 {
                     configs?.type === 'search' && configs?.sections?.search?.show &&
-                        <div className="section search">
+                        <div className={`section search ${showTab ? "tab": ""}`}>
                             <SearchComponent 
                                 uiConfig={ configs?.sections?.search?.uiConfig} 
                                 header={configs?.sections?.search?.label} 
                                 screenType={configs.type}
                                 fullConfig={configs}
                                 data={data}
+                                showTab={showTab}
+                                tabData={tabData}
+                                onTabChange={onTabChange}
                                 />
                         </div>
 

micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposerReducer.js

@@ -1,15 +1,22 @@
-export const initialInboxState = {
-    searchForm:{
-
-    },
-    filterForm:{
-
-    },
-    tableForm:{
+export const initialInboxState = (config) => {
+    if (config?.sections?.searchResult?.uiConfig?.customDefaultPagination) {
+      return {
+        searchForm: {},
+        filterForm: {},
+        tableForm: {
+          ...config?.sections?.searchResult?.uiConfig?.customDefaultPagination,
+        },
+      };
+    }
+    return {
+      searchForm: {},
+      filterForm: {},
+      tableForm: {
         limit: 10,
         offset: 0,
-    } 
-};
+      },
+    };
+  };
 
 const reducer = (state, action) => {
     switch (action.type) {

micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js

@@ -76,7 +76,7 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu
             }
         })
     }, [config, searchResult])
-
+    const defaultValuesFromSession = config?.customDefaultPagination ? config?.customDefaultPagination : {limit:10,offset:0}
     const {
         register,
         handleSubmit,
@@ -92,10 +92,7 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu
         clearErrors,
         unregister,
     } = useForm({
-        defaultValues: {
-            offset: 0,
-            limit: 10, 
-        },
+        defaultValues: defaultValuesFromSession
     });
 
     const isMobile = window.Digit.Utils.browser.isMobile();
@@ -125,8 +122,8 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu
     }, []);
 
     useEffect(() => {
-        register("offset", 0);
-        register("limit", 10);
+        register("offset", config?.customDefaultPagination?.offset || 0);
+        register("limit", config?.customDefaultPagination?.limit || 10);
     }, [register]);
 
     useEffect(() => {
@@ -210,6 +207,7 @@ const ResultsTable = ({ tableContainerClass, config,data,isLoading,isFetching,fu
                 onClickRow={additionalConfig?.resultsTable?.onClickRow}
                 rowClassName={config.rowClassName}
                 noColumnBorder={config?.noColumnBorder}
+                customPageSizesArray={config?.customPageSizesArray || null}
             />}
         </div>
     )