Merge pull request #2303 from fahad-aot/feature/FWF-3667-custom-header

feature/FWF:3728 -Added Dmn list page
AOT-Technologies · Oct 30, 2024 · 8545fc3 · 8545fc3
2 parents a8c7ed0 + 572f6c5
commit 8545fc3
Show file tree

Hide file tree

Showing 13 changed files with 368 additions and 417 deletions.
diff --git a/forms-flow-web/src/actions/actionConstants.js b/forms-flow-web/src/actions/actionConstants.js
@@ -203,6 +203,7 @@ const ACTION_CONSTANTS = {
   SET_USER_GROUPS:"SET_USER_GROUPS",
   SET_ROLES:"SET_ROLES",
   SET_SUBFLOW_COUNT:"SET_SUBFLOW_COUNT",
+  SET_TOTAL_DMN_COUNT:"SET_TOTAL_DMN_COUNT"
 };
 
 export default ACTION_CONSTANTS;
diff --git a/forms-flow-web/src/actions/processActions.js b/forms-flow-web/src/actions/processActions.js
@@ -182,4 +182,11 @@ export const setSubflowCount = (data) => (dispatch) => {
     type: ACTION_CONSTANTS.SET_SUBFLOW_COUNT,
     payload: data,
   });
+}; 
+
+export const setTotalDmnCount = (data) => (dispatch) => {
+  dispatch({
+    type: ACTION_CONSTANTS.SET_TOTAL_DMN_COUNT, 
+    payload: data,
+    }); 
 };
