Skip to content

Commit 992698d

Browse files
marek-kozlovsky-atamarek-kozlovsky-ata
committed
Tickets listing page.
1 parent 10b09fd commit 992698d

File tree

7 files changed

+222
-79
lines changed

7 files changed

+222
-79
lines changed

‎src/App.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {ProjectsOverview} from "./components/projects/ProjectsOverview";
1111
import AddProjectForm from "./components/projects/AddProjectForm";
1212
import {RecordsOverview} from "./components/form/RecordsOverview";
1313
import {SearchOverview} from "./components/search/SearchOverview";
14+
import {TicketsOverview} from "./components/ticket/TicketsOverview";
1415

1516
class App extends React.Component {
1617

@@ -41,6 +42,8 @@ class App extends React.Component {
4142
</Route>
4243
<Route exact path="/search/forms/:projectName" component={SearchOverview}>
4344
</Route>
45+
<Route exact path="/browse/tickets/:projectName" component={TicketsOverview}>
46+
</Route>
4447
</Switch>
4548
</Router>
4649
</div>

‎src/components/form/RecordLine.js‎

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -30,71 +30,73 @@ export class RecordLine extends React.Component {
3030
/>;
3131
}
3232

33-
return <Card>
34-
<ListGroup variant="flush">
35-
<ListGroup.Item>
36-
<Row>
37-
<Col xs={9}>
38-
<p>
39-
</p>
40-
<span>Number of versions: <b>{this.props.numberOfRecordVersions}</b></span>
41-
<br/>
42-
<span>Number of snapshots: <b>{this.props.numberOfRecordSnapshots}</b></span>
43-
<br/>
44-
<span>Created:{' '}
45-
<b>
33+
return <div>
34+
<Card>
35+
<ListGroup variant="flush">
36+
<ListGroup.Item>
37+
<Row>
38+
<Col xs={9}>
39+
<p>
40+
</p>
41+
<span>Number of versions: <b>{this.props.numberOfRecordVersions}</b></span>
42+
<br/>
43+
<span>Number of snapshots: <b>{this.props.numberOfRecordSnapshots}</b></span>
44+
<br/>
45+
<span>Created:{' '}
46+
<b>
4647
<Moment format="DD.MM.YYYY h:mm:ss">
4748
{this.props.recordCreated}
4849
</Moment>
4950
</b>
5051
</span>
51-
</Col>
52-
<Col xs={3}>
53-
<Button variant="outline-primary" type="submit" size="sm" className="float-right"
54-
onClick={() => this.props.clickHandler(this.props.remoteSampleContextURI)}>
55-
Display
56-
</Button>
57-
<Button
58-
variant="link" size="sm" className="float-right"
59-
onClick={() => this.setState({historyCollapseOpen: !this.state.historyCollapseOpen})}
60-
aria-controls="example-collapse-text"
61-
aria-expanded={this.state.historyCollapseOpen}
62-
>
63-
Show history <FontAwesomeIcon color="black" icon={faCaretDown}/>
64-
</Button>
65-
<Button
66-
variant="link" size="sm" className="float-right"
67-
onClick={() => this.setState({detailCollapseOpen: !this.state.detailCollapseOpen})}
68-
aria-controls="example-collapse-text"
69-
aria-expanded={this.state.detailCollapseOpen}
70-
>
71-
Show detail <FontAwesomeIcon color="black" icon={faCaretDown}/>
72-
</Button>
73-
</Col>
74-
</Row>
75-
<Row>
76-
<Col>
77-
<div>
78-
<Collapse in={this.state.detailCollapseOpen}>
79-
<div id="example-collapse-text">
80-
<hr/>
81-
<span>Sample remote context URI: {this.props.remoteSampleContextURI}</span>
82-
<br/>
83-
<span>Internal URI: {this.props.recordURI}</span>
84-
<br/>
85-
</div>
86-
</Collapse>
87-
<Collapse in={this.state.historyCollapseOpen}>
88-
<div id="example-collapse-text">
89-
<hr/>
90-
{historyDiv}
91-
</div>
92-
</Collapse>
93-
</div>
94-
</Col>
95-
</Row>
96-
</ListGroup.Item>
97-
</ListGroup>
98-
</Card>
52+
</Col>
53+
<Col xs={3}>
54+
<Button variant="outline-primary" type="submit" size="sm" className="float-right"
55+
onClick={() => this.props.clickHandler(this.props.remoteSampleContextURI)}>
56+
Display
57+
</Button>
58+
<Button
59+
variant="link" size="sm" className="float-right"
60+
onClick={() => this.setState({historyCollapseOpen: !this.state.historyCollapseOpen})}
61+
aria-controls="example-collapse-text"
62+
aria-expanded={this.state.historyCollapseOpen}
63+
>
64+
Show history <FontAwesomeIcon color="black" icon={faCaretDown}/>
65+
</Button>
66+
<Button
67+
variant="link" size="sm" className="float-right"
68+
onClick={() => this.setState({detailCollapseOpen: !this.state.detailCollapseOpen})}
69+
aria-controls="example-collapse-text"
70+
aria-expanded={this.state.detailCollapseOpen}
71+
>
72+
Show detail <FontAwesomeIcon color="black" icon={faCaretDown}/>
73+
</Button>
74+
</Col>
75+
</Row>
76+
<Row>
77+
<Col>
78+
<div>
79+
<Collapse in={this.state.detailCollapseOpen}>
80+
<div id="example-collapse-text">
81+
<hr/>
82+
<span>Sample remote context URI: {this.props.remoteSampleContextURI}</span>
83+
<br/>
84+
<span>Internal URI: {this.props.recordURI}</span>
85+
<br/>
86+
</div>
87+
</Collapse>
88+
<Collapse in={this.state.historyCollapseOpen}>
89+
<div id="example-collapse-text">
90+
<hr/>
91+
{historyDiv}
92+
</div>
93+
</Collapse>
94+
</div>
95+
</Col>
96+
</Row>
97+
</ListGroup.Item>
98+
</ListGroup>
99+
</Card>
100+
</div>
99101
}
100102
}

