Moving inbox search composer: Updated react components and workbench …

…version (#263) * Added latest InboxSearchComposer code and it's dependencies * updated package.json * Update package.json * updated code * updated dependent files * updated * Update Table.js * updated dependent code * Update CheckBox.js * Updates * updates * Update useCustomMDMS.js * Updated logic * updated package and readme * Update micro-ui/web/micro-ui-internals/packages/react-components/README.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update micro-ui/web/micro-ui-internals/packages/libraries/README.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Jagankumar <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
egovernments · Apr 10, 2024 · 0aef9d0 · 0aef9d0
1 parent e121574
commit 0aef9d0
Show file tree

Hide file tree

Showing 32 changed files with 1,460 additions and 287 deletions.
diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/README.md b/micro-ui/web/micro-ui-internals/packages/libraries/README.md
@@ -55,6 +55,7 @@ export default App;
 ### Changelog
 
 ```bash
+1.8.1-beta.2: Enhanced `useCustomMdms` hook to support version 2 of MDMS API calls.
 1.8.1-beta.1 Republished after merging with Master due to version issues.
 1.8.0 Released as part of workbench v1.0
 ```

diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/package.json b/micro-ui/web/micro-ui-internals/packages/libraries/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-libraries",
-  "version": "1.8.1-beta.1",
+  "version": "1.8.1-beta.2",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",

diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/useCustomMDMS.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/useCustomMDMS.js
@@ -1,6 +1,8 @@
 import { useQuery } from "react-query";
 import { MdmsService } from "../services/elements/MDMS";
-
+import useCustomAPIHook from "./useCustomAPIHook";
+import Urls from "../services/atoms/urls";
+import _ from "lodash";
 /**
  * Custom hook which can be used to
  * make a single hook a module to get multiple masterdetails with/without filter
@@ -25,7 +27,42 @@ import { MdmsService } from "../services/elements/MDMS";
  * 
  * @returns {Object} Returns the object of the useQuery from react-query.
  */
-const useCustomMDMS = (tenantId, moduleName, masterDetails = [], config = {}) => {
+const useCustomMDMS = (tenantId, moduleName, masterDetails = [], config = {},mdmsv2=false,) => {
+  if(mdmsv2) {
+    //here call the mdmsv2 api and return the options array 
+    return useCustomAPIHook({
+      url: Urls.mdms_v2.search,
+      params:{},
+      changeQueryName:`mdms-v2-dropdowns${mdmsv2?.schemaCode}`,
+      body:{
+        MdmsCriteria:{
+          // tenantId, //changing here to send user's tenantId always whether stateId or city
+          tenantId:Digit.ULBService.getCurrentTenantId(),
+          schemaCode:mdmsv2?.schemaCode,
+          isActive:true,
+          limit: 100,
+        }
+      },
+      config:{
+        enabled:mdmsv2 ? true : false ,
+        select: (response) => {
+           //mdms will be an array of master data
+          const {mdms} = response
+          //first filter with isActive
+          //then make a data array with actual data 
+          //refer the "code" key in data(for now) and set options array , also set i18nKey in each object to show in UI
+          const options = mdms?.filter(row => row?.isActive)?.map(row => {
+            return {
+              i18nKey:Digit.Utils.locale.getTransformedLocale(`${row?.schemaCode}_${row?.data?.code}`),
+              ...row.data,
+            }
+          })
+          return options;
+        }
+      }
+
+    });
+  }
   return useQuery([tenantId, moduleName, masterDetails], () => MdmsService.getMultipleTypesWithFilter(tenantId, moduleName, masterDetails), config);
 };
 

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/README.md b/micro-ui/web/micro-ui-internals/packages/react-components/README.md
@@ -137,6 +137,7 @@ To use the InboxSearchComposer component for managing multiple tabs, follow thes
 ### Changelog
 
 ```bash
+1.8.1-beta.10: Introduced `InboxSearchComposerV2` component with browser session integration, removable tags for search/inbox screens on mobile, and a unified configuration for both mobile and desktop screens.
 1.8.1-beta.9 Fixed Loader with gap
 1.8.1-beta.8 Added Close button and Loader
 1.8.1-beta.7 Viewcomposer enhancement for cardheader action

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/package.json b/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.9",
+  "version": "1.8.1-beta.10",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/CheckBox.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/CheckBox.js
@@ -1,19 +1,16 @@
-import React ,{Fragment}from "react";
+import React,{Fragment} from "react";
 import { CheckSvg } from "./svgindex";
 import PropTypes from "prop-types";
-import BreakLine from "./BreakLine";
 import { useTranslation } from "react-i18next";
-
-
-const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pageType, style, index, isLabelFirst, customLabelMarkup,  ...props }) => {
+const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pageType, style, index, isLabelFirst,customLabelMarkup,  ...props }) => {
   const { t } = useTranslation()
   const userType = pageType || Digit.SessionStorage.get("userType");
   let wrkflwStyle = props.styles;
   if (isLabelFirst) {
     return (
       <div className="checkbox-wrap" style={wrkflwStyle ? wrkflwStyle : {}}>
         <p style={style ? style : null}> {index+1}.</p>
-        <p className="label" style={{ maxWidth: "80%", marginLeft: "10px" }}>
+        <p className="label" style={{maxWidth: "80%", marginLeft: "10px"}}>
           {label}
         </p>
         <div>
@@ -50,14 +47,13 @@ const CheckBox = ({ onChange, label, value, disable, ref, checked, inputRef, pag
             // {(checked ? (checked = { checked }) : null)}
             checked={checked}
           />
-          <p className={userType === "employee" ? "custom-checkbox-emp" : "custom-checkbox"} style={disable ? { opacity: 0.5 } : null}>
+          <p className={userType === "employee" ? "custom-checkbox-emp" : "custom-checkbox"} style={disable ? { opacity: 0.5 } : (props?.checkboxWidth ? {...props?.checkboxWidth} : null)}>
             {/* <img src={check} alt="" /> */}
             <CheckSvg />
           </p>
         </div>
-        <p className="label" style={style ? style : {}}>
-
-          {customLabelMarkup ? 
+        <p className="label" style={style ? style : null}>
+        {customLabelMarkup ? 
           <>
             <p>{t("COMMON_CERTIFY_ONE")}</p>
             <br />

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/HorizontalNavV2.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/HorizontalNavV2.js
@@ -0,0 +1,56 @@
+import React, {useState} from 'react'
+import { useTranslation } from 'react-i18next'
+import BreakLine from './BreakLine'
+const HorizontalNavV2 = ({ configNavItems, activeLink, setActiveLink, showNav = false, children, customStyle = {}, customClassName = "", inFormComposer = true, navClassName = "", navStyles = {},fromSearchComp=false,horizontalLine=false }) => {
+    const { t } = useTranslation()
+    const setActive = (item) => {
+        setActiveLink(item)
+    }
+
+    const MenuItem = ({ item }) => {
+        let itemComponent = item.code;
+
+        const Item = () => (
+            <span className="menu-item">
+                <div className="menu-label">{t(itemComponent)}</div>
+            </span>
+        );
+
+        return (
+            <Item />
+        );
+    };
+
+    if(fromSearchComp) {
+        return (
+            <div className={navClassName} style={fromSearchComp ?{width:"100%",...navStyles} :{...navStyles}}>
+                {showNav && <div className={fromSearchComp?`horizontal-nav ${customClassName}`:`horizontal-nav ${customClassName}`} style={inFormComposer?{ marginLeft: "16px", marginRight: "16px", marginTop:"0px",...customStyle }:{...customStyle}} >
+                    {configNavItems?.map((item, index) => (
+                        <div className={`sidebar-list-search-form ${activeLink?.name === item.name ? "active" : ""}`} key={index} onClick={() => setActive(item)}>
+                            <MenuItem item={item} />
+                        </div>
+                    ))}
+                </div>
+              }
+              {/* Commenting out for now due to horizontal line coming in every inbox as well */}
+              {horizontalLine && <BreakLine style={{margin:"0px 16px 0px 16px"}}/>}
+              {children}
+          </div>
+        )
+    }
+  return (
+      <div className={navClassName} style={{...navStyles}}>
+          {showNav && <div className={`horizontal-nav ${customClassName}`} style={inFormComposer?{ marginLeft: "16px", marginRight: "16px", ...customStyle }:{...customStyle}} >
+              {configNavItems?.map((item, index) => (
+                  <div className={`sidebar-list ${activeLink?.name === item.name ? "active" : ""}`} key={index} onClick={() => setActive(item)}>
+                      <MenuItem item={item} />
+                  </div>
+              ))}
+          </div>
+        }
+        {children}
+    </div>
+  )
+}
+
+export default HorizontalNavV2
diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/InboxSearchLinks.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/InboxSearchLinks.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { PropertyHouse, BioMetricIcon,WorksMgmtIcon} from "./svgindex";
 
 const getIconComponent = (iconName="")=>{
     return require("@egovernments/digit-ui-react-components")?.[iconName];

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/MultiSelectDropdown.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/MultiSelectDropdown.js
@@ -1,8 +1,8 @@
 import React, { useEffect, useReducer, useRef, useState } from "react";
 import { ArrowDown, CheckSvg } from "./svgindex";
 import { useTranslation } from "react-i18next";
-import RemoveableTag from "./RemoveableTag";
-const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "",BlockNumber=1,isOBPSMultiple=false,props={},isPropsNeeded=false,ServerStyle={}, config}) => {
+
+const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, defaultLabel = "", defaultUnit = "",BlockNumber=1,isOBPSMultiple=false,props={},isPropsNeeded=false,ServerStyle={}, isSurvey=false,placeholder, disable=false,config}) => {
   const [active, setActive] = useState(false);
   const [searchQuery, setSearchQuery] = useState();
   const [optionIndex, setOptionIndex] = useState(-1);
@@ -14,11 +14,9 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
       case "ADD_TO_SELECTED_EVENT_QUEUE":
         return [...state, {[optionsKey]: action.payload?.[1]?.[optionsKey], propsData: action.payload} ] 
       case "REMOVE_FROM_SELECTED_EVENT_QUEUE":
-        const newState = state.filter(
-          (e) => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]
-        );
-        onSelect(newState.map((e) => e.propsData), props); // Update the form state here
-        return newState;
+        const newState =  state.filter( e => e?.[optionsKey] !== action.payload?.[1]?.[optionsKey]) 
+        onSelect(newState.map((e) => e.propsData), props);
+        return newState
       case "REPLACE_COMPLETE_STATE":
         return action.payload
       default:
@@ -28,7 +26,7 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
 
   useEffect(() => {
     dispatch({type: "REPLACE_COMPLETE_STATE", payload: fnToSelectOptionThroughProvidedSelection(selected) })
-  },[selected?.length])
+  },[selected?.length, selected?.[0]?.code])
 
   function fnToSelectOptionThroughProvidedSelection(selected){
     return selected?.map( e => ({[optionsKey]: e?.[optionsKey], propsData: [null, e]}))
@@ -84,16 +82,17 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
   }
 
   const MenuItem = ({ option, index }) => (
-    <div key={index} style={isOBPSMultiple ? (index%2 !== 0 ?{background : "#EEEEEE"}:{}):{}}>
+    <div key={index} className={`${option.isDisabled ? "disabled" : ""}`}style={isOBPSMultiple ? (index%2 !== 0 ?{background : "#EEEEEE"}:{}):{}}>
       <input
         type="checkbox"
         value={option[optionsKey]}
         checked={alreadyQueuedSelectedState.find((selectedOption) => selectedOption[optionsKey] === option[optionsKey]) ? true : false}
         onChange={(e) => isPropsNeeded?onSelectToAddToQueue(e, option,props):isOBPSMultiple?onSelectToAddToQueue(e, option,BlockNumber):onSelectToAddToQueue(e, option)}
         style={{minWidth: "24px", width: "100%"}}
+        disabled={option.isDisabled || false}
       />
       <div className="custom-checkbox">
-        <CheckSvg style={{innerWidth: "24px", width: "24px"}}/>
+        <CheckSvg style={{innerWidth: "24px", width: "24px"}} fill={option.isDisabled ? "#505050" : "#F47738"} />
       </div>
       <p className="label" style={index === optionIndex ? {
                     opacity: 1,
@@ -110,20 +109,20 @@ const MultiSelectDropdown = ({ options, optionsKey, selected = [], onSelect, def
 
   return (
     <div>
-    <div className="multi-select-dropdown-wrap" ref={dropdownRef} style={{marginBottom: '24px'}}>
-      <div className={`master${active ? `-active` : ``}`}>
-        <input className="cursorPointer"  style={{opacity: 0}} type="text" onKeyDown={keyChange} onFocus={() => setActive(true)} value={searchQuery} onChange={onSearch} />
+    <div className={`multi-select-dropdown-wrap ${disable ? "disabled" : ""}`} ref={dropdownRef}>
+      <div className={`master${active ? `-active` : ``} ${disable ? "disabled" : ""}`}>
+        <input className="cursorPointer" type="text" onKeyDown={keyChange} onFocus={() => setActive(true)} value={searchQuery} onChange={onSearch} placeholder={t(placeholder)} />
         <div className="label">
-          <p>{alreadyQueuedSelectedState.length > 0 ? `${alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}</p>
-          <ArrowDown />
+          <p>{alreadyQueuedSelectedState.length > 0 ? `${isSurvey? alreadyQueuedSelectedState?.filter((ob) => ob?.i18nKey !== undefined).length : alreadyQueuedSelectedState.length} ${defaultUnit}` : defaultLabel}</p>
+          <ArrowDown disable={disable} />
         </div>
       </div>
       {active ? (
         <div className="server" id="jk-dropdown-unique" style={ServerStyle?ServerStyle:{}}>
           <Menu />
         </div>
       ) : null}
-
+      
     </div>
     {config?.isDropdownWithChip ? <div className="tag-container">
               {alreadyQueuedSelectedState.length > 0 &&

diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/RemovableTagNew.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/RemovableTagNew.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { Close } from "./svgindex";
+
+const RemoveableTagNew = ({ text={}, onClick, extraStyles,disabled = false }) => (
+  <div className="tag inbox-tag" style={extraStyles?extraStyles?.tagStyles:{}} >
+    <span className="text inbox-tag-label" style={extraStyles?extraStyles?.textStyles:{}}>{`${text?.label} :`}</span>
+    <span className="text inbox-tag-values" style={extraStyles?extraStyles?.textStyles:{}}>{text?.value}</span>
+    <span onClick={disabled?null:onClick}>
+      <Close className="close" style={extraStyles?extraStyles?.closeIconStyles:{}} />
+    </span>
+  </div>
+);
+
+export default RemoveableTagNew;