From 7521de5904ebb4026b82f87eadc8454052f74bc5 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Mon, 17 Mar 2014 13:03:57 -0400 Subject: [PATCH] Details view now working on inventory group edit dialog. --- awx/ui/static/js/helpers/Groups.js | 55 +++++++++++++++---- awx/ui/static/js/helpers/Schedules.js | 1 - awx/ui/static/less/angular-scheduler.less | 34 +++++++++++- .../lib/angular-scheduler-detail.html | 3 +- awx/ui/static/partials/inventory-edit.html | 6 +- 5 files changed, 82 insertions(+), 17 deletions(-) diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js index 9964e8f223..ee48df9a2a 100644 --- a/awx/ui/static/js/helpers/Groups.js +++ b/awx/ui/static/js/helpers/Groups.js @@ -628,12 +628,14 @@ function(SchedulerInit, Rest, Wait) { scope = parent_scope.$new(), scheduler, target, - callback, + showForm, list, - restore, + detail, + restoreList, container; Wait('start'); + detail = $('#schedules-detail').hide(); list = $('#schedules-list'); target = $('#schedules-form'); container = $('#schedules-form-container'); @@ -642,8 +644,8 @@ function(SchedulerInit, Rest, Wait) { container.hide(); target.empty(); $('.tooltip').each(function () { - $(this).remove(); - }); + $(this).remove(); + }); $('.popover').each(function () { $(this).remove(); }); @@ -651,28 +653,49 @@ function(SchedulerInit, Rest, Wait) { // Insert the scheduler widget into the hidden div scheduler = SchedulerInit({ scope: scope, requireFutureStartTime: false }); scheduler.inject('schedules-form', false); + scheduler.injectDetail('schedules-detail', false); scheduler.clear(); scope.showRRuleDetail = false; parent_scope.schedulesTitle = 'Edit Schedule'; // display the scheduler widget - callback = function() { + showForm = function() { Wait('stop'); - container.show('slide', { direction: 'left' }, 500); + $('#schedules-overlay').width($('#schedules-tab').width()).height($('#schedules-tab').height()).show(); + container.show('slide', { direction: 'left' }, 300); $('#group-save-button').prop('disabled', true); + target.show(); scope.$apply(function() { scheduler.setRRule(schedule.rrule); scheduler.setName(schedule.name); }); }; - list.hide({ complete: callback, duration: 300 }); + //list.hide({ complete: callback, duration: 300 }); + setTimeout(function() { showForm(); }, 1000); - restore = function() { + restoreList = function() { $('#group-save-button').prop('disabled', false); list.show('slide', { direction: 'right' }, 500); + $('#schedules-overlay').width($('#schedules-tab').width()).height($('#schedules-tab').height()).hide(); //refresh the list }; + parent_scope.showScheduleDetail = function() { + if (parent_scope.formShowing) { + scheduler.isValid(); + //$('#schedules-form').hide(); + detail.width($('#schedules-form').width()).height($('#schedules-form').height()); + target.hide(); + detail.show(); + parent_scope.formShowing = false; + } + else { + detail.hide(); + target.show(); + parent_scope.formShowing = true; + } + }; + parent_scope.saveScheduleForm = function() { var newSchedule, url = '/static/sample/data/schedules/inventory/data.json'; @@ -686,11 +709,11 @@ function(SchedulerInit, Rest, Wait) { Rest.post(schedule) .success(function(){ Wait('stop'); - container.hide('slide', { direction: 'right' }, 500, restore); + container.hide('slide', { direction: 'right' }, 500, restoreList); }) .error(function(){ Wait('stop'); - container.hide('slide', { direction: 'right' }, 500, restore); + container.hide('slide', { direction: 'right' }, 500, restoreList); }); } else { @@ -699,7 +722,7 @@ function(SchedulerInit, Rest, Wait) { }; parent_scope.cancelScheduleForm = function() { - container.hide('slide', { direction: 'right' }, 500, restore); + container.hide('slide', { direction: 'right' }, 500, restoreList); }; }; }]) @@ -827,11 +850,17 @@ function(SchedulerInit, Rest, Wait) { resizeStop: function () { // for some reason, after resizing dialog the form and fields (the content) doesn't expand to 100% var dialog = $('.ui-dialog[aria-describedby="group-modal-dialog"]'), - content = dialog.find('#group-modal-dialog'); + content = dialog.find('#group-modal-dialog'), + w; content.width(dialog.width() - 28); if ($('#group_tabs .active a').text() === 'Properties') { textareaResize('group_variables', properties_scope); } + else if ($('#group_tabs .active a').text() === 'Schedule') { + w = $('#group_tabs').width() - 15; + $('#schedules-overlay').width(w); + $('#schedules-form-container').width(w); + } }, close: function () { // Destroy on close @@ -866,6 +895,8 @@ function(SchedulerInit, Rest, Wait) { } } else if ($(e.target).text() === 'Schedule') { + $('#schedules-overlay').hide(); + parent_scope.formShowing = true; ScheduleList({ scope: parent_scope }); } }); diff --git a/awx/ui/static/js/helpers/Schedules.js b/awx/ui/static/js/helpers/Schedules.js index 65c05c17d2..af165b56ce 100644 --- a/awx/ui/static/js/helpers/Schedules.js +++ b/awx/ui/static/js/helpers/Schedules.js @@ -100,7 +100,6 @@ angular.module('SchedulesHelper', ['Utilities', 'SchedulesHelper']) Wait('stop'); $('#schedulerName').focus(); $('#rrule_nlp_description').dblclick(function() { - console.log('here!'); setTimeout(function() { scope.$apply(function() { scope.showRRule = (scope.showRRule) ? false : true; }); }, 100); }); } diff --git a/awx/ui/static/less/angular-scheduler.less b/awx/ui/static/less/angular-scheduler.less index bb943f3c4a..ec66a77603 100644 --- a/awx/ui/static/less/angular-scheduler.less +++ b/awx/ui/static/less/angular-scheduler.less @@ -9,12 +9,33 @@ #schedules-form-container -inventory group add/edit dialog */ +#schedules-tab { + position: relative; + top: 0; + left: 0; +} + +#schedules-overlay { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 100; + background-color: @black; + opacity: 0; +} + #schedules-form-container { + position: absolute; + top: 0; + left: 0; display: none; border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 3px 3px 6px 0 #666; padding: 0 10px 15px 8px; + background-color: @white; + z-index: 200; } #schedules-title { @@ -33,12 +54,23 @@ } } +#schedules-form-container-body { + overflow: auto; +} + #schedules-buttons { + height: 45px; + padding-top: 15px; text-align: right; + border-top: 1px solid #A6C9E2; + a { + margin-right: 8px; + font-size: 12px; + } } #schedules-detail { - display:none; + display: none; } #scheduler-modal-dialog, #schedules-form-container { diff --git a/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler-detail.html b/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler-detail.html index 267dc118a9..7d081b9d95 100644 --- a/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler-detail.html +++ b/awx/ui/static/lib/angular-scheduler/lib/angular-scheduler-detail.html @@ -10,9 +10,10 @@ @chouseknecht chouse@ansible.com --> +
-

The scheduler options are invalid or incomplete. Make the needed changes on the options tab, then come back here to see details.

+

The scheduler options are invalid or incomplete. Make the needed changes, then return here to view occurrence details.

diff --git a/awx/ui/static/partials/inventory-edit.html b/awx/ui/static/partials/inventory-edit.html index 92be70ee30..420b06b1c3 100644 --- a/awx/ui/static/partials/inventory-edit.html +++ b/awx/ui/static/partials/inventory-edit.html @@ -26,18 +26,20 @@
+

- +