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; |