|
326 | 326 | } |
327 | 327 | }); |
328 | 328 | }; |
| 329 | + |
| 330 | + var removeEditForm = function() { |
| 331 | + // Remove Edit form |
| 332 | + var $form = $detailView.find('form'); |
| 333 | + if ($form.size()) { |
| 334 | + var $mainGroups = $form.find('div.main-groups').detach(); |
| 335 | + $form.parent('div').append($mainGroups); |
| 336 | + $form.remove(); |
| 337 | + } |
| 338 | + //Remove required labels |
| 339 | + $detailView.find('span.field-required').remove(); |
| 340 | + } |
329 | 341 |
|
330 | 342 | // Put in original values |
331 | 343 | var cancelEdits = function($inputs, $editButton) { |
|
340 | 352 | $editButton.fadeOut('fast', function() { |
341 | 353 | $editButton.remove(); |
342 | 354 | }); |
| 355 | + |
| 356 | + removeEditForm(); |
343 | 357 | }; |
344 | 358 |
|
345 | 359 | var applyEdits = function($inputs, $editButton) { |
|
381 | 395 | notificationArgs, function() {}, [] |
382 | 396 | ); |
383 | 397 | replaceListViewItem($detailView, data); |
| 398 | + removeEditForm(); |
384 | 399 | } else { |
385 | 400 | $loading.appendTo($detailView); |
386 | 401 | cloudStack.ui.notifications.add( |
|
389 | 404 | replaceListViewItem($detailView, data); |
390 | 405 |
|
391 | 406 | convertInputs($inputs); |
| 407 | + removeEditForm(); |
392 | 408 | $loading.remove(); |
393 | 409 | }, [], |
394 | 410 | function() { |
|
407 | 423 | } |
408 | 424 | }; |
409 | 425 |
|
410 | | - $editButton.click(function() { |
411 | | - var $inputs = $detailView.find('input, select'); |
| 426 | + $editButton.click(function() { |
| 427 | + var $inputs = $detailView.find('input, select'), |
| 428 | + $form = $detailView.find('form'); |
412 | 429 |
|
413 | 430 | if ($(this).hasClass('done')) { |
414 | | - applyEdits($inputs, $editButton); |
| 431 | + if (!$form.valid()) { |
| 432 | + // Ignore hidden field validation |
| 433 | + if ($form.find('input.error:visible, select.error:visible').size()) { |
| 434 | + return false; |
| 435 | + } |
| 436 | + } |
| 437 | + applyEdits($inputs, $editButton); |
415 | 438 | } else { // Cancel |
416 | 439 | cancelEdits($inputs, $editButton); |
417 | 440 | } |
418 | 441 | }); |
419 | | - |
420 | | - $detailView.find('td.value span').each(function() { |
| 442 | + |
| 443 | + $detailView.find('td.value span').each(function() { |
421 | 444 | var name = $(this).closest('tr').data('detail-view-field'); |
422 | 445 | var $value = $(this); |
423 | 446 | if (!$value.data('detail-view-is-editable')) return true; |
|
426 | 449 | var selectData = $value.data('detail-view-editable-select'); |
427 | 450 | var isBoolean = $value.data('detail-view-editable-boolean'); |
428 | 451 | var data = !isBoolean ? cloudStack.sanitizeReverse($value.html()) : $value.data('detail-view-boolean-value'); |
| 452 | + var rules = $value.data('validation-rules') ? $value.data('validation-rules') : {}; |
429 | 453 |
|
430 | 454 | $value.html(''); |
431 | 455 |
|
|
467 | 491 | name: name, |
468 | 492 | type: 'text', |
469 | 493 | value: data |
470 | | - }).data('original-value', data) |
| 494 | + }).data('original-value', data) |
471 | 495 | ); |
472 | 496 | } |
| 497 | + |
| 498 | + if (rules && rules.required) { |
| 499 | + var $required = $('<span>').addClass('field-required').text(' *'); |
| 500 | + $value.parent('td.value').prev('td.name').append($required); |
| 501 | + } |
473 | 502 |
|
474 | 503 | return true; |
475 | 504 | }); |
476 | 505 |
|
| 506 | + if ($detailView.find('td.value span:data(detail-view-is-editable)').size()) { |
| 507 | + var $detailsEdit = $detailView.find('div.main-groups').detach(), |
| 508 | + $detailsEditForm = $('<form>').append($detailsEdit); |
| 509 | + |
| 510 | + $detailView.find('div.details').append($detailsEditForm); |
| 511 | + } |
| 512 | + |
| 513 | + // Setup form validation |
| 514 | + $detailView.find('form').validate(); |
| 515 | + $detailView.find('form').find('input, select').each(function() { |
| 516 | + var data = $(this).parent('span').data('validation-rules'); |
| 517 | + if (data) { |
| 518 | + $(this).rules('add', data); |
| 519 | + } else { |
| 520 | + $(this).rules('add', {}); |
| 521 | + } |
| 522 | + }); |
| 523 | + |
477 | 524 | return $detailView; |
478 | 525 | } |
479 | 526 | }; |
|
689 | 736 |
|
690 | 737 | //??? |
691 | 738 | /* |
692 | | - if("pollAgainIfValueIsIn" in value) { |
693 | | - if ((content in value.pollAgainIfValueIsIn) && (value.pollAgainFn != null)) { |
694 | | - //poll again |
695 | | - var intervalKey = setInterval(function() { |
696 | | - var toClearInterval = value.pollAgainFn(context); |
697 | | - if(toClearInterval == true) { |
698 | | - clearInterval(intervalKey); |
699 | | - $('.detail-view .toolbar .button.refresh').click(); //click Refresh button to refresh detailView |
700 | | - } |
701 | | - }, 2000); |
702 | | - } |
703 | | - } |
704 | | - */ |
705 | | - |
| 739 | + if("pollAgainIfValueIsIn" in value) { |
| 740 | + if ((content in value.pollAgainIfValueIsIn) && (value.pollAgainFn != null)) { |
| 741 | + //poll again |
| 742 | + var intervalKey = setInterval(function() { |
| 743 | + var toClearInterval = value.pollAgainFn(context); |
| 744 | + if(toClearInterval == true) { |
| 745 | + clearInterval(intervalKey); |
| 746 | + $('.detail-view .toolbar .button.refresh').click(); //click Refresh button to refresh detailView |
| 747 | + } |
| 748 | + }, 2000); |
| 749 | + } |
| 750 | + } |
| 751 | + */ |
| 752 | + |
706 | 753 | $name.html(_l(value.label)); |
707 | 754 | $value.html(_s(content)); |
708 | 755 |
|
| 756 | + // Set up validation metadata |
| 757 | + $value.data('validation-rules', value.validation); |
| 758 | + |
709 | 759 | // Set up editable metadata |
710 | 760 | if(typeof(value.isEditable) == 'function') |
711 | 761 | $value.data('detail-view-is-editable', value.isEditable()); |
|
0 commit comments