mirror of https://github.com/franjsco/tick3t
improvement: various
This commit is contained in:
Francesco Esposito
parent
2267747fcd
commit
70a378f7cd
|
|
@ -1,11 +1,16 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
import PaginationComponent from "react-reactstrap-pagination";
|
||||
|
||||
import { formatDate, decode } from '../../utils/helper';
|
||||
import { getTickets, findTicket, filterTicketStatus } from '../../api/tickets';
|
||||
import { getAllTicketStatus } from '../../api/categories';
|
||||
|
||||
import Card from '../../components/Card';
|
||||
import SearchForm from '../../components/SearchForm';
|
||||
|
|
@ -15,69 +20,109 @@ import DropDown from '../../components/DropDown';
|
|||
class TicketList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
totalPages: 1,
|
||||
selectedPage: 1,
|
||||
selectedStatus: '',
|
||||
data: [],
|
||||
categories: [],
|
||||
status: [],
|
||||
type: [],
|
||||
error: ''
|
||||
};
|
||||
|
||||
this.API_URL= process.env.REACT_APP_API_URL;
|
||||
this.filterId = this.filterId.bind(this);
|
||||
this.filterStatus = this.filterStatus.bind(this);
|
||||
this.handleInputChange = this.handleInputChange.bind(this);
|
||||
this.handleSelected = this.handleSelected.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch(`${this.API_URL}tickets?_limit=10`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Error API');
|
||||
}
|
||||
return response.json();
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
getTickets()
|
||||
.then((json) => {
|
||||
this.setState({ data: json.data, isLoading: false, totalPages: json.totalPages });
|
||||
})
|
||||
.then(json => this.setState({ data: json, isLoading: false }))
|
||||
.catch((error) => {
|
||||
this.setState({ error, isLoading: false })
|
||||
});
|
||||
|
||||
getAllTicketStatus()
|
||||
.then((json) => this.setState({ status: json.data }))
|
||||
.catch(error => this.setState({ error, isLoading: false }));
|
||||
|
||||
}
|
||||
|
||||
fetch(`${this.API_URL}categories?type=ticketStatus`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Error API');
|
||||
}
|
||||
handleInputChange(event) {
|
||||
const target = event.target;
|
||||
const value = target.value;
|
||||
|
||||
return response.json();
|
||||
})
|
||||
this.setState({
|
||||
ticketId: value
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
filterId(event) {
|
||||
event.preventDefault();
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
const ticketId = this.state.ticketId || '';
|
||||
|
||||
findTicket(ticketId)
|
||||
.then(json => this.setState({ data: json.data, isLoading: false, totalPages: json.totalPages }))
|
||||
.catch(error => this.setState({ error, isLoading: false }));
|
||||
}
|
||||
|
||||
|
||||
filterStatus(event) {
|
||||
const target = event.target;
|
||||
const value = target.value;
|
||||
|
||||
this.setState({ selectedStatus: value })
|
||||
|
||||
getTickets(1, value)
|
||||
.then(json => this.setState({ data: json.data, isLoading: false, totalPages: json.totalPages, selectedPage: 1 }))
|
||||
.catch(error => this.setState({ error, isLoading: false }));
|
||||
}
|
||||
|
||||
handleSelected(selectedPage) {
|
||||
this.setState( { isLoading: true })
|
||||
const selectedStatus = this.state.selectedStatus;
|
||||
getTickets(selectedPage, selectedStatus)
|
||||
.then((json) => {
|
||||
this.setState({
|
||||
categories: json
|
||||
});
|
||||
this.setState({ data: json.data, isLoading: false});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
error: err.message
|
||||
});
|
||||
.catch((error) => {
|
||||
this.setState({ error, isLoading: false })
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let tickets = this.state.data;
|
||||
|
||||
if (tickets.length) {
|
||||
if (tickets) {
|
||||
tickets = tickets.map((ticket) => {
|
||||
return (
|
||||
<tr>
|
||||
<tr key={ticket.ticketId}>
|
||||
<th scope="row">
|
||||
<Link to={`/admin/ticket/${ticket.id}`}>
|
||||
{ticket.id}
|
||||
<Link to={`/admin/ticket/${ticket.ticketId}`}>
|
||||
{ticket.ticketId}
|
||||
</Link>
|
||||
</th>
|
||||
<td>
|
||||
{ticket.status}
|
||||
{decode(ticket.status)}
|
||||
</td>
|
||||
<td>
|
||||
{ticket.type}
|
||||
{decode(ticket.type)}
|
||||
</td>
|
||||
<td>
|
||||
{ticket.subject}
|
||||
</td>
|
||||
<td>
|
||||
{formatDate(ticket.updatedAt)}
|
||||
</td>
|
||||
</tr>);
|
||||
});
|
||||
}
|
||||
|
|
@ -90,9 +135,8 @@ class TicketList extends Component {
|
|||
name="search"
|
||||
id="search"
|
||||
placeholder="ticket ID"
|
||||
onChange={this.handleChangeInput}
|
||||
onSubmit={this.handleSubmit}
|
||||
value={this.state.ticketId}
|
||||
onSubmit={this.filterId}
|
||||
onChange={this.handleInputChange}
|
||||
buttonName="Search"
|
||||
/>
|
||||
|
||||
|
|
@ -100,7 +144,8 @@ class TicketList extends Component {
|
|||
<Col md={5}></Col>
|
||||
<Col md={3} className="float-right">
|
||||
<DropDown
|
||||
options={this.state.categories}
|
||||
options={this.state.status}
|
||||
onChange={this.filterStatus}
|
||||
/>
|
||||
|
||||
|
||||
|
|
@ -108,21 +153,22 @@ class TicketList extends Component {
|
|||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Table bordered responsive>
|
||||
<Table responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>status</th>
|
||||
<th>type</th>
|
||||
<th>subject</th>
|
||||
<th>updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tickets.length ? tickets : (
|
||||
{tickets || (
|
||||
<tr>
|
||||
<td
|
||||
className="text-center font-weight-bold"
|
||||
colspan="4"
|
||||
colspan="5"
|
||||
>
|
||||
no ticket
|
||||
</td>
|
||||
|
|
@ -131,6 +177,15 @@ class TicketList extends Component {
|
|||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<PaginationComponent
|
||||
totalItems={this.state.totalPages}
|
||||
pageSize={1}
|
||||
onSelect={this.handleSelected}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue