authscape 1.0.468 → 1.0.469

package/src/components/mapping/matchExisting.js

@@ -0,0 +1,116 @@
+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 LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+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';
+
+export default function MatchExistingMappedColumn({companyId, documentId, documentMappingId, fromName, toOptions, onResponse}) {
+
+    const [createNewOpen, setCreateNewOpen] = useState(false);
+
+    const [onlyAddRowIfFound, setOnlyAddRowIfFound] = useState(false);
+    const [rememberForNextTime, setRememberForNextTime] = useState(false);
+    
+    const [selectedToColumn, setSelectedToColumn] = useState(null);
+
+    const handleClose = () => {
+        setCreateNewOpen(false);
+    }
+
+    const SelectedExistingColumns = ({toOptions}) => {
+
+        return (
+            <Box sx={{ minWidth: 120 }}>
+                <FormControl fullWidth>
+                    <InputLabel id="demo-simple-select-label">Match to column</InputLabel>
+                    <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={selectedToColumn}
+                    label="Age"
+                    onChange={(event) => {
+                        setSelectedToColumn(event.target.value);
+                    }}>
+                        {toOptions != null && toOptions.map((toOption) => {
+
+                            let isRequiredMessage = "";
+                            if (toOption.isRequired)
+                            {
+                                isRequiredMessage = " (Required)";
+                            }
+
+                            return (
+                                <MenuItem value={toOption.name}>{toOption.visibleName} {isRequiredMessage}</MenuItem>
+                            );
+                        })}
+                    </Select>
+                </FormControl>
+            </Box>
+        )
+    }
+    
+
+    return (
+        <Box>
+            <Dialog
+                open={createNewOpen}
+                onClose={handleClose}
+                fullWidth={true}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title">
+                {"Match existing column"}
+                </DialogTitle>
+                <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    ***Inform the user about what it means to match existing columns***
+                </DialogContentText>
+                <Box sx={{paddingTop:2}}>
+                    <TextField id="outlined-basic" label="File Column Name" defaultValue={fromName} variant="outlined" disabled={true} fullWidth={true} />
+                </Box>
+                <Box sx={{paddingTop:2}}>
+                    <SelectedExistingColumns toOptions={toOptions} />
+                </Box>
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={async () => {
+
+                    let response = await apiService().put("/DocumentMapping/AssignMapping", {
+                        companyId: companyId,
+                        documentId: documentId,
+                        fileColumnName: fromName,
+                        documentMappingId: documentMappingId,
+                        matchedColumn: selectedToColumn,
+                        onlyAddRowIfColumnFound: onlyAddRowIfFound,
+                        rememberForNextTime: rememberForNextTime
+                    });
+
+                    if (response != null && response.status == 200)
+                    {
+                        onResponse();
+                        handleClose();
+                    }
+
+                }} autoFocus>
+                    Match Existing
+                </Button>
+                </DialogActions>
+            </Dialog>
+            <Button startIcon={<LinkRoundedIcon />} size="small" sx={{paddingLeft:3}} onClick={() => {
+                setCreateNewOpen(true);
+            }}>Match Existing</Button>
+        </Box>
+    );
+}

package/src/components/mapping/newMappingColumn.js

@@ -0,0 +1,132 @@
+import React, {useState, useRef} from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
+import Typography from '@mui/material/Typography';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+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 Grid from '@mui/material/Grid';
+import LocalParkingRoundedIcon from '@mui/icons-material/LocalParkingRounded';
+import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded';
+import IntegrationInstructionsRoundedIcon from '@mui/icons-material/IntegrationInstructionsRounded';
+import ListAltRoundedIcon from '@mui/icons-material/ListAltRounded';
+import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
+import CheckBoxRoundedIcon from '@mui/icons-material/CheckBoxRounded';
+import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
+// import { apiService } from 'authscape';
+
+export default function NewMappingColumn({name, companyId, documentType, documentId, documentMappingId, onResponse}) {
+
+    const newColumnNameRef = useRef(null);
+    const newColumnDescriptionRef = useRef(null);
+
+    const [createNewOpen, setCreateNewOpen] = useState(false);
+    const [selectedAttributeId, setSelectedAttributeId] = useState(null);
+
+    const handleClose = () => {
+        setCreateNewOpen(false);
+    }
+
+    const AttributeTypeComponent = ({id, icon, text}) => {
+
+        return (
+            <Grid item xs={3}>
+                <Card sx={{textAlign:"center", cursor:"pointer", backgroundColor: (selectedAttributeId == id ? "#e5e5e5": "none")}} onClick={() => {
+                    setSelectedAttributeId(id);
+                }}>
+                    <CardContent>
+                        {icon}
+                        <Typography variant="body2" color="text.secondary" sx={{paddingTop:1}}>
+                            {text}
+                        </Typography>
+                    </CardContent>
+                </Card>
+            </Grid>
+        )
+    }
+
+    return (
+        <Box>
+            <Dialog
+                open={createNewOpen}
+                onClose={handleClose}
+                fullWidth={true}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title">
+                {"Match to new column"}
+                </DialogTitle>
+                <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    inform the user about adding a new columna and what that means here...
+                </DialogContentText>
+                <Box sx={{paddingTop:2}}>
+                    <TextField inputRef={newColumnNameRef} defaultValue={name} id="outlined-basic" label="Name" variant="outlined" fullWidth={true} />
+                </Box>
+                <Box sx={{paddingTop:2}}>
+                    <TextField inputRef={newColumnDescriptionRef} id="outlined-basic" label="Description (optional)" variant="outlined" fullWidth={true} />
+                </Box>
+                <Box sx={{paddingTop:2}}>
+                    <Box>
+                        <Typography variant="body1" gutterBottom>
+                            Select how this column will be formatted
+                        </Typography>
+                    </Box>
+                    <Grid container spacing={2} sx={{paddingTop:2}}>
+
+                        <AttributeTypeComponent id={0} icon={<TextFieldsRoundedIcon />} text={"text"} />
+                        <AttributeTypeComponent id={1} icon={<LocalParkingRoundedIcon/>} text={"Paragraph"} />
+                        <AttributeTypeComponent id={2} icon={<IntegrationInstructionsRoundedIcon/>} text={"HTML"} />
+                        <AttributeTypeComponent id={3} icon={<Box>{123}</Box>} text={"Integer"} />
+                        <AttributeTypeComponent id={4} icon={<Box>{10.23}</Box>} text={"Decimal"} />
+                        <AttributeTypeComponent id={5} icon={<ListAltRoundedIcon/>} text={"Dropdown"} />
+                        <AttributeTypeComponent id={6} icon={<CalendarMonthRoundedIcon/>} text={"Date"} />
+                        <AttributeTypeComponent id={7} icon={<LinkRoundedIcon/>} text={"URL"} />
+                        <AttributeTypeComponent id={8} icon={<CheckBoxRoundedIcon/>} text={"Boolean"} />
+                        <AttributeTypeComponent id={9} icon={<InsertPhotoRoundedIcon/>} text={"Photo"} />
+
+                    </Grid>
+
+                </Box>
+
+                </DialogContent>
+                <DialogActions>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={async () => {
+
+                    let response = await apiService().post("/DocumentMapping/AddNewColumnAndMapping", {
+                        companyId: companyId,
+                        documentId: documentId,
+                        documentMappingId: documentMappingId,
+                        newColumn: newColumnNameRef.current.value,
+                        description: newColumnDescriptionRef.current.value,
+                        attributeFieldType: selectedAttributeId 
+                    });
+
+                    if (response != null && response.status == 200)
+                    {
+                        handleClose();
+                        onResponse();
+                    }
+
+                }} autoFocus>
+                    Create
+                </Button>
+                </DialogActions>
+            </Dialog>
+
+            {documentType != null && documentType == 1 &&
+                <Button startIcon={<AddRoundedIcon />} size="small" sx={{paddingLeft:3}} onClick={() => {
+                    setCreateNewOpen(true);
+                }}>Create New Column</Button>
+            }
+        </Box>
+    );
+}

