authscape 1.0.574 → 1.0.578
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +2 -1128
- package/package.json +1 -1
- package/src/components/AutoSaveTextField.js +1 -0
- package/src/components/YesNoDialog.js +1 -1
- package/src/components/tickets/TicketDetail.js +0 -392
- package/src/components/tickets/Tickets.js +0 -247
- package/src/components/tickets/comments.js +0 -150
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState, useRef } from 'react';
|
|
2
|
-
import { Box, Paper } from '@mui/material';
|
|
3
|
-
import InputBase from '@mui/material/InputBase';
|
|
4
|
-
import IconButton from '@mui/material/IconButton';
|
|
5
|
-
import QuestionAnswerOutlinedIcon from '@mui/icons-material/QuestionAnswerOutlined';
|
|
6
|
-
import Typography from '@mui/material/Typography';
|
|
7
|
-
// import { apiService } from 'authscape';
|
|
8
|
-
import Grid from '@mui/material/Grid';
|
|
9
|
-
import List from '@mui/material/List';
|
|
10
|
-
import ListItem from '@mui/material/ListItem';
|
|
11
|
-
import ListItemText from '@mui/material/ListItemText';
|
|
12
|
-
import Avatar from '@mui/material/Avatar';
|
|
13
|
-
import SendRoundedIcon from '@mui/icons-material/SendRounded';
|
|
14
|
-
import scrollIntoView from 'scroll-into-view-if-needed'
|
|
15
|
-
import Stack from '@mui/material/Stack';
|
|
16
|
-
|
|
17
|
-
export function Comments({ticketId, isNote, isDisabled, currentUser}) {
|
|
18
|
-
|
|
19
|
-
const [comments, setComments] = useState([]);
|
|
20
|
-
const [message, setMessage] = useState("");
|
|
21
|
-
// const [messageDialogOpen, setMessageDialogOpen] = useState(false);
|
|
22
|
-
|
|
23
|
-
const reloadMessages = async () => {
|
|
24
|
-
|
|
25
|
-
// setIsLoading(true);
|
|
26
|
-
|
|
27
|
-
let response = await apiService().get("/Ticket/GetMessages?TicketId=" + ticketId + "&isNote=" + isNote);
|
|
28
|
-
if (response != null && response.status == 200)
|
|
29
|
-
{
|
|
30
|
-
setComments(response.data);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const node = document.getElementById('messages');
|
|
34
|
-
if (node != null)
|
|
35
|
-
{
|
|
36
|
-
scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// setIsLoading(false);
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
|
|
45
|
-
if (ticketId != null)
|
|
46
|
-
{
|
|
47
|
-
const asyncPush = async () => {
|
|
48
|
-
await reloadMessages();
|
|
49
|
-
}
|
|
50
|
-
asyncPush();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
}, [ticketId]);
|
|
54
|
-
|
|
55
|
-
const SendMessage = async () => {
|
|
56
|
-
|
|
57
|
-
if (message !== "")
|
|
58
|
-
{
|
|
59
|
-
let response = await apiService().post("/Ticket/CreateMessage", {
|
|
60
|
-
ticketId: ticketId,
|
|
61
|
-
name: currentUser.firstName,
|
|
62
|
-
message: message,
|
|
63
|
-
isNote: isNote
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
if (response != null && response.status == 200)
|
|
67
|
-
{
|
|
68
|
-
await reloadMessages();
|
|
69
|
-
// messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
70
|
-
// let messages = comments.slice();
|
|
71
|
-
// messages.push(message);
|
|
72
|
-
// setComments(messages);
|
|
73
|
-
setMessage("");
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<Box sx={{display:"flex", flexDirection:"column", height:"100%"}}>
|
|
80
|
-
<Box sx={{backgroundColor:"#F3F5F7", overflow:"auto", flex: "1 1 auto"}}>
|
|
81
|
-
<Box>
|
|
82
|
-
{comments.length == 0 &&
|
|
83
|
-
<Box sx={{paddingLeft:4}}>
|
|
84
|
-
<QuestionAnswerOutlinedIcon sx={{fill:"gray", position:"relative", top:"4px", marginRight:2}} fontSize={"2px"} />
|
|
85
|
-
<Typography variant="subtitle2" color="text.secondary" component="span" sx={{marginTop:1}}>
|
|
86
|
-
Add your first {isNote ? "note" : "message" }. {isNote ? "Your notes" : "The conversation history" } will appear here
|
|
87
|
-
</Typography>
|
|
88
|
-
</Box>
|
|
89
|
-
}
|
|
90
|
-
<Box sx={{overflow:"scroll", height:"300px"}}>
|
|
91
|
-
<Grid container>
|
|
92
|
-
<Grid item xs={12}>
|
|
93
|
-
<List>
|
|
94
|
-
{comments != null && comments.map((comment, index) => {
|
|
95
|
-
return (
|
|
96
|
-
<ListItem key={index} sx={{marginTop:1}}>
|
|
97
|
-
<Grid container>
|
|
98
|
-
<Grid item xs={1}>
|
|
99
|
-
<Avatar />
|
|
100
|
-
</Grid>
|
|
101
|
-
<Grid item xs={11}>
|
|
102
|
-
<Stack direction="row" spacing={1}>
|
|
103
|
-
<Box sx={{fontSize:12}}>{comment.firstName}</Box>
|
|
104
|
-
<Box sx={{fontSize:12}}>{comment.created}</Box>
|
|
105
|
-
</Stack>
|
|
106
|
-
<Box sx={{fontSize:16}}>{comment.message}</Box>
|
|
107
|
-
</Grid>
|
|
108
|
-
</Grid>
|
|
109
|
-
</ListItem>
|
|
110
|
-
)
|
|
111
|
-
})}
|
|
112
|
-
|
|
113
|
-
<ListItem>
|
|
114
|
-
<div id={"messages"}></div>
|
|
115
|
-
</ListItem>
|
|
116
|
-
</List>
|
|
117
|
-
</Grid>
|
|
118
|
-
</Grid>
|
|
119
|
-
</Box>
|
|
120
|
-
</Box>
|
|
121
|
-
</Box>
|
|
122
|
-
|
|
123
|
-
<Box sx={{flex: "0 1 40px"}}>
|
|
124
|
-
<Paper
|
|
125
|
-
sx={{ p: '2px 4px', display: 'flex', alignItems: 'center'}}>
|
|
126
|
-
<InputBase
|
|
127
|
-
sx={{ ml: 1, flex: 1 }}
|
|
128
|
-
disabled={isDisabled}
|
|
129
|
-
onKeyUp={(event) => {
|
|
130
|
-
if (event.key == "Enter")
|
|
131
|
-
{
|
|
132
|
-
SendMessage();
|
|
133
|
-
}
|
|
134
|
-
}}
|
|
135
|
-
placeholder={!isNote ? "Write your message here..." : "Write your notes here..."}
|
|
136
|
-
value={message}
|
|
137
|
-
onChange={(value) => {
|
|
138
|
-
setMessage(value.target.value);
|
|
139
|
-
}}
|
|
140
|
-
/>
|
|
141
|
-
<IconButton disabled={isDisabled} type="button" sx={{ p: '10px' }} aria-label="search" onClick={() => {
|
|
142
|
-
SendMessage();
|
|
143
|
-
}}>
|
|
144
|
-
<SendRoundedIcon />
|
|
145
|
-
</IconButton>
|
|
146
|
-
</Paper>
|
|
147
|
-
</Box>
|
|
148
|
-
</Box>
|
|
149
|
-
);
|
|
150
|
-
}
|