authscape 1.0.574 → 1.0.578

package/package.json

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

package/src/components/AutoSaveTextField.js

@@ -47,6 +47,7 @@ export function AutoSaveTextField ({label = "", value = null, variant = "outline
     <TextField
         label={label}
         fullWidth={fullWidth}
+        autoComplete='off'
         variant={variant}
         multiline={isMultiLine}
         rows={rows}

package/src/components/YesNoDialog.js

@@ -6,7 +6,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
-export default function YesNoDialog({open, title, message, yesText = "Yes", noText = "No", YesAction, NoAction}) {
+export function YesNoDialog({open, title, message, yesText = "Yes", noText = "No", YesAction, NoAction}) {
   // Declare a new state variable, which we'll call "count"
   //const [count, setCount] = useState(0);
 

package/src/components/tickets/TicketDetail.js

@@ -1,392 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import { Box } from '@mui/system';
-import Grid from '@mui/material/Grid';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-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 { apiService } from 'authscape';
-import TextField from '@mui/material/TextField';
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-// import Comments from '../comments';
-import { Button, Card, CardActions, CardContent, CardMedia, Stack } from "@mui/material";
-import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
-import ArrowBackIosRoundedIcon from '@mui/icons-material/ArrowBackIosRounded';
-
-export const TicketDetail = ({ticketId, setIsLoading, currentUser, GoBackToViewTickets = null, customTabName = null, customTabElement = null}) => {
-  
-  const [value, setValue] = useState(0);
-  const [status, setStatus] = useState(null);
-  const [ticketType, setTicketType] = useState(null);
-  const [ticket, setTicket] = useState(null);
-  const [priorty, setPriority] = useState(0);
-  const [participants, setParticipants] = useState([]);
-  const [ticketAttachments, setTicketAttachments] = useState([]);
-  const [customTabPayload, setCustomTabPayload] = useState(null);
-
-  const [ticketDescription, setTicketDescription] = useState(null);
-
-  const [createdByList, setCreatedByList] = useState([]);
-  const [selectedCreatedBy, setSelectedCreatedBy] = useState(null);
-
-  useEffect(() => {
-
-    const fetchData = async () => {
-      setIsLoading(true);
-      let response = await apiService().get("/Ticket/GetTicket?ticketId=" + ticketId);
-      if (response != null && response.status == 200)
-      {
-        setTicket(response.data);
-
-        setIsLoading(false);
-        setStatus(response.data.selectedTicketStatusId);
-        setTicketType(response.data.selectedTicketTypeId);
-        setPriority(response.data.selectedPriortyId);
-        setSelectedCreatedBy(response.data.selectedCreatedBy);
-        setParticipants(response.data.participants);
-        setTicketAttachments(response.data.attachments);
-        setCustomTabPayload(response.data.customTabPayload);
-        setTicketDescription(response.data.description);
-      }
-    }
-
-    fetchData();
-
-  }, []);
-
-  function TabPanel(props) {
-    const { children, value, index, ...other } = props;
-  
-    return (
-      <div
-        role="tabpanel"
-        hidden={value !== index}
-        id={`simple-tabpanel-${index}`}
-        aria-labelledby={`simple-tab-${index}`}
-        {...other}
-      >
-        {value === index && (
-          <Box sx={{ p: 3 }}>
-            <Typography>{children}</Typography>
-          </Box>
-        )}
-      </div>
-    );
-  }
-
-  function a11yProps(index) {
-    return {
-      id: `simple-tab-${index}`,
-      'aria-controls': `simple-tabpanel-${index}`,
-    };
-  }
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  const refreshCreatedByList = async (query) => {
-
-    let response = await apiService().get("/ticket/findUser?query=" + query);
-    if (response != null && response.status == 200)
-    {
-      setCreatedByList(response.data);
-    }
-  }
-
-  const DownloadFile = ({fileName, uri}) => {
-
-    return (
-      <Card
-        sx={{
-          border: "1px solid black",
-          padding: "10px",
-          margin: "10px",
-          width: "200px",
-          textAlign:"center",
-          // display: "flex",
-          // alignItems: "center",
-          justifyContent: "space-between",
-        }}>
-          <Stack spacing={2}>
-            <Box sx={{textAlign:"center"}}>
-              <InsertDriveFileRoundedIcon sx={{fontSize:50}} />
-            </Box>
-            <Typography variant="h6" component="div">
-              {fileName}
-            </Typography>
-            <Button variant="contained" color="primary" onClick={() => {
-              window.open(uri);
-            }}>
-              Download
-            </Button>
-          </Stack>
-      </Card>
-    )
-  }
-
-  return (
-    <div>
-
-      <Box sx={{width: '100%' }}>
-
-      <Button variant="contained" startIcon={<ArrowBackIosRoundedIcon />} onClick={() => {
-
-        if (GoBackToViewTickets != null)
-        {
-          GoBackToViewTickets();
-        }
-
-      }}>Go Back</Button>
-        
-
-        <Box>
-          <h2>{ticket != null && ticket.name}</h2>
-        </Box>
-    
-        <Grid container spacing={2}>
-          <Grid item xs={4}>
-
-            <Box sx={{ minWidth: 120 }}>
-              <Box>
-                Status:
-              </Box>
-              <FormControl fullWidth>
-                <Select
-                  labelId="demo-simple-select-label"
-                  id="demo-simple-select"
-                  value={status}
-                  displayEmpty
-                  inputProps={{ 'aria-label': 'Without label' }}
-                  InputLabelProps={{ shrink: true }}
-                  onChange={async (val) =>{
-                    setStatus(val.target.value);
-
-                    await apiService().put("/ticket/UpdateStatus", {
-                      id: ticket.id,
-                      ticketStatusId: val.target.value
-                    });
-
-                  }}>
-
-                    {ticket != null && ticket.ticketStatuses.map((status, index) => {
-                      return (
-                        <MenuItem key={index} value={status.id}>{status.name}</MenuItem>
-                      )
-                    })}
-                  
-                </Select>
-              </FormControl>
-            </Box>
-
-            <Box sx={{paddingTop:2}}>
-              <Box>
-                Assigned to:
-              </Box>
-
-              {selectedCreatedBy != null &&
-                <Autocomplete
-                    disablePortal
-                    options={createdByList}
-                    value={selectedCreatedBy}
-                    onChange={async (event, newValue) => {
-                        setSelectedCreatedBy(newValue.id);
-                    }}
-                    renderInput={(params) => <TextField {...params} label={""} onChange={(val) => {
-                      refreshCreatedByList(val.currentTarget.value);
-                    }} />}
-                  />
-              }
-
-              {ticket != null &&
-              <>
-                <Box sx={{paddingTop:1, fontSize:18}}>
-                  {ticket.assignedFirstName + " " + ticket.assignedLastName} ({ticket.assignedEmail})
-                </Box>
-              </>
-              }
-
-            </Box>
-
-            {/* <Box>
-            Company
-            </Box> */}
-
-            <Box sx={{paddingTop:2}}>
-              <Box sx={{ minWidth: 120 }}>
-                <Box>
-                  Priority:
-                </Box>
-                <FormControl fullWidth>
-                  <InputLabel id="demo-simple-select-label"></InputLabel>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={priorty}
-                    label=""
-                    onChange={async (val) =>{
-                      setPriority(val.target.value);
-
-                      await apiService().put("/ticket/UpdateTicketPriority", {
-                        id: ticket.id,
-                        priorityLevel: val.target.value
-                      });
-
-                    }}>
-                      <MenuItem value={0}>None</MenuItem>
-                      <MenuItem value={1}>Low</MenuItem>
-                      <MenuItem value={2}>Medium</MenuItem>
-                      <MenuItem value={3}>High</MenuItem>
-                      <MenuItem value={4}>Urgent</MenuItem>
-                  </Select>
-                </FormControl>
-              </Box>
-            </Box>
-            
-
-          </Grid>
-          <Grid item xs={4}>
-            
-            <Box sx={{ minWidth: 120 }}>
-              <Box>
-                Ticket Type:
-              </Box>
-              <FormControl fullWidth>
-                <InputLabel id="demo-simple-select-label"></InputLabel>
-                <Select
-                  labelId="demo-simple-select-label"
-                  id="ticketType"
-                  value={ticketType}
-                  label=""
-                  onChange={async (val) =>{
-                    setTicketType(val.target.value);
-
-                    await apiService().put("/ticket/UpdateTicketType", {
-                      id: ticket.id,
-                      TicketTypeId: val.target.value
-                    });
-
-                  }}>
-                    {ticket != null && ticket.ticketTypes.map((status, index) => {
-                      return (
-                        <MenuItem key={index} value={status.id}>{status.name}</MenuItem>
-                      )
-                    })}
-                  
-                </Select>
-              </FormControl>
-            </Box>
-
-            <Box sx={{paddingTop:2}}>
-              
-              <Box>
-                Participants:
-              </Box>
-              <Autocomplete
-                  multiple={true}
-                  disablePortal
-                  value={participants}
-                  options={createdByList}
-                  onChange={async (event, newValue) => {
-
-                    // alert(JSON.stringify(newValue));
-
-                    await apiService().put("/ticket/UpdateParticipants", {
-                      ticketId: ticketId,
-                      participants: newValue
-                    });
-
-                      setParticipants(newValue);
-                  }}
-                  renderInput={(params) => <TextField {...params} label={""} onChange={(val) => {
-                    refreshCreatedByList(val.currentTarget.value);
-                  }} />}
-                />
-              {/* <TextField id="lastUpdated" fullWidth={true} InputLabelProps={{ shrink: true }} disabled={true} label="Participants" variant="outlined" autoFocus={true} value={(ticket != null ? ticket.lastUpdated : "")} /> */}
-            </Box>
-          </Grid>
-          <Grid item xs={4}>
-            <Box>
-              <Box>
-                Created:
-              </Box>
-              <TextField id="created" fullWidth={true} InputLabelProps={{ shrink: true }} disabled={true} label="" variant="outlined" autoFocus={true} value={(ticket != null ? ticket.created : "")} />
-            </Box>
-            <Box sx={{paddingTop:2}}>
-              <Box>
-                Last Updated:
-              </Box>
-              <TextField id="lastUpdated" fullWidth={true} InputLabelProps={{ shrink: true }} disabled={true} label="" variant="outlined" autoFocus={true} value={(ticket != null ? ticket.lastUpdated : "")} />
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
-
-      <Box sx={{ width: '100%', marginTop:2 }}>
-        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-            <Tab label="Description" {...a11yProps(0)} />
-            <Tab label="Chat" {...a11yProps(1)} />
-            <Tab label="Notes" {...a11yProps(2)} />
-            <Tab label="Attachments" {...a11yProps(3)} />
-
-            {customTabName != null &&
-                <Tab label={customTabName} {...a11yProps(4)} />
-            }
-
-          </Tabs>
-        </Box>
-        <TabPanel value={value} index={0}>
-
-          <Box dangerouslySetInnerHTML={{
-              __html: ticketDescription,
-          }}>
-          </Box>
-
-        </TabPanel>
-
-        <TabPanel value={value} index={1}>
-
-          {ticket != null &&
-            <Comments ticketId={ticket.id} isDisabled={false} isNote={false} currentUser={currentUser} />
-          }
-
-        </TabPanel>
-        <TabPanel value={value} index={2}>
-          {ticket != null &&
-            <Comments ticketId={ticket.id} isDisabled={false} isNote={true} currentUser={currentUser} />
-          }
-        </TabPanel>
-        <TabPanel value={value} index={3}>
-          {ticket != null &&
-            <>
-              {ticketAttachments.map((attachment) => {
-                return (
-                  <DownloadFile fileName={attachment.name} uri={attachment.url} />
-                )
-              })}
-
-              {ticketAttachments.length == 0 &&
-                <Box>
-                  There are no attachments
-                </Box>
-              }
-              
-            </>
-          }
-        </TabPanel>
-
-        {customTabName != null &&
-            <TabPanel value={value} index={4}>
-                {customTabElement(customTabPayload)}
-            </TabPanel>
-        }
-
-      </Box>
-
-    </div>
-  )
-}

package/src/components/tickets/Tickets.js

@@ -1,247 +0,0 @@
-import React, {useEffect, useState} from 'react';
-// import {apiService, authService} from 'authscape';
-import Button from '@mui/material/Button';
-import { Box } from '@mui/system';
-import {
-  DataGrid,
-  GridActionsCellItem,
-} from "@mui/x-data-grid";
-import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
-import Typography from '@mui/material/Typography';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-// import YesNoDialog from '../../components/yesNoDialog';
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
-import AddRoundedIcon from '@mui/icons-material/AddRounded';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Grid from '@mui/material/Grid';
-// import TicketDetail from './TicketDetail';
-import { useRouter } from 'next/router';
-
-export function Tickets({loadedUser, setIsLoading, currentUser, customTabName = null, customTabElement = null }) {
-
-  const [tickets, setTickets] = useState([]);
-  
-  const [archiveTicketId, setArchiveTicketId] = useState(null);
-  const [totalTickets, setTotalTickets] = useState(0);
-  const [pageNumber, setPageNumber] = useState(1);
-
-  const [ticketStatuses, setTicketStatuses] = useState([]);
-  const [ticketTypes, setTicketTypes] = useState([]);
-
-  const [ticketTypeId, setTicketTypeId] = useState(null);
-  const [statusId, setStatusId] = useState(null);
-
-  const [selectedTicketId, setSelectedTicketId] = useState(null);
-  
-  const router = useRouter();
-
-
-  useEffect(() => {
-
-    if (router.query.id != null)
-    {
-      setSelectedTicketId(router.query.id);
-    }
-
-  }, [router.isReady])
-  
-  const columns = [
-    { field: 'id', headerName: 'Id', width: 150 },
-    { field: 'title', flex: 1, headerName: 'Customer', width: 200 },
-    { field: 'ticketStatus', headerName: 'Status', width: 150 },
-    { field: 'ticketType', headerName: 'Ticket Type', width: 150 },
-    { field: 'created', headerName: 'Created', width: 150 },
-    { field: 'ticketParticipants', headerName: 'Participants', width: 150 },
-    { field: 'messages', headerName: 'Messages', width: 150 },
-    {
-      field: "actions",
-      type: "actions",
-      width: 200,
-      headerName: "Actions",
-      cellClassName: "actions",
-      getActions: ({ id, row }) => {
-        return [
-          <GridActionsCellItem key={id}
-            icon={<VisibilityRoundedIcon />}
-            label="View"
-            onClick={() => {
-              setSelectedTicketId(row.id);
-            }}
-          />,
-          <GridActionsCellItem key={id}
-            icon={<DeleteRoundedIcon />}
-            label="Delete"
-            className="textPrimary"
-            onClick={() => {
-              setArchiveTicketId(row.id);
-            }}
-          />,
-        ];
-      },
-    }
-  ];
-
-  const reloadTickets = async () => {  
-    let response = await apiService().get("/ticket/GetTickets?pageNumber=" + pageNumber + "&pageSize=20&ticketStatusId=" + (statusId != null ? statusId: "") + "&ticketTypeId=" + (ticketTypeId != null ? ticketTypeId : ""));
-    if (response != null && response.status == 200)
-    {
-        setTotalTickets(response.data.data.length);
-        setTickets(response.data.data);
-    }
-  }
-
-  useEffect(() => {
-
-    if (loadedUser)
-    {
-      let fetchStatusesAndTypes = async () => {
-        let responseStatus = await apiService().get("/Ticket/GetStatuses");
-        if (responseStatus != null && responseStatus.status == 200)
-        {
-          setTicketStatuses(responseStatus.data);
-        }
-
-        let responseType = await apiService().get("/Ticket/GetTicketTypes");
-        if (responseType != null && responseType.status == 200)
-        {
-          setTicketTypes(responseType.data);
-        }
-      }
-
-      fetchStatusesAndTypes();
-      setTicketStatuses();
-    }
-
-  }, [loadedUser]);
-
-
-  useEffect(() => {
-
-    if (loadedUser)
-    {
-      reloadTickets();
-    }
-
-  }, [loadedUser, ticketTypeId, statusId]);
-  
-  return (
-  <div>
-
-    {selectedTicketId != null &&
-      <TicketDetail ticketId={selectedTicketId} setIsLoading={setIsLoading} currentUser={currentUser} customTabName={customTabName} customTabElement={customTabElement} GoBackToViewTickets={() =>
-        {
-          setSelectedTicketId(null);
-        }} />
-    }
-    {selectedTicketId == null &&
-    <>
-      <Box sx={{ flexGrow: 1 }}>
-        <AppBar position="static" color='inherit' elevation={0}>
-          <Toolbar>
-            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-              Tickets
-            </Typography>
-            <Button color="primary" variant="contained" startIcon={<AddRoundedIcon/>} onClick={async () => {
-              
-              let response = await apiService().post("/Ticket/CreateTicket", {
-                ticketTypeId: 1,
-                ticketStatusId: 1,
-                description: "about this",
-                message: "More about this"
-              });
-
-              window.location.href = "/ticket/" + response.data;
-
-            }}>Create Ticket</Button>
-          </Toolbar>
-        </AppBar>
-      </Box>
-
-      <Grid container spacing={2} sx={{paddingTop:2, paddingBottom:2}}>
-        <Grid item xs={4}>
-
-          <Box>
-            <FormControl fullWidth>
-              <InputLabel id="demo-simple-select-label">Ticket Status</InputLabel>
-              <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
-                value={statusId}
-                label="ticketStatus"
-                onChange={(event) => {
-                  setStatusId(event.target.value);
-                }}>
-
-                <MenuItem value={null}>Not Assigned</MenuItem>
-
-                {ticketStatuses != null && ticketStatuses.map((tStatus) => {
-                  return (
-                    <MenuItem value={tStatus.id}>{tStatus.name}</MenuItem>
-                  )                
-                })}
-
-              </Select>
-            </FormControl>
-          </Box>
-
-        </Grid>
-        <Grid item xs={4}>
-
-          <Box>
-            <FormControl fullWidth>
-              <InputLabel id="demo-simple-select-label">Ticket Type</InputLabel>
-              <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
-                value={ticketTypeId}
-                label="TicketType"
-                onChange={(event) => {
-                  setTicketTypeId(event.target.value);
-                }}>
-
-                <MenuItem value={null}>Not Assigned</MenuItem>
-
-                {ticketTypes != null && ticketTypes.map((tTicketType) => {
-                  return (
-                    <MenuItem value={tTicketType.id}>{tTicketType.name}</MenuItem>
-                  )                
-                })}
-
-              </Select>
-            </FormControl>
-          </Box>
-
-        </Grid>
-      </Grid>
-
-      <Box sx={{height: 600, width: '100%' }}>
-        <DataGrid 
-          rows={tickets} 
-          columns={columns}
-          onPageChange={(newPage) => {
-            setPageNumber(newPage);
-          }}
-          pageSize={totalTickets} 
-          rowsPerPageOptions={[20]}
-          /> 
-      </Box>
-
-      <YesNoDialog open={archiveTicketId != null ? true : false} title={"Remove Ticket"} message={"Are you sure you want to archive this ticket?"} 
-        YesAction={async () => {
-          await apiService().delete("/Ticket/ArchiveTicket?id=" + archiveTicketId);
-          await reloadTickets();
-          setArchiveTicketId(null);
-        }} 
-        NoAction={() => {
-          setArchiveTicketId(null);
-        }} />
-      </>
-    }
-  </div>
-    
-  )
-}