From 7b753189f455b676cdae128cd3157cd028423f5c Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Fri, 22 Nov 2024 11:12:35 +0530 Subject: [PATCH 1/4] preview page for form --- .../src/components/Form/EditForm/FormEdit.js | 5 +- .../components/Form/EditForm/FormPreview.js | 60 +++++++++++++++++++ forms-flow-web/src/components/Form/index.js | 14 +++++ 3 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 forms-flow-web/src/components/Form/EditForm/FormPreview.js diff --git a/forms-flow-web/src/components/Form/EditForm/FormEdit.js b/forms-flow-web/src/components/Form/EditForm/FormEdit.js index 96dbb2e998..575a52216b 100644 --- a/forms-flow-web/src/components/Form/EditForm/FormEdit.js +++ b/forms-flow-web/src/components/Form/EditForm/FormEdit.js @@ -531,8 +531,9 @@ const EditComponent = () => { fetchRestoredFormData(cloneId); }; - const handlePreview = () => { - console.log("handlePreview"); + const handlePreview = () => { + const newTabUrl = `${redirectUrl}formflow/${form._id}/view-edit`; + window.open(newTabUrl, "_blank"); }; const discardChanges = () => { diff --git a/forms-flow-web/src/components/Form/EditForm/FormPreview.js b/forms-flow-web/src/components/Form/EditForm/FormPreview.js new file mode 100644 index 0000000000..d1c48a5312 --- /dev/null +++ b/forms-flow-web/src/components/Form/EditForm/FormPreview.js @@ -0,0 +1,60 @@ +import { Form } from "@aot-technologies/formio-react"; +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { useSelector } from "react-redux"; +import { RESOURCE_BUNDLES_DATA } from "../../../resourceBundles/i18n.js"; +import { fetchFormById } from "../../../apiManager/services/bpmFormServices.js"; +import Loading from "../../../containers/Loading.js"; + +const FormPreview = () => { + const { lang } = useSelector((state) => state.user); + const { formId } = useParams(); + const [form, setForm] = useState(null); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (formId) { + setLoading(true); + // Fetch form data by ID + fetchFormById(formId) + .then((res) => { + if (res.data) { + const { data } = res; + setForm(data); + } + }) + .catch((err) => { + console.error( + "Error fetching form data:", + err.response?.data || err.message + ); + }) + .finally(() => { + setLoading(false); + }); + } + }, [formId]); + + if (loading) { + return ; + } + + return ( +
+
{form?.title}
+
+
+
+
+ ); +}; + +export default FormPreview; diff --git a/forms-flow-web/src/components/Form/index.js b/forms-flow-web/src/components/Form/index.js index 77502e5532..a2381d8ebb 100644 --- a/forms-flow-web/src/components/Form/index.js +++ b/forms-flow-web/src/components/Form/index.js @@ -8,6 +8,7 @@ import Item from "./Item/index"; import { BASE_ROUTE } from "../../constants/constants"; import Loading from "../../containers/Loading"; import AccessDenied from "../AccessDenied"; +import FormPreview from "./EditForm/FormPreview"; let user = ""; @@ -32,6 +33,15 @@ const FormSubmissionRoute = ({ component: Component, ...rest }) => ( /> ); +const FormPreviewRoute = ({ component: Component, ...rest }) => ( + + ( ) + } + /> +); + export default React.memo(() => { user = useSelector((state) => state.user.roles || []); const isAuthenticated = useSelector((state) => state.user.isAuthenticated); @@ -51,6 +61,10 @@ export default React.memo(() => { path={`${BASE_ROUTE}form/:formId/`} component={Item} /> + ); From ad6a642bcfca81401be205d71165eaefcc2f4ca5 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Fri, 22 Nov 2024 13:46:01 +0530 Subject: [PATCH 2/4] unwanted class removed --- forms-flow-web/src/components/Form/EditForm/FormPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/forms-flow-web/src/components/Form/EditForm/FormPreview.js b/forms-flow-web/src/components/Form/EditForm/FormPreview.js index d1c48a5312..c929111416 100644 --- a/forms-flow-web/src/components/Form/EditForm/FormPreview.js +++ b/forms-flow-web/src/components/Form/EditForm/FormPreview.js @@ -42,7 +42,7 @@ const FormPreview = () => { return (
{form?.title}
-
+
Date: Fri, 22 Nov 2024 13:59:16 +0530 Subject: [PATCH 3/4] Save as template removed --- .../src/components/Form/EditForm/FormPreview.js | 2 +- forms-flow-web/src/components/Modals/ActionModal.js | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/forms-flow-web/src/components/Form/EditForm/FormPreview.js b/forms-flow-web/src/components/Form/EditForm/FormPreview.js index c929111416..07ba7e639c 100644 --- a/forms-flow-web/src/components/Form/EditForm/FormPreview.js +++ b/forms-flow-web/src/components/Form/EditForm/FormPreview.js @@ -7,7 +7,7 @@ import { fetchFormById } from "../../../apiManager/services/bpmFormServices.js"; import Loading from "../../../containers/Loading.js"; const FormPreview = () => { - const { lang } = useSelector((state) => state.user); + const lang = useSelector((state) => state.user.lang); const { formId } = useParams(); const [form, setForm] = useState(null); const [loading, setLoading] = useState(false); diff --git a/forms-flow-web/src/components/Modals/ActionModal.js b/forms-flow-web/src/components/Modals/ActionModal.js index d4f6c01471..ec44b69b62 100644 --- a/forms-flow-web/src/components/Modals/ActionModal.js +++ b/forms-flow-web/src/components/Modals/ActionModal.js @@ -4,7 +4,6 @@ import { DuplicateIcon, ImportIcon, PencilIcon, - SaveTemplateIcon, CloseIcon, TrashIcon, CustomInfo, @@ -56,17 +55,6 @@ const ActionModal = React.memo( ariaLabel="Duplicate Button" onClick={() => handleAction("DUPLICATE")} /> - - } - className="" - dataTestid="save-template-button" - ariaLabel="Save as Template" - onClick={() => handleAction("SAVE_AS_TEMPLATE")} - /> Date: Mon, 25 Nov 2024 11:22:47 +0530 Subject: [PATCH 4/4] sonar issue fixed --- .../src/components/Form/EditForm/FormEdit.js | 11 +++- forms-flow-web/src/components/Form/index.js | 64 +++++++++---------- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/forms-flow-web/src/components/Form/EditForm/FormEdit.js b/forms-flow-web/src/components/Form/EditForm/FormEdit.js index 4b37e1ee93..dfd8a42e1a 100644 --- a/forms-flow-web/src/components/Form/EditForm/FormEdit.js +++ b/forms-flow-web/src/components/Form/EditForm/FormEdit.js @@ -603,9 +603,14 @@ const EditComponent = () => { }); }; - const formChange = (newForm) =>{ - setFormChangeState(prev=>{ - const key = !prev.initial ? "initial" : !prev.changed ? "changed" : null; + const formChange = (newForm) => { + setFormChangeState((prev) => { + let key = null; + if (!prev.initial) { + key = "initial"; + } else if (!prev.changed) { + key = "changed"; + } return key ? {...prev, [key]:true} : prev; }); dispatchFormAction({ type: "formChange", value: newForm }); diff --git a/forms-flow-web/src/components/Form/index.js b/forms-flow-web/src/components/Form/index.js index 5002bd4f02..aee2e3d954 100644 --- a/forms-flow-web/src/components/Form/index.js +++ b/forms-flow-web/src/components/Form/index.js @@ -1,7 +1,7 @@ import React from "react"; import { Route, Switch } from "react-router-dom"; import { useSelector } from "react-redux"; - +import PropTypes from "prop-types"; import List from "./List"; import SubmitList from "./SubmitList"; import EditForm from "./EditForm"; @@ -11,41 +11,36 @@ import Loading from "../../containers/Loading"; import AccessDenied from "../AccessDenied"; import FormPreview from "./EditForm/FormPreview"; -let user = ""; - -const FormDesignRoute = ({ component: Component, ...rest }) => ( - { - if (user.includes('create_designs') || user.includes('view_designs')) { +const GenericRoute = ({ component: Component, roles, ...rest }) => { + const userRoles = useSelector((state) => state.user.roles || []); + + return ( + { + if (roles) { + // Check for role-based access + if (roles.some((role) => userRoles.includes(role))) { + return ; + } else { + return ; + } + } return ; - } else { - return ; - } - }} - /> -); -const FormSubmissionRoute = ({ component: Component, ...rest }) => ( - - ( ) - } - /> -); + }} + /> + ); +}; -const FormPreviewRoute = ({ component: Component, ...rest }) => ( - - ( ) - } - /> -); +// PropTypes validation for the GenericRoute component +GenericRoute.propTypes = { + component: PropTypes.elementType.isRequired, + roles: PropTypes.arrayOf(PropTypes.string), +}; export default React.memo(() => { - user = useSelector((state) => state.user.roles || []); const isAuthenticated = useSelector((state) => state.user.isAuthenticated); + if (!isAuthenticated) { return ; } @@ -55,15 +50,16 @@ export default React.memo(() => { - - -