Conditions | 14 |
Paths | 7 |
Total Lines | 116 |
Lines | 0 |
Ratio | 0 % |
Changes | 1 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like usersList._add often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | /*global document, confirm, $ */ |
||
270 | _add: function () { |
||
271 | this._alert.classList.add('hidden') |
||
272 | var username = document.querySelector('[data-add-user-username]') |
||
273 | if(typeof username.value === 'undefined' || username.value === null || username.value === '') { |
||
274 | username.parentNode.classList.add('has-error') |
||
275 | return |
||
276 | } |
||
277 | username.parentNode.classList.remove('has-error') |
||
278 | |||
279 | var name = document.querySelector('[data-add-user-name]') |
||
280 | if(typeof name.value === 'undefined' || name.value === null || name.value === '') { |
||
281 | name.parentNode.classList.add('has-error') |
||
282 | return |
||
283 | } |
||
284 | name.parentNode.classList.remove('has-error') |
||
285 | |||
286 | var email = document.querySelector('[data-add-user-email]') |
||
287 | if(typeof email.value === 'undefined' || email.value === null || email.value === '') { |
||
288 | email.parentNode.classList.add('has-error') |
||
289 | return |
||
290 | } |
||
291 | if(!this._validateEmail(email.value)) { |
||
292 | email.parentNode.classList.add('has-error') |
||
293 | this._alert.classList.remove('hidden') |
||
294 | this._alert.innerHTML = 'email is invalid' |
||
295 | return |
||
296 | } |
||
297 | email.parentNode.classList.remove('has-error') |
||
298 | |||
299 | var password = document.querySelector('[data-add-user-password]') |
||
300 | if(typeof password.value === 'undefined' || password.value === null || password.value === '') { |
||
301 | password.parentNode.classList.add('has-error') |
||
302 | return |
||
303 | } |
||
304 | |||
305 | password.parentNode.classList.remove('has-error') |
||
306 | |||
307 | var role = document.querySelector('[data-add-user-role]') |
||
308 | var toSave = qs.stringify({ |
||
309 | username: username.value, |
||
310 | name: name.value, |
||
311 | email: email.value, |
||
312 | password: password.value, |
||
313 | role: role.value |
||
314 | }) |
||
315 | |||
316 | this._ajax( |
||
317 | { |
||
318 | url: '/abe/users/add', |
||
319 | body: toSave, |
||
320 | method: 'post' |
||
321 | }, |
||
322 | (code, responseText) => { |
||
323 | var data = JSON.parse(responseText) |
||
324 | if(data.success === 1) { |
||
325 | var tr = document.createElement('tr') |
||
326 | var oldTr = document.querySelector('[data-user-base]') |
||
327 | if(typeof oldTr !== 'undefined' && oldTr !== null) { |
||
328 | tr.innerHTML = oldTr.innerHTML |
||
329 | |||
330 | var tdUsername = tr.querySelector('.td-username') |
||
331 | tdUsername.querySelector('.value').innerHTML = data.user.username |
||
332 | tdUsername.querySelector('input').value = data.user.username |
||
333 | |||
334 | var tdName = tr.querySelector('.td-name') |
||
335 | tdName.querySelector('.value').innerHTML = data.user.name |
||
336 | tdName.querySelector('input').value = data.user.name |
||
337 | |||
338 | var tdEmail = tr.querySelector('.td-email') |
||
339 | tdEmail.querySelector('.value').innerHTML = data.user.email |
||
340 | tdEmail.querySelector('input').value = data.user.email |
||
341 | |||
342 | var tdRole = tr.querySelector('.td-role') |
||
343 | tdRole.querySelector('.value').innerHTML = data.user.role.name |
||
344 | var tdRoleOptions = tdRole.querySelectorAll('select option') |
||
345 | Array.prototype.forEach.call(tdRoleOptions, function(option) { |
||
346 | if(option.value === data.user.role.name) { |
||
347 | option.selected = 'selected' |
||
348 | } |
||
349 | }) |
||
350 | |||
351 | var tdActive = tr.querySelector('.td-active') |
||
352 | var glypEyeClose = tdActive.querySelector('.glyphicon-eye-close') |
||
353 | glypEyeClose.addEventListener('click', this._handleActivate, true) |
||
354 | glypEyeClose.setAttribute('data-user-id', data.user.id) |
||
355 | |||
356 | var tdActions = tr.querySelector('.td-actions') |
||
357 | var glypEdit = tdActions.querySelector('.glyphicon-pencil') |
||
358 | glypEdit.addEventListener('click', this._handleEdit, true) |
||
359 | glypEdit.setAttribute('data-user-id', data.user.id) |
||
360 | |||
361 | var glypOk = tdActions.querySelector('.glyphicon-ok') |
||
362 | glypOk.addEventListener('click', this._handleUpdate, true) |
||
363 | glypOk.setAttribute('data-user-id', data.user.id) |
||
364 | |||
365 | var glypCloseUpdate = tdActions.querySelector('.glyphicon-remove') |
||
366 | glypCloseUpdate.setAttribute('data-user-id', data.user.id) |
||
367 | // glypCloseUpdate.addEventListener('click', this._handleCloseUpdate, true) |
||
368 | |||
369 | var glypRemove = tdActions.querySelector('.glyphicon-trash') |
||
370 | glypRemove.setAttribute('data-user-id', data.user.id) |
||
371 | glypRemove.addEventListener('click', this._handleRemove, true) |
||
372 | } |
||
373 | |||
374 | this._table.appendChild(tr) |
||
375 | |||
376 | username.value = '' |
||
377 | name.value = '' |
||
378 | email.value = '' |
||
379 | password.value = '' |
||
380 | }else { |
||
381 | this._alert.classList.remove('hidden') |
||
382 | this._alert.innerHTML = data.message |
||
383 | } |
||
384 | }) |
||
385 | } |
||
386 | } |
||
393 | // } |