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 123b1e4a8..000000000 --- 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 ( - <> -
-
- -
-
- handleCreateDMN()} - /> -
- -
-
- - - - - - - - - - - {dmn.length ? - - {dmn.map((dmnItem) => ( - - ))} - - : !isLoading ? ( - - ) : null} -
- - - - - - - -
-
-
- -
- - {importDecisionTable && ( - - )} - ); -}); - -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 4890d352f..8979c8332 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 ( <>
{ - 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 ( - <> -
-
- -
-
- -
-
- -
-
- - - - - - - - - - - {processList.length ? ( - - {processList.map((processItem) => ( - - ))} - - - ) : !isLoading && - } -
- - - - - - - -
-
-
- - - {importSubflow && ( - setImportSubflow(false)} fileType=".bpmn" /> - )} - - ); -}); - -export default SubFlow;