authscape 1.0.634 → 1.0.636

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.634",
+  "version": "1.0.636",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/dropzone.js

@@ -1,4 +1,3 @@
-import AspectRatio from '@mui/icons-material/AspectRatio';
 import Box from '@mui/material/Box';
 import React, {useMemo} from 'react';
 import {useDropzone} from 'react-dropzone';

package/src/components/mapping/assignMapping.js

@@ -0,0 +1,237 @@
+import React, {useEffect, useState, useRef} from 'react';
+import { Box } from '@mui/system';
+// import { apiService } from 'authscape';
+// import MappedColumn from './MappedColumn';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import { Button, Grid } from '@mui/material';
+// import ConditionBasedTool from './conditionBasedTool';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+// import SpreadsheetViewer from '../spreadsheetViewer';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import ArrowRightAltRoundedIcon from '@mui/icons-material/ArrowRightAltRounded';
+
+export function AssignMapping({currentUser, documentComponentId, setIsLoading = null, onCancel = null, onPublished = null}) {
+
+    const [documentId, setDocumentId] = useState(documentComponentId);
+
+    const [fromColumnOptions, setFromColumnOptions] = useState(null);
+    const [toColumnOptions, setToColumnOptions] = useState(null);
+    const [documentType, setDocumentType] = useState(null);
+    const [documentName, setDocumentName] = useState(null);
+    const [urlTick, setURLTick] = useState(1);
+    const [spreadSheetAddress, setSpreadSheetAddress] = useState(null);
+    const [showPreviewDialog, setShowPreviewDialog] = useState(false);
+
+    const [advanceQuery, setAdvanceQuery] = useState(null);
+
+    const spreadSheetRef = useRef(null);
+
+
+    const fetchMappingTo = async () => {
+
+        let response = await apiService().get("/DocumentMapping/GetMappedDynamicFieldsForCompany?companyId=" + currentUser.companyId + "&documentId=" + documentComponentId);
+        if (response != null)
+        {
+            setToColumnOptions(response.data);
+        }
+    }
+
+    const fetchMappingFrom = async () => {
+        let response = await apiService().post("/DocumentMapping/GetMapping", {
+            documentComponentId: documentComponentId,
+            companyId: currentUser.companyId
+        });
+        if (response != null)
+        {
+            setFromColumnOptions(response.data.documentMappings);
+            setDocumentName(response.data.name);
+            setDocumentType(response.data.documentType);
+        }
+    }
+
+    useEffect(() => {
+
+        if (documentComponentId != null)
+        {
+            if (setIsLoading != null)
+            {
+                setIsLoading(true);
+            }
+
+            setSpreadSheetAddress("/DocumentMappingPreview/PreviewMappedData?companyId=" + currentUser.companyId + "&documentComponentId=" + documentComponentId);
+
+            const fetchData = async () => {
+                await fetchMappingFrom();
+                await fetchMappingTo();
+
+
+                if (setIsLoading != null)
+                {
+                    setIsLoading(false);
+                }
+            }
+
+            fetchData();
+
+        }
+
+    }, [documentComponentId])
+
+    return (
+        <Box>
+            <Container maxWidth="xl" sx={{marginTop:2}}>
+                <Grid container spacing={2}>
+                    <Grid item xs={6}>
+                        <Box sx={{position:"sticky", top:20}}>
+                            <Typography variant="h4" gutterBottom sx={{paddingBottom:2}}>
+                                File Uploaded: <br/> {documentName}
+                            </Typography>
+
+                            <Typography variant="subtitle1" gutterBottom sx={{paddingBottom:2}}>
+                                You have {fromColumnOptions != null && fromColumnOptions.length} columns that can be created or mapped
+                            </Typography>
+
+                            <Button variant="outlined" sx={{marginRight:2}} onClick={async () => {
+
+                                if (onCancel != null)
+                                {
+                                    onCancel();
+                                }
+
+                            }}>Cancel</Button>
+
+                            <Button variant="contained" endIcon={<ArrowRightAltRoundedIcon/>} sx={{marginRight:2}} onClick={() => {
+
+                                setShowPreviewDialog(true);
+
+                            }}>Next, Preview your mapping</Button>
+
+                        </Box>
+                    </Grid>
+
+                    <Grid item xs={5}>
+                    {fromColumnOptions != null && fromColumnOptions.map((column) => {
+                        return (
+                            <Box>
+                                
+                                <MappedColumn companyId={currentUser.companyId} documentId={documentId} documentType={documentType} documentMappingId={column.id} name={column.name} toName={column.toName} isMapped={(column.toName == null || column.toName == "") ? true : false} toOptions={toColumnOptions} onResponse={() => {
+
+                                    fetchMappingFrom();
+                                    fetchMappingTo();
+
+                                }} />
+                            
+                            </Box>
+                        )
+                    })}
+                    </Grid>
+                </Grid>
+            </Container>
+
+            <Dialog
+                open={showPreviewDialog}
+                onClose={() => {
+                    setShowPreviewDialog(false);
+                }}
+                fullWidth={true}
+                maxWidth={"xl"}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title" sx={{fontSize:"25px", paddingTop:4}}>
+                {"Preview your mapping"}
+                </DialogTitle>
+
+                <Box sx={{paddingLeft:3}}>
+                    Ensure that the data uploaded is accurately mapped and all (Required) fields are completed.
+                </Box>
+
+                <IconButton
+                    aria-label="close"
+                    onClick={() => {
+                        setShowPreviewDialog(false);
+                    }}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        top: 8,
+                        color: (theme) => theme.palette.grey[500],
+                    }}
+                    >
+                    <CloseIcon />
+                </IconButton>
+
+                <DialogContent>
+
+                    <Box sx={{paddingBottom:1}}>
+                        <ConditionBasedTool toColumnOptions={toColumnOptions} documentId={documentId} onConditionApplied={(currentQuery) => {
+
+                            let incrementNum = urlTick + 1;
+                            setURLTick(incrementNum);
+
+                            setAdvanceQuery(currentQuery);
+
+                            // setSpreadSheetAddress("/DocumentMappingPreview/PreviewMappedData?companyId=" + currentUser.companyId + "&documentComponentId=" + documentComponentId + "&tick=" + incrementNum);
+
+                        }} />
+                    </Box>
+                    
+                    {spreadSheetAddress != null &&
+                        <SpreadsheetViewer ref={spreadSheetRef} url={spreadSheetAddress} advanceQuery={advanceQuery} currentUser={currentUser} hideToolbar={true} loadedUser={true} />
+                    }
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={() => {
+
+                    setShowPreviewDialog(false);
+
+                }}>Cancel</Button>
+                <Button variant="contained" onClick={async () => {
+
+                    if (setIsLoading != null)
+                    {
+                        setIsLoading(true);
+                    }
+
+                    let publishedRows = spreadSheetRef.current.getRows();
+
+                    let response = await apiService().post("/DocumentMapping/Publish", {
+                        companyId: currentUser.companyId,
+                        documentId: documentId,
+                        publishedRows: publishedRows
+                    });
+
+                    if (response != null && response.status == 200)
+                    {
+                        setShowPreviewDialog(false);
+
+                        if (onPublished != null)
+                        {
+                            onPublished();
+                        }
+                    }
+                    else
+                    {
+                        alert(JSON.stringify(response.data));
+                    }
+
+                    if (setIsLoading != null)
+                    {
+                        setIsLoading(false);
+                    }
+
+                }}>
+                    Publish
+                </Button>
+                </DialogActions>
+            </Dialog>
+
+
+        </Box>
+    )
+}