diff --git a/forms-flow-web/src/apiManager/services/bpmFormServices.js b/forms-flow-web/src/apiManager/services/bpmFormServices.js
@@ -21,8 +21,8 @@ export const fetchBPMFormList = (
 ) => {
   const done = rest.length ? rest[0] : () => { };
   return (dispatch) => {
-    let sortOrder = formSort.sortOrder ; 
-    let sortBy = formSort.sortBy; 
+    let sortBy = formSort.activeKey; 
+    let sortOrder = formSort[sortBy].sortOrder ; 
     let url = `${API.FORM}?pageNo=${pageNo}&limit=${limit}&sortBy=${sortBy
     }&sortOrder=${sortOrder}`;
     if (formType) {

diff --git a/forms-flow-web/src/apiManager/services/processServices.js b/forms-flow-web/src/apiManager/services/processServices.js
@@ -20,6 +20,7 @@ import {
   setBpmnModel,
   setApplicationCount,
   setSubflowCount,
+  setTotalDmnCount,
   setProcessData 
 } from "../../actions/processActions";
 import { replaceUrl } from "../../helper/helper";
@@ -136,7 +137,10 @@ export  const fetchAllProcesses = ({
 
     // let url = API.GET_PROCESSES_DETAILS
    let url = `${API.GET_PROCESSES_DETAILS}?pageNo=${pageNo}&limit=${limit
-   }&sortOrder=${sortOrder}&processType=${processType}&sortBy=${sortBy}&name=${searchKey}`;
+   }&sortOrder=${sortOrder}&processType=${processType}&sortBy=${sortBy}`;
+   if (searchKey) {
+    url += `&name=${searchKey}`;
+  }
     return (dispatch) => {
       // eslint-disable-next-line max-len
       RequestService.httpGETRequest(
@@ -147,11 +151,16 @@ export  const fetchAllProcesses = ({
       )
         .then((res) => {
           if (res?.data) {
+            if(processType === "BPMN"){
             dispatch(setSubflowCount(res.data.totalCount));
             // let unique = removeTenantDuplicates(res.data.process, tenant_key);
-            dispatch(setProcessStatusLoading(false));
             dispatch(setAllProcessList(res.data.process));
-
+            }
+            if(processType === "DMN"){
+              dispatch(setAllDmnProcessList(res.data.process));
+              dispatch(setTotalDmnCount(res.data.totalCount));
+            }
+            dispatch(setProcessStatusLoading(false));
             done(null, res.data);
           } else {
             dispatch(setAllProcessList([]));

diff --git a/forms-flow-web/src/components/CustomComponents/Button.js b/forms-flow-web/src/components/CustomComponents/Button.js
diff --git a/forms-flow-web/src/components/CustomComponents/SortableHeader.js b/forms-flow-web/src/components/CustomComponents/SortableHeader.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation  } from "react-i18next";
+
+const SortableHeader = ({ columnKey, title, currentSort, handleSort,className = "" }) => {
+    const { t } = useTranslation();
+    const sortedOrder = currentSort[columnKey]?.sortOrder; 
+    const isSorted = currentSort[columnKey] !== undefined;
+    const handleKeyDown = (event)=>{
+      if (event.key === 'Enter') {  
+        handleSort(columnKey);
+        }
+    };
+    return (
+      <button
+        className={`button-as-div ${className}`}
+        onClick={() => handleSort(columnKey)}
+        onKeyDown={handleKeyDown} 
+        aria-pressed={isSorted}
+        data-testid = {`${title}-header-btn`}
+        aria-label={`${title}-header-btn`}
+      >
+        <span className="mt-1">{t(title)}</span>
+        <span>
+        <i
+          data-testid={`${columnKey}-${sortedOrder}-sort-icon`}
+          className={`fa fa-arrow-${sortedOrder === "asc" ? "up" : "down"} sort-icon fs-16 ms-2`}
+          data-toggle="tooltip"
+          title={t(sortedOrder === "asc" ? "Ascending" : "Descending")}
+        ></i>
+      </span>
+      </button>
+    );
+  };
+  SortableHeader.propTypes = {
+    columnKey: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    currentSort: PropTypes.shape({
+      activeKey: PropTypes.string.isRequired,
+      sortOrder: PropTypes.oneOf(['asc', 'desc']).isRequired, 
+    }).isRequired,
+    handleSort: PropTypes.func.isRequired,
+    className: PropTypes.string,              
+  };
+
+  SortableHeader.defaultProps = {
+    className: '',
+  };
+
+  export default SortableHeader ;
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from 'prop-types';
 import { Dropdown } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { push } from "connected-react-router";
@@ -22,6 +21,8 @@ import {
 import { HelperServices } from "@formsflow/service";
 import { CustomButton, DownArrowIcon } from "@formsflow/components";
 import userRoles from "../../../constants/permissions";
+import SortableHeader from '../../CustomComponents/SortableHeader';
+
 function FormTable() {
   const tenantKey = useSelector((state) => state.tenants?.tenantId);
   const dispatch = useDispatch();
@@ -67,17 +68,15 @@ function FormTable() {
 
   const handleSort = (key) => {
     setCurrentFormSort((prevSort) => {
-      let newSortOrder = "asc";
-
-      if (prevSort.sortBy === key) {
-        newSortOrder = prevSort.sortOrder === "asc" ? "desc" : "asc";
-      }
+      const newSortOrder = prevSort[key].sortOrder === "asc" ? "desc" : "asc";
       return {
-        sortBy: key,
-        sortOrder: newSortOrder,
+        ...prevSort,
+        activeKey: key,
+        [key]: { sortOrder: newSortOrder },
       };
     });
   };
+
   useEffect(() => {
     dispatch(setBpmFormSort(currentFormSort));
   },[currentFormSort,dispatch]);
@@ -119,52 +118,7 @@ function FormTable() {
       </tbody>
     );
   };
-  const SortableHeader = ({ columnKey, title, currentFormSort, handleSort,className }) => {
-    const isSorted = currentFormSort.sortBy === columnKey;
-    const sortedOrder = isSorted ? currentFormSort.sortOrder : "asc";
-    const handleKeyDown = (event)=>{
-      if (event.key === 'Enter') {  
-        handleSort(columnKey);
-        }
-    };
-    return (
-      <div
-        className= {`d-flex align-items-center justify-content-between cursor-pointer ${className}`}
-        onClick={() => handleSort(columnKey)}
-        onKeyDown={handleKeyDown} 
-        role="button"
-      >
-        <span className="mt-1">{t(title)}</span>
-        <span>
-          {sortedOrder === "asc" ? (
-            <i
-            data-testid={`${columnKey}-asc-sort-icon`}
-            className="fa fa-arrow-up sort-icon fs-16 ms-2"
-            data-toggle="tooltip"
-            title={t("Ascending")}
-          ></i>
-          ) : (
-            <i
-            data-testid={`${columnKey}-desc-sort-icon`}
-            className="fa fa-arrow-down sort-icon fs-16 ms-2"
-            data-toggle="tooltip"
-            title={t("Descending")}
-          ></i>
-          )}
-        </span>
-      </div>
-    );
-  };
-  SortableHeader.propTypes = {
-    columnKey: PropTypes.string.isRequired,  
-    title: PropTypes.string.isRequired,      
-    currentFormSort: PropTypes.shape({
-      sortBy: PropTypes.string,
-      sortOrder: PropTypes.string
-    }).isRequired,                          
-    handleSort: PropTypes.func.isRequired,     
-    className: PropTypes.string              
-  };
+
   return (
     <>
       <LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text={t("Loading...")}>
@@ -177,7 +131,7 @@ function FormTable() {
                   <SortableHeader
                    columnKey="formName"
                    title="Form Name"
-                   currentFormSort={currentFormSort}
+                   currentSort={currentFormSort}
                    handleSort={handleSort}
                    className="ms-4"
                   />
@@ -187,22 +141,22 @@ function FormTable() {
                   <SortableHeader 
                   columnKey="modified"
                   title="Last Edited"
-                  currentFormSort={currentFormSort}
+                  currentSort={currentFormSort}
                   handleSort={handleSort}
                   />
                   </th>
                   <th className="w-13" scope="col">
                   <SortableHeader 
                     columnKey="visibility"
                     title="Visibility"
-                    currentFormSort={currentFormSort}
+                    currentSort={currentFormSort}
                     handleSort={handleSort} />
                   </th>
                   <th className="w-12" scope="col" colSpan="4">
                     <SortableHeader 
                     columnKey="status"
                     title="Status"
-                    currentFormSort={currentFormSort}
+                    currentSort={currentFormSort}
                     handleSort={handleSort} />
                   </th>
                   <th className="w-12" colSpan="4" aria-label="Search Forms by form title"></th>
@@ -232,9 +186,7 @@ function FormTable() {
                         <td className="w-12">
                           <span data-testid={`form-status-${e._id}`} className="d-flex align-items-center">
                             {e.status === "active" ? (
-                              <>
                                 <span className="status-live"></span>
-                              </>
                             ) : (
                               <span className="status-draft"></span>
                             )}
@@ -289,9 +241,9 @@ function FormTable() {
                                   {limit}
                                 </Dropdown.Toggle>
                                 <Dropdown.Menu>
-                                  {pageOptions.map((option, index) => (
+                                  {pageOptions.map((option) => (
                                     <Dropdown.Item
-                                      key={index}
+                                      key={option.value}
                                       type="button"
                                       data-testid={`page-limit-dropdown-item-${option.value}`}
                                       onClick={() => {