Skip to content

Commit 6fc3b82

Browse files
ksraj123ksraj123
committed
changes to discussion thread design
1 parent dceaaa3 commit 6fc3b82

File tree

6 files changed

+204
-124
lines changed

6 files changed

+204
-124
lines changed

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ class Filter extends Component {
9090
});
9191
} else {
9292
this.setState({
93-
tags: [...this.state.tags.filter((ele) => ele === tag)],
93+
tags: [...this.state.tags.filter((ele) => ele !== tag)],
9494
});
9595
}
9696
};
@@ -201,6 +201,24 @@ class Filter extends Component {
201201
))}
202202
</Dropdown.Menu>
203203
</Dropdown>
204+
<Dropdown size="sm" alignRight>
205+
<Dropdown.Toggle variant="light" id="dropdown-basic">
206+
Tags
207+
</Dropdown.Toggle>
208+
<Dropdown.Menu>
209+
{this.state.allTags.map((ele, index) => (
210+
<Dropdown.Item
211+
key={index}
212+
onClick={() => this.handleTagsChange(ele)}
213+
>
214+
{this.state.tags.indexOf(ele) !== -1 && (
215+
<CheckOutlinedIcon />
216+
)}
217+
{ele}
218+
</Dropdown.Item>
219+
))}
220+
</Dropdown.Menu>
221+
</Dropdown>
204222
</div>
205223
</div>
206224
);

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

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { Component } from "react";
22
import "./TicketContent.scss";
33
import Moment from "react-moment";
4-
import { Image } from "react-bootstrap";
54
import BadgeElement from "./BadgeElement";
65
import { withRouter } from "react-router-dom";
6+
import { Image, Badge } from "react-bootstrap";
77
import DataTable from "react-data-table-component";
88
import customStyles from "./DataTableCustomStyles";
99
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
10+
import ChatBubbleOutlinedIcon from "@material-ui/icons/ChatBubbleOutlined";
1011

