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

code-mirror: keep yaml/json in sync when opening modal

Browse Source
This commit is contained in:
Keith Grant
2019-03-18 16:00:45 -04:00
parent 33b19ebe1f
commit ac5dec272b
4 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,6 +27,10 @@ function atCodeMirrorController (
field_id: `${$scope.name}_variables`, field_id: `${$scope.name}_variables`,
readOnly: $scope.disabled readOnly: $scope.disabled
}); });
$scope.$watch(variablesName, () => {
$scope.variables = $scope[variablesName];
});
} }
function expand () { function expand () {

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

@@ -53,7 +53,7 @@
name="{{ vm.name }}" name="{{ vm.name }}"
ng-if="vm.expanded" ng-if="vm.expanded"
modal-vars="variables" modal-vars="variables"
parse-type="parseType" modal-parse-type="parseType"
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 }}"

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

@@ -1,8 +1,6 @@
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 ParseType = 'yaml';
const ModalHeight = '#CodeMirror-modal .modal-dialog'; const ModalHeight = '#CodeMirror-modal .modal-dialog';
const ModalHeader = '.atCodeMirror-label'; const ModalHeader = '.atCodeMirror-label';
const ModalFooter = '.CodeMirror-modalControls'; const ModalFooter = '.CodeMirror-modalControls';
@@ -13,7 +11,6 @@ function atCodeMirrorModalController (
ParseTypeChange ParseTypeChange
) { ) {
const vm = this; const vm = this;
// const variablesName = `${$scope.name}_variables`;
function resize () { function resize () {
if ($scope.disabled === 'true') { if ($scope.disabled === 'true') {
$scope.disabled = true; $scope.disabled = true;
@@ -27,7 +24,7 @@ function atCodeMirrorModalController (
} }
function toggle () { function toggle () {
$scope.parseTypeChange('parseType', 'modalVars'); $scope.parseTypeChange('modalParseType', 'modalVars');
setTimeout(resize, 0); setTimeout(resize, 0);
} }
@@ -38,11 +35,10 @@ function atCodeMirrorModalController (
$scope.disabled = false; $scope.disabled = false;
} }
$(CodeMirrorModalID).modal('show'); $(CodeMirrorModalID).modal('show');
$scope.parseType = ParseType;
ParseTypeChange({ ParseTypeChange({
scope: $scope, scope: $scope,
variable: 'modalVars', variable: 'modalVars',
parse_variable: 'parseType', parse_variable: 'modalParseType',
field_id: 'variables_modal', field_id: 'variables_modal',
readOnly: $scope.disabled readOnly: $scope.disabled
}); });
@@ -60,7 +56,7 @@ function atCodeMirrorModalController (
$scope.close = () => { $scope.close = () => {
$scope.closeFn({ $scope.closeFn({
values: $scope.modalVars, values: $scope.modalVars,
parseType: $scope.parseType, parseType: $scope.modalParseType,
}); });
}; };
if ($scope.init) { if ($scope.init) {
@@ -91,7 +87,7 @@ function atCodeMirrorModal () {
labelClass: '@', labelClass: '@',
tooltip: '@', tooltip: '@',
modalVars: '=', modalVars: '=',
parseType: '=', modalParseType: '=',
name: '@', name: '@',
closeFn: '&' closeFn: '&'
} }

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

@@ -21,20 +21,20 @@
</a> </a>
<div class="atCodeMirror-toggleContainer FormToggle-container"> <div class="atCodeMirror-toggleContainer FormToggle-container">
<div class="btn-group"> <div class="btn-group">
<label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary"> <label ng-class="{'btn-primary': modalParseType === 'yaml','Button-primary--hollow' : modalParseType === 'json'}" class="btn btn-xs">
<input <input
type="radio" type="radio"
value="yaml" value="yaml"
ng-model="parseType" ng-model="modalParseType"
ng-change="vm.toggle()" ng-change="vm.toggle()"
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>
<label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow"> <label ng-class="{'btn-primary': modalParseType === 'json','Button-primary--hollow' : modalParseType === 'yaml'}" class="btn btn-xs">
<input <input
type="radio" type="radio"
value="json" value="json"
ng-model="parseType" ng-model="modalParseType"
ng-change="vm.toggle()" ng-change="vm.toggle()"
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')}}