Merge pull request #261 from DocShow-AI/preview-table

Preview table
liberty-rising · Feb 6, 2024 · dbc1a55 · dbc1a55
2 parents dd520bd + 1b5ef4e
commit dbc1a55
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/frontend/src/components/layouts/AppLayout.jsx b/frontend/src/components/layouts/AppLayout.jsx
@@ -17,7 +17,17 @@ const AppLayout = ({ children }) => {
     <Box sx={{ display: "flex" }}>
       <Header navLinks={navLinks} />
       <Navigation />
-      <Box component="main" sx={{ flexGrow: 1, p: 6, marginTop: "10px" }}>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 6,
+          marginTop: "10px",
+          marginTop: "10px",
+          maxWidth: "100vw", // Ensures the main content does not exceed the viewport width
+          overflowX: "hidden",
+        }}
+      >
         <Toolbar />
         {children}
       </Box>

diff --git 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,8 +55,15 @@ 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
+      scrollHeight="flex"
       showGridlines
       tableStyle={{ minWidth: "150px" }}
     >

diff --git 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
@@ -219,12 +220,13 @@ function UploadPage() {
         <FileUploader setFiles={setUploadFiles} id="upload-page-uploader" />
       </Box>
 
-      <Box mt={2}>
+      <Box mt={2} sx={{ width: "100%", maxWidth: "100%" }}>
         {((columnNames && columnNames.length > 0) || previewData) && (
           <PreviewTable
             columnNames={columnNames}
             previewData={previewData}
             onChangePreviewData={handleChangePreviewData}
+            setIsEditingCell={setIsEditingCell}
           />
         )}
       </Box>
@@ -250,7 +252,8 @@ function UploadPage() {
             !dataProfile ||
             !previewData ||
             !isPreviewTableOpen ||
-            isPreviewLoading
+            isPreviewLoading ||
+            isEditingCell
           }
         >
           Submit