Merge pull request #542 from Bonymol-aot/FWF-4368/attribute-filter-modal

FWF-4368: [Feature] Added attribute filter

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/CustomInfo.tsx

@@ -7,12 +7,14 @@ interface CustomInfoProps {
     heading: string ;
     content: string ;
     className?: string ;
+    dataTestId?: string;
 }
 
 export const CustomInfo: FC<CustomInfoProps> = ( { 
     heading ,
     content ,
     className ,
+    dataTestId
 }) => { 
   const { t } = useTranslation();
 
@@ -26,7 +28,7 @@ export const CustomInfo: FC<CustomInfoProps> = ( {
 
 
   return (
-    <div className={`info-panel ${className}`}>
+    <div className={`info-panel ${className}`} data-test-id={dataTestId}>
       <div className="d-flex align-items-center">
         <NewInfoIcon />
         <div className="field-label ms-2">{t(heading)}</div>

forms-flow-review/package-lock.json

@@ -58,6 +58,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@aot-technologies/formio-react": "^1.0.4",
     "@reduxjs/toolkit": "^2.6.0",
     "@stomp/stompjs": "^7.0.1",
     "@types/react": "^17.0.19",
@@ -67,8 +68,8 @@
     "connected-react-router": "^6.9.3",
     "crypto-js": "^4.2.0",
     "history": "^4.7.2",
+    "i18next": "^21.6.16",
     "i18next-browser-languagedetector": "^8.0.4",
-    "i18next": "^21.6.16",  
     "redux-logger": "^3.0.6",
     "single-spa": "^5.9.3",
     "single-spa-react": "^4.3.1",

forms-flow-review/package.json

@@ -1,5 +1,8 @@
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useCallback } from "react";
 import SocketIOService from "../services/SocketIOService";
+import { fetchBPMTaskCount, fetchFilterList } from "../api/services/filterServices";
+import { useDispatch, } from "react-redux";
+import { setBPMFiltersAndCount } from "../actions/taskActions";
 import { ResizableTable } from "../components";
 
 interface SocketUpdateParams {
@@ -10,6 +13,33 @@ interface SocketUpdateParams {
 
 const TaskList = () => {
 
+
+
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchFilterList());
+    dispatch(
+      fetchFilterList((err, data) => {
+        if (data) {
+          fetchBPMTaskCount(data.filters)
+            .then((res) => {
+              dispatch(setBPMFiltersAndCount(res.data));
+            })
+            .catch((err) => {
+              if (err) {
+                console.error(err);
+              }
+            })
+        }
+      })
+    );
+  }, [dispatch]);
+
+
+
+
   const SocketIOCallback = useCallback(
     ({ refreshedTaskId, forceReload, isUpdateEvent }: SocketUpdateParams) => {
       console.log("SocketIOCallback called");
@@ -43,9 +73,19 @@ const TaskList = () => {
     };
   }, [SocketIOCallback]);
 
+
+
+
   return (
     <div>
-      <ResizableTable/>
+      <ResizableTable />
     </div>
+
+
+
   );
-};export default TaskList;
+};
+
+
+
+export default TaskList;

forms-flow-review/src/Routes/TaskListing.tsx

@@ -16,6 +16,9 @@ export default {
     BPM_FILTER_LIST: "BPM_FILTER_LIST",
     IS_BPM_FILTERS_LOADING: "IS_BPM_FILTERS_LOADING",
     BPM_SELECTED_FILTER: "BPM_SELECTED_FILTER",
+    BPM_FILTERS_AND_COUNT:"BPM_FILTERS_AND_COUNT",
+    SELECTED_TASK_ID: "SELECTED_TASK_ID",
+    UPDATE_FILTER_SEARCH_PARAMS:"UPDATE_FILTER_SEARCH_PARAMS",
     TASKLIST: "TASKLIST",
     TASK_LIST_LIMIT_CHANGE: "TASK_LIST_LIMIT_CHANGE",
     TASK_LIST_PAGE_CHANGE: "TASK_LIST_PAGE_CHANGE",

forms-flow-review/src/actions/actionConstants.ts

@@ -96,6 +96,40 @@ export const setTasks = (data: any) => ({
     });
   };
 
+  export const setSelectedBPMFilter = (data) => (dispatch) => {
+    dispatch({
+      type: ACTION_CONSTANTS.BPM_SELECTED_FILTER,
+      payload: data,
+    });
+  };
+
+  export const setBPMFiltersAndCount = (data) => (dispatch) => {
+    dispatch({
+      type: ACTION_CONSTANTS.BPM_FILTERS_AND_COUNT, 
+      payload: data,
+    });
+  };
+
+  export const setSelectedTaskID = (data) => (dispatch) => {
+    dispatch({
+      type: ACTION_CONSTANTS.SELECTED_TASK_ID,
+      payload: data,
+    });
+  };
+
+  export const setBPMTaskListActivePage = (data) => (dispatch) => {
+    dispatch({
+      type: ACTION_CONSTANTS.BPM_TASK_LIST_ACTIVE_PAGE,
+      payload: data,
+    });
+  };
+
+  export const setBPMFilterSearchParams = (data) => (dispatch) => {
+    dispatch({
+      type: ACTION_CONSTANTS.UPDATE_FILTER_SEARCH_PARAMS, 
+      payload: data,
+    });
+  };