authscape 1.0.468 → 1.0.469

package/src/components/spreadsheet/spreadsheetViewer.js

@@ -1,16 +1,38 @@
-import { Box, Button } from '@mui/material';
-import React, { useEffect, useState, useRef } from 'react';
+import { Box, Button, List, ListItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
 import { ReactGrid, Column, Row } from "@silevis/reactgrid";
+// import { apiService } from 'authscape';
 import {isMacOs} from 'react-device-detect';
 import * as signalR from '@microsoft/signalr';
 import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
-export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx, onFocusLocationChanged = null, onChange = null, hubUrl = null}) {
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
+import FilterListRoundedIcon from '@mui/icons-material/FilterListRounded';
+import SwapVertRoundedIcon from '@mui/icons-material/SwapVertRounded';
+import LineWeightRoundedIcon from '@mui/icons-material/LineWeightRounded';
+import PivotTableChartRoundedIcon from '@mui/icons-material/PivotTableChartRounded';
+import ViewWeekRoundedIcon from '@mui/icons-material/ViewWeekRounded';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+
+import {DndContext} from '@dnd-kit/core';
+import {SortableContext} from '@dnd-kit/sortable';
+// import { SortableColumn } from './Mapping/sortableColumn';
+
+const SpreadsheetViewer = forwardRef(({loadedUser, currentUser, documentId, url, sx, hideToolbar = false, onFocusLocationChanged = null, advanceQuery = null, onChange = null, hubUrl = null}, ref) => {
     
     const [data, setData] = useState(null);
     const [rows, setRows] = useState(null);
+
     const [columns, setColumns] = useState(null);
 
     const [cellChangesIndex, setCellChangesIndex] = useState(() => -1);
@@ -19,12 +41,36 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
     const highlightsRef = useRef([]);
     const userIdRef = useRef(0);
 
+
+    const returnedRef = useRef([]);
+    
+
+    const [showStickyDialog, setShowStickyDialog] = useState(false);
+
+    const leftColumnRef = useRef(null);
+    const rightColumnRef = useRef(null);
+    const topRowRef = useRef(null);
+    const bottomRowRef = useRef(null);
+
+    const [leftColumnSticky, setLeftColumnSticky] = useState(null);
+    const [rightColumnSticky, setRightColumnSticky] = useState(null);
+    const [topRowSticky, setTopRowSticky] = useState(null);
+    const [bottomRowSticky, setBottomRowSticky] = useState(null);
+    
     const [highlights, setHighlights] = useState([]);
     const [sessions, setSessions] = useState([]);
     const [requestedChanges, setRequestedChanges] = useState([]);
 
     const [hubConnection, setHubConnection] = useState(null);
 
+    const getRows = () => {
+        return returnedRef.current;
+    }
+
+    useImperativeHandle(ref, () => ({
+        getRows
+    }));
+
     useEffect(() => {
 
         if (requestedChanges != null && requestedChanges.length > 0)
@@ -92,8 +138,27 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
 
     }, [requestedChanges]);
 
+
+    const validateAllCells = (cells) => {
+
+        let hasData = false;
+        cells.forEach(element => {
+
+            if (element.text != "" && element.text != null)
+            {
+                hasData = true;
+            }
+
+        });
+
+        return hasData
+    }
+
     const getSpreadSheetRows = (headerCell, rows) => {
 
+        // returnedRef
+        returnedRef.current = [];
+
         let dataRows = [
             {
                 rowId: "header",
@@ -104,10 +169,60 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
         for (let index = 0; index < rows.length; index++) {
             const row = rows[index];
 
-            dataRows.push({
-                rowId: row.rowId,
-                cells: row.cells
-            });
+            if (rows != null && row.cells.length > 0 && advanceQuery != null && advanceQuery.rules.length > 0)
+            {
+                row.cells.forEach(element => {
+
+                    advanceQuery.rules.forEach(rule => {
+
+                        if (rule.field == element.columnId)
+                        {
+                            if (rule.operator == "contains")
+                            {
+                                if (element.text.toLowerCase().includes(rule.value.toLowerCase()))
+                                {
+                                    if (validateAllCells(row.cells))
+                                    {
+                                        dataRows.push({
+                                            rowId: row.rowId,
+                                            cells: row.cells
+                                        });
+
+                                        returnedRef.current.push(row);
+                                    }
+                                }
+                            }
+                            else if (rule.operator == "notContains")
+                            {
+                                if (!element.text.toLowerCase().includes(rule.value.toLowerCase()))
+                                {
+                                    if (validateAllCells(row.cells))
+                                    {
+                                        dataRows.push({
+                                            rowId: row.rowId,
+                                            cells: row.cells
+                                        });
+
+                                        returnedRef.current.push(row);
+                                    }
+                                }
+                            }
+                        }
+                    });
+                });
+            }
+            else
+            {
+                if (validateAllCells(row.cells))
+                {
+                    dataRows.push({
+                        rowId: row.rowId,
+                        cells: row.cells
+                    });
+
+                    returnedRef.current.push(row);
+                }
+            }
         }
         
         return dataRows;
@@ -131,8 +246,13 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
 
     useEffect(() => {
 
-        if (loadedUser)
+        if (url)
         {
+            setLeftColumnSticky(parseInt(localStorage.getItem("leftColumn")));
+            setRightColumnSticky(parseInt(localStorage.getItem("rightColumn")));
+            setTopRowSticky(parseInt(localStorage.getItem("topRow")));
+            setBottomRowSticky(parseInt(localStorage.getItem("bottomRow")));
+
             const fetchData = async () => {
                 let response = await apiService().get(url);
                 if (response != null && response.status == 200)
@@ -145,7 +265,54 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
             fetchData();
         }
 
-    }, [loadedUser]);
+    }, [url]);
+
+
+    // useEffect(() => {
+
+    //     if (rows != null && advanceQuery != null)
+    //     {
+    //         let newRows = [...rows];
+
+    //         let index = 0;
+    //         rows.forEach(row => {
+
+    //             row.cells.forEach(element => {
+
+    //                 advanceQuery.rules.forEach(rule => {
+
+    //                     if (rule.field == element.columnId)
+    //                     {
+
+    //                         if (element.text.toLowerCase().includes(rule.value))
+    //                         {
+    //                             newRows.push(element);
+    //                             index++;
+    //                         }
+
+
+    //                         //alert(rule.field + " - " + rule.operator + " - " + rule.value);
+    //                     }
+    //                 });
+
+    //             });
+    //         });
+
+
+
+            
+
+
+    //         setRows(newRows);
+            
+    //         // newRows.forEach(row => {
+    //         //     alert(JSON.stringify(row));
+    //         // });
+
+    //         // alert("found " + index + " empty fields")
+    //     }
+
+    // }, [advanceQuery]);
 
     const getSessions = async () => {
 
@@ -153,28 +320,32 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
         var sessionData = response.data;
 
         let _sessions = [];
-        sessionData.forEach((element) => {
 
-            if (_sessions.find(s => s.userId == element.userId) == null)
-            {
-                if (element.userId == userIdRef.current)
-                {
-                    _sessions.push({
-                        userId: element.userId,
-                        name: element.name,
-                        borderColor: "#3579f8"
-                    });
-                }
-                else
+        if (sessionData != null && sessionData.length > 0)
+        {
+            sessionData.forEach((element) => {
+
+                if (_sessions.find(s => s.userId == element.userId) == null)
                 {
-                    _sessions.push({
-                        userId: element.userId,
-                        name: element.name,
-                        borderColor: element.borderColor
-                    });
+                    if (element.userId == userIdRef.current)
+                    {
+                        _sessions.push({
+                            userId: element.userId,
+                            name: element.name,
+                            borderColor: "#3579f8"
+                        });
+                    }
+                    else
+                    {
+                        _sessions.push({
+                            userId: element.userId,
+                            name: element.name,
+                            borderColor: element.borderColor
+                        });
+                    }
                 }
-            }
-        });
+            });
+        }
         
         assignHighlights(highlightsRef.current);
         setSessions(_sessions);
@@ -241,6 +412,11 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
         {
             userIdRef.current = currentUser.id;
 
+            if (hubUrl == null)
+            {
+                return;
+            }
+
             const connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build();
 
             connection.on("onUpdateUserSession", () => {
@@ -437,23 +613,66 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
           children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
         };
     }
-    
+
+    const getaListOfColumns = () => {
+        
+        let arrayItem = [];
+        for (let index = 0; index < columns.length; index++) {
+            const column = columns[index];
+            arrayItem.push(column.columnId);
+        }
+        return arrayItem;
+    }
 
     return (
         <Box>
-            <Box sx={{paddingBottom:2}}>
-                <Box sx={{paddingBottom:1}}>
-                    Sessions
-                </Box>
-                <Stack direction="row" spacing={2}>
-                    {sessions.map((user) => {
-                        return <Tooltip title={user.name}><Avatar {...stringAvatar(user.name, user.borderColor)} alt={user.name}></Avatar></Tooltip>
-                    })}                    
-                </Stack>
-            </Box>
-            <Box sx={{ ...sx, overflow:"scroll"}}>
+            {!hideToolbar &&
+            <AppBar position="static" elevation={0} sx={{backgroundColor:"white"}}>
+                <Toolbar disableGutters sx={{color:"black"}}>
+                    <Box sx={{ flexGrow: 1}}>
+
+                        <Button variant={"text"} startIcon={<VisibilityOffRoundedIcon/>} sx={{color:"black"}}>
+                            Hide Fields
+                        </Button>
+
+                        <Button variant={"text"} startIcon={<PivotTableChartRoundedIcon/>} sx={{color:"black", paddingLeft:4}} onClick={() => {
+                            setShowStickyDialog(true);
+                        }}>
+                            Sticky
+                        </Button>
+
+                        <Button variant={"text"} startIcon={<FilterListRoundedIcon/>} sx={{color:"black", paddingLeft:4}}>
+                            Filter
+                        </Button>
+
+                        <Button variant={"text"} startIcon={<SwapVertRoundedIcon/>} sx={{color:"black", paddingLeft:4}}>
+                            Sort
+                        </Button>
+
+                        <Button variant={"text"} startIcon={<LineWeightRoundedIcon/>} sx={{color:"black", paddingLeft:4}}>
+                            Row Height
+                        </Button>
+
+                        <Button variant={"text"} startIcon={<ViewWeekRoundedIcon/>} sx={{color:"black", paddingLeft:4}}>
+                            Reorder Columns
+                        </Button>
+                        
+                    </Box>
+                    <Box sx={{ flexGrow: 0 }}>
+                        <Stack direction="row" spacing={2}>
+                            {sessions.map((user) => {
+                                return <Tooltip title={user.name}><Avatar {...stringAvatar(user.name, user.borderColor)} alt={user.name}></Avatar></Tooltip>
+                            })}                    
+                        </Stack>
+                    </Box>
+                </Toolbar>
+            </AppBar>
+            }
+
+            {(leftColumnSticky != null && rightColumnSticky != null && topRowSticky != null && bottomRowSticky != null && data != null && columns != null) &&
+            <Box sx={{ ...sx}}>
                 {(data != null && rows != null) &&
-                    <Box onKeyDown={(e) => {
+                    <Box className="reactgrid-gold" onKeyDown={(e) => {
                         const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 
                         if ((!isMacOs && e.ctrlKey) || e.metaKey) {
@@ -467,10 +686,11 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
                             }
                         }
                     }}>
-                        <ReactGrid 
+                        <ReactGrid
                             rows={getSpreadSheetRows(data.headerCell, rows)}
                             highlights={highlights}
                             columns={columns}
+                            enableFillHandle={true}
                             onFocusLocationChanged={(location) => {
 
                                 try
@@ -490,11 +710,146 @@ export function SpreadsheetViewer({loadedUser, currentUser, documentId, url, sx,
                             enableRangeSelection={true}
                             //onContextMenu={simpleHandleContextMenu}
                             onColumnResized={handleColumnResize}
-                            stickyTopRows={1}
+                            stickyTopRows={topRowSticky}
+                            stickyBottomRows={bottomRowSticky}
+                            stickyLeftColumns={leftColumnSticky}
+                            stickyRightColumns={rightColumnSticky}
                         />
                     </Box>
                 }
             </Box>
+            }
+
+            <Dialog
+                open={showStickyDialog}
+                onClose={() => {
+                    setShowStickyDialog(false);
+                }}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title">
+                {"Sticky"}
+                </DialogTitle>
+                <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    Stick chosen rows and columns at the top or bottom rows or left and right columns. Sticky rows or columns will remain visible at all times.
+                </DialogContentText>
+                    
+                    <TableContainer sx={{paddingTop:4}}>
+                        <Table aria-label="customized table">
+                            <TableHead>
+                            <TableRow>
+                                <TableCell align="left">Left Column</TableCell>
+                                <TableCell align="left">Right Column</TableCell>
+                                <TableCell align="left">Top Row</TableCell>
+                                <TableCell align="left">Bottom Row</TableCell>
+                            </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                <TableCell sx={{paddingTop:0}}>
+                                    <TextField inputRef={leftColumnRef} type="number" defaultValue="0" variant="outlined" />
+                                </TableCell>
+                                <TableCell sx={{paddingTop:0}}>
+                                    <TextField inputRef={rightColumnRef} type="number" defaultValue="0" variant="outlined" />
+                                </TableCell>
+                                <TableCell sx={{paddingTop:0}}>
+                                    <TextField inputRef={topRowRef} type="number" defaultValue="0" variant="outlined" />
+                                </TableCell>
+                                <TableCell sx={{paddingTop:0}}>
+                                    <TextField inputRef={bottomRowRef} type="number" defaultValue="0" variant="outlined" />
+                                </TableCell>
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={() => {
+
+                    setShowStickyDialog(false);
+
+                }}>Cancel</Button>
+                <Button onClick={() => {
+
+                    localStorage.setItem("leftColumn", leftColumnRef.current.value);
+                    localStorage.setItem("rightColumn", rightColumnRef.current.value);
+                    localStorage.setItem("topRow", topRowRef.current.value);
+                    localStorage.setItem("bottomRow", bottomRowRef.current.value);
+
+                    window.location.reload();
+                    // setLeftColumnSticky(leftColumnRef.current.value);
+                    // setRightColumnSticky(rightColumnRef.current.value);
+                    // setTopRowSticky(topRowRef.current.value);
+                    // setBottomRowSticky(bottomRowRef.current.value);                    
+
+                    setShowStickyDialog(false);
+
+                }} autoFocus>
+                    Apply
+                </Button>
+                </DialogActions>
+            </Dialog>
+
+            <Dialog
+                open={false}
+                onClose={() => {
+                    setShowStickyDialog(false);
+                }}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title">
+                {"Reorder Columns"}
+                </DialogTitle>
+                <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    Assign the column order from left to right.
+                </DialogContentText>
+
+
+                {columns != null &&
+                <List>
+                    <DndContext onDragEnd={(event) => {
+                        const {over} = event;
+
+                        alert(over.id);
+                        // If the item is dropped over a container, set it as the parent
+                        // otherwise reset the parent to `null`
+                        //setParent(over ? over.id : null);
+                    }}>
+                        <SortableContext items={getaListOfColumns()}>
+
+                            {columns.map((item) => {
+                                return (
+                                    <SortableColumn key={item.columnId} id={item.columnId} />
+                                )
+                            })}
+
+                        </SortableContext>
+                    </DndContext>
+                </List>
+                }
+
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={() => {
+
+                    setShowStickyDialog(false);
+
+                }}>Cancel</Button>
+                <Button onClick={() => {
+
+                    
+
+                }} autoFocus>
+                    Apply
+                </Button>
+                </DialogActions>
+            </Dialog>
+
         </Box>
     );
-}
+});
+
+export default SpreadsheetViewer