Skip to content

Commit a99773b

Browse files
ksraj123ksraj123
committed
members with tooltips and popups
1 parent 96525fd commit a99773b

File tree

5 files changed

+159
-12
lines changed

5 files changed

+159
-12
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ class Filter extends Component {
167167
/>
168168
</Form>
169169
</div>
170-
<Button onClick={() => this.toggleNewTicketEditor(true)}>
170+
<Button onClick={() => this.props.toggleNewTicketEditor(true)}>
171171
New Ticket
172172
</Button>
173173
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ class TicketDashboard extends Component {
155155
tickets={this.state.all}
156156
filtered={this.state.filtered}
157157
clear={this.clearFilters}
158+
toggleNewTicketEditor={this.toggleNewTicketEditor}
158159
setFiltered={this.setFilteredTickets}
159160
/>
160161
</div>

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

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

1214
class Layout extends Component {
@@ -112,16 +114,7 @@ class Layout extends Component {
112114
data={this.props.ticket.tags}
113115
removeTag={this.props.removeTag}
114116
/>
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>
117+
<Members ticket={this.props.ticket} />
125118
</div>
126119
</div>
127120
);

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React, { Component } from "react";
2+
import Card from "react-bootstrap/Card";
3+
import Image from "react-bootstrap/Image";
4+
import Modal from "react-bootstrap/Modal";
5+
import Button from "react-bootstrap/Button";
6+
import Tooltip from "@material-ui/core/Tooltip";
7+
import { withStyles } from "@material-ui/core/styles";
8+
import userIcon2 from "../../../../../assets/images/userIcon2.jpg";
9+
import LocationOnOutlinedIcon from "@material-ui/icons/LocationOnOutlined";
10+
11+
class Members extends Component {
12+
constructor(props) {
13+
super(props);
14+
this.state = {
15+
show: false,
16+
};
17+
}
18+
19+
handleShow = () => {
20+
this.setState({
21+
show: true,
22+
});
23+
};
24+
25+
handleClose = () => {
26+
this.setState({
27+
show: false,
28+
});
29+
};
30+
31+
render() {
32+
const HtmlTooltip = withStyles((theme) => ({
33+
tooltip: {
34+
backgroundColor: "#ffffff",
35+
color: "rgba(0, 0, 0, 0.87)",
36+
maxWidth: 220,
37+
fontSize: theme.typography.pxToRem(12),
38+
border: "1px solid #dadde9",
39+
},
40+
}))(Tooltip);
41+
const members = [
42+
{
43+
userId: this.props.ticket.createdBy.id,
44+
...this.props.ticket.createdBy,
45+
},
46+
];
47+
this.props.ticket.comments.forEach((comment) => {
48+
if (
49+
members.map((ele) => ele.userId).indexOf(comment.createdBy.userId) ===
50+
-1
51+
) {
52+
members.push(comment.createdBy);
53+
}
54+
});
55+
return (
56+
<React.Fragment>
57+
<Modal
58+
centered
59+
className="modal"
60+
show={this.state.show}
61+
onHide={this.handleClose}
62+
>
63+
<Modal.Header closeButton>
64+
<Modal.Title>Members</Modal.Title>
65+
</Modal.Header>
66+
<Modal.Body style={{ height: "500px", overflowY: "scroll" }}>
67+
{members.map((ele) => (
68+
<div style={{ display: "flex" }}>
69+
<Image
70+
style={{ margin: "10px" }}
71+
src={userIcon2}
72+
alt="icon"
73+
rounded
74+
className="profile-img"
75+
roundedCircle
76+
/>
77+
<div style={{ fontSize: "13px", fontFamily: "Inter" }}>
78+
<strong>{ele.name}</strong>
79+
<div>{ele.designation}</div>
80+
<div>
81+
{ele.location && <LocationOnOutlinedIcon />}
82+
{ele.location}
83+
</div>
84+
<div>{ele.email}</div>
85+
<div>{ele.shortDescription}</div>
86+
</div>
87+
</div>
88+
))}
89+
</Modal.Body>
90+
</Modal>
91+
<Card className="info-card">
92+
<div className="info-title">Members</div>
93+
<div className="info-details">
94+
<div className="data-element">
95+
<span className="data-desc">
96+
{members.slice(0, 5).map((ele, index) => (
97+
<HtmlTooltip
98+
placement="top-end"
99+
title={
100+
<React.Fragment>
101+
<div style={{ display: "flex" }}>
102+
<Image
103+
style={{ margin: "10px" }}
104+
src={userIcon2}
105+
alt="icon"
106+
rounded
107+
className="profile-img"
108+
roundedCircle
109+
/>
110+
<div
111+
style={{ fontSize: "13px", fontFamily: "Inter" }}
112+
>
113+
<strong>{ele.name}</strong>
114+
<div>{ele.designation}</div>
115+
<div>
116+
{ele.location && <LocationOnOutlinedIcon />}
117+
{ele.location}
118+
</div>
119+
<div>{ele.email}</div>
120+
<div>{ele.shortDescription}</div>
121+
</div>
122+
</div>
123+
</React.Fragment>
124+
}
125+
>
126+
<Image
127+
src={userIcon2}
128+
alt="icon"
129+
rounded
130+
className="profile-img"
131+
roundedCircle
132+
/>
133+
</HtmlTooltip>
134+
))}
135+
<div className="more" onClick={this.handleShow}>
136+
More
137+
</div>
138+
</span>
139+
</div>
140+
</div>
141+
</Card>
142+
</React.Fragment>
143+
);
144+
}
145+
}
146+
147+
export default Members;

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,16 @@
245245
color: rgba(0, 0, 0, 0.5);
246246
}
247247
.data-desc {
248-
margin-left: 4px;
248+
// margin-left: 4px;
249249
font-size: 13px;
250250
font-weight: 400;
251251
// letter-spacing: -0.25px;
252+
.more{
253+
color: rgba(0, 0, 0, 0.7);
254+
margin: 0 5px;
255+
cursor: pointer;
256+
text-decoration: underline;
257+
}
252258
}
253259
}
254260
}

0 commit comments

Comments
 (0)