From 1b5ef4edab4d58162736cca5f958ec7c49ed6270 Mon Sep 17 00:00:00 2001
From: liberty-rising <rwyszomi@gmail.com>
Date: Tue, 6 Feb 2024 17:44:11 +0100
Subject: [PATCH] disable submit when a cell is being edited

---
 frontend/src/pages/upload/PreviewTable.jsx | 17 +++++++++++++++--
 frontend/src/pages/upload/UploadPage.jsx   |  5 ++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/upload/PreviewTable.jsx b/frontend/src/pages/upload/PreviewTable.jsx
index c294697..7bf5c9b 100644
--- a/frontend/src/pages/upload/PreviewTable.jsx
+++ b/frontend/src/pages/upload/PreviewTable.jsx
@@ -5,8 +5,14 @@ import { Column } from "primereact/column";
 import { InputTextarea } from "primereact/inputtextarea";
 import "primereact/resources/themes/lara-light-cyan/theme.css";
 import "../../styles/tableStyles.css";
+import { set } from "date-fns";
 
-function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
+function PreviewTable({
+  columnNames,
+  previewData,
+  onChangePreviewData,
+  setIsEditingCell,
+}) {
   const columns = columnNames.map((name) => ({
     Header: name.toUpperCase(),
     accessor: name,
@@ -15,6 +21,7 @@ function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
   const data = previewData || [];
 
   const cellEditor = (options) => {
+    setIsEditingCell(true);
     return textEditor(options);
   };
 
@@ -24,7 +31,7 @@ function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
         autoResize={true}
         style={{ width: "100%", height: "100%" }}
         value={options.value}
-        onChange={(e) => options.onEditorValueChange(e.target.value)}
+        onChange={(e) => options.editorCallback(e.target.value)}
       />
     );
   };
@@ -38,6 +45,7 @@ function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
         field,
         newValue,
       );
+      setIsEditingCell(false);
     } else {
       event.preventDefault();
     }
@@ -47,6 +55,11 @@ function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
     <DataTable
       value={data}
       emptyMessage="Upload your files and click preview to see the data"
+      paginator
+      rows={5}
+      rowsPerPageOptions={[5, 10, 25, 50]}
+      paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+      currentPageReportTemplate="{first}-{last} of {totalRecords}"
       editMode="cell"
       resizableColumns
       scrollable
diff --git a/frontend/src/pages/upload/UploadPage.jsx b/frontend/src/pages/upload/UploadPage.jsx
index 4091c57..5bbd4dd 100644
--- a/frontend/src/pages/upload/UploadPage.jsx
+++ b/frontend/src/pages/upload/UploadPage.jsx
@@ -31,6 +31,7 @@ function UploadPage() {
   const [previewData, setPreviewData] = useState(null);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
   const [isPreviewTableOpen, setIsPreviewTableOpen] = useState(false);
+  const [isEditingCell, setIsEditingCell] = useState(false);
 
   useEffect(() => {
     axios
@@ -225,6 +226,7 @@ function UploadPage() {
             columnNames={columnNames}
             previewData={previewData}
             onChangePreviewData={handleChangePreviewData}
+            setIsEditingCell={setIsEditingCell}
           />
         )}
       </Box>
@@ -250,7 +252,8 @@ function UploadPage() {
             !dataProfile ||
             !previewData ||
             !isPreviewTableOpen ||
-            isPreviewLoading
+            isPreviewLoading ||
+            isEditingCell
           }
         >
           Submit