Skip to content

Commit dceaaa3

Browse files
ksraj123ksraj123
committed
functional adding and removing of tags
1 parent 4276293 commit dceaaa3

File tree

6 files changed

+227
-53
lines changed

6 files changed

+227
-53
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,10 @@ class Filter extends Component {
162162
<div onClick={this.clearFilters} className="clear-filters">
163163
{this.state.search
164164
? "Clear Search and Filters"
165-
: !this.state.author ||
166-
!this.state.tags.length ||
167-
(!this.state.status && "Clear Filters")}
165+
: (!this.state.author ||
166+
!this.state.tags.length ||
167+
!this.state.status.length) &&
168+
"Clear Filters"}
168169
</div>
169170
<Dropdown size="sm" alignRight>
170171
<Dropdown.Toggle variant="light" id="dropdown-basic">

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

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as Showdown from "showdown";
55
import { Image } from "react-bootstrap";
66
import ReactMarkdown from "react-markdown";
77
import Button from "react-bootstrap/Button";
8-
import Dropdown from "react-bootstrap/Dropdown";
8+
// import Dropdown from "react-bootstrap/Dropdown";
99
import SaveButton from "@material-ui/icons/SaveOutlined";
1010
import EditButton from "@material-ui/icons/EditOutlined";
1111
import CancelButton from "@material-ui/icons/ClearOutlined";
@@ -40,10 +40,6 @@ class Discussion extends Component {
4040
});
4141
};
4242