package/src/components/mapping/sortableColumn.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {useSortable} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+
+export function SortableColumn(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({id: props.id});
+  
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+  
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <ListItem disablePadding>
+          <ListItemButton>
+          <ListItemIcon>
+              <MenuIcon />
+          </ListItemIcon>
+          <ListItemText primary={props.id} />
+          </ListItemButton>
+      </ListItem>
+    </div>
+  );
+}

package/src/components/mapping/uploadMappedFile.js

@@ -0,0 +1,124 @@
+import React, {useEffect, useState, useRef} from 'react';
+// import { apiService, FileUploader} from 'authscape';
+import Button from '@mui/material/Button';
+import { Box } from '@mui/system';
+import PublishRoundedIcon from '@mui/icons-material/PublishRounded';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+export default function UploadMappedFile({loadedUser, url = null, companyId = null, locationId = null, userId = null}) {
+
+    const [documentComponentOptions, setDocumentComponentOptions] = useState(null);
+
+    const [selectedDocumentComponentId, setSelectedDocumentComponentId] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+   
+    const fileUploaderRef = useRef(null);
+
+
+    useEffect(() => {
+        if (selectedDocumentComponentId != null)
+        {
+
+            // trigger the file uploader, make sure param is filled in
+            fileUploaderRef.current.click();
+
+        }
+    }, [selectedDocumentComponentId])
+
+    useEffect(() => {
+
+        if (loadedUser)
+        {
+            const fetchData = async () => {
+
+                let _params = {};
+
+                if (companyId != null)
+                {
+                    _params.companyId = companyId;
+                }
+
+                if (userId != null)
+                {
+                    _params.userId = userId;
+                }
+
+                if (locationId != null)
+                {
+                    _params.locationId = locationId;
+                }
+
+                let response = await apiService().post("/DocumentMapping/GetDocumentComponents", _params);
+                if (response != null && response.status == 200)
+                {
+                    setDocumentComponentOptions(response.data.data);
+                }
+            }
+            fetchData();
+        }
+
+    }, [loadedUser])
+
+    return (
+        <Box>
+
+            <FileUploader refOveride={fileUploaderRef} params={{
+
+                    documentComponentId: selectedDocumentComponentId,
+                    companyId: companyId,
+                    locationId: locationId,
+                    userId: userId
+                            
+                }} url={url} multiple={false} variant='custom' onUploadCompleted={() => {
+
+                    setSelectedDocumentComponentId(null); // we need an onUploadCancelled
+                    
+                }}>
+
+            </FileUploader>
+
+            <Button
+                id="demo-positioned-button"
+                aria-controls={open ? 'demo-positioned-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                startIcon={<PublishRoundedIcon />}
+                sx={{marginLeft:1}} 
+                onClick={(event) => {
+                setAnchorEl(event.currentTarget);
+                }}>
+                Upload File(s)
+            </Button>
+
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                'aria-labelledby': 'basic-button',
+                }}>
+                    {documentComponentOptions != null && documentComponentOptions.map((documentComponent) => {
+
+                        return (
+                            <MenuItem onClick={() => {
+
+                                // assigns the param document component id
+                                setSelectedDocumentComponentId(documentComponent.id);
+
+                                // close the menu
+                                handleClose();
+                            
+                            }}>{documentComponent.name + " (" + documentComponent.documentTypeName + ")"}</MenuItem>
+                        )
+                    })}
+            </Menu>
+
+        </Box>
+    )
+}