package/src/components/mapping/conditionBasedTool.js

@@ -0,0 +1,99 @@
+
+import React, {useEffect, useState, useRef} from 'react';
+// import { apiService, FileUploader} from 'authscape';
+import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { QueryBuilder } from 'react-querybuilder';
+
+
+export function ConditionBasedTool({toColumnOptions, documentId, onConditionApplied}) {
+
+    const [currentQuery, setCurrentQuery] = useState(null);
+
+    // const fields = [
+    //     { name: 'firstName', label: 'First Name' },
+    //     { name: 'lastName', label: 'Last Name' }
+    // ];
+
+    useEffect(() => {
+
+        if (documentId != null)
+        {
+            const fetchData = async () => {
+                let response = await apiService().get("/DocumentMapping/GetRules?documentComponentId=" + documentId);
+                if (response != null && response.status == 200)
+                {
+                    if (response.data != null && response.data != "")
+                    {
+                        setCurrentQuery(response.data);
+                    }
+                    else
+                    {
+                        setCurrentQuery(null);
+                    }
+                }
+            }
+            fetchData();
+        }
+        
+
+    }, [documentId]);
+
+    const getFields = () => {
+
+        let fields = [];
+
+        for (let index = 0; index < toColumnOptions.length; index++) {
+            const toColumn = toColumnOptions[index];
+
+            if (toColumn.isMapped) // only show filters that are mapped
+            {
+                fields.push({ name: toColumn.name, label: toColumn.visibleName });
+            }
+        }
+
+        return fields;
+    }
+
+    const customOperators = [
+        { name: 'contains', label: 'Contains' },
+        { name: 'notContains', label: 'Does not contain' },
+    ];
+
+    return (
+        <>
+            <Box>
+                <Accordion>
+                    <AccordionSummary
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel1-content"
+                    id="panel1-header">
+                    Advance filtering
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <QueryBuilder fields={getFields()} operators={customOperators} query={currentQuery} onQueryChange={setCurrentQuery} />
+
+                        <Button variant="contained" sx={{marginTop:1}} onClick={async () => {
+
+                            let response = await apiService().put("/DocumentMapping/ApplyFilterForViewer", {
+                                documentComponentId: documentId,
+                                rules: JSON.stringify(currentQuery)
+                            });
+
+                            if (response != null && response.status == 200)
+                            {
+                                onConditionApplied(currentQuery);
+                            }
+
+                        }}>Apply Filter</Button>
+                    </AccordionDetails>
+                </Accordion>
+
+            </Box>
+        </>
+    )
+}

