External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 01:47:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

Work on getting extra vars popout working on inv form

Browse Source
This commit is contained in:
mabashian
2019-03-15 16:14:55 -04:00
committed by Keith Grant
parent 43ef4183df
commit bed63b3690
6 changed files with 51 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
View File

@@ -1,58 +1,57 @@
const templateUrl = require('~components/code-mirror/code-mirror.partial.html'); const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
const CodeMirrorModalID = '#CodeMirror-modal'; const CodeMirrorModalID = '#CodeMirror-modal';
const ParseVariable = 'parseType';
const ParseType = 'yaml'; const ParseType = 'yaml';
function atCodeMirrorController ( function atCodeMirrorController (
$scope, $scope,
strings, strings,
ParseTypeChange, ParseTypeChange
ParseVariableString
) { ) {
const vm = this; const vm = this;
const variablesName = `${$scope.name}_variables`; function init () {
function init (vars, name) {
console.log('init', $scope, vars);
if ($scope.disabled === 'true') { if ($scope.disabled === 'true') {
$scope.disabled = true; $scope.disabled = true;
} else if ($scope.disabled === 'false') { } else if ($scope.disabled === 'false') {
$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.value = $scope.variables.value;
$scope.parseType = ParseType; $scope.parseType = ParseType;
const options = {
ParseTypeChange({
scope: $scope, scope: $scope,
variable: 'value', // variablesName, variable: 'variables',
parse_variable: ParseVariable, parse_variable: 'parseType',
field_id: name, field_id: `${$scope.name}_variables`,
readOnly: $scope.disabled, readOnly: $scope.disabled
onChange: (value) => { });
console.log('change', value);
},
};
ParseTypeChange(options);
} }
function expand () { function expand () {
vm.expanded = true; 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).off('hidden.bs.modal');
$(CodeMirrorModalID).modal('hide'); $(CodeMirrorModalID).modal('hide');
$('.popover').popover('hide'); $('.popover').popover('hide');
vm.expanded = false; vm.expanded = false;
} }
// vm.variablesName = variablesName;
vm.name = $scope.name; vm.name = $scope.name;
vm.modalName = `${vm.name}_modal`;
vm.strings = strings; vm.strings = strings;
vm.expanded = false; vm.expanded = false;
vm.close = close; vm.close = close;
@@ -68,8 +67,7 @@ function atCodeMirrorController (
atCodeMirrorController.$inject = [ atCodeMirrorController.$inject = [
'$scope', '$scope',
'CodeMirrorStrings', 'CodeMirrorStrings',
'ParseTypeChange', 'ParseTypeChange'
'ParseVariableString'
]; ];
function atCodeMirrorTextarea () { function atCodeMirrorTextarea () {
@@ -86,7 +84,7 @@ function atCodeMirrorTextarea () {
labelClass: '@', labelClass: '@',
tooltip: '@', tooltip: '@',
tooltipPlacement: '@', tooltipPlacement: '@',
variables: '@', variables: '=',
name: '@', name: '@',
init: '=' init: '='
} }

16
awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
View File

@@ -23,7 +23,7 @@
type="radio" type="radio"
value="yaml" value="yaml"
ng-model="parseType" ng-model="parseType"
ng-change="parseTypeChange('parseType', vm.variables)" ng-change="parseTypeChange('parseType', 'variables')"
class="ng-pristine ng-untouched ng-valid ng-not-empty"> class="ng-pristine ng-untouched ng-valid ng-not-empty">
{{ vm.strings.get('label.YAML')}} {{ vm.strings.get('label.YAML')}}
</label> </label>
@@ -32,7 +32,7 @@
type="radio" type="radio"
value="json" value="json"
ng-model="parseType" ng-model="parseType"
ng-change="parseTypeChange('parseType', vm.variables)" ng-change="parseTypeChange('parseType', 'variables')"
class="ng-pristine ng-untouched ng-valid ng-not-empty"> class="ng-pristine ng-untouched ng-valid ng-not-empty">
{{ vm.strings.get('label.JSON')}} {{ vm.strings.get('label.JSON')}}
</label> </label>
@@ -44,18 +44,18 @@
<textarea <textarea
ng-disabled="disabled" ng-disabled="disabled"
rows="6" rows="6"
ng-model="variables.value" ng-model="variables"
name="variablesName" name="{{ vm.name }}_variables"
class="form-control Form-textArea" class="form-control Form-textArea"
id="{{ vm.name }}"> id="{{ vm.name }}_variables">
</textarea> </textarea>
<at-code-mirror-modal <at-code-mirror-modal
name="{{ vm.modalName }}" name="{{ vm.name }}"
ng-if="vm.expanded" ng-if="vm.expanded"
variables="variables" modal-vars="variables"
tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}" tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}" label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
disabled="{{ disabled || false }}" disabled="{{ disabled || false }}"
close-fn="vm.close()"> close-fn="vm.close">
</at-code-mirror-modal> </at-code-mirror-modal>
</div> </div>

32
awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
View File

@@ -1,7 +1,7 @@
const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html'); const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
const CodeMirrorModalID = '#CodeMirror-modal'; const CodeMirrorModalID = '#CodeMirror-modal';
const ParseVariable = 'parseType'; // const ParseVariable = 'parseType';
const ParseType = 'yaml'; const ParseType = 'yaml';
const ModalHeight = '#CodeMirror-modal .modal-dialog'; const ModalHeight = '#CodeMirror-modal .modal-dialog';
const ModalHeader = '.atCodeMirror-label'; const ModalHeader = '.atCodeMirror-label';
@@ -10,8 +10,7 @@ const ModalFooter = '.CodeMirror-modalControls';
function atCodeMirrorModalController ( function atCodeMirrorModalController (
$scope, $scope,
strings, strings,
ParseTypeChange, ParseTypeChange
// ParseVariableString
) { ) {
const vm = this; const vm = this;
const variablesName = `${$scope.name}_variables`; const variablesName = `${$scope.name}_variables`;
@@ -28,28 +27,25 @@ function atCodeMirrorModalController (
} }
function toggle () { function toggle () {
$scope.parseTypeChange('parseType', variablesName); $scope.parseTypeChange('parseType', 'modalVars');
setTimeout(resize, 0); setTimeout(resize, 0);
} }
function init (vars, name) { function init () {
if ($scope.disabled === 'true') { if ($scope.disabled === 'true') {
$scope.disabled = true; $scope.disabled = true;
} else if ($scope.disabled === 'false') { } else if ($scope.disabled === 'false') {
$scope.disabled = false; $scope.disabled = false;
} }
$(CodeMirrorModalID).modal('show'); $(CodeMirrorModalID).modal('show');
// $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
$scope.parseType = ParseType; $scope.parseType = ParseType;
$scope.value = $scope.variables.value; ParseTypeChange({
const options = {
scope: $scope, scope: $scope,
variable: 'value', // variablesName, variable: 'modalVars',
parse_variable: ParseVariable, parse_variable: 'parseType',
field_id: name, field_id: 'variables_modal',
readOnly: $scope.disabled readOnly: $scope.disabled
}; });
ParseTypeChange(options);
resize(); resize();
$(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn); $(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn);
$(`${CodeMirrorModalID} .modal-dialog`).resizable({ $(`${CodeMirrorModalID} .modal-dialog`).resizable({
@@ -57,15 +53,14 @@ function atCodeMirrorModalController (
minWidth: 600 minWidth: 600
}); });
$(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize); $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
$scope.foovars = 'testing';
} }
vm.variablesName = variablesName;
vm.name = $scope.name;
vm.strings = strings; vm.strings = strings;
vm.toggle = toggle; vm.toggle = toggle;
$scope.close = () => { $scope.close = () => {
$scope.variables.value = $scope.value; $scope.closeFn()($scope.modalVars);
$scope.closeFn();
}; };
if ($scope.init) { if ($scope.init) {
$scope.init = init; $scope.init = init;
@@ -79,7 +74,6 @@ atCodeMirrorModalController.$inject = [
'$scope', '$scope',
'CodeMirrorStrings', 'CodeMirrorStrings',
'ParseTypeChange', 'ParseTypeChange',
'ParseVariableString',
]; ];
function atCodeMirrorModal () { function atCodeMirrorModal () {
@@ -95,7 +89,7 @@ function atCodeMirrorModal () {
label: '@', label: '@',
labelClass: '@', labelClass: '@',
tooltip: '@', tooltip: '@',
variables: '=', modalVars: '=',
name: '@', name: '@',
closeFn: '&' closeFn: '&'
} }

7
awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
View File

@@ -53,15 +53,12 @@
</div> </div>
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{extra_variables}}
:
{{variables.value}}
<textarea <textarea
ng-disabled="disabled" ng-disabled="disabled"
ng-model="extra_variables" ng-model="modalVars"
name="extra_variables" name="extra_variables"
class="form-control Form-textArea" class="form-control Form-textArea"
id="{{ vm.name }}"> id="variables_modal">
</textarea> </textarea>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

1
awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
View File

@@ -81,6 +81,7 @@ function(i18n) {
// }, // },
inventory_variables: { inventory_variables: {
realName: 'variables', realName: 'variables',
root: 'inventory',
label: i18n._('Variables'), label: i18n._('Variables'),
type: 'code_mirror', type: 'code_mirror',
class: 'Form-formGroup--fullWidth', class: 'Form-formGroup--fullWidth',

4
awx/ui/client/src/shared/form-generator.js
View File

@@ -1370,8 +1370,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += `class="${field.class}" `; html += `class="${field.class}" `;
html += `label="${field.label}" `; html += `label="${field.label}" `;
html += `tooltip="${field.awPopOver}" `; html += `tooltip="${field.awPopOver}" `;
html += `name="${field.realName}" `; html += `name="${field.root}" `;
html += `variables="{{ ${field.variables} }}" `; html += `variables="${field.variables}" `;
html += '></at-code-mirror>'; html += '></at-code-mirror>';
} }