Skip to content

Commit 4452049

Browse files
ksraj123ksraj123
committed
implemented new page editor
1 parent 45da2c9 commit 4452049

File tree

7 files changed

+284
-111
lines changed

7 files changed

+284
-111
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"react-images": "^1.1.7",
3939
"react-lottie": "^1.2.3",
4040
"react-markdown-editor-lite": "^1.1.4",
41+
"react-mde": "^10.2.1",
4142
"react-moment": "^0.9.7",
4243
"react-redux": "^7.2.0",
4344
"react-responsive": "^8.0.3",

‎src/assets/jsonData/tickets.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default [
44
title: "Requirement of new Integration",
55
year: "1988",
66
runtime: "92",
7-
genres: ["Open"],
7+
genres: ["open"],
88
director: "Tim Burton",
99
actors: "Alec Baldwin, Geena Davis, Annie McEnroe, Maurice Page",
1010
plot:
@@ -17,7 +17,7 @@ export default [
1717
title: "The Cotton Club",
1818
year: "1984",
1919
runtime: "127",
20-
genres: ["Open"],
20+
genres: ["open"],
2121
director: "Francis Ford Coppola",
2222
actors: "Richard Gere, Gregory Hines, Diane Lane, Lonette McKee",
2323
plot:
@@ -30,7 +30,7 @@ export default [
3030
title: "The Shawshank Redemption",
3131
year: "1994",
3232
runtime: "142",
33-
genres: ["Solved"],
33+
genres: ["solved"],
3434
director: "Frank Darabont",
3535
actors: "Tim Robbins, Morgan Freeman, Bob Gunton, William Sadler",
3636
plot:
@@ -43,7 +43,7 @@ export default [
4343
title: "Crocodile Dundee",
4444
year: "1986",
4545
runtime: "97",
46-
genres: ["Pending"],
46+
genres: ["pending"],
4747
director: "Peter Faiman",
4848
actors: "Paul Hogan, Linda Kozlowski, John Meillon, David Gulpilil",
4949
plot:
@@ -56,7 +56,7 @@ export default [
5656
title: "Valkyrie",
5757
year: "2008",
5858
runtime: "121",
59-
genres: ["OnHold"],
59+
genres: ["onHold"],
6060
director: "Bryan Singer",
6161
actors: "Tom Cruise, Kenneth Branagh, Bill Nighy, Tom Wilkinson",
6262
plot:
@@ -69,7 +69,7 @@ export default [
6969
title: "Ratatouille",
7070
year: "2007",
7171
runtime: "111",
72-
genres: ["Open"],
72+
genres: ["open"],
7373
director: "Brad Bird, Jan Pinkava",
7474
actors: "Patton Oswalt, Ian Holm, Lou Romano, Brian Dennehy",
7575
plot:
@@ -82,7 +82,7 @@ export default [
8282
title: "City of God",
8383
year: "2002",
8484
runtime: "130",
85-
genres: ["Solved"],
85+
genres: ["solved"],
8686
director: "Fernando Meirelles, Kátia Lund",
8787
actors:
8888
"Alexandre Rodrigues, Leandro Firmino, Phellipe Haagensen, Douglas Silva",
@@ -96,7 +96,7 @@ export default [
9696
title: "Memento",
9797
year: "2000",
9898
runtime: "113",
99-
genres: ["Solved"],
99+
genres: ["solved"],
100100
director: "Christopher Nolan",
101101
actors: "Guy Pearce, Carrie-Anne Moss, Joe Pantoliano, Mark Boone Junior",
102102
plot:
@@ -109,7 +109,7 @@ export default [
109109
title: "The Intouchables",
110110
year: "2011",
111111
runtime: "112",
112-
genres: ["Closed"],
112+
genres: ["closed"],
113113
director: "Olivier Nakache, Eric Toledano",
114114
actors: "François Cluzet, Omar Sy, Anne Le Ny, Audrey Fleurot",
115115
plot:
@@ -122,7 +122,7 @@ export default [
122122
title: "The Intouchables",
123123
year: "2011",
124124
runtime: "112",
125-
genres: ["Open"],
125+
genres: ["open"],
126126
director: "Olivier Nakache, Eric Toledano",
127127
actors: "François Cluzet, Omar Sy, Anne Le Ny, Audrey Fleurot",
128128
plot:

‎src/user/Admin/Tickets/NewTicketEditor/Editor.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.new-ticket-editor {
2+
padding: 50px 50px;
3+
.top-controls {
4+
display: flex;
5+
margin-bottom: 50px;
6+
justify-content: flex-end;
7+
.vc {
8+
display: flex;
9+
align-items: center;
10+
}
11+
* {
12+
margin: 0 5px;
13+
display: flex;
14+
align-items: center;
15+
}
16+
.btn {
17+
padding-left: 0.25rem;
18+
}
19+
}
20+
form {
21+
display: flex;
22+
align-items: center;
23+
label {
24+
margin: 0;
25+
height: 100%;
26+
width: 150px;
27+
display: flex;
28+
align-items: center;
29+
}
30+
margin-bottom: 50px;
31+
}
32+
.react-mde {
33+
margin-bottom: 50px;
34+
.mde-header {
35+
.mde-tabs {
36+
* {
37+
padding: 0 10px;
38+
margin-bottom: 0;
39+
}
40+
.selected {
41+
border: none;
42+
background-color: #ffffff;
43+
}
44+
}
45+
.mde-tabs:active {
46+
border: none;
47+
}
48+
}
49+
}
50+
}

‎src/user/Admin/Tickets/NewTicketEditor/index.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 CancelButton from "@material-ui/icons/ClearOutlined";
3+
import SaveButton from "@material-ui/icons/SaveOutlined";
4+
import { ToastContainer, toast } from "react-toastify";
5+
import "react-mde/lib/styles/css/react-mde-all.css";
6+
import Button from "react-bootstrap/Button";
7+
import Form from "react-bootstrap/Form";
8+
import * as Showdown from "showdown";
9+
import ReactMde from "react-mde";
10+
import "./Editor.scss";
11+
12+
class Editor extends Component {
13+
constructor(props) {
14+
super(props);
15+
this.state = {
16+
selectedTab: "write",
17+
title: "",
18+
content: "",
19+
shortDescription: "",
20+
};
21+
}
22+
23+
// handleSave = () => {
24+
// const { title, content, shortDescription } = this.state;
25+
// const { save } = this.props;
26+
// save(
27+
// {
28+
// title,
29+
// content,
30+
// shortDescription,
31+
// status: "OPEN"
32+
// }
33+
// );
34+
// };
35+
36+
setContent = (content) => this.setState({ content });
37+
38+
setTitle = (evt) => this.setState({ title: evt.target.value });
39+
40+
setSelectedTab = (selectedTab) => this.setState({ selectedTab });
41+
42+
setShortDescription = (evt) => {
43+
const value = evt.target.value;
44+
this.setState({ shortDescription: value });
45+
};
46+
47+
render() {
48+
const converter = new Showdown.Converter({
49+
tables: true,
50+
tasklists: true,
51+
strikethrough: true,
52+
simplifiedAutoLink: true,
53+
});
54+
const { title, content, selectedTab } = this.state;
55+
const { cancel } = this.props;
56+
return (
57+
<div className="new-ticket-editor">
58+
<div className="top-controls">
59+
<Button onClick={cancel} variant="light">
60+
<span className="vc">
61+
<CancelButton />
62+
Cancel
63+
</span>
64+
</Button>
65+
</div>
66+
<Form>
67+
<Form.Label className="field-title">Title</Form.Label>
68+
<Form.Control
69+
as="input"
70+
name="ticketTitle"
71+
className="searchbar"
72+
value={title}
73+
onChange={this.setTitle}
74+
maxlength="50"
75+
isInvalid={this.state.shortDescription.length >= 50}
76+
/>
77+
</Form>
78+
<Form>
79+
<Form.Label className="field-title">Description</Form.Label>
80+
<Form.Control
81+
as="textarea"
82+
name="ticketDescription"
83+
maxlength="100"
84+
className="searchbar"
85+
value={this.state.shortDescription}
86+
onChange={this.setShortDescription}
87+
isInvalid={this.state.shortDescription.length >= 100}
88+
/>
89+
</Form>
90+
<Form>
91+
</Form>
92+
<ReactMde
93+
onChange={this.setContent}
94+
value={content}
95+
onTabChange={this.setSelectedTab}
96+
selectedTab={selectedTab}
97+
generateMarkdownPreview={(markdown) =>
98+
Promise.resolve(converter.makeHtml(markdown))
99+
}
100+
/>
101+
<div className="top-controls">
102+
<Button
103+
// onClick={this.handleSave}
104+
variant="primary"
105+
>
106+
<span className="vc">
107+
<SaveButton /> Save
108+
</span>
109+
</Button>
110+
</div>
111+
</div>
112+
);
113+
}
114+
}
115+
116+
export default Editor;

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,30 @@ import Badge from "react-bootstrap/Badge";
33

44
const BadgeElement = (props) => {
55
let badgeVariant = null;
6+
let text = null;
67
switch (props.ticketState) {
7-
case "Open":
8+
case "open":
89
badgeVariant = "primary";
10+
text = "Open"
911
break;
10-
case "Solved":
12+
case "solved":
1113
badgeVariant = "success";
14+
text = "Solved"
1215
break;
13-
case "OnHold":
16+
case "onHold":
1417
badgeVariant = "secondary";
18+
text = "On Hold"
1519
break;
16-
case "Pending":
20+
case "pending":
1721
badgeVariant = "warning";
22+
text = "Pending"
1823
break;
19-
case "Closed":
24+
case "closed":
2025
badgeVariant = "danger";
26+
text = "Closed"
2127
break;
2228
default:
23-
badgeVariant = "Open";
29+
badgeVariant = "primary";
2430
}
2531
return (
2632
<div>

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

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,15 @@
11
import React, { Component } from "react";
2-
import DataTable from "react-data-table-component";
3-
import data from "../../../../assets/jsonData/tickets";
42
import "./TicketContent.scss";
5-
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
63
import { Image } from "react-bootstrap";
7-
import { withRouter } from "react-router-dom";
84
import BadgeElement from './BadgeElement';
5+
import { withRouter } from "react-router-dom";
6+
import DataTable from "react-data-table-component";
97
import customStyles from './DataTableCustomStyles';
8+
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
109

1110
class TicketContent extends Component {
12-
constructor(props) {
13-
super(props);
14-
this.state = {
15-
allData: data,
16-
selectedState: this.props.selectedState,
17-
displayData: data,
18-
};
19-
}
20-
21-
static getDerivedStateFromProps(nextProps, prevState) {
22-
if (nextProps.selectedState !== prevState.selectedState) {
23-
let allData = data;
24-
let displayData = [];
25-
26-
if (nextProps.selectedState === "All") {
27-
displayData = data;
28-
} else {
29-
allData.forEach((i) => {
30-
if (i.genres[0] === nextProps.selectedState) {
31-
displayData.push(i);
32-
}
33-
});
34-
}
35-
36-
return {
37-
selectedState: nextProps.selectedState,
38-
displayData: displayData,
39-
};
40-
}
41-
return null;
42-
}
43-
44-
handleRowClick = (e) => {
45-
//Access data table elements using event
46-
this.props.history.push("/ticketdiscussion");
47-
};
48-
11+
4912
render() {
50-
const Button = () => <button type="button">Download</button>;
5113

5214
const CustomTitle = ({ row }) => (
5315
<div>
@@ -66,13 +28,15 @@ class TicketContent extends Component {
6628
},
6729
{
6830
name: "Description",
31+
grow: 3,
6932
selector: "plot",
7033
wrap: true,
7134
sortable: true,
7235
format: (row) => `${row.plot.slice(0, 100)}...`,
7336
},
7437
{
7538
name: "Status",
39+
grow: 1,
7640
// eslint-disable-next-line react/no-array-index-key
7741
cell: (row) => (
7842
<div>
@@ -84,6 +48,7 @@ class TicketContent extends Component {
8448
},
8549
{
8650
name: "User",
51+
grow: 1,
8752
cell: (row) => (
8853
<div>
8954
<Image
@@ -107,9 +72,9 @@ class TicketContent extends Component {
10772

10873
return (
10974
<DataTable
110-
title={this.state.selectedState}
75+
// title={this.state.selectedState}
11176
columns={columns}
112-
data={this.state.displayData}
77+
data={this.props.tickets}
11378
customStyles={customStyles}
11479
pagination
11580
paginationPerPage={Math.floor((window.innerHeight - 220) / 85)}

0 commit comments

Comments
 (0)