Merge pull request #2353 from fahad-aot/feature/fwf-3879-Added-no-rec…

…ord-page FWF-9879:[Feature]Added no records page
AOT-Technologies · Nov 19, 2024 · 227ea34 · 227ea34
2 parents ffb17bd + ab59263
commit 227ea34
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 80 deletions.
diff --git a/forms-flow-web/src/components/Form/List.scss b/forms-flow-web/src/components/Form/List.scss
@@ -138,9 +138,7 @@ flex-wrap: wrap;
 .description-content{
     max-width: 68vw;
 }
-.clientForm-table-col{
-    min-height: 300px;
-}
+
 .upload-progress{
     height: 5px;
     margin-top: 11px;

diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Dropdown } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { push } from "connected-react-router";
-import Pagination from "react-js-pagination";
 import {
   setBPMFormLimit,
   setBPMFormListPage,
@@ -19,7 +17,7 @@ import {
   resetFormProcessData
 } from "../../../apiManager/services/processServices";
 import { HelperServices } from "@formsflow/service";
-import { CustomButton, DownArrowIcon } from "@formsflow/components";
+import { CustomButton,TableFooter ,NoDataFound } from "@formsflow/components";
 import userRoles from "../../../constants/permissions";
 import SortableHeader from '../../CustomComponents/SortableHeader';
 
@@ -104,20 +102,6 @@ function FormTable() {
     setExpandedRowIndex(prevIndex => prevIndex === index ? null : index);
   };
 
-  const noDataFound = () => {
-    return (
-      <tbody>
-        <tr>
-          <td colSpan="10">
-            <div className="d-flex align-items-center justify-content-center clientForm-table-col flex-column w-100">
-              <h3>{t("No forms found")}</h3>
-              <p>{t("Please change the selected filters to view Forms")}</p>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    );
-  };
 
   return (
     <>
@@ -214,64 +198,21 @@ function FormTable() {
                   })}
                   <tr>
                     {formData.length ? (
-                      <>
-                        <td colSpan={3}>
-                          <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
-                            <span className="ms-2 pagination-text">
-                              {t("Showing")} {(limit * pageNo) - (limit - 1)} {t("to")}{" "}
-                              {limit * pageNo > totalForms ? totalForms : limit * pageNo}{" "}
-                              {t("of")} {totalForms} {t("results")}
-                            </span>
-                          </div>
-                        </td>
-                        <td colSpan={3}>
-                          <div className="d-flex align-items-center justify-content-around">
-                            <Pagination
-                              activePage={pageNo}
-                              itemsCountPerPage={limit}
-                              totalItemsCount={totalForms}
-                              pageRangeDisplayed={5}
-                              itemClass="page-item"
-                              linkClass="page-link"
-                              onChange={handlePageChange}
-                            />
-                          </div>
-                        </td>
-                        <td colSpan={3}>
-                          <div className="d-flex align-items-center justify-content-end">
-                            <span className="pagination-text">{t("Rows per page")}</span>
-                            <div className="pagination-dropdown">
-                              <Dropdown data-testid="page-limit-dropdown">
-                                <Dropdown.Toggle variant="light" id="dropdown-basic" data-testid="page-limit-dropdown-toggle">
-                                  {limit}
-                                </Dropdown.Toggle>
-                                <Dropdown.Menu>
-                                  {pageOptions.map((option) => (
-                                    <Dropdown.Item
-                                      key={option.value}
-                                      type="button"
-                                      data-testid={`page-limit-dropdown-item-${option.value}`}
-                                      onClick={() => {
-                                        onSizePerPageChange(option.value);
-                                      }}
-                                    >
-                                      {option.text}
-                                    </Dropdown.Item>
-                                  ))}
-                                </Dropdown.Menu>
-                              </Dropdown>
-                              < DownArrowIcon />
-                            </div>
-                          </div>
-                        </td>
-                      </>
+                      <TableFooter
+                      limit={limit}
+                      activePage={pageNo}
+                      totalCount={totalForms}
+                      handlePageChange={handlePageChange}
+                      onLimitChange={onSizePerPageChange}
+                      pageOptions={pageOptions}
+                    />
                     ) : (
                       <td colSpan={3}></td>
                     )}
                   </tr>
                 </tbody>
               ) : !searchFormLoading ? (
-                noDataFound()
+                <NoDataFound />
               ) : null}
             </table>
           </div>

diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -4,6 +4,7 @@ import { CustomButton,
    CustomSearch ,
    ReusableProcessTableRow ,
    TableFooter,
+   NoDataFound,
    BuildModal} from "@formsflow/components";
 import LoadingOverlay from "react-loading-overlay-ts";
 import { useTranslation } from "react-i18next";
@@ -204,7 +205,8 @@ const contents = [
                   ></th>
                 </tr>
               </thead>
-              <tbody>
+              {dmn.length  ?
+               <tbody>
                 {dmn.map((dmnItem) => (
                   <ReusableProcessTableRow
                     key={dmnItem.id}
@@ -221,7 +223,9 @@ const contents = [
                   onLimitChange={onLimitChange}
                   pageOptions={pageOptions}
                 />
-              </tbody>
+              </tbody> :  !isLoading ? (
+                <NoDataFound />
+              ) : null}
             </table>
           </div>
         </div>

diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -3,6 +3,7 @@ import { CustomButton,
    CustomSearch ,
    TableFooter ,
    ReusableProcessTableRow,
+   NoDataFound,
    BuildModal} from "@formsflow/components";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -30,7 +31,7 @@ const SubFlow = React.memo(() => {
   const process = useSelector((state) => state.process.processList);
   const totalCount = useSelector((state) => state.process.totalBpmnCount);
   const [search, setSearch] = useState(searchText || "");
-  const [searchSubflowLoading, setSearchSubflowLoading] = useState(false);
+  const [searchBpmnLoading, setSearchBpmnLoading] = useState(false);
   const [currentBpmnSort, setCurrentBpmnSort] = useState({
     activeKey: "name",
     name: { sortOrder: "asc" },
@@ -81,7 +82,7 @@ const SubFlow = React.memo(() => {
         },
         () => {
           setIsLoading(false);
-          setSearchSubflowLoading(false);
+          setSearchBpmnLoading(false);
         }
       )
     );
@@ -131,7 +132,7 @@ const SubFlow = React.memo(() => {
     dispatch(setBpmnSearchText(""));
   };
   const handleSearch = () => {
-    setSearchSubflowLoading(true);
+    setSearchBpmnLoading(true);
     setActivePage(1);
     dispatch(setBpmnSearchText(search));
   };
@@ -160,7 +161,7 @@ const SubFlow = React.memo(() => {
           handleSearch={handleSearch}
           handleClearSearch={handleClearSearch}
           placeholder={t("Search BPMN Name")}
-          searchLoading={searchSubflowLoading}
+          searchLoading={searchBpmnLoading}
           title={t("Search BPMN Name")}
           dataTestId="BPMN-search-input"
         />
@@ -222,7 +223,8 @@ const SubFlow = React.memo(() => {
                   ></th>
                 </tr>
               </thead>
-              <tbody>
+              {process.length ?
+               <tbody>
                 {process.map((processItem) => (
                   <ReusableProcessTableRow
                     key={processItem.id}
@@ -239,7 +241,9 @@ const SubFlow = React.memo(() => {
                   onLimitChange={onLimitChange}
                   pageOptions={pageOptions}
                 />
-              </tbody>
+              </tbody> : !isLoading ? (
+                <NoDataFound />
+              ) : null}
             </table>
           </div>
         </div>