authscape 1.0.458 → 1.0.460

package/package.json

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

package/src/components/tickets/TicketDetail.js

@@ -0,0 +1,381 @@
+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';
+
+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 [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)
+      }
+    }
+
+    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: router.query.id,
+                      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="Chat" {...a11yProps(0)} />
+            <Tab label="Notes" {...a11yProps(1)} />
+            <Tab label="Attachments" {...a11yProps(2)} />
+
+            {customTabName != null &&
+                <Tab label={customTabName} {...a11yProps(3)} />
+            }
+
+          </Tabs>
+        </Box>
+        <TabPanel value={value} index={0}>
+
+          {ticket != null &&
+            <Comments ticketId={ticket.id} isDisabled={false} isNote={false} currentUser={currentUser} />
+          }
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          {ticket != null &&
+            <Comments ticketId={ticket.id} isDisabled={false} isNote={true} currentUser={currentUser} />
+          }
+        </TabPanel>
+        <TabPanel value={value} index={2}>
+          {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={3}>
+                {customTabElement(customTabPayload)}
+            </TabPanel>
+        }
+
+      </Box>
+
+    </div>
+  )
+}
+
+export default TicketDetail;

package/src/components/tickets/Tickets.js

@@ -0,0 +1,247 @@
+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 default 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>
+    
+  )
+}