franjsco
/
tick3t
mirror of https://github.com/franjsco/tick3t
1
0
Fork 0
Code Issues Releases Wiki Activity

new table component

This commit is contained in:
frab1t 2019-05-08 16:31:23 +02:00
parent 0630079027
commit 3940a4818c
1 changed files with 22 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/containers/ViewTicket/ViewTicket.js
View File

@ -1,15 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import { Link } from 'react-router-dom';
Card,
CardBody,
CardTitle,
CardText,
Col,
Row,
Table
} from 'reactstrap';
import './ViewTicket.css'; import Card from '../../components/Card';
import Table from '../../components/Table';
class ViewTicket extends Component { class ViewTicket extends Component {
constructor(props) { constructor(props) {
@ -17,6 +10,7 @@ class ViewTicket extends Component {
this.state = { this.state = {
data: {}, data: {},
error: '',
isLoading: false, isLoading: false,
}; };
} }
@ -24,7 +18,7 @@ class ViewTicket extends Component {
componentDidMount() { componentDidMount() {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
const { match: {params}} = this.props; const { match: { params } } = this.props;
fetch(`http://localhost:3001/tickets?id=${params.ticketId}`) fetch(`http://localhost:3001/tickets?id=${params.ticketId}`)
.then(response => { .then(response => {
@ -35,74 +29,38 @@ class ViewTicket extends Component {
} }
}) })
.then(json => { .then(json => {
if(json.length){ if (json.length) {
this.setState({ data: json[0], isLoading: false }) this.setState({ data: json[0], isLoading: false })
} else { } else {
throw new Error('Ticket Not found'); throw new Error('Ticket Not found');
} }
}) })
.catch(error => this.setState({ error, isLoading: false})); .catch(error => this.setState({ error, isLoading: false }));
} }
render() { render() {
const {data, isLoading, error} = this.state; const { data, isLoading, error } = this.state;
if (error) { if (error) {
return <p>{error.message}</p> return (
<Card title="Error">
<p>{error.message}</p>
</Card>
)
} }
if (isLoading) { if (isLoading) {
return '' // add spinner return '' // add spinner
} }
return (
<div>
<Card className="text-center shadow-sm p-3 mb-5 bg-white rounded">
<CardBody>
<CardTitle><h5>View Ticket</h5></CardTitle>
<CardText>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>
<Table bordered id="table-ticket-info">
<thead>
<tr>
<th colSpan={2}>Ticket-ID: {data.id }</th>
</tr>
</thead>
<tbody>
<tr>
<td className="font-weight-bold text-right">Status</td>
<td>{data.status}</td>
</tr>
<tr>
<td className="font-weight-bold text-right">Creation Date</td>
<td>{data.createdAt}</td>
</tr>
<tr>
<td className="font-weight-bold text-right">Update Date</td>
<td>{data.updateAt}</td>
</tr>
<tr>
<td className="font-weight-bold text-right">Created By</td>
<td>{`${data.firstName} ${data.lastName}`}</td>
</tr>
<tr>
<td className="font-weight-bold text-right">Type</td>
<td>{ data.type }</td>
</tr>
<tr>
<td className="font-weight-bold text-right">Subject</td>
<td>{ data.subject }</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</CardText> return (
</CardBody> <Card
</Card> align="center"
</div> title="View Ticket"
>
<Table data={data} />
<Link to="/">Go to home</Link>
</Card>
); );
} }
} }