authscape-tickets 1.0.14

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "authscape-tickets",
+  "version": "1.0.14",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx babel src --out-file index.js"
+  },
+  "author": "zuechb",
+  "license": "ISC",
+  "peerDependencies": {
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "@babel/preset-env": "^7.22.2",
+    "@babel/preset-react": "^7.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "eslint-config-next": "^14.1.0",
+    "react": "^18.2.0"
+  }
+}

package/readme.md

@@ -0,0 +1 @@
+Working on docs...

package/src/comments.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Box, Paper } from '@mui/material';
+import InputBase from '@mui/material/InputBase';
+import IconButton from '@mui/material/IconButton';
+import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Avatar from '@mui/material/Avatar';
+import SendRoundedIcon from '@mui/icons-material/SendRounded';
+import scrollIntoView from 'scroll-into-view-if-needed'
+import Stack from '@mui/material/Stack';
+import { apiService } from 'authscape';
+
+export function Comments({ticketId, isNote, isDisabled, currentUser}) {
+
+    const [comments, setComments] = useState([]);
+    const [message, setMessage] = useState("");
+    // const [messageDialogOpen, setMessageDialogOpen] = useState(false);
+
+    const reloadMessages = async () => {
+        
+        // setIsLoading(true);
+
+        let response = await apiService().get("/Ticket/GetMessages?TicketId=" + ticketId + "&isNote=" + isNote);
+        if (response != null && response.status == 200)
+        {
+            setComments(response.data);
+        }
+
+        const node = document.getElementById('messages');
+        if (node != null)
+        {
+            scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })    
+        }
+
+        // setIsLoading(false);
+
+    }
+
+    useEffect(() => {
+        
+        if (ticketId != null)
+        {
+            const asyncPush = async () => {
+                await reloadMessages();
+            }
+            asyncPush();
+        }
+
+    }, [ticketId]);
+
+    const SendMessage = async () => {
+        
+        if (message !== "")
+        {
+            let response = await apiService().post("/Ticket/CreateMessage", {
+                ticketId: ticketId,
+                name: currentUser.firstName,
+                message: message,
+                isNote: isNote
+            });
+
+            if (response != null && response.status == 200)
+            {
+                await reloadMessages();
+                // messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+                // let messages = comments.slice();
+                // messages.push(message);
+                // setComments(messages);
+                setMessage("");
+            }
+        }
+    }
+
+    return (
+        <Box sx={{display:"flex", flexDirection:"column", height:"100%"}}>
+            <Box sx={{backgroundColor:"#F3F5F7", overflow:"auto", flex: "1 1 auto"}}>
+                <Box>
+                    {comments.length == 0 &&
+                    <Box sx={{paddingLeft:4}}>
+                        <QuestionAnswerOutlinedIcon sx={{fill:"gray", position:"relative", top:"4px", marginRight:2}} fontSize={"2px"} />
+                        <Typography variant="subtitle2" color="text.secondary" component="span" sx={{marginTop:1}}>
+                            Add your first {isNote ? "note" : "message"  }. {isNote ? "Your notes" : "The conversation history" } will appear here
+                        </Typography>
+                    </Box>
+                    }
+                    <Box sx={{overflow:"scroll", height:"300px"}}>
+                        <Grid container>
+                            <Grid item xs={12}>
+                                <List>
+                                    {comments != null && comments.map((comment, index) => {
+                                        return (
+                                        <ListItem key={index} sx={{marginTop:1}}>
+                                            <Grid container>
+                                                <Grid item xs={1}>
+                                                    <Avatar />
+                                                </Grid>
+                                                <Grid item xs={11}>
+                                                    <Stack direction="row" spacing={1}>
+                                                        <Box sx={{fontSize:12}}>{comment.firstName}</Box>
+                                                        <Box sx={{fontSize:12}}>{comment.created}</Box>
+                                                    </Stack>
+                                                    <Box sx={{fontSize:16}}>{comment.message}</Box>
+                                                </Grid>
+                                            </Grid>
+                                        </ListItem>
+                                        )
+                                    })}
+
+                                    <ListItem>
+                                        <div id={"messages"}></div>
+                                    </ListItem>
+                                </List>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Box sx={{flex: "0 1 40px"}}>
+                <Paper
+                    sx={{ p: '2px 4px', display: 'flex', alignItems: 'center'}}>
+                    <InputBase
+                        sx={{ ml: 1, flex: 1 }}
+                        disabled={isDisabled}
+                        onKeyUp={(event) => {
+                            if (event.key == "Enter")
+                            {
+                                SendMessage();
+                            }
+                        }}
+                        placeholder={!isNote ? "Write your message here..." : "Write your notes here..."}
+                        value={message}
+                        onChange={(value) => {
+                            setMessage(value.target.value);
+                        }}
+                    />
+                    <IconButton disabled={isDisabled} type="button" sx={{ p: '10px' }} aria-label="search" onClick={() => {
+                        SendMessage();
+                    }}>
+                        <SendRoundedIcon />
+                    </IconButton>
+                </Paper>
+            </Box>
+        </Box>
+    );
+}

package/src/ticketDetail.js

@@ -0,0 +1,406 @@
+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 TextField from '@mui/material/TextField';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import { Button, Card, CardActions, CardContent, CardMedia, Stack } from "@mui/material";
+import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
+import ArrowBackIosRoundedIcon from '@mui/icons-material/ArrowBackIosRounded';
+import { apiService } from 'authscape';
+import IconButton from '@mui/material/IconButton';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+
+//import {Comments} from './comments';
+
+
+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);
+      }
+    }
+
+    if (ticketId != null)
+    {
+      fetchData();
+    }
+
+  }, [ticketId]);
+
+  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%' }}>
+
+      <IconButton aria-label="delete" size="small" sx={{position:"absolute", right: 20, top: 20}} onClick={() => {
+
+          if (GoBackToViewTickets != null)
+          {
+            GoBackToViewTickets();
+          }
+
+          }}>
+        <CloseRoundedIcon fontSize="inherit" sx={{width:40, height:40}} />
+      </IconButton>
+        
+
+        <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 sx={{whiteSpace:"pre-wrap"}}>
+            <Box dangerouslySetInnerHTML={{
+                __html: ticketDescription,
+            }}>
+            </Box>
+          </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>
+  )
+}