From fcf85728747f01f5655e358b4eb909bf7c026fa9 Mon Sep 17 00:00:00 2001 From: josephalexantony-aot Date: Thu, 18 Jul 2024 03:08:45 -0700 Subject: [PATCH] FWF-3459:[Feature]-designer-tabel design --- forms-flow-web/src/components/BaseRouting.jsx | 2 +- forms-flow-web/src/components/Form/List.js | 606 ++---------------- forms-flow-web/src/components/Form/List.scss | 6 - .../components/Form/constants/FormTable.js | 347 +++------- 4 files changed, 155 insertions(+), 806 deletions(-) diff --git a/forms-flow-web/src/components/BaseRouting.jsx b/forms-flow-web/src/components/BaseRouting.jsx index 0403532a23..9aee717778 100644 --- a/forms-flow-web/src/components/BaseRouting.jsx +++ b/forms-flow-web/src/components/BaseRouting.jsx @@ -59,7 +59,7 @@ const BaseRouting = React.memo( return ; } return ( -
+
diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js index e74c0fe75e..bae94db35e 100644 --- a/forms-flow-web/src/components/Form/List.js +++ b/forms-flow-web/src/components/Form/List.js @@ -1,125 +1,88 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useState } from "react"; import { connect, useDispatch, useSelector } from "react-redux"; import { push } from "connected-react-router"; import { toast } from "react-toastify"; -import _isEquial from "lodash/isEqual"; +import { + InputGroup, + FormControl, +} from "react-bootstrap"; import { selectRoot, selectError, Errors, deleteForm } from "react-formio"; import Loading from "../../containers/Loading"; -import Head from "../../containers/Head"; -import { textTruncate } from "../../helper/helper"; +// import { textTruncate } from "../../helper/helper"; import { MULTITENANCY_ENABLED, STAFF_DESIGNER, } from "../../constants/constants"; import "../Form/List.scss"; import { - setFormFailureErrorData, setBPMFormListLoading, setFormDeleteStatus, + setBpmFormSearch, + setBPMFormListPage, } from "../../actions/formActions"; -import Confirm from "../../containers/Confirm"; -import MessageModal from "../../containers/MessageModal.js"; import { - fetchBPMFormList, - fetchFormByAlias, - fetchFormById, + fetchBPMFormList } from "../../apiManager/services/bpmFormServices"; -import FileService from "../../services/FileService"; import { setFormCheckList, - setFormSearchLoading, - setFormUploadList, - updateFormUploadCounter, - formUploadFailureCount, - DesignerAccessDenied, + setFormSearchLoading } from "../../actions/checkListActions"; -import FileModal from "./FileUpload/fileUploadModal"; import { useTranslation, Translation } from "react-i18next"; -import { addHiddenApplicationComponent } from "../../constants/applicationComponent"; import { - getFormProcesses, - saveFormProcessMapperPost, - saveFormProcessMapperPut, unPublishForm, - getApplicationCount, } from "../../apiManager/services/processServices"; -import { addTenantkey } from "../../helper/helper"; -import { formCreate, formUpdate } from "../../apiManager/services/FormServices"; -import { getFormattedForm, INACTIVE } from "./constants/formListConstants"; -import { - handleAuthorization, - fetchFormAuthorizationDetials, -} from "../../apiManager/services/authorizationService.js"; import FormTable from "./constants/FormTable"; import ClientTable from "./constants/ClientTable"; -import { useMemo } from "react"; import _ from "lodash"; -import { ExportButton,ButtonState } from "./ExportAsPdf/button.jsx"; const List = React.memo((props) => { const { t } = useTranslation(); - const [showFormUploadModal, setShowFormUploadModal] = useState(false); - const [isloading, setIsLoading] = useState(true); - const [validationErrors, setValidationErrors] = useState({ - path: '', - name: '', - }); + const searchText = useSelector((state) => state.bpmForms.searchText); + const [search, setSearch] = useState(searchText || ""); + useEffect(() => { + setSearch(searchText); + }, [searchText]); + + useEffect(() => { + if (!search?.trim()) { + dispatch(setBpmFormSearch("")); + } + }, [search]); + const handleSearch = () => { + dispatch(setBpmFormSearch(search)); + dispatch(setBPMFormListPage(1)); + }; + const handleClearSearch = () => { + setSearch(""); + dispatch(setBpmFormSearch("")); + }; const dispatch = useDispatch(); - const uploadFormNode = useRef(); const { forms, getFormsInit, errors, userRoles, - formId, - onNo, - onYes, tenants, } = props; const isBPMFormListLoading = useSelector((state) => state.bpmForms.isActive); const designerFormLoading = useSelector( (state) => state.formCheckList.designerFormLoading ); - const searchText = useSelector((state) => state.bpmForms.searchText); const isDesigner = userRoles.includes(STAFF_DESIGNER); const pageNo = useSelector((state) => state.bpmForms.page); const limit = useSelector((state) => state.bpmForms.limit); const sortBy = useSelector((state) => state.bpmForms.sortBy); const sortOrder = useSelector((state) => state.bpmForms.sortOrder); - const formCheckList = useSelector((state) => state.formCheckList.formList); - const formAccess = useSelector((state) => state.user?.formAccess || []); - const [downloadButtonState, setDownloadButtonState] = useState(ButtonState.Primary); - const submissionAccess = useSelector( - (state) => state.user?.submissionAccess || [] - ); - const searchFormLoading = useSelector( (state) => state.formCheckList.searchFormLoading ); - const applicationCountResponse = useSelector( - (state) => state.process?.applicationCountResponse - ); - const formProcessData = useSelector((state) => state.process.formProcessList); - const applicationCount = useSelector( - (state) => state.process?.applicationCount - ); const tenantKey = tenants?.tenantId; const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/"; - const preDownloading = ()=> setDownloadButtonState(ButtonState.Loading); - const postDownloading = ()=> setDownloadButtonState(ButtonState.Primary); useEffect(() => { dispatch(setFormCheckList([])); }, [dispatch]); - useEffect(() => { - if (!showFormUploadModal) { - setValidationErrors((prevErrors) => ({ ...prevErrors, path: '', name: '' })); - setIsLoading(true); - } - }, [showFormUploadModal]); - - useEffect(() => { dispatch(setBPMFormListLoading(true)); }, []); @@ -143,371 +106,8 @@ const List = React.memo((props) => { searchText, ]); - const formCheck = (formCheckList) => { - const result = formCheckList.reduce(function (obj, v) { - obj[v.type] = (obj[v.type] || 0) + 1; - return obj; - }, {}); - - let response = ""; - - if (result.resource) { - response = `${result.resource} ${result.resource == 1 ? t("Resource") : t("Resources") - }`; - } - if (result.form) { - response += `${result.resource ? " ," : ""} ${result.form} ${result.form == 1 ? t("Form") : t("Forms") - }`; - } - return toast.success(`${response} ${t("Downloaded Successfully")}`); - }; - - const headerList = () => { - return [ - { - name: "Forms", - icon: "file-text-o me-2", - }, - ]; - }; - - let headOptions = useMemo(() => { - return isDesigner && headerList(); - }, [isDesigner]); - - const downloadForms = async () => { - preDownloading(); - let downloadForm = []; - for (const form of formCheckList) { - let newFormData = await fetchFormById(form._id); - newFormData = getFormattedForm(newFormData.data); - downloadForm.push(newFormData); - } - - if (downloadForm.length == formCheckList.length) { - FileService.downloadFile({ forms: downloadForm }, () => { - formCheck(downloadForm); - dispatch(setFormCheckList([])); - }); - } else { - toast.error(`Download Failed`); - } - postDownloading(); - }; - - const uploadClick = (e) => { - dispatch(setFormUploadList([])); - e.preventDefault(); - uploadFormNode.current?.click(); - return false; - }; - - const mapperHandler = (form) => { - const data = { - formId: form._id, - formName: form.title, - formType: form.type, - formTypeChanged: true, - anonymousChanged: true, - parentFormId: form._id, - titleChanged: true, - formRevisionNumber: "V1", // to do - anonymous: false, - }; - dispatch( - // eslint-disable-next-line no-unused-vars - saveFormProcessMapperPost(data, (err, res) => { - if (!err) { - fetchForms(); - } else { - dispatch(formUploadFailureCount()); - } - }) - ); - }; - - const isMapperSaveNeeded = (mapperData, formdata, applicationData) => { - const applicationCount = applicationData?.data.value; - // checks if the updates need to save to form_process_mapper too - if (mapperData.formName !== formdata.title && applicationCount > 0) { - return "new"; - } - if ( - mapperData.formName !== formdata.title || - mapperData.formType !== formdata.type - ) { - return "update"; - } - }; - - const setDefaultAuthorization = (parentFormId) => { - let payload = { - resourceId: parentFormId, - resourceDetails: {}, - roles: [], - }; - handleAuthorization( - { application: payload, designer: payload, form: payload }, - parentFormId - ).catch((err) => { - console.log(err); - }); - }; - - // upload file - const uploadFileContents = async (fileContent) => { - try { - if (fileContent.forms && Array.isArray(fileContent.forms)) { - await Promise.all( - fileContent.forms.map(async (formData) => { - return new Promise((resolve, reject) => { - formData = addHiddenApplicationComponent(formData); - let tenantDetails = {}; - if (MULTITENANCY_ENABLED && tenantKey) { - tenantDetails = { tenantKey }; - formData.path = addTenantkey(formData.path, tenantKey); - formData.name = addTenantkey(formData.name, tenantKey); - } - const newFormData = { - ...formData, - tags: ["common"], - ...tenantDetails, - }; - newFormData.access = formAccess; - newFormData.submissionAccess = submissionAccess; - newFormData.componentChanged = true; - newFormData.newVersion = true; - formCreate(newFormData) - .then((res) => { - const { data } = res; - mapperHandler(data); - // call the auth api - setDefaultAuthorization(data._id); - dispatch(updateFormUploadCounter()); - }) - .catch((err) => { - const errorResponse = err.response.data; - const pathErrorMessage = errorResponse.errors.path ? errorResponse.errors.path.message : ''; - const nameErrorMessage = errorResponse.errors.name ? errorResponse.errors.name.message : ''; - newFormData.componentChanged = false; - if (pathErrorMessage !== '' || nameErrorMessage !== '') { - dispatch(formUploadFailureCount()); - setIsLoading(false); - setValidationErrors({ - path: pathErrorMessage, - name: nameErrorMessage, - }); - } - else { - dispatch( - fetchFormByAlias(newFormData.path, async (err, formObj) => { - if (!err) { - dispatch( - // eslint-disable-next-line no-unused-vars - getFormProcesses(formObj._id, (err, mapperData) => { - // just update form - if (mapperData) { - fetchFormAuthorizationDetials( - formObj.parentFormId || formObj._id - ) - .then(() => { - dispatch( - getApplicationCount( - mapperData.id, - (error, applicationCount) => { - if (!error) { - newFormData._id = formObj._id; - newFormData.access = formObj.access; - newFormData.submissionAccess = - formObj.submissionAccess; - newFormData.componentChanged = - !_isEquial( - newFormData.components, - formObj.components - ) || - newFormData.display !== - formObj.display || - newFormData.type !== formObj.type; - newFormData.parentFormId = - mapperData.parentFormId; - formUpdate( - newFormData._id, - newFormData - ) - .then((formupdated) => { - const updatedForm = - formupdated.data; - const data = { - anonymous: - mapperData.anonymous === null - ? false - : mapperData.anonymous, - formName: updatedForm.title, - formType: updatedForm.type, - parentFormId: - mapperData.parentFormId, - status: mapperData.status - ? mapperData.status - : INACTIVE, - taskVariable: - mapperData.taskVariable - ? mapperData.taskVariable - : [], - id: mapperData.id, - formId: updatedForm._id, - formTypeChanged: - mapperData.formType !== - updatedForm.type, - titleChanged: - mapperData.formName !== - updatedForm.title, - }; - - const isMapperNeed = - isMapperSaveNeeded( - mapperData, - updatedForm, - applicationCount - ); - - if (isMapperNeed === "new") { - data["version"] = String( - +mapperData.version + 1 - ); - dispatch( - saveFormProcessMapperPost( - data - ) - ); - } else if ( - isMapperNeed === "update" - ) { - dispatch( - saveFormProcessMapperPut(data) - ); - } - fetchForms(); - dispatch( - updateFormUploadCounter() - ); - resolve(); - }) - .catch((err) => { - dispatch( - setFormFailureErrorData( - "form", - err - ) - ); - dispatch( - formUploadFailureCount() - ); - reject(); - }); - } else { - reject(); - toast.error( - "Error in submission count" - ); - } - } - ) - ); - }) - .catch(() => { - dispatch(DesignerAccessDenied(true)); - dispatch(formUploadFailureCount()); - reject(); - }); - } else if (!mapperData) { - newFormData.componentChanged = true; - newFormData.newVersion = true; - newFormData.path += "-" + Date.now(); - newFormData.name += "-" + Date.now(); - formCreate(newFormData) - .then((res) => { - if (res.data) { - mapperHandler(res.data); - // call the auth api - setDefaultAuthorization(res.data._id); - } - dispatch(updateFormUploadCounter()); - resolve(); - }) - .catch((err) => { - err ? dispatch(formUploadFailureCount()) : ""; - reject(); - }); - } else { - toast.error(err); - reject(); - } - }) - ); - } else { - dispatch(formUploadFailureCount()); - reject(); - } - }) - ); - } - }); - }); - }) - ); - } - } catch (err) { - err ? dispatch(formUploadFailureCount()) : ""; - } - }; - - const fileUploaded = async (evt) => { - FileService.uploadFile(evt, async (fileContent) => { - let formToUpload; - if ("forms" in fileContent) { - if (Array.isArray(fileContent.forms)) { - formToUpload = fileContent; - } else { - const resourcesArray = Object.entries(fileContent.resources); - const formsData = Object.entries(fileContent.forms).concat( - resourcesArray - ); - const formsArray = formsData.map(([, value]) => value); - formToUpload = { forms: formsArray }; - } - } else { - const keysToRemove = ["_id", "created", "modified", "machineName"]; - let newArray = []; - if (Array.isArray(fileContent)) { - newArray = fileContent.map((obj) => { - const newObj = { ...obj }; - keysToRemove.forEach((key) => delete newObj[key]); - return newObj; - }); - } else { - keysToRemove.forEach((e) => delete fileContent[e]); - newArray.push(fileContent); - } - formToUpload = { forms: newArray }; - } - - if (formToUpload) { - dispatch(setFormUploadList(formToUpload?.forms || [])); - setShowFormUploadModal(true); - await uploadFileContents(formToUpload); - fetchForms(); - } - }); - }; - return ( <> - setShowFormUploadModal(false)} - validationErrors={validationErrors} - /> {(forms.isActive || designerFormLoading || isBPMFormListLoading) && !searchFormLoading ? (
@@ -515,127 +115,49 @@ const List = React.memo((props) => {
) : (
- {applicationCount ? ( - - - {`${t(" This form cannot be deleted as it has ")}`} - {applicationCount} - {`${ - applicationCount > 1 - ? t(" existing submissions.") - : t(" existing submission.") - }`} - -
- ) - } - onNo={() => onNo()} - /> - ) : ( - - {`${t("Are you sure to delete the")} ${ - formProcessData.formType - } `} - - {textTruncate(60, 40, props.formName)} - - ? -
- } - onNo={() => onNo()} - onYes={(e) => { - onYes( - e, - formId, - formProcessData, - formCheckList, - applicationCount, - fetchForms - ); - }} - /> - )} - -
- {isDesigner && ( - <> - -