| 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 | // } |