Skip to content

Commit 4ba74f9

Browse files
ksraj123ksraj123
committed
implemented ticket status updates and integrated it with historties and dashboard
1 parent 300aea5 commit 4ba74f9

File tree

5 files changed

+157
-44
lines changed

5 files changed

+157
-44
lines changed

‎src/user/Admin/Tickets/TicketContent/BadgeElement.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,35 @@ const BadgeElement = (props) => {
77
switch (props.ticketState) {
88
case "OPEN":
99
badgeVariant = "primary";
10-
text = "Open"
10+
text = "Open";
1111
break;
1212
case "SOLVED":
1313
badgeVariant = "success";
14-
text = "Solved"
14+
text = "Solved";
1515
break;
1616
case "ON_HOLD":
1717
badgeVariant = "secondary";
18-
text = "On Hold"
18+
text = "On Hold";
1919
break;
2020
case "PENDING":
2121
badgeVariant = "warning";
22-
text = "Pending"
22+
text = "Pending";
2323
break;
2424
case "CLOSED":
2525
badgeVariant = "danger";
26-
text = "Closed"
26+
text = "Closed";
2727
break;
2828
default:
2929
badgeVariant = "primary";
3030
}
3131
return (
32-
<div>
33-
<Badge pill variant={badgeVariant}>
34-
{props.ticketState}
35-
</Badge>
36-
</div>
32+
<Badge
33+
pill
34+
style={{ display: "flex", alignItems: "center" }}
35+
variant={badgeVariant}
36+
>
37+
{text}
38+
</Badge>
3739
);
3840
};
3941

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Moment from "react-moment";
44
import Modal from "react-bootstrap/Modal";
55
import Badge from "react-bootstrap/Badge";
66
import ReactMarkdown from "react-markdown";
7+
import BadgeElement from "../../TicketContent/BadgeElement";
78

