Merge pull request #2997 from fahad-aot/feature/fwf-5453-actions-dmn-bpmn

feature/fwf-5453:added action page form bpmn and dmn

Author: vinaayakh-aot

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

@@ -133,9 +133,11 @@ const viewOrEditForm = (formId, path) => {
   dispatch(resetFormProcessData());
   dispatch(push(`${redirectUrl}formflow/${formId}/${path}`));
 };
-  const handlePageChange = (page) => {
+
+const handlePageChange = (page) => {
     dispatch(setBPMFormListPage(page));
   };
+
 
   const handleSortChange = (modelArray) => {
     const model = Array.isArray(modelArray) ? modelArray[0] : modelArray;
@@ -145,8 +147,8 @@ const viewOrEditForm = (formId, path) => {
         return acc;
       }, {});
       dispatch(setBpmFormSort({ ...resetSort, activeKey: "formName" }));
-      dispatch(setBPMFormListPage(1)); 
-      return;
+        dispatch(setBPMFormListPage(1));  
+        return;
     }
 
     const mappedKey = gridFieldToSortKey[model.field] || model.field;
@@ -160,11 +162,6 @@ const viewOrEditForm = (formId, path) => {
   };
 
 
-  const handleLimitChange = (limitVal) => {
-    dispatch(setBPMFormLimit(limitVal));
-    dispatch(setBPMFormListPage(1));
-  };
-
   const handleRefresh = () => {
     let filters = {pageNo, limit, formSort: formsort, formName: searchText};
     dispatch(setFormSearchLoading(true));
@@ -174,10 +171,19 @@ const viewOrEditForm = (formId, path) => {
   const activeKey = bpmForms.sort?.activeKey || "formName";
   const activeField = sortKeyToGridField[activeKey] || activeKey;
   const activeOrder = bpmForms.sort?.[activeKey]?.sortOrder || "asc";
+
+
+  const handleLimitChange = (limitVal) => {
+    dispatch(setBPMFormLimit(limitVal));
+    dispatch(setBPMFormListPage(1));
+  };
+
+  // DataGrid's onPaginationModelChange - handles both page and pageSize changes
   const onPaginationModelChange = ({ page, pageSize }) => {
     if (limit !== pageSize) handleLimitChange(pageSize);
     else if ((pageNo - 1) !== page) handlePageChange(page + 1);
   };
+
   const rows = React.useMemo(() => {
     return (formData || []).map((f) => ({
       ...f,

forms-flow-web/src/routes/Design/Process/ProcessActionsTab.js

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import {
+  CustomProgressBar,
+  SelectDropdown,
+  V8CustomButton,
+} from "@formsflow/components";
+// import { StyleServices } from "@formsflow/service";
+
+// A lightweight, inline Actions panel rendered as a tab instead of a modal.
+const ProcessActionsTab = ({
+  newActionModal,
+  renderUpload,
+  onExport,
+  diagramType,
+}) => {
+  const { t } = useTranslation();
+  //   const primaryColor = StyleServices.getCSSVariable("--ff-primary");
+
+  // Get diagram-specific labels
+  const diagramLabel = diagramType || "Process";
+
+  // State for export functionality
+  const [selectedValue, setSelectedValue] = useState("XML");
+  const [progress, setProgress] = useState(0);
+  const [isError, setIsError] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+
+  // Export format options based on diagram type
+  const formExportOptions = [{ label: diagramLabel, value: "XML" }];
+
+  if (!newActionModal) return null;
+
+  const handleSelectChange = (value) => {
+    setSelectedValue(value);
+  };
+
+  const handleExportClick = async () => {
+    if (!onExport) return;
+
+    setIsExporting(true);
+    setProgress(0);
+    setIsError(false);
+
+    try {
+      // Simulate progress
+      const progressInterval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 90) {
+            clearInterval(progressInterval);
+            return 90;
+          }
+          return prev + 10;
+        });
+      }, 200);
+
+      // Call the actual export function
+      await onExport(selectedValue);
+
+      // Complete progress
+      clearInterval(progressInterval);
+      setProgress(100);
+
+      // Reset after success
+      setTimeout(() => {
+        setProgress(0);
+        setIsExporting(false);
+      }, 1000);
+    } catch (error) {
+      setIsError(true);
+      setProgress(0);
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <div className="process-actions-tab" data-testid="process-actions-tab">
+      <div className="grid-section">
+        <div className="actions-header">{t(`Import ${diagramLabel}`)}</div>
+        <div className="upload-action-content">
+          {renderUpload && renderUpload()}
+        </div>
+      </div>
+      <div className="grid-section">
+        <div className="actions-header">{t(`Export ${diagramLabel}`)}</div>
+        <div className="actions-contents">
+          <div className="export-section">
+            <div className="export-dropdown-section">
+              <SelectDropdown
+                options={formExportOptions}
+                value={selectedValue}
+                onChange={handleSelectChange}
+                searchDropdown={false}
+                ariaLabel={t("Select export format")}
+                dataTestId="form-export-dropdown"
+                variant="primary"
+              />
+              <V8CustomButton
+                variant="primary"
+                onClick={handleExportClick}
+                data-testid="form-export-btn"
+                aria-label={t(`Export ${diagramLabel}`)}
+                label={t("Export")}
+                disabled={isExporting}
+                loading={isExporting}
+              />
+            </div>
+            {isExporting && (
+              <div className="export-progress-section">
+                <div>
+                  {t("Export process as")} {selectedValue}
+                </div>
+                <div className="export-progress">
+                  <CustomProgressBar
+                    progress={progress}
+                    color={isError ? "error" : undefined}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ProcessActionsTab.propTypes = {
+  newActionModal: PropTypes.bool.isRequired,
+  diagramType: PropTypes.string,
+  renderUpload: PropTypes.func,
+  onExport: PropTypes.func,
+};
+
+export default ProcessActionsTab;