Skip to content

Commit 4276293

Browse files
ksraj123ksraj123
committed
Ticket Discussions refactor
1 parent 7f9e197 commit 4276293

File tree

7 files changed

+482
-407
lines changed

7 files changed

+482
-407
lines changed

‎src/user/Admin/Tickets/TicketDashboard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import Button from "react-bootstrap/Button";
99
import NewTicketEditor from "./NewTicketEditor";
1010
import socket from "../../dashboard/utils/socket";
1111
import { BASE_URL } from "../../../actions/baseApi";
12-
import TicketDisscussion from "./TicketDiscussions";
1312
import TicketContent from "./TicketContent/TicketContent";
1413
import { getTickets } from "../../../actions/ticketAction";
1514
import donutIcon from "../../../assets/svgs/donut-icon.svg";
1615
import Navigation from "../../dashboard/navigation/navigation";
16+
import TicketDisscussion from "./TicketDiscussion/TicketDiscussions";
1717
import { Drawer, List, ListItem, ListItemText } from "@material-ui/core";
1818
import NotificationsNoneOutlinedIcon from "@material-ui/icons/NotificationsNoneOutlined";
1919

‎src/user/Admin/Tickets/TicketDiscussion/Discussion/Discussion.js‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import React, { Component } from "react";
2+
import ReactMde from "react-mde";
3+
import Moment from "react-moment";
4+
import * as Showdown from "showdown";
5+
import { Image } from "react-bootstrap";
6+
import ReactMarkdown from "react-markdown";
7+
import Button from "react-bootstrap/Button";
8+
import Dropdown from "react-bootstrap/Dropdown";
9+
import SaveButton from "@material-ui/icons/SaveOutlined";
10+
import EditButton from "@material-ui/icons/EditOutlined";
11+
import CancelButton from "@material-ui/icons/ClearOutlined";
12+
import SendOutlinedIcon from "@material-ui/icons/SendOutlined";
13+
import userIcon2 from "../../../../../assets/images/userIcon2.jpg";
14+
15+
class Discussion extends Component {
16+
constructor(props) {
17+
super(props);
18+
this.state = {
19+
editer: "new",
20+
content: "",
21+
selectedTab: "write",
22+
};
23+
}
24+
25+
setContent = (content) => this.setState({ content });
26+
27+
setSelectedTab = (selectedTab) => this.setState({ selectedTab });
28+
29+
handleEditTicket = () => {
30+
this.setState({
31+
content: this.props.ticket.content,
32+
editer: "ticket",
33+
});
34+
};
35+
36+
cancelEditTicket = () => {
37+
this.setState({
38+
content: "",
39+
editer: "new",
40+
});
41+
};
42+
43+
// viewHistory = (content) => {
44+
// this.props.setTicketContent(content)
45+
// }
46+
47+
handleUpdateTicket = () => {
48+
const content = this.state.content;
49+
this.setState(
50+
{
51+
editer: "new",
52+
content: "",
53+
},
54+
async () => await this.props.updateTicket({ content })
55+
);
56+
};
57+
58+
sendComment = () => {
59+
const content = this.state.content;
60+
this.setState({ content: "" }, async () => {
61+
await this.props.sendComment(content);
62+
});
63+
};
64+
65+
render() {
66+
const currentUser = {
67+
name: localStorage.getItem("username"),
68+
id: localStorage.getItem("userId"),
69+
};
70+
const converter = new Showdown.Converter({
71+
tables: true,
72+
tasklists: true,
73+
strikethrough: true,
74+
simplifiedAutoLink: true,
75+
});
76+
return (
77+
<React.Fragment>
78+
<div
79+
className="discussions"
80+
style={{
81+
height: this.state.editer === "ticket" ? "80vh" : "50vh",
82+
}}
83+
>
84+
<div className={`single-discussion discussion-ticket`}>
85+
<div
86+
style={{
87+
display: "flex",
88+
justifyContent: "space-between",
89+
}}
90+
>
91+
<div className="user-info">
92+
<div className="image">
93+
<Image src={userIcon2} alt="icon" rounded />
94+
</div>
95+
<div className="img-desc">
96+
<h2>{this.props.ticket.createdBy.name}</h2>
97+
<div className="discussion-date">
98+
<Moment format="DD MMM YYYY">
99+
{this.props.ticket.createdAt}
100+
</Moment>
101+
{/* <Dropdown>
102+
<Dropdown.Toggle variant="light">Edits</Dropdown.Toggle>
103+
<Dropdown.Menu>
104+
{this.props.ticket.history.map((item, index) => (
105+
<Dropdown.Item
106+
key={index}
107+
onClick={() => this.viewHistory(item.content)}
108+
>
109+
<Moment format="DD MMM YYYY">
110+
{item.editedAt}
111+
</Moment>
112+
</Dropdown.Item>
113+
))}
114+
</Dropdown.Menu>
115+
</Dropdown> */}
116+
</div>
117+
</div>
118+
</div>
119+
{this.state.editer === "new" && (
120+
<Button
121+
onClick={this.handleEditTicket}
122+
style={{ margin: "8px" }}
123+
variant="light"
124+
>
125+
<EditButton />
126+
</Button>
127+
)}
128+
{this.state.editer === "ticket" && (
129+
<div>
130+
<Button
131+
style={{ margin: "8px" }}
132+
variant="light"
133+
onClick={this.cancelEditTicket}
134+
>
135+
<CancelButton />
136+
Cancel
137+
</Button>
138+
<Button
139+
style={{ margin: "8px" }}
140+
onClick={this.handleUpdateTicket}
141+
>
142+
<SaveButton />
143+
Save
144+
</Button>
145+
</div>
146+
)}
147+
</div>
148+
<div className="comment-content">
149+
<div className="comment-details">
150+
{this.state.editer === "new" && (
151+
<ReactMarkdown source={this.props.ticket.content} />
152+
)}
153+
{this.state.editer === "ticket" && (
154+
<ReactMde
155+
value={this.state.content}
156+
selectedTab={this.state.selectedTab}
157+
onChange={this.setContent}
158+
onTabChange={this.setSelectedTab}
159+
generateMarkdownPreview={(markdown) =>
160+
Promise.resolve(converter.makeHtml(markdown))
161+
}
162+
/>
163+
)}
164+
</div>
165+
</div>
166+
</div>
167+
{this.props.ticket.comments.map((ele, index) => (
168+
<div
169+
key={index}
170+
className={`single-discussion ${
171+
ele.createdBy.userId === currentUser.id ? "right" : "left"
172+
}`}
173+
>
174+
<div className="user-info">
175+
<div className="image">
176+
<Image src={userIcon2} alt="icon" rounded />
177+
</div>
178+
<div className="img-desc">
179+
<h2>{ele.createdBy.name}</h2>
180+
<p className="discussion-date">
181+
<Moment format="DD MMM YYYY">{ele.createdAt}</Moment>
182+
</p>
183+
</div>
184+
</div>
185+
<div className="comment-content">
186+
<div className="comment-details">
187+
<ReactMarkdown source={ele.content} />
188+
</div>
189+
</div>
190+
</div>
191+
))}
192+
</div>
193+
{this.state.editer === "new" && (
194+
<div
195+
className={`single-discussion discussion-ticket`}
196+
id="discussion-editor"
197+
>
198+
<div
199+
style={{
200+
display: "flex",
201+
justifyContent: "space-between",
202+
}}
203+
>
204+
<div className="user-info">
205+
<div className="image">
206+
<Image src={userIcon2} alt="icon" rounded />
207+
</div>
208+
<div className="img-desc">
209+
<h2>{currentUser.name}</h2>
210+
</div>
211+
</div>
212+
<Button onClick={this.sendComment} style={{ margin: "8px" }}>
213+
<SendOutlinedIcon />
214+
Send
215+
</Button>
216+
</div>
217+
<div className="comment-content">
218+
<ReactMde
219+
value={this.state.content}
220+
selectedTab={this.state.selectedTab}
221+
onChange={this.setContent}
222+
onTabChange={this.setSelectedTab}
223+
generateMarkdownPreview={(markdown) =>
224+
Promise.resolve(converter.makeHtml(markdown))
225+
}
226+
/>
227+
</div>
228+
</div>
229+
)}
230+
</React.Fragment>
231+
);
232+
}
233+
}
234+
235+
export default Discussion;

