| 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, $ */ |
||
| 230 | _add: function () { |
||
| 231 | this._alert.classList.add('hidden') |
||
| 232 | var username = document.querySelector('[data-add-user-username]') |
||
| 233 | if(typeof username.value === 'undefined' || username.value === null || username.value === '') { |
||
| 234 | username.parentNode.classList.add('has-error') |
||
| 235 | return |
||
| 236 | } |
||
| 237 | username.parentNode.classList.remove('has-error') |
||
| 238 | |||
| 239 | var name = document.querySelector('[data-add-user-name]') |
||
| 240 | if(typeof name.value === 'undefined' || name.value === null || name.value === '') { |
||
| 241 | name.parentNode.classList.add('has-error') |
||
| 242 | return |
||
| 243 | } |
||
| 244 | name.parentNode.classList.remove('has-error') |
||
| 245 | |||
| 246 | var email = document.querySelector('[data-add-user-email]') |
||
| 247 | if(typeof email.value === 'undefined' || email.value === null || email.value === '') { |
||
| 248 | email.parentNode.classList.add('has-error') |
||
| 249 | return |
||
| 250 | } |
||
| 251 | if(!this._validateEmail(email.value)) { |
||
| 252 | email.parentNode.classList.add('has-error') |
||
| 253 | this._alert.classList.remove('hidden') |
||
| 254 | this._alert.innerHTML = 'email is invalid' |
||
| 255 | return |
||
| 256 | } |
||
| 257 | email.parentNode.classList.remove('has-error') |
||
| 258 | |||
| 259 | var password = document.querySelector('[data-add-user-password]') |
||
| 260 | if(typeof password.value === 'undefined' || password.value === null || password.value === '') { |
||
| 261 | password.parentNode.classList.add('has-error') |
||
| 262 | return |
||
| 263 | } |
||
| 264 | |||
| 265 | password.parentNode.classList.remove('has-error') |
||
| 266 | |||
| 267 | var role = document.querySelector('[data-add-user-role]') |
||
| 268 | var toSave = qs.stringify({ |
||
| 269 | username: username.value, |
||
| 270 | name: name.value, |
||
| 271 | email: email.value, |
||
| 272 | password: password.value, |
||
| 273 | role: role.value |
||
| 274 | }) |
||
| 275 | |||
| 276 | this._ajax( |
||
| 277 | { |
||
| 278 | url: '/abe/users/add', |
||
| 279 | body: toSave, |
||
| 280 | method: 'post' |
||
| 281 | }, |
||
| 282 | (code, responseText) => { |
||
| 283 | var data = JSON.parse(responseText) |
||
| 284 | if(data.success === 1) { |
||
| 285 | var tr = document.createElement('tr') |
||
| 286 | var oldTr = document.querySelector('[data-user-base]') |
||
| 287 | if(typeof oldTr !== 'undefined' && oldTr !== null) { |
||
| 288 | tr.innerHTML = oldTr.innerHTML |
||
| 289 | |||
| 290 | var tdUsername = tr.querySelector('.td-username') |
||
| 291 | tdUsername.querySelector('.value').innerHTML = data.user.username |
||
| 292 | tdUsername.querySelector('input').value = data.user.username |
||
| 293 | |||
| 294 | var tdName = tr.querySelector('.td-name') |
||
| 295 | tdName.querySelector('.value').innerHTML = data.user.name |
||
| 296 | tdName.querySelector('input').value = data.user.name |
||
| 297 | |||
| 298 | var tdEmail = tr.querySelector('.td-email') |
||
| 299 | tdEmail.querySelector('.value').innerHTML = data.user.email |
||
| 300 | tdEmail.querySelector('input').value = data.user.email |
||
| 301 | |||
| 302 | var tdRole = tr.querySelector('.td-role') |
||
| 303 | tdRole.querySelector('.value').innerHTML = data.user.role.name |
||
| 304 | var tdRoleOptions = tdRole.querySelectorAll('select option') |
||
| 305 | Array.prototype.forEach.call(tdRoleOptions, function(option) { |
||
| 306 | if(option.value === data.user.role.name) { |
||
| 307 | option.selected = 'selected' |
||
| 308 | } |
||
| 309 | }) |
||
| 310 | |||
| 311 | var tdActive = tr.querySelector('.td-active') |
||
| 312 | var glypEyeClose = tdActive.querySelector('.glyphicon-eye-close') |
||
| 313 | glypEyeClose.addEventListener('click', this._handleActivate, true) |
||
| 314 | glypEyeClose.setAttribute('data-user-id', data.user.id) |
||
| 315 | |||
| 316 | var tdActions = tr.querySelector('.td-actions') |
||
| 317 | var glypEdit = tdActions.querySelector('.glyphicon-pencil') |
||
| 318 | glypEdit.addEventListener('click', this._handleEdit, true) |
||
| 319 | glypEdit.setAttribute('data-user-id', data.user.id) |
||
| 320 | |||
| 321 | var glypOk = tdActions.querySelector('.glyphicon-ok') |
||
| 322 | glypOk.addEventListener('click', this._handleUpdate, true) |
||
| 323 | glypOk.setAttribute('data-user-id', data.user.id) |
||
| 324 | |||
| 325 | var glypCloseUpdate = tdActions.querySelector('.glyphicon-remove') |
||
| 326 | glypCloseUpdate.setAttribute('data-user-id', data.user.id) |
||
| 327 | // glypCloseUpdate.addEventListener('click', this._handleCloseUpdate, true) |
||
| 328 | |||
| 329 | var glypRemove = tdActions.querySelector('.glyphicon-trash') |
||
| 330 | glypRemove.setAttribute('data-user-id', data.user.id) |
||
| 331 | glypRemove.addEventListener('click', this._handleRemove, true) |
||
| 332 | } |
||
| 333 | |||
| 334 | this._table.appendChild(tr) |
||
| 335 | |||
| 336 | username.value = '' |
||
| 337 | name.value = '' |
||
| 338 | email.value = '' |
||
| 339 | password.value = '' |
||
| 340 | }else { |
||
| 341 | this._alert.classList.remove('hidden') |
||
| 342 | this._alert.innerHTML = data.message |
||
| 343 | } |
||
| 344 | }) |
||
| 345 | } |
||
| 346 | } |
||
| 353 | // } |