‎src/components/form/RecordList.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,6 @@ export class RecordList extends React.Component {
1717
}
1818
}
1919

20-
componentDidMount() {
21-
this.requestRecordsFromProps();
22-
}
23-
24-
requestRecordsFromProps() {
25-
if (this.props.requestRecords) {
26-
this.props.requestRecords().then(response => {
27-
return response.data;
28-
}).then(data => {
29-
this.setState({
30-
records: data
31-
});
32-
}).catch(error => {
33-
console.log(error)
34-
});
35-
}
36-
}
37-
3820
render() {
3921
const records = this.props?.records || this.state.records
4022

‎src/components/navigation/HeaderNavigationBar.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ class HeaderNavigationBar extends React.Component {
2323
return <NavDropdown.Item key={app} as={Link} to={"/search/forms/" + app}>{app}</NavDropdown.Item>;
2424
}
2525
);
26+
const browseTicketsLinks = this.props.projects.map(app => {
27+
return <NavDropdown.Item key={app} as={Link} to={"/browse/tickets/" + app}>{app}</NavDropdown.Item>;
28+
}
29+
);
2630
return (
2731
<Navbar bg="light" expand="lg">
2832
<Navbar.Brand as={Link} to="/">S-Forms Manager</Navbar.Brand>
@@ -41,6 +45,9 @@ class HeaderNavigationBar extends React.Component {
4145
<NavDropdown title="Search in Forms">
4246
{searchInFormsLinks}
4347
</NavDropdown>
48+
<NavDropdown title="Browse Tickets">
49+
{browseTicketsLinks}
50+
</NavDropdown>
4451
</Nav>
4552
</Navbar.Collapse>
4653
</Navbar>

‎src/components/ticket/TicketLine.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import Col from "react-bootstrap/Col";
3+
import Row from "react-bootstrap/Row";
4+
import ListGroup from "react-bootstrap/ListGroup";
5+
import Card from "react-bootstrap/Card";
6+
7+
export class TicketLine extends React.Component {
8+
9+
render() {
10+
return <Card>
11+
<ListGroup variant="flush">
12+
<ListGroup.Item>
13+
<div>
14+
<Row>
15+
<Col>
16+
<div>
17+
<span>Name: <b>{this.props.name}</b></span>
18+
<br/>
19+
<span>Description: {this.props.description}</span>
20+
<br/>
21+
<br/>
22+
<span>Link: <a href={this.props.url} target="_blank">link</a></span>
23+
<br/>
24+
<span>Form version identifier: <b>{this.props?.customFields["SpecificFormVersionID"]}</b></span>
25+
<br/>
26+
<span>Form identifier: <b>{this.props?.customFields["SpecificFormID"]}</b></span>
27+
<br/>
28+
<span>Question: <b>{this.props?.customFields["SpecificQuestion"]}</b></span>
29+
<br/>
30+
31+
</div>
32+
</Col>
33+
</Row>
34+
</div>
35+
</ListGroup.Item>
36+
</ListGroup>
37+
</Card>
38+
}
39+
}

‎src/components/ticket/TicketsList.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import Alert from "react-bootstrap/Alert";
3+
import API from "../../api";
4+
import {TicketLine} from "./TicketLine";
5+
6+
export class TicketsList extends React.Component {
7+
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
tickets: null,
12+
}
13+
}
14+
15+
componentDidMount() {
16+
this.requestTickets();
17+
}
18+
19+
requestTickets() {
20+
API.post("/rest/ticket/project", null, {
21+
params: {
22+
"projectName": this.props.projectName,
23+
}
24+
}).then(response => {
25+
console.log(response.data);
26+
this.setState({tickets: response.data});
27+
});
28+
}
29+
30+
render() {
31+
32+
const tickets = this.state.tickets
33+
34+
if (!tickets) {
35+
return <Alert variant={"light"} className={"h-10"}>
36+
Loading tickets...
37+
</Alert>
38+
}
39+
40+
const ticketLines = tickets.length !== 0 ? tickets.map((ticket, i) => {
41+
return <TicketLine key={i}
42+
name={ticket.name}
43+
description={ticket.description}
44+
url={ticket.url}
45+
customFields={ticket.customFields}
46+
/>;
47+
}) : <Alert variant={"light"} className={"h-10"}>
48+
The list is empty.
49+
</Alert>;
50+
51+
return <div>
52+
<span>There are <b>{tickets.length}</b> tickets. </span>
53+
<hr/>
54+
{ticketLines}
55+
</div>
56+
57+
}
58+
}