‎src/user/Admin/Tickets/TicketDiscussion/History/History.js‎

Whitespace-only changes.

‎src/user/Admin/Tickets/TicketDiscussion/Layout.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React, { Component } from "react";
2+
import Card from "react-bootstrap/Card";
3+
import Badge from "react-bootstrap/Badge";
4+
import Image from "react-bootstrap/Image";
5+
import { FaArrowLeft } from "react-icons/fa";
6+
import EditButton from "@material-ui/icons/EditOutlined";
7+
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
8+
9+
class Layout extends Component {
10+
render() {
11+
return (
12+
<div className="discussion">
13+
<div className="ticket-discussion">
14+
<div className="discussion">
15+
<div className="discussion-title">
16+
<div className="back-icon" onClick={this.props.handleBack}>
17+
<FaArrowLeft className="fa-icon" />
18+
</div>
19+
<div className="ticket-title">
20+
<span className="title-text">{this.props.ticket.title}</span>
21+
</div>
22+
</div>
23+
<div className="ticket-tabs">
24+
<span className="nav__tab container">
25+
<ul className="nav__list__container">
26+
{[
27+
{ view: "discussions", opt: "Discussions" },
28+
{ view: "history", opt: "History" },
29+
].map((ele, index) => (
30+
<li
31+
key={index}
32+
className={
33+
this.props.view === ele.view
34+
? "nav__single__tab selected"
35+
: "nav__single__tab"
36+
}
37+
onClick={() => this.props.handleViewChange(ele.view)}
38+
>
39+
{ele.opt}
40+
</li>
41+
))}
42+
</ul>
43+
</span>
44+
</div>
45+
{this.props.children}
46+
</div>
47+
</div>
48+
<div className="ticket-info">
49+
<Card className="info-card">
50+
<div className="info-title">Ticket Info</div>
51+
<div className="info-details">
52+
<div className="data-element">
53+
<span className="data-title">Ticket ID </span>
54+
<span className="data-desc">9SUQb28020N</span>
55+
</div>
56+
<div className="data-element">
57+
<span className="data-title">Created </span>
58+
<span className="data-desc">23 Aug 2020</span>
59+
</div>
60+
<div className="data-element">
61+
<span className="data-title">Last Message</span>
62+
<span className="data-desc">24 Aug 2020</span>
63+
</div>
64+
<div className="data-element">
65+
<span className="data-title">Status</span>
66+
<span className="data-desc">
67+
<Badge pill variant="primary">
68+
Open
69+
</Badge>
70+
</span>
71+
</div>
72+
</div>
73+
</Card>
74+
<Card className="info-card">
75+
<div className="info-title">
76+
<span>Ticket Summary</span>
77+
<EditButton />
78+
</div>
79+
<div className="info-details">
80+
<div className="data-element">
81+
<span className="data-desc">
82+
{this.props.ticket.shortDescription}
83+
</span>
84+
</div>
85+
</div>
86+
</Card>
87+
<Card className="info-card">
88+
<div className="info-title">Requester</div>
89+
<div className="info-details">
90+
<div className="data-element">
91+
<Image
92+
src={userIcon2}
93+
alt="icon"
94+
rounded
95+
className="profile-img"
96+
roundedCircle
97+
/>
98+
<span className="data-desc">Devesh Verma</span>
99+
</div>
100+
</div>
101+
</Card>
102+
<Card className="info-card">
103+
<div className="info-title">
104+
<span>Tags</span>
105+
<EditButton />
106+
</div>
107+
<div className="info-details">
108+
<div className="data-element">
109+
<span className="data-desc">
110+
{this.props.ticket.shortDescription}
111+
</span>
112+
</div>
113+
</div>
114+
</Card>
115+
<Card className="info-card">
116+
<div className="info-title">Members</div>
117+
<div className="info-details">
118+
<div className="data-element">
119+
<span className="data-desc">
120+
{this.props.ticket.shortDescription}
121+
</span>
122+
</div>
123+
</div>
124+
</Card>
125+
</div>
126+
</div>
127+
);
128+
}
129+
}
130+
131+
export default Layout;

0 commit comments

Comments
 (0)