89
class History extends Component {
910
constructor(props) {
@@ -51,7 +52,7 @@ class History extends Component {
5152
""
5253
)}
5354
{ele.type === "add tag" ? (
54-
<soan>
55+
<span>
5556
Assigned tag{" "}
5657
<Badge
5758
pill
@@ -62,12 +63,12 @@ class History extends Component {
6263
{ele.tag}
6364
</span>
6465
</Badge>
65-
</soan>
66+
</span>
6667
) : (
6768
""
6869
)}
6970
{ele.type === "remove tag" ? (
70-
<soan>
71+
<span>
7172
Removed tag{" "}
7273
<Badge
7374
pill
@@ -78,12 +79,20 @@ class History extends Component {
7879
<del>{ele.tag}</del>
7980
</span>
8081
</Badge>
81-
</soan>
82+
</span>
83+
) : (
84+
""
85+
)}
86+
{ele.type === "status" ? (
87+
<span style={{display: "flex"}}>
88+
Changed status to{" "}
89+
<BadgeElement style={{ fontSize: "13px", margin: "2px" }} ticketState={ele.status} />
90+
</span>
8291
) : (
8392
""
8493
)}
8594
{ele.type === "shortDescription" ? (
86-
<soan>
95+
<span>
8796
<span>
8897
{"Ticket Summary Updated "}
8998
<span
@@ -106,12 +115,12 @@ class History extends Component {
106115
View Update
107116
</span>
108117
</span>
109-
</soan>
118+
</span>
110119
) : (
111120
""
112121
)}
113122
{ele.type === "content" ? (
114-
<soan>
123+
<span>
115124
<span>
116125
{"Ticket Content Updated "}
117126
<span
@@ -134,7 +143,7 @@ class History extends Component {
134143
View Update
135144
</span>
136145
</span>
137-
</soan>
146+
</span>
138147
) : (
139148
""
140149
)}

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React, { Component } from "react";
2+
import Moment from "react-moment";
3+
import Card from "react-bootstrap/Card";
4+
import Badge from "react-bootstrap/Badge";
5+
import Button from "react-bootstrap/Button";
6+
import Dropdown from "react-bootstrap/Dropdown";
7+
import EditButton from "@material-ui/icons/EditOutlined";
8+
import SaveButton from "@material-ui/icons/SaveOutlined";
9+
import DropdownButton from "react-bootstrap/DropdownButton";
10+
import CancelButton from "@material-ui/icons/ClearOutlined";
11+
import BadgeElement from "../../TicketContent/BadgeElement";
12+
import CheckOutlinedIcon from "@material-ui/icons/CheckOutlined";
13+
14+
class Info extends Component {
15+
constructor(props) {
16+
super(props);
17+
this.state = {
18+
selected: this.props.ticket.status,
19+
};
20+
}
21+
22+
setSelected = (selected) => {
23+
this.setState({ selected });
24+
};
25+
26+
resetSelection = () => {
27+
this.setState({
28+
selected: this.props.ticket.status,
29+
});
30+
};
31+
32+
save = async () => {
33+
await this.props.updateTicket({
34+
type: "status",
35+
status: this.state.selected,
36+
});
37+
this.props.singleUpdate(this.props.ticket._id, {
38+
status: this.state.selected,
39+
});
40+
};
41+
42+
render() {
43+
return (
44+
<Card className="info-card">
45+
<div className="info-title">
46+
<span>Ticket Info</span>
47+
{this.state.selected !== this.props.ticket.status && (
48+
<div className="buttons">
49+
<CancelButton
50+
style={{ marginRight: "10px" }}
51+
onClick={this.resetSelection}
52+
/>
53+
<SaveButton onClick={this.save} />
54+
</div>
55+
)}
56+
</div>
57+
<div className="info-details">
58+
<div className="data-element">
59+
<span className="data-title">Ticket ID: </span>
60+
<span className="data-desc">9SUQb28020N</span>
61+
</div>
62+
<div className="data-element">
63+
<span className="data-title">Created: </span>
64+
<span className="data-desc">
65+
<Moment format="DD MMM YYYY">
66+
{this.props.ticket.createdAt}
67+
</Moment>
68+
</span>
69+
</div>
70+
<div className="data-element">
71+
<span className="data-title">Last Message:</span>
72+
<span className="data-desc">
73+
<Moment format="DD MMM YYYY">
74+
{this.props.ticket.updatedAt}
75+
</Moment>
76+
</span>
77+
</div>
78+
<div className="data-element" style={{ display: "flex" }}>
79+
<span className="data-title">Status:</span>
80+
<span className="data-desc">
81+
<DropdownButton
82+
variant="light"
83+
title={<BadgeElement ticketState={this.state.selected} />}
84+
size="sm"
85+
>
86+
{["OPEN", "CLOSED", "PENDING", "SOLVED", "ON_HOLD"].map(
87+
(ele, index) => (
88+
<Dropdown.Item
89+
key={index}
90+
style={{ display: "flex" }}
91+
onClick={() => this.setSelected(ele)}
92+
>
93+
{
94+
<CheckOutlinedIcon
95+
style={{
96+
color:
97+
ele === this.state.selected
98+
? "rgba(0, 0, 0, 0.5)"
99+
: "#ffffff",
100+
}}
101+
/>
102+
}
103+
<BadgeElement ticketState={ele} />
104+
</Dropdown.Item>
105+
)
106+
)}
107+
</DropdownButton>
108+
</span>
109+
</div>
110+
</div>
111+
</Card>
112+
);
113+
}
114+
}
115+
116+
export default Info;

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

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from "react";
22
import Tags from "./Tags";
33
import Title from "./Title";
4+
import TicketInfo from "./Info";
45
import Members from "./Members";
56
import Form from "react-bootstrap/Form";
67
import Card from "react-bootstrap/Card";
@@ -61,31 +62,11 @@ class Layout extends Component {
6162
</div>
6263
</div>
6364
<div className="ticket-info">
64-
<Card className="info-card">
65-
<div className="info-title">Ticket Info</div>
66-
<div className="info-details">
67-
<div className="data-element">
68-
<span className="data-title">Ticket ID </span>
69-
<span className="data-desc">9SUQb28020N</span>
70-
</div>
71-
<div className="data-element">
72-
<span className="data-title">Created </span>
73-
<span className="data-desc">23 Aug 2020</span>
74-
</div>
75-
<div className="data-element">
76-
<span className="data-title">Last Message</span>
77-
<span className="data-desc">24 Aug 2020</span>
78-
</div>
79-
<div className="data-element">
80-
<span className="data-title">Status</span>
81-
<span className="data-desc">
82-
<Badge pill variant="primary">
83-
Open
84-
</Badge>
85-
</span>
86-
</div>
87-
</div>
88-
</Card>
65+
<TicketInfo
66+
ticket={this.props.ticket}
67+
singleUpdate={this.props.singleUpdate}
68+
updateTicket={this.props.updateTicket}
69+
/>
8970
<EditableCard
9071
Type="Summary"
9172
heading="Ticket Summary"

‎src/user/Admin/Tickets/TicketDiscussion/TicketDiscussion.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,21 +240,26 @@
240240
cursor: pointer;
241241
}
242242
}
243+
.dropdown-toggle{
244+
display: flex;
245+
align-items: center;
246+
}
243247
.info-details {
244248
font-family: "Muli";
245249
font-size: 14px;
246250
.data-element {
247251
margin-top: 5px;
248252
.data-title {
249253
font-size: 13px;
254+
padding-right: 5px;
250255
color: rgba(0, 0, 0, 0.5);
251256
}
252257
.data-desc {
253258
// margin-left: 4px;
254259
font-size: 13px;
255260
font-weight: 400;
256261
// letter-spacing: -0.25px;
257-
.more{
262+
.more {
258263
color: rgba(0, 0, 0, 0.7);
259264
margin: 0 5px;
260265
cursor: pointer;

0 commit comments

Comments
 (0)