Skip to content

Commit

Permalink
Merge pull request #2270 from shuhaib-aot/feature/FWF-3742-save-flow
Browse files Browse the repository at this point in the history 
FWF-3742 [feature] implemented save flow and code optimization
  • Loading branch information
@arun-s-aot
arun-s-aot authored Oct 16, 2024
2 parents f02a4b0 + 15e85f0 commit 0312d67
Show file tree
Hide file tree
Showing 11 changed files with 409 additions and 490 deletions.
2 changes: 1 addition & 1 deletion forms-flow-api/src/formsflow_api/services/process.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ def _upate_process_name_and_id(

# Prepend the XML declaration
updated_xml = '<?xml version="1.0" encoding="UTF-8"?>\n' + updated_xml
return updated_xml
return updated_xml.encode("utf-8")

@classmethod
@user_context
Expand Down
1 change: 1 addition & 0 deletions forms-flow-web/src/actions/actionConstants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ const ACTION_CONSTANTS = {

// Process
RESET_PROCESS: "RESET_PROCESS",
SET_PROCESS_DATA: "SET_PROCESS_DATA",
FORM_STATUS_LOADING: "FORM_STATUS_LOADING",
// Tenant
RESET_TENANT: "RESET_TENANT",
Expand Down
7 changes: 7 additions & 0 deletions forms-flow-web/src/actions/processActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ export const setProcessLoadError = (data) => (dispatch) => {
});
};

export const setProcessData = (data) => (dispatch) => {
dispatch({
type: ACTION_CONSTANTS.SET_PROCESS_DATA,
payload: data,
});
};

