From bed63b36903c299492f4cc91fef8447a52907788 Mon Sep 17 00:00:00 2001 From: mabashian Date: Fri, 15 Mar 2019 16:14:55 -0400 Subject: [PATCH] Work on getting extra vars popout working on inv form --- .../code-mirror/code-mirror.directive.js | 52 +++++++++---------- .../code-mirror/code-mirror.partial.html | 16 +++--- .../modal/code-mirror-modal.directive.js | 32 +++++------- .../modal/code-mirror-modal.partial.html | 7 +-- .../standard-inventory/inventory.form.js | 1 + awx/ui/client/src/shared/form-generator.js | 4 +- 6 files changed, 51 insertions(+), 61 deletions(-) diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js index 0315485ee4..555b9579a4 100644 --- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js +++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js @@ -1,58 +1,57 @@ const templateUrl = require('~components/code-mirror/code-mirror.partial.html'); const CodeMirrorModalID = '#CodeMirror-modal'; -const ParseVariable = 'parseType'; const ParseType = 'yaml'; function atCodeMirrorController ( $scope, strings, - ParseTypeChange, - ParseVariableString + ParseTypeChange ) { const vm = this; - const variablesName = `${$scope.name}_variables`; - function init (vars, name) { - console.log('init', $scope, vars); + function init () { if ($scope.disabled === 'true') { $scope.disabled = true; } else if ($scope.disabled === 'false') { $scope.disabled = false; } - $scope.variablesName = variablesName; - // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars)); - $scope.variables = { - value: ParseVariableString(_.cloneDeep(vars)), - }; $scope.value = $scope.variables.value; $scope.parseType = ParseType; - const options = { + + ParseTypeChange({ scope: $scope, - variable: 'value', // variablesName, - parse_variable: ParseVariable, - field_id: name, - readOnly: $scope.disabled, - onChange: (value) => { - console.log('change', value); - }, - }; - ParseTypeChange(options); + variable: 'variables', + parse_variable: 'parseType', + field_id: `${$scope.name}_variables`, + readOnly: $scope.disabled + }); } function expand () { vm.expanded = true; } - function close () { + function close (varsFromModal) { + // TODO: make sure that the variables format matches + // parseType before re-initializing CodeMirror. Ex) + // user changes the format from yaml to json in the + // modal but CM in the form is set to YAML + $scope.variables = varsFromModal; + // New set of variables from the modal, reinit codemirror + ParseTypeChange({ + scope: $scope, + variable: 'variables', + parse_variable: 'parseType', + field_id: `${$scope.name}_variables`, + readOnly: $scope.disabled + }); $(CodeMirrorModalID).off('hidden.bs.modal'); $(CodeMirrorModalID).modal('hide'); $('.popover').popover('hide'); vm.expanded = false; } - // vm.variablesName = variablesName; vm.name = $scope.name; - vm.modalName = `${vm.name}_modal`; vm.strings = strings; vm.expanded = false; vm.close = close; @@ -68,8 +67,7 @@ function atCodeMirrorController ( atCodeMirrorController.$inject = [ '$scope', 'CodeMirrorStrings', - 'ParseTypeChange', - 'ParseVariableString' + 'ParseTypeChange' ]; function atCodeMirrorTextarea () { @@ -86,7 +84,7 @@ function atCodeMirrorTextarea () { labelClass: '@', tooltip: '@', tooltipPlacement: '@', - variables: '@', + variables: '=', name: '@', init: '=' } diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html index 97572159f5..da1f492139 100644 --- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html +++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html @@ -23,7 +23,7 @@ type="radio" value="yaml" ng-model="parseType" - ng-change="parseTypeChange('parseType', vm.variables)" + ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty"> {{ vm.strings.get('label.YAML')}} @@ -32,7 +32,7 @@ type="radio" value="json" ng-model="parseType" - ng-change="parseTypeChange('parseType', vm.variables)" + ng-change="parseTypeChange('parseType', 'variables')" class="ng-pristine ng-untouched ng-valid ng-not-empty"> {{ vm.strings.get('label.JSON')}} @@ -44,18 +44,18 @@ + close-fn="vm.close"> diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js index de6029f6c9..4eb77d6e0a 100644 --- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js +++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js @@ -1,7 +1,7 @@ const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html'); const CodeMirrorModalID = '#CodeMirror-modal'; -const ParseVariable = 'parseType'; +// const ParseVariable = 'parseType'; const ParseType = 'yaml'; const ModalHeight = '#CodeMirror-modal .modal-dialog'; const ModalHeader = '.atCodeMirror-label'; @@ -10,8 +10,7 @@ const ModalFooter = '.CodeMirror-modalControls'; function atCodeMirrorModalController ( $scope, strings, - ParseTypeChange, - // ParseVariableString + ParseTypeChange ) { const vm = this; const variablesName = `${$scope.name}_variables`; @@ -28,28 +27,25 @@ function atCodeMirrorModalController ( } function toggle () { - $scope.parseTypeChange('parseType', variablesName); + $scope.parseTypeChange('parseType', 'modalVars'); setTimeout(resize, 0); } - function init (vars, name) { + function init () { if ($scope.disabled === 'true') { $scope.disabled = true; } else if ($scope.disabled === 'false') { $scope.disabled = false; } $(CodeMirrorModalID).modal('show'); - // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars)); $scope.parseType = ParseType; - $scope.value = $scope.variables.value; - const options = { + ParseTypeChange({ scope: $scope, - variable: 'value', // variablesName, - parse_variable: ParseVariable, - field_id: name, + variable: 'modalVars', + parse_variable: 'parseType', + field_id: 'variables_modal', readOnly: $scope.disabled - }; - ParseTypeChange(options); + }); resize(); $(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn); $(`${CodeMirrorModalID} .modal-dialog`).resizable({ @@ -57,15 +53,14 @@ function atCodeMirrorModalController ( minWidth: 600 }); $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize); + + $scope.foovars = 'testing'; } - vm.variablesName = variablesName; - vm.name = $scope.name; vm.strings = strings; vm.toggle = toggle; $scope.close = () => { - $scope.variables.value = $scope.value; - $scope.closeFn(); + $scope.closeFn()($scope.modalVars); }; if ($scope.init) { $scope.init = init; @@ -79,7 +74,6 @@ atCodeMirrorModalController.$inject = [ '$scope', 'CodeMirrorStrings', 'ParseTypeChange', - 'ParseVariableString', ]; function atCodeMirrorModal () { @@ -95,7 +89,7 @@ function atCodeMirrorModal () { label: '@', labelClass: '@', tooltip: '@', - variables: '=', + modalVars: '=', name: '@', closeFn: '&' } diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html index 57ca4a07be..662565f3f3 100644 --- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html +++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html @@ -53,15 +53,12 @@
- {{extra_variables}} - : - {{variables.value}}
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js index 87011f936c..b49e6e70d6 100644 --- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js +++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js @@ -81,6 +81,7 @@ function(i18n) { // }, inventory_variables: { realName: 'variables', + root: 'inventory', label: i18n._('Variables'), type: 'code_mirror', class: 'Form-formGroup--fullWidth', diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js index 108c7c3930..1e8440d0ad 100644 --- a/awx/ui/client/src/shared/form-generator.js +++ b/awx/ui/client/src/shared/form-generator.js @@ -1370,8 +1370,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat html += `class="${field.class}" `; html += `label="${field.label}" `; html += `tooltip="${field.awPopOver}" `; - html += `name="${field.realName}" `; - html += `variables="{{ ${field.variables} }}" `; + html += `name="${field.root}" `; + html += `variables="${field.variables}" `; html += '>'; }