|
@@ -15,7 +15,7 @@ import AppLoader from '../Components/AppLoader';
|
15
|
15
|
import Categories from '../Components/Categories';
|
16
|
16
|
import EditCategory from '../Components/EditCategory';
|
17
|
17
|
import Sort from '../Components/Sort';
|
18
|
|
-import { Link } from 'react-router-dom';
|
|
18
|
+import { Link, Redirect } from 'react-router-dom';
|
19
|
19
|
import Selected from '../Components/Selected';
|
20
|
20
|
|
21
|
21
|
export default class Stock extends React.Component {
|
|
@@ -38,7 +38,8 @@ export default class Stock extends React.Component {
|
38
|
38
|
lowToHigh: true,
|
39
|
39
|
selectedArticles:[],
|
40
|
40
|
counter:0,
|
41
|
|
- code:''
|
|
41
|
+ code:'',
|
|
42
|
+
|
42
|
43
|
}
|
43
|
44
|
}
|
44
|
45
|
|
|
@@ -47,11 +48,190 @@ export default class Stock extends React.Component {
|
47
|
48
|
}
|
48
|
49
|
|
49
|
50
|
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+ deleteSelectedArticles = () => {
|
|
54
|
+ for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
|
|
55
|
+
|
|
56
|
+ axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`)
|
|
57
|
+ .then(res => {
|
|
58
|
+ console.log(res.data)
|
|
59
|
+ if (i === this.state.selectedArticles.length-1){
|
|
60
|
+ this.setState({counter:0,selectedArticles:[]},()=>{
|
|
61
|
+ this.getArticles()
|
|
62
|
+ })
|
|
63
|
+ }
|
|
64
|
+ })
|
|
65
|
+ .catch(error => {
|
|
66
|
+ console.log(error.response)
|
|
67
|
+ })
|
|
68
|
+ }
|
|
69
|
+}
|
|
70
|
+
|
|
71
|
+ // OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner
|
|
72
|
+ // on va minus ou plus quantity et colorer en rouge
|
|
73
|
+
|
|
74
|
+ selectArticles = (e,id) => {
|
|
75
|
+ let currentElement = e.target;
|
|
76
|
+ let iconElement;
|
|
77
|
+ if (e.target.tagName === "path"){
|
|
78
|
+ currentElement = e.target.parentElement
|
|
79
|
+ iconElement = currentElement
|
|
80
|
+ }
|
|
81
|
+ if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
|
|
82
|
+ iconElement = currentElement
|
|
83
|
+ }
|
|
84
|
+ while (currentElement.id !== "bulle"){
|
|
85
|
+ currentElement = currentElement.parentElement
|
|
86
|
+ }
|
|
87
|
+
|
|
88
|
+ if ((e.target.id !== "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
|
|
89
|
+ let index = this.getArticleById(id).i;
|
|
90
|
+ let articles = this.state.articles;
|
|
91
|
+ articles[index].selected = !this.state.articles[index].selected;
|
|
92
|
+ console.log(articles[index].selected);
|
|
93
|
+ this.setState({articles:articles},()=>{
|
|
94
|
+ if (this.state.articles[index].selected){
|
|
95
|
+ this.select(id)
|
|
96
|
+ if (this.state.articles[index].quantity === 0){
|
|
97
|
+ this.colorArticle("red&white",currentElement)
|
|
98
|
+ } else {
|
|
99
|
+ this.colorArticle("white",currentElement)
|
|
100
|
+ }
|
|
101
|
+ } else {
|
|
102
|
+ this.deselect(id)
|
|
103
|
+ if (this.state.articles[index].quantity === 0){
|
|
104
|
+ this.colorArticle("red",currentElement)
|
|
105
|
+ } else {
|
|
106
|
+ this.colorArticle("grey",currentElement)
|
|
107
|
+ }
|
|
108
|
+ }
|
|
109
|
+ })
|
|
110
|
+ } else if (iconElement.id === "minusIcon"){
|
|
111
|
+ this.minusQuantity(currentElement,id)
|
|
112
|
+ } else if (iconElement.id === "plusIcon"){
|
|
113
|
+ this.plusQuantity(currentElement,id)
|
|
114
|
+ }
|
|
115
|
+ }
|
|
116
|
+
|
|
117
|
+ colorArticle = (color,element) => {
|
|
118
|
+
|
|
119
|
+ switch (color) {
|
|
120
|
+ case "white":
|
|
121
|
+ element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
|
|
122
|
+ break;
|
|
123
|
+ case "grey" :
|
|
124
|
+ element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
|
|
125
|
+ break;
|
|
126
|
+ case "red" :
|
|
127
|
+ element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
|
|
128
|
+ break;
|
|
129
|
+ case "red&white" :
|
|
130
|
+ element.style.cssText = "background-color:rgba(255, 107, 107, 0.28);"
|
|
131
|
+ break;
|
|
132
|
+ }
|
|
133
|
+}
|
|
134
|
+
|
|
135
|
+ plusQuantity = (element,id) => {
|
|
136
|
+ let index = this.getArticleById(id).i;
|
|
137
|
+ let articles = this.state.articles;
|
|
138
|
+ articles[index].quantity++;
|
|
139
|
+ console.log(articles[index]);
|
|
140
|
+ this.setState({articles:articles},()=>{
|
|
141
|
+ this.updateArticle(index,id);
|
|
142
|
+ if (this.state.articles[index].quantity > 0 ){
|
|
143
|
+ if (this.state.articles[index].selected){
|
|
144
|
+ this.colorArticle("white",element)
|
|
145
|
+ } else {
|
|
146
|
+ this.colorArticle("grey",element)
|
|
147
|
+ }
|
|
148
|
+ }
|
|
149
|
+ })
|
|
150
|
+}
|
|
151
|
+
|
|
152
|
+minusQuantity = (element,id) => {
|
|
153
|
+ let index = this.getArticleById(id).i;
|
|
154
|
+
|
|
155
|
+ if (this.state.articles[index].quantity > 0){
|
|
156
|
+ let articles = this.state.articles;
|
|
157
|
+ articles[index].quantity--;
|
|
158
|
+ console.log(articles[index]);
|
|
159
|
+ this.setState({articles:articles},()=>{
|
|
160
|
+ this.updateArticle(index,id);
|
|
161
|
+ if (this.state.articles[index].quantity === 0 ){
|
|
162
|
+ if (this.state.articles[index].selected){
|
|
163
|
+ this.colorArticle("red&white",element)
|
|
164
|
+ } else {
|
|
165
|
+ this.colorArticle("red",element)
|
|
166
|
+ }
|
|
167
|
+ }
|
|
168
|
+ })
|
|
169
|
+ }
|
|
170
|
+}
|
|
171
|
+
|
|
172
|
+updateSelectedArticles = (value) => {
|
|
173
|
+
|
|
174
|
+ let articles = this.state.selectedArticles;
|
|
175
|
+
|
|
176
|
+ for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+ if (articles[i].quantity >= 0){
|
|
180
|
+ articles[i].quantity+=value;
|
|
181
|
+ }
|
|
182
|
+ // implémenter une fonction pour récupérer l'élément correspondant à l'id
|
|
183
|
+
|
|
184
|
+ this.setState({selectedArticles:articles},() => {
|
|
185
|
+ axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`,
|
|
186
|
+ {
|
|
187
|
+ 'name':this.state.selectedArticles[i].name,
|
|
188
|
+ 'description':this.state.selectedArticles[i].description,
|
|
189
|
+ 'quantity':this.state.selectedArticles[i].quantity,
|
|
190
|
+ 'price':this.state.selectedArticles[i].price,
|
|
191
|
+ 'code':this.state.selectedArticles[i].code,
|
|
192
|
+ 'category_id':this.state.selectedArticles[i].category.id
|
|
193
|
+ }
|
|
194
|
+ )
|
|
195
|
+
|
|
196
|
+ .then(res => {
|
|
197
|
+ console.log(res.data)
|
|
198
|
+ })
|
|
199
|
+ .catch(error => {
|
|
200
|
+ console.log(error.response)
|
|
201
|
+ })
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+ })
|
|
205
|
+
|
|
206
|
+ }
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+}
|
|
210
|
+
|
|
211
|
+updateArticle = (index,id) => {
|
|
212
|
+ axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${id}`,
|
|
213
|
+ {
|
|
214
|
+ 'name':this.state.articles[index].name,
|
|
215
|
+ 'description':this.state.articles[index].description,
|
|
216
|
+ 'quantity':this.state.articles[index].quantity,
|
|
217
|
+ 'price':this.state.articles[index].price,
|
|
218
|
+ 'code':this.state.articles[index].code,
|
|
219
|
+ 'category_id':this.state.articles[index].category.id
|
|
220
|
+ }
|
|
221
|
+ )
|
|
222
|
+ .then(res => {
|
|
223
|
+ console.log(res.data)
|
|
224
|
+ })
|
|
225
|
+ .catch(error => {
|
|
226
|
+ console.log(error.response)
|
|
227
|
+ })
|
|
228
|
+}
|
|
229
|
+
|
50
|
230
|
select = (id) => {
|
51
|
231
|
console.log(id)
|
52
|
232
|
this.setState({counter:this.state.counter+1},()=>{
|
53
|
233
|
console.log(this.state.counter)
|
54
|
|
- this.state.selectedArticles.push(this.getArticleById(id))
|
|
234
|
+ this.state.selectedArticles.push(this.getArticleById(id).current)
|
55
|
235
|
console.log(this.state.selectedArticles)
|
56
|
236
|
})
|
57
|
237
|
}
|
|
@@ -68,14 +248,14 @@ export default class Stock extends React.Component {
|
68
|
248
|
trouve = !trouve;
|
69
|
249
|
}
|
70
|
250
|
}
|
71
|
|
- return(current);
|
|
251
|
+ return({current,i});
|
72
|
252
|
}
|
73
|
253
|
|
74
|
254
|
deselect = (id) => {
|
75
|
255
|
|
76
|
256
|
this.setState({counter:this.state.counter-1},()=>{
|
77
|
257
|
console.log(this.state.counter)
|
78
|
|
- this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id))},()=>{
|
|
258
|
+ this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id).current)},()=>{
|
79
|
259
|
console.log(this.state.selectedArticles)
|
80
|
260
|
})
|
81
|
261
|
|
|
@@ -131,6 +311,9 @@ export default class Stock extends React.Component {
|
131
|
311
|
getArticles = () => {
|
132
|
312
|
axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
|
133
|
313
|
.then(res => {
|
|
314
|
+ for (let i = 0; i<res.data.length;i++){
|
|
315
|
+ res.data[i].selected = false;
|
|
316
|
+ }
|
134
|
317
|
this.setState({articles : res.data}, () => {
|
135
|
318
|
console.log(this.state.articles)
|
136
|
319
|
this.setState({sortType: "name"})
|
|
@@ -187,21 +370,7 @@ export default class Stock extends React.Component {
|
187
|
370
|
this.setState({onEditCategory:false})
|
188
|
371
|
}
|
189
|
372
|
|
190
|
|
- // handleChangeSortType = (e) => {
|
191
|
|
- // console.log(e.target.value)
|
192
|
|
- // this.setState({sortType:e.target.value},()=>{
|
193
|
|
- // if (this.state.sortType === "Ordre Alphabétique"){
|
194
|
|
- // this.sortArticles("name")
|
195
|
|
- // } else if(this.state.sortType === "Catégorie"){
|
196
|
|
- // this.sortArticles("category_id")
|
197
|
|
- // } else if(this.state.sortType === "Quantité"){
|
198
|
|
- // this.sortArticles("quantity")
|
199
|
|
- // } else if(this.state.sortType === "Prix"){
|
200
|
|
- // this.sortArticles("price");
|
201
|
|
- // }
|
202
|
|
-
|
203
|
|
- // })
|
204
|
|
- // }
|
|
373
|
+
|
205
|
374
|
|
206
|
375
|
//ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
|
207
|
376
|
handleChangeSortType = (type) => {
|
|
@@ -277,13 +446,13 @@ export default class Stock extends React.Component {
|
277
|
446
|
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
|
278
|
447
|
</div>
|
279
|
448
|
<div id="selectedBlock">
|
280
|
|
- <Selected selectedArticles={this.state.selectedArticles} counter={this.state.counter}/>
|
|
449
|
+ <Selected delete={this.deleteSelectedArticles} updateArticles={this.updateSelectedArticles} counter={this.state.counter}/>
|
281
|
450
|
</div>
|
282
|
451
|
<div id="articleBlock">
|
283
|
452
|
{this.state.articles && this.state.articles[0] ?
|
284
|
453
|
this.state.onSortedCategories ?
|
285
|
|
- <ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
286
|
|
- : <Articles deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
|
454
|
+ <ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
|
455
|
+ : <Articles selectArticles={this.selectArticles} colorArticle={this.colorArticle} plus={this.plusQuantity} minus={this.minusQuantity} deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
287
|
456
|
: <AppLoader/>
|
288
|
457
|
}
|
289
|
458
|
</div>
|