package/src/components/mapping/datasources.js

@@ -0,0 +1,259 @@
+import React, {useEffect, useState, useRef} from 'react';
+// import {apiService, authService, StripeConnect, ReactDraft, EditableDatagrid, FileUploader} from 'authscape';
+import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
+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 InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormLabel from '@mui/material/FormLabel';
+
+export function Datasources({disableTraining = false}) {
+
+    const documentColumns = [
+        { field: 'name', headerName: 'Name', width: 150, editable: false },
+        {
+            field: "type",
+            type: "actions",
+            width: 200,
+            flex:1,
+            headerName: "Data Source",
+            getActions: ({ id, row }) => {
+              return [
+                <Box sx={{textAlign:"left"}}>
+                    {row.type == 0 ? "Database" : ""}
+                    {row.type == 1 ? "Dynamic Mapping" : ""}
+                    {row.type == 2 ? "Custom Model" : ""}
+                </Box>,
+              ];
+            },
+        },
+        {
+            field: "Detail",
+            type: "actions",
+            width: 200,
+            flex:1,
+            headerName: "Mapping To",
+            getActions: ({ id, row }) => {
+              return [
+                <Box sx={{textAlign:"left"}}>
+
+                    {row.type == 0 ? 
+                        <>Table: {row.tableName}</>
+                        : 
+                        ""
+                    }
+
+                    {row.type == 1 ? 
+                        <>Database driven mapping</>
+                        : 
+                        ""
+                    }
+
+                    {row.type == 2 ? 
+                        <>Type Name: {row.typeName}
+                        <br/> Assembly Fullname: {row.assemblyFullName}</>
+                        : 
+                        ""
+                    }
+                    
+                </Box>,
+              ];
+            },
+        },
+        // {
+        //     field: "actions",
+        //     type: "actions",
+        //     width: 200,
+        //     headerName: "Archive",
+        //     cellClassName: "actions",
+        //     getActions: ({ id, row }) => {
+        //       return [
+        //         <GridActionsCellItem key={id}
+        //           icon={<DeleteRoundedIcon />}
+        //           label="Archive"
+        //           className="textPrimary"
+        //           onClick={async () => {
+                    
+        //             let documentMappingId = "";
+        //             let documentComponentId = "";
+                    
+        //             // archive the column
+        //             await apiService().delete("/DocumentMapping/RemoveColumnFromDocumentComponent?documentMappingId=" + documentMappingId + "&documentComponentId=" + documentComponentId)
+
+        //           }}
+        //         />,
+        //       ];
+        //     },
+        // }
+
+    ];
+
+    const refDatabaseTableSelect = useRef(null);
+    const refNewDocTypeName = useRef(null);
+
+    const [dataGridRefreshKey, setDataGridRefreshKey] = useState(0);
+
+    const [document, setDocument] = useState(null);
+    const [showDatasource, setShowDatasource] = useState(false);
+    const [databaseTables, setDatabaseTables] = useState(null);
+
+    const [mappingType, setMappingType] = useState("database");
+
+
+    const refTypeName = useRef(null);
+    const refAssemblyFullName = useRef(null);
+
+
+
+    useEffect(() => {
+
+        let fetchData = async () => {
+            let response = await apiService().get("/DocumentMapping/GetTablesFromDatabase");
+            if (response != null && response.status == 200)
+            {
+                setDatabaseTables(response.data);
+            }
+        }
+        
+        fetchData();
+
+    }, [])
+
+    return (
+        <Box sx={{marginTop:6}}>
+            <Box>
+                {!disableTraining &&
+                <Box sx={{textAlign:"right", marginBottom:2}}>
+                    <Button variant="contained" onClick={() => {
+                        setShowDatasource(true);
+                    }}>Add Data Source</Button>
+                </Box>
+                }
+                <EditableDatagrid key={dataGridRefreshKey} loadedUser={true} url={"/DocumentMapping/GetDocumentTypes"} columns={documentColumns}/>
+            </Box>
+
+            <Dialog
+                open={showDatasource}
+                onClose={() => {
+                    setShowDatasource(false);
+                }}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">
+                {"Data Source"}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        A data source is a place or system where data is stored and collected. It can be a database, file, web service, or sensor. Data is extracted, transformed, and used for analysis and other purposes. Managing data sources is crucial for data-driven decision-making.
+                    </DialogContentText>
+
+                    <Box sx={{marginTop:3}}>
+                        <TextField inputRef={refNewDocTypeName} label="Name for data source" variant="outlined" fullWidth={true} />
+                    </Box>
+
+                    <Box sx={{marginTop:2}}>
+                        <FormControl>
+                            <FormLabel id="demo-row-radio-buttons-group-label">How the data will connect:</FormLabel>
+                            <RadioGroup value={mappingType} row aria-labelledby="demo-row-radio-buttons-group-label" name="row-radio-buttons-group" onChange={(env) => {
+                                setMappingType(env.currentTarget.value);
+                            }}>
+                                <FormControlLabel value="database" control={<Radio />} label="Database" />
+                                <FormControlLabel value="mappingTable" control={<Radio />} label="Dynamic Mapping Table" />
+                                <FormControlLabel value="customModelMapping" control={<Radio />} label="Custom Model" />
+                            </RadioGroup>
+                        </FormControl>
+                    </Box>
+
+                    {mappingType == "database" &&
+                        <Box sx={{marginTop:2}}>
+                            <Box sx={{ minWidth: 120 }}>
+                                <FormControl fullWidth>
+                                    <InputLabel id="demo-simple-select-label">Database Tables</InputLabel>
+                                    <Select
+                                    inputRef={refDatabaseTableSelect}
+                                    labelId="demo-simple-select-label"
+                                    label="Age">
+                                        {databaseTables != null && databaseTables.map((table, index) => {
+                                            return (<MenuItem value={table.tableName}>{table.tableName}</MenuItem>)
+                                        })}
+                                    </Select>
+                                </FormControl>
+                            </Box>
+                        </Box>
+                    }
+
+                    {mappingType == "customModelMapping" &&
+
+                        <Box sx={{marginTop:2}}>
+                            <Box sx={{ minWidth: 120 }}>
+                                <TextField inputRef={refTypeName} label="Type Name (Example: API.Controllers.InvoiceUpload)" variant="outlined" fullWidth={true} sx={{marginTop:1}} />
+                                <TextField inputRef={refAssemblyFullName} label="Assembly Full Name (Example: API)" variant="outlined" fullWidth={true} sx={{marginTop:1}} />
+                            </Box>
+                        </Box>
+                    }
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={() => {
+                    setShowDatasource(false);
+                }}>Cancel</Button>
+                <Button onClick={async () => {
+
+                    if (mappingType == "customModelMapping")
+                    {
+                        let response = await apiService().post("/DocumentMapping/AddDataSource", {
+                            name: refNewDocTypeName.current.value,
+                            dataTable: refNewDocTypeName.current.value,
+                            documentType: 2,
+                            typeName: refTypeName.current.value,
+                            assemblyFullName: refAssemblyFullName.current.value
+                        });
+
+                        if (response != null && response.data.error != null)
+                        {
+                            alert(response.data.error);
+                        }
+                        else
+                        {
+                            if (response != null && (response.status == 204 || response.status == 200))
+                            {
+                                setDataGridRefreshKey(dataGridRefreshKey + 1);
+                                setShowDatasource(false);
+                            }
+                        }
+                    }
+                    else
+                    {
+                        let response = await apiService().post("/DocumentMapping/AddDataSource", {
+                            name: refNewDocTypeName.current.value,
+                            dataTable: refDatabaseTableSelect.current != null ? refDatabaseTableSelect.current.value : "",
+                            documentType: (mappingType == "database" ? 0 : 1) 
+                        });
+
+                        if (response != null && (response.status == 204 || response.status == 200))
+                        {
+                            setDataGridRefreshKey(dataGridRefreshKey + 1);
+                            setShowDatasource(false);
+                        }
+                    }
+
+                }}>
+                    Add Data Source
+                </Button>
+                </DialogActions>
+            </Dialog>
+
+        </Box>
+    )
+}

