From 672a29a761f2c0803129fad1ef1eff75c916443b Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 15 Jan 2025 00:50:33 -0800
Subject: [PATCH] deleted files & update search in bpmnand dmn
---
.../src/components/Modeler/DecisionTable.js | 258 ------------------
.../src/components/Modeler/ProcessTable.js | 84 +++---
.../src/components/Modeler/SubFlowTable.js | 246 -----------------
3 files changed, 51 insertions(+), 537 deletions(-)
delete mode 100644 forms-flow-web/src/components/Modeler/DecisionTable.js
delete mode 100644 forms-flow-web/src/components/Modeler/SubFlowTable.js
diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
deleted file mode 100644
index 123b1e4a84..0000000000
--- a/forms-flow-web/src/components/Modeler/DecisionTable.js
+++ /dev/null
@@ -1,258 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import {
- CustomButton,
- CustomSearch,
- ReusableProcessTableRow,
- TableFooter,
- NoDataFound,
- BuildModal
-} from "@formsflow/components";
-import LoadingOverlay from "react-loading-overlay-ts";
-import { useTranslation } from "react-i18next";
-import SortableHeader from "../CustomComponents/SortableHeader";
-import { fetchAllProcesses } from "../../apiManager/services/processServices";
-import { MULTITENANCY_ENABLED } from "../../constants/constants";
-import { push } from "connected-react-router";
-import ImportProcess from "../Modals/ImportProcess";
-import { setDmnSearchText, setIsPublicDiagram } from "../../actions/processActions";
-
-const DecisionTable = React.memo(() => {
- const dispatch = useDispatch();
- const { t } = useTranslation();
- const dmn = useSelector((state) => state.process?.dmnProcessList);
- const [isLoading, setIsLoading] = useState(true);
- const searchText = useSelector((state) => state.process?.dmnSearchText);
- const [activePage, setActivePage] = useState(1);
- const [limit, setLimit] = useState(5);
- const tenantKey = useSelector((state) => state.tenants?.tenantId);
- const totalCount = useSelector((state) => state.process.totalDmnCount);
- const [currentDmnSort, setCurrentDmnSort] = useState({
- activeKey: "name",
- name: { sortOrder: "asc" },
- processKey: { sortOrder: "asc" },
- modified: { sortOrder: "asc" },
- status: { sortOrder: "asc" },
- });
- const [importDecisionTable, setImportDecisionTable] = useState(false);
- const closeDmnImport = () => {
- setImportDecisionTable(false);
- };
- const [searchDmnLoading, setSearchDmnLoading] = useState(false);
- const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
- const [search, setSearch] = useState(searchText || "");
- const [showBuildModal, setShowBuildModal] = useState(false);
- const handleBuildClick = () => {
- dispatch(push(`${redirectUrl}decision-table/create`));
- };
- const handleImportClick = () => {
- setShowBuildModal(false);
- setImportDecisionTable(true);
- };
- const contents = [
- {
- id: 1,
- heading: "Build",
- body: "Create the DMN from scratch",
- onClick: handleBuildClick
- },
- {
- id: 2,
- heading: "Import",
- body: "Upload DMN from a file",
- onClick: handleImportClick
- }
- ];
-
-
- useEffect(() => {
- if (!search?.trim()) {
- dispatch(setDmnSearchText(""));
- }
- }, [search]);
-
-
- useEffect(() => {
- setIsLoading(true);
- dispatch(
- fetchAllProcesses(
- {
- pageNo: activePage,
- tenant_key: tenantKey,
- processType: "DMN",
- limit: limit,
- searchKey: search,
- sortBy: currentDmnSort.activeKey,
- sortOrder: currentDmnSort[currentDmnSort.activeKey].sortOrder,
- },
- () => {
- setIsLoading(false);
- setSearchDmnLoading(false);
- }
- )
- );
- }, [dispatch, activePage, limit, searchText, currentDmnSort]);
-
-
- const handleSort = (key) => {
- setCurrentDmnSort((prevSort) => {
- const newSortOrder = prevSort[key].sortOrder === "asc" ? "desc" : "asc";
- return {
- ...prevSort,
- activeKey: key,
- [key]: { sortOrder: newSortOrder },
- };
- });
- };
-
- const pageOptions = [
- { text: "5", value: 5 },
- { text: "10", value: 10 },
- { text: "25", value: 25 },
- { text: "50", value: 50 },
- { text: "100", value: 100 },
- { text: "All", value: totalCount },
- ];
-
- const handleClearSearch = () => {
- setSearch("");
- setActivePage(1);
- dispatch(setDmnSearchText(""));
- };
- const handleSearch = () => {
- setSearchDmnLoading(true);
- setActivePage(1);
- dispatch(setDmnSearchText(search));
- };
- const onLimitChange = (newLimit) => {
- setLimit(newLimit);
- handlePageChange(1);
- };
- const handlePageChange = (page) => setActivePage(page);
- const gotoEdit = (data) => {
- if (MULTITENANCY_ENABLED) {
- dispatch(setIsPublicDiagram(!!data.tenantId));
- }
- dispatch(push(`${redirectUrl}decision-table/edit/${data.processKey}`));
- };
-
- const handleCreateDMN = () => {
- setShowBuildModal(true);
- };
- const handleBuildModal = () => {
- setShowBuildModal(false);
- };
-
-
- return (
- <>
- <div className="d-md-flex justify-content-between align-items-center pb-3 flex-wrap">
- <div className="d-md-flex align-items-center p-0 search-box input-group input-group width-25">
- <CustomSearch
- search={search}
- setSearch={setSearch}
- handleSearch={handleSearch}
- handleClearSearch={handleClearSearch}
- placeholder={t("Search Decision Table")}
- searchLoading={searchDmnLoading}
- title={t("Search DMN Name")}
- dataTestId="DMN-search-input"
- />
- </div>
- <div className="d-md-flex justify-content-end align-items-center ">
- <CustomButton
- variant="primary"
- size="sm"
- label={t("New DMN")}
- dataTestid="create-DMN-button"
- ariaLabel="Create DMN"
- onClick={() => handleCreateDMN()}
- />
- </div>
- <LoadingOverlay active={isLoading} spinner text={t("Loading...")}>
- <div className="min-height-400 pt-3">
- <div className="custom-tables-wrapper">
- <table className="table custom-tables table-responsive-sm">
- <thead className="table-header">
- <tr>
- <th className="w-25" scope="col">
- <SortableHeader
- columnKey="name"
- title="Name"
- currentSort={currentDmnSort}
- handleSort={handleSort}
- className="ms-4"
- />
- </th>
- <th className="w-20" scope="col">
- <SortableHeader
- columnKey="processKey"
- title="ID"
- currentSort={currentDmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-15" scope="col">
- <SortableHeader
- columnKey="modified"
- title="Last Edited"
- currentSort={currentDmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-15" scope="col">
- <SortableHeader
- columnKey="status"
- title="Status"
- currentSort={currentDmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-25" colSpan="4" aria-label="edit bpmn button "></th>
- </tr>
- </thead>
- {dmn.length ?
- <tbody>
- {dmn.map((dmnItem) => (
- <ReusableProcessTableRow
- key={dmnItem.id}
- item={dmnItem}
- gotoEdit={gotoEdit}
- buttonLabel="Dmn"
- />
- ))}
- <TableFooter
- limit={limit}
- activePage={activePage}
- totalCount={totalCount}
- handlePageChange={handlePageChange}
- onLimitChange={onLimitChange}
- pageOptions={pageOptions}
- />
- </tbody> : !isLoading ? (
- <NoDataFound />
- ) : null}
- </table>
- </div>
- </div>
- </LoadingOverlay>
- </div>
- <BuildModal
- show={showBuildModal}
- onClose={handleBuildModal}
- title={t("New DMN")}
- contents={contents}
- />
- {importDecisionTable && (
- <ImportProcess
- showModal={importDecisionTable}
- closeImport={closeDmnImport}
- fileType=".dmn"
- />
- )}
- </>);
-});
-
-DecisionTable.propTypes = {};
-
-export default DecisionTable;
diff --git a/forms-flow-web/src/components/Modeler/ProcessTable.js b/forms-flow-web/src/components/Modeler/ProcessTable.js
index 4890d352fb..8979c8332d 100644
--- a/forms-flow-web/src/components/Modeler/ProcessTable.js
+++ b/forms-flow-web/src/components/Modeler/ProcessTable.js
@@ -41,6 +41,7 @@ const ProcessTable = React.memo(() => {
const tenantKey = useSelector((state) => state.tenants?.tenantId);
// local states for BPMN
+ const [searchBPMN, setSearchBPMN] = useState(searchText || "");
const [activePageBPMN, setActivePageBPMN] = useState(1);
const [limitBPMN, setLimitBPMN] = useState(5);
const [currentBpmnSort, setCurrentBpmnSort] = useState({
@@ -51,6 +52,7 @@ const ProcessTable = React.memo(() => {
status: { sortOrder: "asc" },
});
// local states for DMN
+ const [searchDMN, setSearchDMN] = useState(searchText || "");
const [activePageDMN, setActivePageDMN] = useState(1);
const [limitDMN, setLimitDMN] = useState(5);
const [currentDmnSort, setCurrentDmnSort] = useState({
@@ -61,6 +63,7 @@ const ProcessTable = React.memo(() => {
status: { sortOrder: "asc" },
});
//viewtype specific states
+ const search = isBPMN ? searchBPMN : searchDMN;
const activePage = isBPMN ? activePageBPMN : activePageDMN;
const limit = isBPMN ? limitBPMN : limitDMN;
const currentSort = isBPMN ? currentBpmnSort : currentDmnSort;
@@ -68,11 +71,39 @@ const ProcessTable = React.memo(() => {
const [showBuildModal, setShowBuildModal] = useState(false);
const [importProcess, setImportProcess] = useState(false);
const [isLoading, setIsLoading] = useState(true);
- const [search, setSearch] = useState(searchText || "");
const [searchLoading, setSearchLoading] = useState(false);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
+ //fetching bpmn or dmn
+ useEffect(() => {
+ setIsLoading(true);
+ dispatch(
+ fetchAllProcesses(
+ {
+ pageNo: activePage,
+ tenant_key: tenantKey,
+ processType: isBPMN ? "BPMN" : "DMN",
+ limit,
+ searchKey: search,
+ sortBy: currentSort.activeKey,
+ sortOrder: currentSort[currentSort.activeKey].sortOrder,
+ },
+ () => {
+ setIsLoading(false);
+ setSearchLoading(false);
+ }
+ )
+ );
+ }, [dispatch, activePage, limit, searchText, tenantKey, currentSort, isBPMN]);
+
+ //Update api call when search field is empty
+ useEffect(() => {
+ if (!search.trim()) {
+ dispatch(isBPMN ? setBpmnSearchText("") : setDmnSearchText(""));
+ }
+ }, [search, dispatch, isBPMN]);
+
const handleSort = (key) => {
const setSort = isBPMN ? setCurrentBpmnSort : setCurrentDmnSort;
@@ -87,14 +118,25 @@ const ProcessTable = React.memo(() => {
const handleSearch = () => {
setSearchLoading(true);
- handlePageChange(1);
- dispatch(isBPMN ? setBpmnSearchText(search) : setDmnSearchText(search));
+ if (isBPMN) {
+ setSearchBPMN(searchBPMN);
+ dispatch(setBpmnSearchText(searchBPMN));
+ } else {
+ setSearchDMN(searchDMN);
+ dispatch(setDmnSearchText(searchDMN));
+ }
+ handlePageChange(1);
};
const handleClearSearch = () => {
- setSearch("");
+ if (isBPMN) {
+ setSearchBPMN("");
+ dispatch(setBpmnSearchText(""));
+ } else {
+ setSearchDMN("");
+ dispatch(setDmnSearchText(""));
+ }
handlePageChange(1);
- dispatch(isBPMN ? setBpmnSearchText("") : setDmnSearchText(""));
};
const handlePageChange = (page) => {
@@ -134,6 +176,7 @@ const ProcessTable = React.memo(() => {
setImportProcess(true);
};
+ //modal contents for importing BPMN or DMN
const modalContents = [
{
id: 1,
@@ -148,41 +191,16 @@ const ProcessTable = React.memo(() => {
onClick: showImportModal,
},
];
+
- useEffect(() => {
- if (!search.trim()) {
- dispatch(isBPMN ? setBpmnSearchText("") : setDmnSearchText(""));
- }
- }, [search, dispatch, isBPMN]);
-
- useEffect(() => {
- setIsLoading(true);
- dispatch(
- fetchAllProcesses(
- {
- pageNo: activePage,
- tenant_key: tenantKey,
- processType: isBPMN ? "BPMN" : "DMN",
- limit,
- searchKey: search,
- sortBy: currentSort.activeKey,
- sortOrder: currentSort[currentSort.activeKey].sortOrder,
- },
- () => {
- setIsLoading(false);
- setSearchLoading(false);
- }
- )
- );
- }, [dispatch, activePage, limit, searchText, tenantKey, currentSort, isBPMN]);
-
+
return (
<>
<div className="d-md-flex justify-content-between align-items-center pb-3 flex-wrap">
<div className="d-md-flex align-items-center p-0 search-box input-group input-group width-25">
<CustomSearch
search={search}
- setSearch={setSearch}
+ setSearch={isBPMN ? setSearchBPMN : setSearchDMN}
handleSearch={handleSearch}
handleClearSearch={handleClearSearch}
placeholder={t(`Search ${isBPMN ? "BPMN" : "Decision Table"}`)}
diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
deleted file mode 100644
index c966f1ffb6..0000000000
--- a/forms-flow-web/src/components/Modeler/SubFlowTable.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
- CustomButton,
- CustomSearch,
- TableFooter,
- ReusableProcessTableRow,
- NoDataFound,
- BuildModal,
-} from "@formsflow/components";
-import { useSelector, useDispatch } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { fetchAllProcesses } from "../../apiManager/services/processServices";
-import LoadingOverlay from "react-loading-overlay-ts";
-import {
- setBpmnSearchText,
- setIsPublicDiagram,
-} from "../../actions/processActions";
-import { push } from "connected-react-router";
-import { MULTITENANCY_ENABLED } from "../../constants/constants";
-import SortableHeader from "../CustomComponents/SortableHeader";
-import ImportProcess from "../Modals/ImportProcess";
-
-const SubFlow = React.memo(() => {
- const dispatch = useDispatch();
- const { t } = useTranslation();
- const searchText = useSelector((state) => state.process.bpmnSearchText);
- const tenantKey = useSelector((state) => state.tenants?.tenantId);
- const processList = useSelector((state) => state.process.processList);
- const totalCount = useSelector((state) => state.process.totalBpmnCount);
- const [importSubflow, setImportSubflow] = useState(false);
-
- // Local states
- const [activePage, setActivePage] = useState(1);
- const [isLoading, setIsLoading] = useState(true);
- const [limit, setLimit] = useState(5);
- const [search, setSearch] = useState(searchText || "");
- const [searchBpmnLoading, setSearchBpmnLoading] = useState(false);
- const [currentBpmnSort, setCurrentBpmnSort] = useState({
- activeKey: "name",
- name: { sortOrder: "asc" },
- processKey: { sortOrder: "asc" },
- modified: { sortOrder: "asc" },
- status: { sortOrder: "asc" },
- });
- const [showBuildModal, setShowBuildModal] = useState(false);
- const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
-
- const ShowImportModal = () => {
- setShowBuildModal(false);
- setImportSubflow(true);
- };
-
- // Modal contents
- const modalContents = [
- {
- id: 1,
- heading: "Build",
- body: "Create the BPMN from scratch",
- onClick: () => dispatch(push(`${redirectUrl}subflow/create`)),
- },
- {
- id: 2,
- heading: "Import",
- body: "Upload BPMN from a file",
- onClick: ShowImportModal,
- },
- ];
-
- useEffect(() => {
- if (!search.trim()) dispatch(setBpmnSearchText(""));
- }, [search, dispatch]);
-
- useEffect(() => {
- setIsLoading(true);
- dispatch(
- fetchAllProcesses(
- {
- pageNo: activePage,
- tenant_key: tenantKey,
- processType: "BPMN",
- limit,
- searchKey: search,
- sortBy: currentBpmnSort.activeKey,
- sortOrder: currentBpmnSort[currentBpmnSort.activeKey].sortOrder,
- },
- () => {
- setIsLoading(false);
- setSearchBpmnLoading(false);
- }
- )
- );
- }, [dispatch, activePage, limit, searchText, tenantKey, currentBpmnSort]);
-
- const handleSort = (key) => {
- setCurrentBpmnSort((prevConfig) => ({
- ...prevConfig,
- activeKey: key,
- [key]: { sortOrder: prevConfig[key].sortOrder === "asc" ? "desc" : "asc" },
- }));
- };
-
- const pageOptions = [
- { text: "5", value: 5 },
- { text: "25", value: 25 },
- { text: "50", value: 50 },
- { text: "100", value: 100 },
- { text: "All", value: totalCount },
- ];
-
- const handlePageChange = (page) => setActivePage(page);
- const onLimitChange = (newLimit) => {
- setLimit(newLimit);
- setActivePage(1);
- };
- const handleClearSearch = () => {
- setSearch("");
- setActivePage(1);
- dispatch(setBpmnSearchText(""));
- };
-
- const handleSearch = () => {
- setSearchBpmnLoading(true);
- setActivePage(1);
- dispatch(setBpmnSearchText(search));
- };
-
- const gotoEdit = (data) => {
- if (MULTITENANCY_ENABLED) dispatch(setIsPublicDiagram(!!data.tenantId));
- dispatch(push(`${redirectUrl}subflow/edit/${data.processKey}`));
- };
-
- const handleCreateBPMN = () => {
- setShowBuildModal(true);
- };
- const handleBuildModal = () => {
- setShowBuildModal(false);
- };
-
- return (
- <>
- <div className="d-md-flex justify-content-between align-items-center pb-3 flex-wrap">
- <div className="d-md-flex align-items-center p-0 search-box input-group input-group width-25">
- <CustomSearch
- search={search}
- setSearch={setSearch}
- handleSearch={handleSearch}
- handleClearSearch={handleClearSearch}
- placeholder={t("Search BPMN Name")}
- searchLoading={searchBpmnLoading}
- title={t("Search BPMN Name")}
- dataTestId="BPMN-search-input"
- />
- </div>
- <div className="d-md-flex justify-content-end align-items-center ">
- <CustomButton
- variant="primary"
- size="sm"
- label="New BPMN"
- className=""
- dataTestid="create-BPMN-button"
- ariaLabel="Create BPMN"
- onClick={handleCreateBPMN}
- />
- </div>
- </div>
- <LoadingOverlay active={isLoading} spinner text={t("Loading...")}>
- <div className="min-height-400 pt-3">
- <div className="custom-tables-wrapper">
- <table className="table custom-tables table-responsive-sm">
- <thead className="table-header">
- <tr>
- <th className="w-25" scope="col">
- <SortableHeader
- columnKey="name"
- title="Name"
- currentSort={currentBpmnSort}
- handleSort={handleSort}
- className="ms-4"
- />
- </th>
- <th className="w-20" scope="col">
- <SortableHeader
- columnKey="processKey"
- title="ID"
- currentSort={currentBpmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-15" scope="col">
- <SortableHeader
- columnKey="modified"
- title="Last Edited"
- currentSort={currentBpmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-15" scope="col">
- <SortableHeader
- columnKey="status"
- title="Status"
- currentSort={currentBpmnSort}
- handleSort={handleSort}
- />
- </th>
- <th className="w-25" colSpan="4" aria-label="edit bpmn button "></th>
- </tr>
- </thead>
- {processList.length ? (
- <tbody>
- {processList.map((processItem) => (
- <ReusableProcessTableRow
- key={processItem.id}
- item={processItem}
- gotoEdit={gotoEdit}
- buttonLabel="Bpmn"
- />
- ))}
- <TableFooter
- limit={limit}
- activePage={activePage}
- totalCount={totalCount}
- handlePageChange={handlePageChange}
- onLimitChange={onLimitChange}
- pageOptions={pageOptions}
- />
- </tbody>
- ) : !isLoading && <NoDataFound />
- }
- </table>
- </div>
- </div>
- </LoadingOverlay>
- <BuildModal
- show={showBuildModal}
- onClose={handleBuildModal}
- title={t(`New BPMN`)}
- contents={modalContents}
- />
- {importSubflow && (
- <ImportProcess showModal={importSubflow} closeImport={() => setImportSubflow(false)} fileType=".bpmn" />
- )}
- </>
- );
-});
-
-export default SubFlow;