FWF-5402[feature] - duplicate and delete case in form listing page

Author: Ajay-aot

forms-flow-web/src/apiManager/services/bpmServices.js

@@ -40,6 +40,7 @@ export const getTaskSubmitFormReq = (formUrl, applicationId, actionType, webForm
 export const formatForms = (forms) => {
   return forms.map((form) => {
     return {
+      mapperId:form.id,
       _id: form.formId,
       title: form.formName,
       processKey: form.processKey,

forms-flow-web/src/components/Form/constants/FormTable.js

@@ -4,17 +4,22 @@ import { DataGrid } from "@mui/x-data-grid";
 import Paper from "@mui/material/Paper";
 import { useTranslation } from "react-i18next";
 import { push } from "connected-react-router";
-import { setBPMFormLimit, setBPMFormListPage, setBpmFormSort } from "../../../actions/formActions";
-import { resetFormProcessData } from "../../../apiManager/services/processServices";
+import { setBPMFormLimit, setBPMFormListPage, setBpmFormSort, setFormDeleteStatus } from "../../../actions/formActions";
+import { resetFormProcessData, unPublishForm, getApplicationCount, getProcessDetails } from "../../../apiManager/services/processServices";
 import { fetchBPMFormList } from "../../../apiManager/services/bpmFormServices";
 import { setFormSearchLoading } from "../../../actions/checkListActions";
 import userRoles from "../../../constants/permissions";
-import { HelperServices,StyleServices } from "@formsflow/service";
+import { HelperServices, StyleServices } from "@formsflow/service";
 import { MULTITENANCY_ENABLED } from "../../../constants/constants";
-import { V8CustomButton,RefreshIcon,NewSortDownIcon,V8CustomDropdownButton } from "@formsflow/components";
+import { V8CustomButton, RefreshIcon, NewSortDownIcon, V8CustomDropdownButton, PromptModal } from "@formsflow/components";
+import { deleteForm } from "@aot-technologies/formio-react";
+import { fetchFormById } from "../../../apiManager/services/bpmFormServices";
+import { formCreate } from "../../../apiManager/services/FormServices";
+import { manipulatingFormData } from "../../../apiManager/services/formFormatterService";
+import _cloneDeep from "lodash/cloneDeep";
+import { toast } from "react-toastify";
 
-
-function FormTable() {
+function FormTable({ isDuplicating, setIsDuplicating, setDuplicateProgress }) {
   const dispatch = useDispatch();
   const tenantKey = useSelector(state => state.tenants?.tenantId);
   const bpmForms = useSelector(state => state.bpmForms);
@@ -26,10 +31,22 @@ function FormTable() {
   const searchFormLoading = useSelector(state => state.formCheckList.searchFormLoading);
   const isApplicationCountLoading = useSelector(state => state.process.isApplicationCountLoading);
   const searchText = useSelector(state => state.bpmForms.searchText);
+  const applicationCount = useSelector((state) => state.process?.applicationCount);
+  
+  // Get form access data from Redux store
+  const formAccess = useSelector((state) => state.user?.formAccess || []);
+  const submissionAccess = useSelector((state) => state.user?.submissionAccess || []);
+  
   const { createDesigns, viewDesigns } = userRoles();
   const { t } = useTranslation();
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
   const iconColor = StyleServices.getCSSVariable('--ff-gray-medium-dark');
+  
+  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
+  const [selectedRow, setSelectedRow] = React.useState(null);
+  const [deleteMessage, setDeleteMessage] = React.useState("");
+  const [disableDelete, setDisableDelete] = React.useState(false);
+  const [isAppCountLoading, setIsAppCountLoading] = React.useState(false);
 
   // Mapping between DataGrid field names and reducer sort keys
   const gridFieldToSortKey = {
@@ -46,6 +63,128 @@ function FormTable() {
     status: "status",
   };
 
+  // 🔹 Delete flow
+  const deleteAction = (row) => {
+    setSelectedRow(row);
+    setShowDeleteModal(true);
+    setIsAppCountLoading(true); // start loading state
+
+    dispatch(
+      getApplicationCount(row.mapperId, () => {
+        setIsAppCountLoading(false); // stop loading once response arrives
+      })
+    );
+  };
+
+  const handleDelete = () => {
+    if (!selectedRow) return;
+    const formId = selectedRow._id;
+    const mapperId = selectedRow.mapperId;
+    if (!applicationCount || applicationCount === 0) {
+      dispatch(
+        deleteForm("form", formId, () => {
+          dispatch(fetchBPMFormList({ pageNo, limit, formSort: formsort }));
+        })
+      );
+
+      if (mapperId) {
+        dispatch(unPublishForm(mapperId));
+      }
+      dispatch(setFormDeleteStatus({ modalOpen: false, formId: "", formName: "" }));
+      toast.success(t("Form deleted successfully"));
+    }
+    handleCloseDelete();
+  };
+
+  const handleCloseDelete = () => {
+    setShowDeleteModal(false);
+    setSelectedRow(null);
+  };
+
+  // 🔹 Duplicate flow
+  const handleDuplicate = async (row) => {
+    try {
+      setIsDuplicating(true);
+      setDuplicateProgress(0);
+      // Fetch the full form data
+      setDuplicateProgress(20);
+      const formResponse = await fetchFormById(row._id);
+
+      setDuplicateProgress(40);
+      const diagramResponse = await getProcessDetails({
+            processKey: row.processKey,
+            tenantKey,
+            mapperId: row.mapperId
+          });
+
+      setDuplicateProgress(60);    
+      const originalForm = formResponse.data;
+      
+      // Create duplicated form data
+      const duplicatedForm = _cloneDeep(originalForm);
+      
+      // Modify title, name, and path
+      duplicatedForm.title = `${originalForm.title}-copy`;
+      duplicatedForm.name = `${originalForm.name}-copy`;
+      duplicatedForm.path = `${originalForm.path}-copy`;
+
+      duplicatedForm.processData = diagramResponse.data.processData;
+      duplicatedForm.processType = diagramResponse.data.processType;
+      
+      // Remove _id and other fields that should not be copied
+      delete duplicatedForm._id;
+      delete duplicatedForm.machineName;
+      delete duplicatedForm.parentFormId;
+      
+      // Set as new version
+      duplicatedForm.componentChanged = true;
+      duplicatedForm.newVersion = true;
+      
+      setDuplicateProgress(80);
+      // Manipulate form data with proper formatting
+      const newFormData = manipulatingFormData(
+        duplicatedForm,
+        MULTITENANCY_ENABLED,
+        tenantKey,
+        formAccess,
+        submissionAccess
+      );
+      
+      setDuplicateProgress(90);
+      // Create the duplicated form
+      const createResponse = await formCreate(newFormData);
+
+      setDuplicateProgress(100);
+      const createdForm = createResponse.data;
+            
+      // Redirect to edit page of duplicated form
+      dispatch(push(`${redirectUrl}formflow/${createdForm._id}/edit`));
+      
+    } catch (err) {
+      console.error("Error duplicating form:", err);
+      // const errorMessage = err.response?.data?.message || err.message || "Failed to duplicate form";
+    } finally {
+      setIsDuplicating(false);
+    }
+  };
+
+  // Watch for application count updates
+  React.useEffect(() => {
+    if (selectedRow) {
+      if (isAppCountLoading) {
+        setDeleteMessage(t("Preparing for delete..."));
+        setDisableDelete(true);
+      } else if (applicationCount > 0) {
+        setDeleteMessage(
+          t(`This form has ${applicationCount} submission(s). You can’t delete it.`)
+        );
+        setDisableDelete(true);
+      } else {
+        setDeleteMessage(t("Are you sure you want to delete this form?"));
+        setDisableDelete(false);
+      }
+    }
+  }, [applicationCount, selectedRow, isAppCountLoading, t]);
   // Prepare DataGrid columns
   const columns = [
     {
@@ -117,17 +256,35 @@ function FormTable() {
       flex: 1,
       sortable: false,
       cellClassName: "last-column",
-      renderCell: params => (
-        (createDesigns || viewDesigns) && (
+      renderCell: params => {
+        const dropdownItems = [
+          {
+            label: t("Duplicate form"),
+            onClick: () => handleDuplicate(params.row),
+          },
+          {
+            label: params.row.status === "active" ? t("Unpublish") : t("Delete"),
+            onClick: () => {
+              if (params.row.status === "active") {
+                // dispatch(unPublishForm(params.row.mapperId));
+              } else {
+                deleteAction(params.row);
+              }
+            },
+            className: params.row.status !== "active" ? "delete-dropdown-item" : "",
+          },
+        ];
+        return (createDesigns || viewDesigns) && (
           <V8CustomDropdownButton
           label={t("Edit")}
           variant="secondary"
           menuPosition="right"
-          dropdownItems={[]}
+          dropdownItems={dropdownItems}
+          disabled={isDuplicating}
           onLabelClick= {() => viewOrEditForm(params.row._id, "edit")}
         />
-        )
-      )
+        );
+      }
     },
   ];
 
@@ -193,6 +350,7 @@ const viewOrEditForm = (formId, path) => {
 
 
   return (
+    <>
     <Paper sx={{ height: {sm: 400, md: 510, lg: 665}, width: "100%" }}>
       <DataGrid
         disableColumnResize // disabed resizing
@@ -232,6 +390,19 @@ const viewOrEditForm = (formId, path) => {
         }}
       />
     </Paper>
+    <PromptModal
+        show={showDeleteModal}
+        onClose={handleCloseDelete}
+        title={t("Delete Item")}
+        message={deleteMessage}
+        type="warning"
+        primaryBtnText={t("Delete")}
+        primaryBtnAction={handleDelete}
+        primaryBtnDisable={disableDelete}
+        secondaryBtnText={t("Cancel")}
+        secondaryBtnAction={handleCloseDelete}
+      />
+     </> 
   );
 }
 

forms-flow-web/src/routes/Design/Forms/List.js

@@ -42,7 +42,10 @@ import {
   CustomSearch,
   CustomButton,
   useSuccessCountdown,
-  V8CustomButton
+  V8CustomButton,
+  Alert,
+  AlertVariant,
+  CustomProgressBar
 } from "@formsflow/components";
 import { HelperServices } from '@formsflow/service';
 import { useMutation } from "react-query";
@@ -62,6 +65,8 @@ const List = React.memo((props) => {
   const [importLoader, setImportLoader] = useState(false);
   const [showSortModal, setShowSortModal] = useState(false);
   const { successState, startSuccessCountdown } = useSuccessCountdown();
+  const [isDuplicating, setIsDuplicating] = useState(false);
+  const [duplicateProgress, setDuplicateProgress] = useState(0);
 
 
   const handleFilterIconClick = () => {
@@ -345,7 +350,10 @@ const List = React.memo((props) => {
   };
   const renderTable = () => {
     if (createDesigns || viewDesigns) {
-      return <FormTable />;
+      return <FormTable 
+               isDuplicating={isDuplicating} 
+               setIsDuplicating={setIsDuplicating}
+               setDuplicateProgress={setDuplicateProgress}/>;
     }
     if (createSubmissions) {
       return <ClientTable />;
@@ -364,7 +372,12 @@ const List = React.memo((props) => {
       ) : (
         <>
                 <div className="toast-section">
-                  {/* <p>Toast message</p> */}
+                        <Alert
+                          message={t("Duplicating the form")}
+                          variant={AlertVariant.FOCUS}
+                          isShowing={isDuplicating}
+                          rightContent={<CustomProgressBar progress={duplicateProgress} />}
+                        />
                 </div>  
 
                 <div className="header-section-1">