package/src/components/mapping/fileMapping.js

@@ -0,0 +1,72 @@
+import React, {useEffect, useState, useRef} from 'react';
+import { Box } from '@mui/system';
+// import ManageMappingDocuments from './manageMappingDocuments';
+// import AssignMapping from './AssignMapping';
+
+export function FileMapping({currentUser, fileUploadName = "Upload Document", hideDocumentManager = false, setIsLoading = null, documentTypeId = null, onOpened = null, onPublished = null, onCanceled = null, onArchived = null}) {
+
+    const [documentComponentId, setDocumentComponentId] = useState(null);
+
+    useEffect(() => {
+
+      if (documentComponentId != null)
+      {
+        if (onOpened != null)
+        {
+          onOpened(documentComponentId);
+        }
+      }
+
+    }, [documentComponentId]);
+
+    return (
+        <Box>
+            {documentComponentId == null &&
+              <ManageMappingDocuments
+                fileUploadName={fileUploadName}
+                documentTypeId={documentTypeId}
+                hideDocumentManager={hideDocumentManager}
+                companyId={currentUser != null ? currentUser.companyId : null} 
+                onManageField={(documentComponentId) => {
+
+                  setDocumentComponentId(documentComponentId);
+
+                }}
+                onArchive={(documentComponentId) => {
+
+                  //alert(documentComponentId);
+                  if (onArchived != null)
+                  {
+                    onArchived(documentComponentId);
+                  }
+
+                }}
+              />
+            }
+
+            {documentComponentId != null &&
+              <AssignMapping currentUser={currentUser} setIsLoading={setIsLoading} documentComponentId={documentComponentId}
+                onCancel={() => {
+
+                  setDocumentComponentId(null);
+                  
+                  if (onCanceled != null)
+                  {
+                    onCanceled(documentComponentId);
+                  }
+
+                }} 
+                onPublished={() => {
+                  setDocumentComponentId(null);
+                  
+                  if (onPublished != null)
+                  {
+                    onPublished(documentComponentId);
+                  }
+                }} />
+            }
+
+
+        </Box>
+    )
+}