From 220229b8b2eac5d8701cbc267982d2e3c46295a1 Mon Sep 17 00:00:00 2001 From: nabeelmd-eGov Date: Tue, 19 Mar 2024 15:33:51 +0530 Subject: [PATCH 1/3] HLM-5342: Inbox Search Composer enhacement for MultiTab --- .../inboxv2/inboxSearchComposer.scss | 8 ++++++ .../css/src/pages/employee/inbox.scss | 14 +++++++--- .../src/atoms/SearchComponent.js | 18 ++++++++++++- .../react-components/src/atoms/Table.js | 13 ++++++--- .../src/hoc/InboxSearchComposer.js | 15 ++++++++--- .../src/hoc/InboxSearchComposerReducer.js | 27 ++++++++++++------- .../react-components/src/hoc/ResultsTable.js | 12 ++++----- 7 files changed, 79 insertions(+), 28 deletions(-) diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss b/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss index 091a4e6a249..7fb3189a27b 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss +++ b/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); + } + } } } } diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss index b19e0b2d12e..1d193dca78d 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss +++ b/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 { diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js index 7024ed1f9fe..19ae3054570 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js +++ b/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 ( + {showTab &&
+
+ {tabData?.map((i,num) => ( + + ))} +
+
+ }
{header && renderHeader()}
checkKeyDown(e)}> diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js index bc335c1482c..280abc942ba 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js +++ b/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) => ( + + )): + [10, 20, 30, 40, 50].map((pageSize) => ( - ))} + ))} diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js index 6a7ad6b680c..928804bfb6b 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js +++ b/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 && -
+
diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposerReducer.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposerReducer.js index 7ef9e979379..972f845492c 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposerReducer.js +++ b/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) { diff --git a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js b/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js index 331e081825f..0aff5f793cd 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js +++ b/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} />}
) From 2cfd4f7a2cc59eac27c52e0e266f154709b2b9f0 Mon Sep 17 00:00:00 2001 From: nabeelmd-eGov Date: Tue, 19 Mar 2024 16:28:58 +0530 Subject: [PATCH 2/3] react component package upgrade and readme update --- .../packages/react-components/README.md | 48 ++++++++++++++++++- .../packages/react-components/package.json | 2 +- 2 files changed, 48 insertions(+), 2 deletions(-) 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 index 69b31e4575a..dd8513cace0 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/README.md +++ b/micro-ui/web/micro-ui-internals/packages/react-components/README.md @@ -83,11 +83,57 @@ Syntax for the FormComposersV2 /> ``` - + +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 + +``` ### 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. 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 index d27a593768e..37234656864 100644 --- 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.5", + "version": "1.8.1-beta.6", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", From 841390f0992cd488c65c419a46c5afe2bfa2b486 Mon Sep 17 00:00:00 2001 From: nabeelmd-eGov Date: Tue, 19 Mar 2024 16:31:23 +0530 Subject: [PATCH 3/3] react component package upgrade and readme update --- .../micro-ui-internals/packages/react-components/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 index dd8513cace0..18c82d4c204 100644 --- a/micro-ui/web/micro-ui-internals/packages/react-components/README.md +++ b/micro-ui/web/micro-ui-internals/packages/react-components/README.md @@ -88,7 +88,11 @@ To use the InboxSearchComposer component for managing multiple tabs, follow thes 1. Set `ShowTab: true` in the Inboxconfig. 2. In the Config array, include configuration objects for each tab. For example: ```javascript - [ + export const inboxconfig = { + tenantId: "pb", + moduleName: "inboxconfigUiConfig", + showTab: true, + inboxconfig: [ { ... },