43-
// viewHistory = (content) => {
44-
// this.props.setTicketContent(content)
45-
// }
46-
4743
handleUpdateTicket = () => {
4844
const content = this.state.content;
4945
this.setState(
@@ -98,21 +94,6 @@ class Discussion extends Component {
9894
<Moment format="DD MMM YYYY">
9995
{this.props.ticket.createdAt}
10096
</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> */}
11697
</div>
11798
</div>
11899
</div>

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React, { Component } from "react";
2+
import Card from "react-bootstrap/Card";
3+
import Form from "react-bootstrap/Form";
4+
import Button from "react-bootstrap/Button";
5+
import SaveButton from "@material-ui/icons/SaveOutlined";
6+
import EditButton from "@material-ui/icons/EditOutlined";
7+
import CancelButton from "@material-ui/icons/ClearOutlined";
8+
9+
class EditableCard extends Component {
10+
constructor(props) {
11+
super(props);
12+
this.state = {
13+
data: props.data,
14+
editor: false
15+
};
16+
}
17+
18+
toggleEditor = () => {
19+
this.setState({
20+
editor: !this.state.editor
21+
})
22+
}
23+
24+
setData = (evt) => {
25+
this.setState({ data: evt.target.value });
26+
};
27+
28+
save = () => {
29+
this.setState(
30+
{ editor: false },
31+
async () =>
32+
await this.props.updateTicket({ shortDescription: this.state.data })
33+
);
34+
}
35+
36+
render() {
37+
return (
38+
<Card className="info-card">
39+
<div className="info-title">
40+
<span>{this.props.heading}</span>
41+
{!this.state.editor && (
42+
<EditButton onClick={this.toggleEditor} />
43+
)}
44+
{this.state.editor && (
45+
<div className="buttons">
46+
<CancelButton
47+
style={{ marginRight: "10px" }}
48+
onClick={this.toggleEditor}
49+
/>
50+
<Button
51+
disabled={
52+
this.props.data === this.state.data
53+
}
54+
variant="light"
55+
onClick={this.save}
56+
>
57+
<SaveButton />
58+
</Button>
59+
</div>
60+
)}
61+
</div>
62+
<div className="info-details">
63+
<div className="data-element">
64+
<span className="data-desc">
65+
{!this.state.editor && this.props.data}
66+
{this.state.editor && (
67+
<Form.Group>
68+
<Form.Control
69+
as="textarea"
70+
rows="3"
71+
maxLength="100"
72+
value={this.state.data}
73+
onChange={this.setData}
74+
isInvalid={this.state.data.length >= 100}
75+
/>
76+
</Form.Group>
77+
)}
78+
</span>
79+
</div>
80+
</div>
81+
</Card>
82+
);
83+
}
84+
}
85+
86+
export default EditableCard;

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

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
import React, { Component } from "react";
2+
import Tags from "./Tags";
3+
import Form from "react-bootstrap/Form";
24
import Card from "react-bootstrap/Card";
35
import Badge from "react-bootstrap/Badge";
46
import Image from "react-bootstrap/Image";
7+
import EditableCard from "./EditableCard";
8+
import Button from "react-bootstrap/Button";
59
import { FaArrowLeft } from "react-icons/fa";
6-
import EditButton from "@material-ui/icons/EditOutlined";
7-
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
10+
import userIcon2 from "../../../../../assets/images/userIcon2.jpg";
811

912
class Layout extends Component {
13+
constructor(props) {
14+
super(props);
15+
this.state = {
16+
tagsEditor: false,
17+
titleEditor: false,
18+
summaryEditor: false,
19+
tags: props.ticket.tags,
20+
title: props.ticket.title,
21+
summary: props.ticket.shortDescription,
22+
};
23+
}
24+
1025
render() {
1126
return (
1227
<div className="discussion">
@@ -71,19 +86,12 @@ class Layout extends Component {
7186
</div>
7287
</div>
7388
</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>
89+
<EditableCard
90+
Type="Summary"
91+
heading="Ticket Summary"
92+
updateTicket={this.props.updateTicket}
93+
data={this.props.ticket.shortDescription}
94+
/>
8795
<Card className="info-card">
8896
<div className="info-title">Requester</div>
8997
<div className="info-details">
@@ -99,19 +107,11 @@ class Layout extends Component {
99107
</div>
100108
</div>
101109
</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>
110+
<Tags
111+
addTag={this.props.addTag}
112+
data={this.props.ticket.tags}
113+
removeTag={this.props.removeTag}
114+
/>
115115
<Card className="info-card">
116116
<div className="info-title">Members</div>
117117
<div className="info-details">

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { Component } from "react";
2+
import Card from "react-bootstrap/Card";
3+
import Form from "react-bootstrap/Form";
4+
import Badge from "react-bootstrap/Badge";
5+
import Button from "react-bootstrap/Button";
6+
import CancelButton from "@material-ui/icons/ClearOutlined";
7+
8+
class Tags extends Component {
9+
constructor(props) {
10+
super(props);
11+
this.state = {};
12+
}
13+
14+
addTag = (evt) => {
15+
evt.preventDefault();
16+
this.props.addTag(evt.target[0].value);
17+
console.log(evt.target[0].value);
18+
evt.target[0].value = ""
19+
};
20+
render() {
21+
console.log(this.props.data);
22+
return (
23+
<Card className="info-card">
24+
<div className="info-title">
25+
<span>Tags</span>
26+
</div>
27+
<div className="info-details">
28+
<div className="data-element">
29+
<span className="data-desc">
30+
{this.props.data.map((ele, index) => (
31+
<Badge pill variant="info" style={{ fontSize: "13px", margin: "2px" }}>
32+
<span style={{ verticalAlign: "middle" }}>{ele}</span>
33+
<CancelButton onClick={() => this.props.removeTag(ele)}/>
34+
</Badge>
35+
))}
36+
</span>
37+
<span className="data-desc">
38+
<Form
39+
onSubmit={this.addTag}
40+
style={{ display: "flex", marginTop: "10px" }}
41+
>
42+
<Form.Group>
43+
<Form.Control type="text" placeholder="Tag Name" />
44+
</Form.Group>
45+
<Button variant="light" type="submit">
46+
Add
47+
</Button>
48+
</Form>
49+
</span>
50+
</div>
51+
</div>
52+
</Card>
53+
);
54+
}
55+
}
56+
57+
export default Tags;

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

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React, { Component } from "react";
22
import "./TicketDiscussion.scss";
33
import Axios from "axios";
4-
import Layout from "./Layout";
54
import ReactMde from "react-mde";
65
import Moment from "react-moment";
6+
import Layout from "./Layout/Layout";
77
import * as Showdown from "showdown";
88
import { Image } from "react-bootstrap";
99
import ReactMarkdown from "react-markdown";
1010
import Button from "react-bootstrap/Button";
1111
import Dropdown from "react-bootstrap/Dropdown";
1212
import Disscussion from "./Discussion/Discussion";
1313
import "react-mde/lib/styles/css/react-mde-all.css";
14+
import { ToastContainer, toast } from "react-toastify";
1415
import { BASE_URL } from "../../../../actions/baseApi";
1516
import SaveButton from "@material-ui/icons/SaveOutlined";
1617
import EditButton from "@material-ui/icons/EditOutlined";
@@ -76,6 +77,40 @@ class TicketDiscussions extends Component {
7677
}
7778
};
7879

80+
handleAddTag = async (tagName) => {
81+
if (this.state.ticket.tags.indexOf(tagName) !== -1) {
82+
toast.error("Tag already present");
83+
} else if (tagName.length > 10) {
84+
toast.error("Tag can have upto 10 characters only");
85+
} else if ((this.state.ticket.tags || []).length >= 7) {
86+
toast.error("Ticket can have upto 7 tags only");
87+
} else {
88+
try {
89+
const newTicket = (
90+
await Axios.post(`${BASE_URL}/ticket/${this.state.ticket._id}/tag/${tagName}`)
91+
).data.ticket;
92+
this.setState({
93+
ticket: newTicket,
94+
});
95+
} catch (err) {
96+
console.log(err);
97+
}
98+
}
99+
}
100+
101+
handleDeleteTag = async (tagName) => {
102+
try {
103+
const newTicket = (
104+
await Axios.delete(`${BASE_URL}/ticket/${this.state.ticket._id}/tag/${tagName}`)
105+
).data.ticket;
106+
this.setState({
107+
ticket: newTicket,
108+
});
109+
} catch (err) {
110+
console.log(err);
111+
}
112+
}
113+
79114
handleViewChange = (atrb) => {
80115
this.setState({
81116
view: atrb,
@@ -90,8 +125,11 @@ class TicketDiscussions extends Component {
90125
<Layout
91126
ticket={this.state.ticket}
92127
view={this.state.view}
93-
handleViewChange={this.handleViewChange}
128+
addTag={this.handleAddTag}
94129
handleBack={this.handleBack}
130+
removeTag={this.handleDeleteTag}
131+
updateTicket={this.handleUpdateTicket}
132+
handleViewChange={this.handleViewChange}
95133
>
96134
<Disscussion
97135
ticket={this.state.ticket}
@@ -101,6 +139,17 @@ class TicketDiscussions extends Component {
101139
/>
102140
</Layout>
103141
)}
142+
<ToastContainer
143+
draggable
144+
rtl={false}
145+
pauseOnHover
146+
closeOnClick
147+
autoClose={5000}
148+
pauseOnFocusLoss
149+
newestOnTop={false}
150+
position="top-right"
151+
hideProgressBar={false}
152+
/>
104153
</>
105154
);
106155
}

0 commit comments

Comments
 (0)