From d34066c2208c4dde04058dc51874ceffe87819ad Mon Sep 17 00:00:00 2001 From: Michael Abashian Date: Wed, 14 Jun 2017 11:37:26 -0400 Subject: [PATCH] Updated launch preview of selected inventory and credentials --- .../job-submission/job-submission.block.less | 32 ++++++++- .../job-submission.controller.js | 15 +++++ .../job-submission.partial.html | 65 ++++++++++++------- .../job-sub-cred-list.controller.js | 18 +---- .../inventory/job-sub-inv-list.controller.js | 31 +++++++++ .../templates/labels/labelsList.block.less | 10 +-- 6 files changed, 126 insertions(+), 45 deletions(-) diff --git a/awx/ui/client/src/job-submission/job-submission.block.less b/awx/ui/client/src/job-submission/job-submission.block.less index 66c0df012c..5ff3a4b9a4 100644 --- a/awx/ui/client/src/job-submission/job-submission.block.less +++ b/awx/ui/client/src/job-submission/job-submission.block.less @@ -177,7 +177,6 @@ } .JobSubmission-revertLink { - padding-left:10px; font-size: 14px; } @@ -190,6 +189,10 @@ .JobSubmission-selectedItemInfo { display: flex; flex: 0 0 100%; + background-color: @default-no-items-bord; + border: 1px solid @default-border; + padding: 10px; + border-radius: 5px; } .JobSubmission-selectedItemRevert { display: flex; @@ -200,10 +203,13 @@ justify-content: flex-end; margin-bottom: 15px; } -.JobSubmission-label { +.JobSubmission-selectedItemLabel, .JobSubmission-label { color: @default-interface-txt; margin-right: 10px; } +.JobSubmission-label { + line-height: 24px; +} .JobSubmission-selectedItemNone { color: @default-icon; } @@ -223,5 +229,25 @@ margin-top: auto; } .JobSubmission-selectedItemLabel { - flex: 0 0 165px; + flex: 0 0 80px; + line-height: 29px; +} +.JobSubmission-previewTags--outer { + flex: 1 0 auto; + max-width: ~"calc(100% - 140px)"; +} +.JobSubmission-previewTags--inner { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} +.JobSubmission-previewTagLabel { + color: @default-list-header-bg; +} +.JobSubmission-previewTagRevert { + flex: 0 0 60px; + line-height: 29px; +} +.JobSubmission-previewTagContainer { + display: flex; } diff --git a/awx/ui/client/src/job-submission/job-submission.controller.js b/awx/ui/client/src/job-submission/job-submission.controller.js index e4bfc4c245..64abe6e4c0 100644 --- a/awx/ui/client/src/job-submission/job-submission.controller.js +++ b/awx/ui/client/src/job-submission/job-submission.controller.js @@ -358,6 +358,9 @@ export default if($scope.has_default_inventory) { $scope.selected_inventory = angular.copy($scope.defaults.inventory); } + else { + $scope.selected_inventory = null; + } }; $scope.revertToDefaultCredentials = function() { @@ -556,5 +559,17 @@ export default $scope.selected_inventory = _.cloneDeep(selectedRow); }); + $scope.deleteMachineCred = function() { + $scope.selected_credentials.machine = null; + }; + + $scope.deleteExtraCred = function(index) { + $scope.selected_credentials.extra.splice(index, 1); + }; + + $scope.deleteSelectedInventory = function() { + $scope.selected_inventory = null; + }; + } ]; diff --git a/awx/ui/client/src/job-submission/job-submission.partial.html b/awx/ui/client/src/job-submission/job-submission.partial.html index 96f3071664..879abbee2e 100644 --- a/awx/ui/client/src/job-submission/job-submission.partial.html +++ b/awx/ui/client/src/job-submission/job-submission.partial.html @@ -24,13 +24,25 @@
-
- SELECTED INVENTORY: - - None selected -
-
- REVERT +
+
+ SELECTED: +
+
+
+
+
+ +
+
+ {{selected_inventory.name}} +
+
+
+
+
+ REVERT +
@@ -39,24 +51,33 @@
-
+
- SELECTED CREDENTIAL + SELECTED:
-
- Machine:  - {{selected_credentials.machine.name}} - ,  - - {{credential_types[extraCredential.credential_type].name}}:  - {{extraCredential.name}}{{$last ? '' : ', '}} - - None selected - - REVERT - +
+
+
+
+ +
+
+ MACHINE: {{selected_credentials.machine.name}} +
+
+
+
+ +
+
+ {{credential_types[extraCredential.credential_type].name | uppercase}}: {{extraCredential.name}} +
+
+
+
+
+ REVERT
-
diff --git a/awx/ui/client/src/job-submission/lists/credential/job-sub-cred-list.controller.js b/awx/ui/client/src/job-submission/lists/credential/job-sub-cred-list.controller.js index 149426766f..54bc04d697 100644 --- a/awx/ui/client/src/job-submission/lists/credential/job-sub-cred-list.controller.js +++ b/awx/ui/client/src/job-submission/lists/credential/job-sub-cred-list.controller.js @@ -106,27 +106,15 @@ export default $scope.toggle_row = function(selectedRow) { if(parseInt($scope.credentialKind) === 1) { - if($scope.selectedCredentials.machine && $scope.selectedCredentials.machine.id === selectedRow.id) { - $scope.selectedCredentials.machine = null; - } - else { - $scope.selectedCredentials.machine = _.cloneDeep(selectedRow); - } + $scope.selectedCredentials.machine = _.cloneDeep(selectedRow); } else { - let rowDeselected = false; for (let i = $scope.selectedCredentials.extra.length - 1; i >= 0; i--) { - if($scope.selectedCredentials.extra[i].id === selectedRow.id) { - $scope.selectedCredentials.extra.splice(i, 1); - rowDeselected = true; - } - else if(selectedRow.credential_type === $scope.selectedCredentials.extra[i].credential_type) { + if(selectedRow.credential_type === $scope.selectedCredentials.extra[i].credential_type) { $scope.selectedCredentials.extra.splice(i, 1); } } - if(!rowDeselected) { - $scope.selectedCredentials.extra.push(_.cloneDeep(selectedRow)); - } + $scope.selectedCredentials.extra.push(_.cloneDeep(selectedRow)); } }; diff --git a/awx/ui/client/src/job-submission/lists/inventory/job-sub-inv-list.controller.js b/awx/ui/client/src/job-submission/lists/inventory/job-sub-inv-list.controller.js index 49e4c9e604..002cb17e42 100644 --- a/awx/ui/client/src/job-submission/lists/inventory/job-sub-inv-list.controller.js +++ b/awx/ui/client/src/job-submission/lists/inventory/job-sub-inv-list.controller.js @@ -7,6 +7,37 @@ export default [ '$scope', function($scope) { + + let updateInventoryList = function() { + $scope.inventories.forEach((row, i) => { + $scope.inventories[i].checked = 0; + if (row.id === $scope.selectedInventory.id) { + $scope.inventories[i].checked = 1; + } + }); + }; + + let uncheckAllInventories = function() { + $scope.inventories.forEach((row, i) => { + $scope.inventories[i].checked = 0; + }); + }; + + let init = function() { + $scope.$watch('selectedInventory', () => { + if($scope.inventories && $scope.inventories.length > 0) { + if($scope.selectedInventory) { + updateInventoryList(); + } + else { + uncheckAllInventories(); + } + } + }); + }; + + init(); + $scope.toggle_row = function(selectedRow) { let list = $scope.list; let count = 0; diff --git a/awx/ui/client/src/templates/labels/labelsList.block.less b/awx/ui/client/src/templates/labels/labelsList.block.less index f2e0bed4b3..4c0a97987a 100644 --- a/awx/ui/client/src/templates/labels/labelsList.block.less +++ b/awx/ui/client/src/templates/labels/labelsList.block.less @@ -14,7 +14,7 @@ max-width: 200px; } -.LabelList-tag { +.LabelList-tag, .JobSubmission-previewTag { border-radius: 5px; padding: 2px 10px; margin: 4px 0px; @@ -40,7 +40,7 @@ color: @default-link-hov; } -.LabelList-tag--deletable { +.LabelList-tag--deletable, .JobSubmission-previewTag--deletable { color: @default-bg; background-color: @default-link; margin-right: 0px; @@ -51,7 +51,7 @@ margin-right: 5px; } -.LabelList-deleteContainer { +.LabelList-deleteContainer, .JobSubmission-previewTagContainerDelete { background-color: @default-link; border-top-left-radius: 5px; border-bottom-left-radius: 5px; @@ -77,11 +77,11 @@ max-width: ~"calc(100% - 23px)"; } -.LabelList-deleteContainer:hover, { +.LabelList-deleteContainer:hover, .JobSubmission-previewTagContainerDelete:hover { border-color: @default-err; background-color: @default-err; } -.LabelList-deleteContainer:hover > .LabelList-tagDelete { +.LabelList-deleteContainer:hover > .LabelList-tagDelete, .JobSubmission-previewTagContainerDelete:hover > .JobSubmission-previewTagContainerTagDelete { color: @default-bg; }