‎src/components/ticket/TicketsOverview.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import Row from "react-bootstrap/Row";
3+
import Col from "react-bootstrap/Col";
4+
import Container from "react-bootstrap/Container";
5+
import API from "../../api";
6+
import {TicketsList} from "./TicketsList";
7+
8+
export class TicketsOverview extends React.Component {
9+
10+
constructor(props) {
11+
super(props);
12+
this.state = {
13+
tickets: null,
14+
}
15+
}
16+
17+
componentDidMount() {
18+
this.requestTickets();
19+
}
20+
21+
requestTickets() {
22+
API.post("/rest/ticket/project", null, {
23+
params: {
24+
"projectName": this.props.match.params.projectName,
25+
}
26+
}).then(response => {
27+
console.log(response.data);
28+
this.setState({tickets: response.data});
29+
});
30+
}
31+
32+
render() {
33+
34+
return (
35+
<Container fluid>
36+
<Container>
37+
<br/>
38+
<h4>
39+
Tickets: {this.props.match.params.projectName}
40+
</h4>
41+
<Row>
42+
<Col>
43+
<div>
44+
<TicketsList projectName={this.props.match.params.projectName}/>
45+
</div>
46+
</Col>
47+
</Row>
48+
49+
</Container>
50+
</Container>)
51+
}
52+
}

0 commit comments

Comments
 (0)