Skip to content

Commit a452e90

Browse files
ksraj123ksraj123
committed
implemented title editor
1 parent a99773b commit a452e90

File tree

9 files changed

+178
-35
lines changed

9 files changed

+178
-35
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,21 @@ class TicketDashboard extends Component {
9898
});
9999
};
100100

101+
handleTicketSingleUpdate = (id, update) => {
102+
console.log("Dashboard handle single update")
103+
console.log(update)
104+
const tickets = [...this.state.all];
105+
tickets.forEach((ele) => {
106+
if (ele._id === id) {
107+
ele[Object.keys(update)[0]] = Object.values(update)[0]
108+
}
109+
});
110+
this.setState({
111+
all: [...tickets],
112+
filtered: [...tickets],
113+
});
114+
}
115+
101116
handleAddTag = (id, tagName) => {
102117
const tickets = [...this.state.all];
103118
tickets.forEach((ele) => {
@@ -180,6 +195,7 @@ class TicketDashboard extends Component {
180195
currentUser={this.props.user}
181196
removeTag={this.handleRemoveTag}
182197
ticketId={this.state.viewingTicket}
198+
singleUpdate={this.handleTicketSingleUpdate}
183199
/>
184200
)}
185201
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class Discussion extends Component {
4747
editer: "new",
4848
content: "",
4949
},
50-
async () => await this.props.updateTicket({ content })
50+
async () => await this.props.updateTicket({type: "content", content })
5151
);
5252
};
5353

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from "react";
2+
import Moment from "react-moment";
3+
import { Timeline } from "antd";
4+
5+
class History extends Component {
6+
view = () => {};
7+
render() {
8+
return (
9+
<div style={{padding: "10px 2rem", overflowY: "scroll", height: "75vh"}}>
10+
<Timeline>
11+
{this.props.ticket.history.map((ele, index) => {
12+
return (
13+
<Timeline.Item key={index}>
14+
<div className="history-item" onClick={() => this.view()}>
15+
<div className="line">
16+
<h5>{ele.updatedBy}</h5>
17+
<h5>
18+
<Moment format="DD MMM YYYY">{ele.updatedAt}</Moment>
19+
</h5>
20+
</div>
21+
<div className="line">
22+
<p>{ele.content}</p>
23+
</div>
24+
</div>
25+
</Timeline.Item>
26+
);
27+
})}
28+
</Timeline>
29+
</div>
30+
);
31+
}
32+
}
33+
34+
export default History;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,44 @@ class EditableCard extends Component {
1111
super(props);
1212
this.state = {
1313
data: props.data,
14-
editor: false
14+
editor: false,
1515
};
1616
}
1717

1818
toggleEditor = () => {
1919
this.setState({
20-
editor: !this.state.editor
21-
})
22-
}
20+
editor: !this.state.editor,
21+
});
22+
};
2323

2424
setData = (evt) => {
2525
this.setState({ data: evt.target.value });
2626
};
2727

2828
save = () => {
29-
this.setState(
30-
{ editor: false },
31-
async () =>
32-
await this.props.updateTicket({ shortDescription: this.state.data })
33-
);
34-
}
29+
this.setState({ editor: false }, async () => {
30+
await this.props.updateTicket({
31+
type: "shortDescription",
32+
shortDescription: this.state.data,
33+
});
34+
this.props.singleUpdate(this.props.ticketId, { shortDescription: this.state.data });
35+
});
36+
};
3537

