Work on getting extra vars popout working on inv form

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

View File

@ -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: '='
}

View File

@ -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')}}
</label>
@ -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')}}
</label>
@ -44,18 +44,18 @@
<textarea
ng-disabled="disabled"
rows="6"
ng-model="variables.value"
name="variablesName"
ng-model="variables"
name="{{ vm.name }}_variables"
class="form-control Form-textArea"
id="{{ vm.name }}">
id="{{ vm.name }}_variables">
</textarea>
<at-code-mirror-modal
name="{{ vm.modalName }}"
name="{{ vm.name }}"
ng-if="vm.expanded"
variables="variables"
modal-vars="variables"
tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
disabled="{{ disabled || false }}"
close-fn="vm.close()">
close-fn="vm.close">
</at-code-mirror-modal>
</div>

View File

@ -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: '&'
}

View File

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

View File

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

View File

@ -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 += '></at-code-mirror>';
}