|
Lines 1-51
Link Here
|
| 1 |
import React, { Component } from 'react'; |
1 |
import React, { useState, useEffect, useRef } from 'react'; |
| 2 |
import ReactDOM from 'react-dom'; |
2 |
import ReactDOM from 'react-dom'; |
| 3 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
3 |
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
| 4 |
import { faPencil, faTrash } from '@fortawesome/free-solid-svg-icons' |
4 |
import { faPencil, faTrash } from '@fortawesome/free-solid-svg-icons' |
| 5 |
import { Button, Alert } from 'react-bootstrap'; |
5 |
import { Button, Alert } from 'react-bootstrap'; |
| 6 |
|
6 |
|
| 7 |
class EditButton extends Component{ |
7 |
const EditButton = ({city_id, handleClick}) => { |
| 8 |
constructor(props){ |
8 |
return ( |
| 9 |
super(props); |
9 |
<Button variant="default" size="sm" onClick={() => handleClick(city_id)}><FontAwesomeIcon icon={faPencil} size="xs" /> Edit</Button> |
| 10 |
this.handleClick = this.handleClick.bind(this); |
10 |
) |
| 11 |
} |
|
|
| 12 |
handleClick(){ |
| 13 |
this.props.handleClick(this.props.city_id); |
| 14 |
} |
| 15 |
|
| 16 |
render(){ |
| 17 |
return ( |
| 18 |
<Button variant="default" size="sm" onClick={this.handleClick}><FontAwesomeIcon icon={faPencil} size="xs" /> Edit</Button> |
| 19 |
) |
| 20 |
} |
| 21 |
} |
11 |
} |
| 22 |
|
12 |
|
| 23 |
class DeleteButton extends Component{ |
13 |
const DeleteButton = ({city_id, handleClick}) => { |
| 24 |
constructor(props){ |
14 |
return ( |
| 25 |
super(props); |
15 |
<Button variant="default" size="sm" onClick={() => handleClick(city_id)}><FontAwesomeIcon icon={faTrash} size="xs" /> Delete</Button> |
| 26 |
this.handleClick = this.handleClick.bind(this); |
16 |
) |
| 27 |
} |
|
|
| 28 |
handleClick(){ |
| 29 |
this.props.handleClick(this.props.city_id); |
| 30 |
} |
| 31 |
|
| 32 |
render(){ |
| 33 |
return ( |
| 34 |
<Button variant="default" size="sm" onClick={this.handleClick}><FontAwesomeIcon icon={faTrash} size="xs" /> Delete</Button> |
| 35 |
) |
| 36 |
} |
| 37 |
} |
17 |
} |
| 38 |
|
18 |
|
| 39 |
class Table extends Component { |
19 |
const Table = ({editCity, confirmDeleteCity}) => { |
| 40 |
constructor(props){ |
20 |
const table_ref = React.createRef() |
| 41 |
super(props); |
|
|
| 42 |
} |
| 43 |
|
21 |
|
| 44 |
componentDidMount() { |
22 |
useEffect(() => { |
| 45 |
|
23 |
|
| 46 |
const editCity = this.props.editCity; |
24 |
$(table_ref.current).kohaTable({ |
| 47 |
const confirmDeleteCity = this.props.confirmDeleteCity; |
|
|
| 48 |
$(this.refs.main).kohaTable({ |
| 49 |
"ajax": { |
25 |
"ajax": { |
| 50 |
"url": cities_table_url, |
26 |
"url": cities_table_url, |
| 51 |
}, |
27 |
}, |
|
Lines 106-176
class Table extends Component {
Link Here
|
| 106 |
} |
82 |
} |
| 107 |
|
83 |
|
| 108 |
}, columns_settings, 1); |
84 |
}, columns_settings, 1); |
| 109 |
} |
|
|
| 110 |
|
85 |
|
| 111 |
componentWillUnmount(){ |
86 |
return function cleanup(){ |
| 112 |
$('.data-table-wrapper') |
87 |
$('.data-table-wrapper') |
| 113 |
.find('table') |
88 |
.find('table') |
| 114 |
.DataTable() |
89 |
.DataTable() |
| 115 |
.destroy(true); |
90 |
.destroy(true); |
| 116 |
} |
91 |
} |
| 117 |
|
92 |
}, []) |
| 118 |
shouldComponentUpdate() { |
93 |
|
| 119 |
return true; |
94 |
return ( |
| 120 |
} |
95 |
<div> |
| 121 |
|
96 |
<table ref={table_ref} /> |
| 122 |
render() { |
97 |
</div>) |
| 123 |
return ( |
|
|
| 124 |
<div> |
| 125 |
<table ref="main" /> |
| 126 |
</div>); |
| 127 |
} |
| 128 |
} |
98 |
} |
| 129 |
|
99 |
|
| 130 |
class CityList extends React.Component { |
100 |
const ListCity = ({ editCity, confirmDeleteCity }) => { |
| 131 |
constructor(props) { |
101 |
const [cities, setCities] = useState() |
| 132 |
super(props); |
|
|
| 133 |
this.state = { |
| 134 |
error: null, |
| 135 |
cities: [], |
| 136 |
} |
| 137 |
|
| 138 |
if ( props.cities ){ |
| 139 |
this.state.cities = props.cities |
| 140 |
} |
| 141 |
} |
| 142 |
|
102 |
|
| 143 |
componentDidMount() { |
103 |
useEffect(() => { |
| 144 |
const apiUrl = '/api/v1/cities'; |
104 |
const apiUrl = '/api/v1/cities'; |
| 145 |
|
105 |
|
|
|
106 |
let r = [] |
| 146 |
fetch(apiUrl) |
107 |
fetch(apiUrl) |
| 147 |
.then(res => res.json()) |
108 |
.then(res => res.json()) |
| 148 |
.then( |
109 |
.then( |
| 149 |
(result) => { |
110 |
(result) => { |
| 150 |
this.setState({ |
111 |
setCities(result) |
| 151 |
cities: result |
|
|
| 152 |
}); |
| 153 |
}, |
112 |
}, |
| 154 |
(error) => { |
113 |
(error) => { |
| 155 |
this.setState({ error }); |
114 |
console.log(error) |
| 156 |
} |
115 |
} |
| 157 |
) |
116 |
) |
| 158 |
} |
117 |
}, []) |
| 159 |
|
118 |
|
| 160 |
render() { |
119 |
if(cities == null ) { |
| 161 |
const { error, cities } = this.state; |
120 |
return (<div> |
| 162 |
|
121 |
<h1>Cities</h1> |
| 163 |
if(error) { |
122 |
<div>Loading...</div> |
| 164 |
return ("Error: {error.message}") |
123 |
</div>) |
| 165 |
} else if(cities.length) { |
124 |
} else if(cities.length) { |
| 166 |
return(<div> |
125 |
return(<div> |
| 167 |
<h1>Cities</h1> |
126 |
<h1>Cities</h1> |
| 168 |
<Table editCity={this.props.editCity} confirmDeleteCity={this.props.confirmDeleteCity} /> |
127 |
<Table editCity={editCity} confirmDeleteCity={confirmDeleteCity} /> |
| 169 |
</div>) |
128 |
</div>) |
| 170 |
} else { |
129 |
} else { |
| 171 |
return(<div><h1>Cities</h1><div className="dialog message">There are no cities defined.</div></div>) |
130 |
return(<div><h1>Cities</h1><div className="dialog message">There are no cities defined.</div></div>) |
| 172 |
} |
|
|
| 173 |
} |
131 |
} |
| 174 |
} |
132 |
} |
| 175 |
|
133 |
|
| 176 |
export default CityList; |
134 |
export default ListCity; |