1112
class TicketContent extends Component {
1213
handleRowClick = (arg1) => {
@@ -16,20 +17,25 @@ class TicketContent extends Component {
1617
};
1718

1819
render() {
19-
const CustomTitle = ({ row }) => (
20-
<div className="Ticket-dashboard-ticket">
21-
<div className="status">
22-
<BadgeElement ticketState={row.status} />
23-
</div>
24-
<div>
25-
<div className="Ticket-dashboard-title">{row.title}</div>
26-
<div className="Ticket-dashboard-shortDesciption">{`${row.shortDescription.slice(
27-
0,
28-
100
29-
)}...`}</div>
20+
const CustomTitle = ({ row }) => {
21+
console.log(row);
22+
return (
23+
<div className="Ticket-dashboard-ticket">
24+
<div className="status">
25+
<BadgeElement ticketState={row.status} />
26+
</div>
27+
<div>
28+
<div className="Ticket-dashboard-title">
29+
{row.title}
30+
</div>
31+
<div className="Ticket-dashboard-shortDesciption">{`${row.shortDescription.slice(
32+
0,
33+
100
34+
)}...`}</div>
35+
</div>
3036
</div>
31-
</div>
32-
);
37+
);
38+
};
3339

3440
const columns = [
3541
{
@@ -39,36 +45,49 @@ class TicketContent extends Component {
3945
cell: (row) => <CustomTitle row={row} />,
4046
},
4147
{
42-
selector: "createdBy.name",
48+
grow: 3,
49+
cell: (row) => (row.tags.map((ele, index) => (
50+
<Badge
51+
pill
52+
variant="info"
53+
style={{ fontSize: "13px", margin: "2px" }}
54+
>
55+
<span style={{ verticalAlign: "middle" }}>{ele}</span>
56+
</Badge>
57+
)))
58+
},
59+
{
60+
name: "Created",
61+
sortable: true,
62+
selector: "createdAt",
4363
cell: (row) => (
44-
<div>
64+
<div style={{ display: "flex", alignItems: "center" }}>
4565
<Image
4666
src={userIcon2}
4767
alt="icon"
4868
rounded
4969
className="profile-img"
5070
roundedCircle
5171
/>
52-
<span className="profile-text">{row.createdBy.name}</span>
72+
<div style={{ display: "flex", flexDirection: "column", marginLeft: "10px" }}>
73+
<div className="profile-text">{row.createdBy.name}</div>
74+
<Moment format="DD MMM YYYY">{row.createdAt}</Moment>
75+
</div>
5376
</div>
5477
),
5578
},
5679
{
57-
name: "Created",
80+
name: "Comments",
5881
sortable: true,
59-
selector: "createdAt",
82+
selector: "comments",
83+
center: "true",
6084
cell: (row) => (
6185
<div>
62-
<Moment format="DD MMM YYYY">{row.createdAt}</Moment>
86+
{row.comments}
87+
<ChatBubbleOutlinedIcon style={{ marginLeft: "5px", color: "rgba(0,0,0,0.5)" }}/>
6388
</div>
6489
),
6590
},
66-
{
67-
name: "Comments",
68-
sortable: true,
69-
selector: "comments",
70-
cell: (row) => <div>{row.comments}</div>,
71-
},
7291
];
7392

7493
return (

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

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ class TicketDashboard extends Component {
6363

6464
clearFilters = () => {
6565
this.setState({
66-
filtered: [...this.state.all]
67-
})
68-
}
66+
filtered: [...this.state.all],
67+
});
68+
};
6969

7070
componentDidMount() {
7171
setTimeout(() => {
@@ -98,8 +98,35 @@ class TicketDashboard extends Component {
9898
});
9999
};
100100

101+
handleAddTag = (id, tagName) => {
102+
const tickets = [...this.state.all];
103+
tickets.forEach((ele) => {
104+
if (ele._id === id) {
105+
ele.tags.push(tagName);
106+
}
107+
});
108+
this.setState({
109+
all: [...tickets],
110+
filtered: [...tickets],
111+
});
112+
};
113+
114+
handleRemoveTag = async (id, tagName) => {
115+
const tickets = [...this.state.all];
116+
tickets.forEach((ele) => {
117+
if (ele._id === id) {
118+
ele.tags.splice(ele.tags.indexOf(tagName), 1);
119+
}
120+
});
121+
this.setState({
122+
all: [...tickets],
123+
filtered: [...tickets],
124+
});
125+
};
126+
101127
handleViewTicket = (id) => {
102128
this.setState({
129+
filtered: [...this.state.all],
103130
viewingTicket: id,
104131
});
105132
};
@@ -147,9 +174,11 @@ class TicketDashboard extends Component {
147174
)}
148175
{this.state.viewingTicket && (
149176
<TicketDisscussion
177+
addTag={this.handleAddTag}
178+
back={this.handleViewTicket}
150179
currentUser={this.props.user}
180+
removeTag={this.handleRemoveTag}
151181
ticketId={this.state.viewingTicket}
152-
back={this.handleViewTicket}
153182
/>
154183
)}
155184
</div>

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

Lines changed: 73 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ class Discussion extends Component {
7777
height: this.state.editer === "ticket" ? "80vh" : "50vh",
7878
}}
7979
>
80-
<div className={`single-discussion discussion-ticket`}>
80+
<div className="single-discussion">
8181
<div
8282
style={{
8383
display: "flex",
@@ -86,86 +86,93 @@ class Discussion extends Component {
8686
>
8787
<div className="user-info">
8888
<div className="image">
89-
<Image src={userIcon2} alt="icon" rounded />
89+
<Image src={userIcon2} alt="icon" rounded roundedCircle />
9090
</div>
9191
<div className="img-desc">
92-
<h2>{this.props.ticket.createdBy.name}</h2>
93-
<div className="discussion-date">
94-
<Moment format="DD MMM YYYY">
95-
{this.props.ticket.createdAt}
96-
</Moment>
92+
<div style={{display: "flex", justifyContent: "space-between"}}>
93+
<div>
94+
<div style={{ display: "flex", alignItems: "center" }}>
95+
<h2>{this.props.ticket.createdBy.name}</h2>
96+
{this.state.editer === "new" && (
97+
<EditButton
98+
style={{
99+
color: "rgba(0,0,0,0.5)",
100+
fontSize: "18px",
101+
}}
102+
onClick={this.handleEditTicket}
103+
/>
104+
)}
105+
</div>
106+
<div className="discussion-date">
107+
<Moment format="DD MMM YYYY">
108+
{this.props.ticket.createdAt}
109+
</Moment>
110+
</div>
111+
</div>
112+
{this.state.editer === "ticket" && (
113+
<div>
114+
<Button
115+
style={{ margin: "8px" }}
116+
variant="light"
117+
onClick={this.cancelEditTicket}
118+
>
119+
<CancelButton />
120+
Cancel
121+
</Button>
122+
<Button
123+
style={{ margin: "8px" }}
124+
onClick={this.handleUpdateTicket}
125+
>
126+
<SaveButton />
127+
Save
128+
</Button>
129+
</div>
130+
)}
131+
</div>
132+
<div className="comment-content">
133+
<div className="comment-details">
134+
{this.state.editer === "new" && (
135+
<ReactMarkdown source={this.props.ticket.content} />
136+
)}
137+
{this.state.editer === "ticket" && (
138+
<ReactMde
139+
value={this.state.content}
140+
selectedTab={this.state.selectedTab}
141+
onChange={this.setContent}
142+
onTabChange={this.setSelectedTab}
143+
generateMarkdownPreview={(markdown) =>
144+
Promise.resolve(converter.makeHtml(markdown))
145+
}
146+
/>
147+
)}
148+
</div>
97149
</div>
98150
</div>
99151
</div>
100-
{this.state.editer === "new" && (
101-
<Button
102-
onClick={this.handleEditTicket}
103-
style={{ margin: "8px" }}
104-
variant="light"
105-
>
106-
<EditButton />
107-
</Button>
108-
)}
109-
{this.state.editer === "ticket" && (
110-
<div>
111-
<Button
112-
style={{ margin: "8px" }}
113-
variant="light"
114-
onClick={this.cancelEditTicket}
115-
>
116-
<CancelButton />
117-
Cancel
118-
</Button>
119-
<Button
120-
style={{ margin: "8px" }}
121-
onClick={this.handleUpdateTicket}
122-
>
123-
<SaveButton />
124-
Save
125-
</Button>
126-
</div>
127-
)}
128-
</div>
129-
<div className="comment-content">
130-
<div className="comment-details">
131-
{this.state.editer === "new" && (
132-
<ReactMarkdown source={this.props.ticket.content} />
133-
)}
134-
{this.state.editer === "ticket" && (
135-
<ReactMde
136-
value={this.state.content}
137-
selectedTab={this.state.selectedTab}
138-
onChange={this.setContent}
139-
onTabChange={this.setSelectedTab}
140-
generateMarkdownPreview={(markdown) =>
141-
Promise.resolve(converter.makeHtml(markdown))
142-
}
143-
/>
144-
)}
145-
</div>
146152
</div>
147153
</div>
148154
{this.props.ticket.comments.map((ele, index) => (
149-
<div
150-
key={index}
151-
className={`single-discussion ${
152-
ele.createdBy.userId === currentUser.id ? "right" : "left"
153-
}`}
154-
>
155+
<div key={index} className={`single-discussion`}>
155156
<div className="user-info">
156157
<div className="image">
157-
<Image src={userIcon2} alt="icon" rounded />
158+
<Image
159+
src={userIcon2}
160+
width="70px"
161+
alt="icon"
162+
rounded
163+
roundedCircle
164+
/>
158165
</div>
159166
<div className="img-desc">
160167
<h2>{ele.createdBy.name}</h2>
161168
<p className="discussion-date">
162169
<Moment format="DD MMM YYYY">{ele.createdAt}</Moment>
163170
</p>
164-
</div>
165-
</div>
166-
<div className="comment-content">
167-
<div className="comment-details">
168-
<ReactMarkdown source={ele.content} />
171+
<div className="comment-content">
172+
<div className="comment-details">
173+
<ReactMarkdown source={ele.content} />
174+
</div>
175+
</div>
169176
</div>
170177
</div>
171178
</div>
@@ -184,7 +191,7 @@ class Discussion extends Component {
184191
>
185192
<div className="user-info">
186193
<div className="image">
187-
<Image src={userIcon2} alt="icon" rounded />
194+
<Image src={userIcon2} alt="icon" rounded roundedCircle />
188195
</div>
189196
<div className="img-desc">
190197
<h2>{currentUser.name}</h2>

0 commit comments

Comments
 (0)