export const setProcessActivityLoadError = (data) => (dispatch) => {
dispatch({
type: ACTION_CONSTANTS.IS_PROCESS_ACTIVITY_LOAD_ERROR,
Expand Down
2 changes: 1 addition & 1 deletion forms-flow-web/src/apiManager/endpoints/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const API = {
GET_ALL_APPLICATIONS_STATUS: `${WEB_BASE_URL}/application/status/list`,
GET_PROCESS_DEFINITION: `${BPM_BASE_URL_EXT}/v1/process-definition/key/<process_key>`,
PROCESSES_XML: `${BPM_BASE_URL_EXT}/v1/process-definition/key/<process_key>/xml`,
GET_PROCESSES_XML: `${WEB_BASE_URL}/process`,
GET_PROCESSES_DETAILS: `${WEB_BASE_URL}/process`,
DMN_XML: `${BPM_BASE_URL_EXT}/v1/decision-definition/key/<process_key>/xml`,
PROCESS_ACTIVITIES: `${BPM_BASE_URL_EXT}/v1/process-instance/<process_instance_id>/activity-instances`,
FORM: `${WEB_BASE_URL}/form`,
Expand Down
29 changes: 8 additions & 21 deletions forms-flow-web/src/apiManager/services/processServices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
setProcessDiagramXML,
setProcessDiagramLoading,
setFormPreviosData,
setProcessXml,
setApplicationCountResponse,
setUnPublishApiError,
setResetProcess,
Expand Down Expand Up @@ -221,6 +220,7 @@ export const getFormProcesses = (formId, ...rest) => {
)
.then((res) => {
if (res.data) {
console.log("res.data", res.data);
dispatch(setFormPreviosData(res.data));
dispatch(setFormProcessesData(res.data));
// need to check api and put exact respose
Expand All @@ -241,26 +241,13 @@ export const getFormProcesses = (formId, ...rest) => {
};
};

export const getProcessXml = (processKey) => {
return (dispatch) => {
RequestService.httpGETRequest(
`${API.GET_PROCESSES_XML}/${processKey}`,
{},
StorageService.get(StorageService.User.AUTH_TOKEN),
true
)
.then((res, err) => {
if (res.data) {
dispatch(setProcessXml(res.data.processData));
} else {
console.log(err);
}
})
.catch((error) => {
console.log(error);
});
};
};
export const getProcessDetails = (processKey) =>
RequestService.httpGETRequest(`${API.GET_PROCESSES_DETAILS}/${processKey}`);

export const updateProcess = ({id,data,type}) => {
return RequestService.httpPUTRequest(`${API.GET_PROCESSES_DETAILS}/${id}`,
{processData:data,processType:type});
};

// fetching task variables
export const fetchTaskVariables = (formId) =>{
Expand Down
13 changes: 12 additions & 1 deletion forms-flow-web/src/components/BaseRouting.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,18 @@ const BaseRouting = React.memo(
return (
<div className="container mt-4">
<div className="min-container-height ps-md-3">
<ToastContainer />
<ToastContainer
position="bottom-right"
autoClose={3000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover={false}
theme="colored"
/>
<Switch>
<Route path="/public">
<PublicRoute
Expand Down
145 changes: 29 additions & 116 deletions forms-flow-web/src/components/Form/Item/Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import { Translation, useTranslation } from "react-i18next";
import { push } from "connected-react-router";
import { HistoryIcon, PreviewIcon } from "@formsflow/components";
import ActionModal from "../../Modals/ActionModal.js";
import { setProcessDiagramXML } from "../../../actions/processActions";
import { MULTITENANCY_ENABLED } from "../../../constants/constants";
//for save form
import { MULTITENANCY_ENABLED } from "../../../constants/constants";

import { manipulatingFormData } from "../../../apiManager/services/formFormatterService";
import {
formUpdate,
Expand All @@ -28,20 +28,20 @@ import {
} from "../../../actions/formActions";
import {
saveFormProcessMapperPut,
getProcessDetails,
getFormProcesses
} from "../../../apiManager/services/processServices";

import { setProcessData } from '../../../actions/processActions.js';

import _isEquial from "lodash/isEqual";
import { FormBuilderModal } from "@formsflow/components";
import _ from "lodash";

import BpmnEditor from "../../Modeler/Editors/BpmnEditor";
import { useParams } from "react-router-dom";
//getting process data
import { getFormProcesses } from "../../../apiManager/services/processServices";
//getting process diagram
import { getProcessXml } from "../../../apiManager/services/processServices";

import SettingsModal from "../../CustomComponents/settingsModal";
import FlowEdit from "./FlowEdit.js";

// constant values
const DUPLICATE = "DUPLICATE";
Expand Down Expand Up @@ -90,9 +90,13 @@ const Edit = React.memo(() => {
const [showLayout, setShowLayout] = useState(true);
const tenantKey = useSelector((state) => state.tenants?.tenantId);
const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
const processXmlDiagram = useSelector((state) => state.process?.processXml);
const { formId } = useParams();
const [nameError, setNameError] = useState("");

// flow edit
const [isProcessDetailsLoading, setIsProcessDetailsLoading] = useState(false);

//for save form
const [promptNewVersion, setPromptNewVersion] = useState(processListData.promptNewVersion);
const [version, setVersion] = useState({ major: 1, minor: 0 });
const [isPublished, setIsPublished] = useState(processListData?.status == "active" ? true : false);
Expand All @@ -118,7 +122,6 @@ const Edit = React.memo(() => {
const [showSaveModal, setShowSaveModal] = useState(false);
const [hasRendered, setHasRendered] = useState(false);

const [isLoadingDiagram, setIsLoadingDiagram] = useState(true);
const formPath = useSelector((state) => state.form.form.path);
const [newPath, setNewPath] = useState(formPath);

Expand Down Expand Up @@ -194,25 +197,24 @@ const Edit = React.memo(() => {
setShowFlow(true);
setShowLayout(false);
};

useEffect(() => {
if (formId) {
// Fetch form processes with formId
dispatch(getFormProcesses(formId));
dispatch(getFormProcesses(formId,(err,data)=>{
if(err) return;
setIsProcessDetailsLoading(true);
getProcessDetails(data.processKey).then((response)=>{
const { data } = response;
dispatch(setProcessData(data));
setIsProcessDetailsLoading(false);
}
);
}));
}
}, [formId]);

useEffect(() => {
if (workflow?.value) {
// Fetch workflow diagram XML when the workflow value is present
dispatch(getProcessXml(workflow.value));
}

if (workflow?.value && processXmlDiagram) {
// Set the process diagram XML and stop the loading spinner when both workflow and XML are available
dispatch(setProcessDiagramXML(processXmlDiagram));
setIsLoadingDiagram(false);
}
}, [workflow?.value, processXmlDiagram]);




Expand Down Expand Up @@ -392,17 +394,13 @@ const Edit = React.memo(() => {
console.log("handleHistory");
};

const handlePreviewAndVariables = () => {
console.log("handlePreviewAndVariables");
};


const handlePreview = () => {
console.log("handlePreview");
};

const saveFlow = () => {
console.log("saveFlow");
};


const discardChanges = () => {
console.log("discardChanges");
Expand Down Expand Up @@ -679,7 +677,7 @@ const Edit = React.memo(() => {
label={
<Translation>{(t) => t("Save Layout")}</Translation>
}
onClick={versionSaved ? () => saveFormData() : () => handleVersioning()}
onClick={versionSaved ? handleVersioning : handleVersioning}
dataTestid="save-form-layout"
ariaLabel={t("Save Form Layout")}
/>
Expand Down Expand Up @@ -714,92 +712,8 @@ const Edit = React.memo(() => {
</Card>
</div>
<div className={`wraper flow-wraper ${showFlow ? "visible" : ""}`}>
<Card>
<Card.Header>
<div
className="d-flex justify-content-between align-items-center"
style={{ width: "100%" }}
>
<div className="d-flex align-items-center justify-content-between">
<div className="mx-2 builder-header-text">Flow</div>
<div>
<CustomButton
variant="secondary"
size="md"
icon={<HistoryIcon />}
label={
<Translation>{(t) => t("History")}</Translation>
}
onClick={handleHistory}
dataTestid="flow-history-button-testid"
ariaLabel={t("Flow History Button")}
/>
<CustomButton
variant="secondary"
size="md"
className="mx-2"
label={
<Translation>
{(t) => t("Preview & Variables")}
</Translation>
}
onClick={handlePreviewAndVariables}
dataTestid="preview-and-variables-testid"
ariaLabel={t("{Preview and Variables Button}")}
/>
{/* <CustomButton
variant="secondary"
size="md"
className="mx-2"
label={<Translation>{(t) => t("Switch to BPMN")}</Translation>}
onClick={setWorkflowType}
dataTestid={"cancelBtndataTestid"}
ariaLabel={"cancelBtnariaLabel"}
/> */}
</div>
</div>
<div>
<CustomButton
variant="primary"
size="md"
className="mx-2"
label={
<Translation>{(t) => t("Save Flow")}</Translation>
}
onClick={saveFlow}
dataTestid="save-flow-layout"
ariaLabel={t("Save Flow Layout")}
/>
<CustomButton
variant="secondary"
size="md"
label={
<Translation>
{(t) => t("Discard Changes")}
</Translation>
}
onClick={discardChanges}
dataTestid="discard-flow-changes-testid"
ariaLabel={t("Discard Flow Changes")}
/>
</div>
</div>
</Card.Header>
<Card.Body>
<div className="flow-builder">
{isLoadingDiagram ? (
"loading..." // TBD: add a loader here
) : (
<BpmnEditor
processKey={workflow?.value}
tenant={workflow?.tenant}
isNewDiagram={false}
bpmnXml={processXmlDiagram}
/>
)}
</div>
</Card.Body>
</Card>
{isProcessDetailsLoading ? <>loading...</> :
<FlowEdit />}
</div>
{showFlow && (
<div
Expand Down Expand Up @@ -854,7 +768,6 @@ const Edit = React.memo(() => {
secondaryBtnText={<Translation>{(t) => t(`Save as Version ${version.major}`)}</Translation>}
size="md"
/>
<div></div>
</div>
);
});
Expand Down
Loading

0 comments on commit 0312d67

Please sign in to comment.