3638
render() {
3739
return (
3840
<Card className="info-card">
3941
<div className="info-title">
4042
<span>{this.props.heading}</span>
41-
{!this.state.editor && (
42-
<EditButton onClick={this.toggleEditor} />
43-
)}
43+
{!this.state.editor && <EditButton onClick={this.toggleEditor} />}
4444
{this.state.editor && (
4545
<div className="buttons">
4646
<CancelButton
4747
style={{ marginRight: "10px" }}
4848
onClick={this.toggleEditor}
4949
/>
5050
<Button
51-
disabled={
52-
this.props.data === this.state.data
53-
}
51+
disabled={this.props.data === this.state.data}
5452
variant="light"
5553
onClick={this.save}
5654
>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { Component } from "react";
22
import Tags from "./Tags";
3+
import Title from "./Title";
34
import Members from "./Members";
45
import Form from "react-bootstrap/Form";
56
import Card from "react-bootstrap/Card";
67
import Badge from "react-bootstrap/Badge";
78
import Image from "react-bootstrap/Image";
89
import EditableCard from "./EditableCard";
910
import Button from "react-bootstrap/Button";
10-
import { FaArrowLeft } from "react-icons/fa";
11-
import Typography from "@material-ui/core/Typography";
11+
import EditButton from "@material-ui/icons/EditOutlined";
1212
import userIcon2 from "../../../../../assets/images/userIcon2.jpg";
1313

1414
class Layout extends Component {
@@ -29,14 +29,12 @@ class Layout extends Component {
2929
<div className="discussion">
3030
<div className="ticket-discussion">
3131
<div className="discussion">
32-
<div className="discussion-title">
33-
<div className="back-icon" onClick={this.props.handleBack}>
34-
<FaArrowLeft className="fa-icon" />
35-
</div>
36-
<div className="ticket-title">
37-
<span className="title-text">{this.props.ticket.title}</span>
38-
</div>
39-
</div>
32+
<Title
33+
ticket={this.props.ticket}
34+
handleBack={this.props.handleBack}
35+
singleUpdate={this.props.singleUpdate}
36+
updateTicket={this.props.updateTicket}
37+
/>
4038
<div className="ticket-tabs">
4139
<span className="nav__tab container">
4240
<ul className="nav__list__container">
@@ -91,6 +89,8 @@ class Layout extends Component {
9189
<EditableCard
9290
Type="Summary"
9391
heading="Ticket Summary"
92+
ticketId={this.props.ticket._id}
93+
singleUpdate={this.props.singleUpdate}
9494
updateTicket={this.props.updateTicket}
9595
data={this.props.ticket.shortDescription}
9696
/>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { Component } from "react";
22
import Card from "react-bootstrap/Card";
33
import Image from "react-bootstrap/Image";
44
import Modal from "react-bootstrap/Modal";
5-
import Button from "react-bootstrap/Button";
65
import Tooltip from "@material-ui/core/Tooltip";
76
import { withStyles } from "@material-ui/core/styles";
87
import userIcon2 from "../../../../../assets/images/userIcon2.jpg";

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { Component } from "react";
2+
import Form from "react-bootstrap/Form";
3+
import { Button } from "react-bootstrap";
4+
import { FaArrowLeft } from "react-icons/fa";
5+
import EditButton from "@material-ui/icons/EditOutlined";
6+
import SaveButton from "@material-ui/icons/SaveOutlined";
7+
import BadgeElement from "../../TicketContent/BadgeElement";
8+
import CancelButton from "@material-ui/icons/ClearOutlined";
9+
10+
class Title extends Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
editor: false,
15+
title: this.props.ticket.title,
16+
};
17+
}
18+
19+
toggleEditor = () => {
20+
this.setState({
21+
editor: !this.state.editor,
22+
});
23+
};
24+
25+
setTitle = (evt) => {
26+
this.setState({
27+
title: evt.target.value,
28+
});
29+
};
30+
31+
handleSave = () => {
32+
this.setState({ editor: false }, async () => {
33+
await this.props.updateTicket({
34+
type: "title",
35+
title: this.state.title,
36+
});
37+
this.props.singleUpdate(this.props.ticket._id, {
38+
title: this.state.title,
39+
});
40+
});
41+
};
42+
43+
render() {
44+
return (
45+
<div className="discussion-title">
46+
<div className="back-icon" onClick={this.props.handleBack}>
47+
<FaArrowLeft className="fa-icon" />
48+
</div>
49+
<div className="ticket-title">
50+
{!this.state.editor && (
51+
<React.Fragment>
52+
<dv style={{ display: "flex", alignItems: "center" }}>
53+
<BadgeElement ticketState={this.props.ticket.status} />
54+
<span style={{ marginLeft: "16px" }} className="title-text">
55+
{this.props.ticket.title}
56+
</span>
57+
</dv>
58+
<EditButton onClick={this.toggleEditor} />
59+
</React.Fragment>
60+
)}
61+
{this.state.editor && (
62+
<Form style={{ display: "flex", width: "100%" }}>
63+
<Form.Control type="text" onChange={this.setTitle} value={this.state.title} />
64+
<Button
65+
variant="light"
66+
onClick={this.toggleEditor}
67+
style={{ display: "flex", margin: "0px 16px" }}
68+
>
69+
<CancelButton />
70+
Cancel
71+
</Button>
72+
<Button style={{ display: "flex" }}>
73+
<SaveButton onClick={this.handleSave} />
74+
Save
75+
</Button>
76+
</Form>
77+
)}
78+
</div>
79+
</div>
80+
);
81+
}
82+
}
83+
84+
export default Title;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@
5454
flex-grow: 0;
5555
border-bottom: solid 1px #dfe9f1;
5656
.back-icon {
57+
display: flex;
58+
align-items: center;
5759
.fa-icon {
5860
font-size: 24px;
5961
color: #1a73e8;
@@ -71,6 +73,9 @@
7173
.ticket-title {
7274
flex: 5;
7375
text-align: center;
76+
display: flex;
77+
align-items: center;
78+
justify-content: space-between;
7479
padding: 1rem;
7580
.title-text {
7681
font-family: "Inter";

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import EditButton from "@material-ui/icons/EditOutlined";
1818
import CancelButton from "@material-ui/icons/ClearOutlined";
1919
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
2020
import SendOutlinedIcon from "@material-ui/icons/SendOutlined";
21+
import History from "./History/History";
2122

2223
class TicketDiscussions extends Component {
2324
constructor(props) {
@@ -111,7 +112,7 @@ class TicketDiscussions extends Component {
111112
this.setState({
112113
ticket: newTicket,
113114
});
114-
this.props.removeTag(this.state.ticket._id, tagName)
115+
this.props.removeTag(this.state.ticket._id, tagName);
115116
} catch (err) {
116117
console.log(err);
117118
}
@@ -135,14 +136,20 @@ class TicketDiscussions extends Component {
135136
handleBack={this.handleBack}
136137
removeTag={this.handleDeleteTag}
137138
updateTicket={this.handleUpdateTicket}
139+
singleUpdate={this.props.singleUpdate}
138140
handleViewChange={this.handleViewChange}
139141
>
140-
<Disscussion
141-
ticket={this.state.ticket}
142-
sendComment={this.sendComment}
143-
updateTicket={this.handleUpdateTicket}
144-
// setTicketContent={this.setTicketContent}
145-
/>
142+
{this.state.view === "discussions" && (
143+
<Disscussion
144+
ticket={this.state.ticket}
145+
sendComment={this.sendComment}
146+
updateTicket={this.handleUpdateTicket}
147+
// setTicketContent={this.setTicketContent}
148+
/>
149+
)}
150+
{this.state.view === "history" && (
151+
<History ticket={this.state.ticket} />
152+
)}
146153
</Layout>
147154
)}
148155
<ToastContainer

0 commit comments

Comments
 (0)