External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-09 23:12:08 -03:30
Code Issues Packages Projects Releases Wiki Activity

Cleanup component communication

Browse Source
This commit is contained in:
gconsidine 2017-05-17 18:22:01 -04:00
parent 8b91b16bea
commit 1644f78cf3
32 changed files with 241 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
awx/ui/client/features/credentials/add-credentials.controller.js
View File

@ -4,23 +4,13 @@ function AddCredentialsController (models) {
let credential = models.credential;
let credentialType = models.credentialType;
vm.heading = {
text: 'Create Credentials'
};
vm.name = credential.getPostOptions('name');
vm.description = credential.getPostOptions('description');
vm.name = {
options: credential.getPostOptions('name')
};
vm.description = {
options: credential.getPostOptions('description')
};
vm.kind = {
options: credential.getPostOptions('credential_type'),
vm.kind = Object.assign({
data: credentialType.categorizeByKind(),
placeholder: 'Select a Type'
};
}, credential.getPostOptions('credential_type'));
vm.dynamic = {
getInputs: credentialType.getTypeFromName,

12
awx/ui/client/features/credentials/add-credentials.view.html
View File

@ -1,5 +1,5 @@
<at-panel config="vm.panel">
<at-panel-heading config="vm.heading"></at-panel-heading>
<at-panel>
<at-panel-heading>Create Credentials</at-panel-heading>
<at-tab-navigation>
<at-tab></at-tab>
@ -8,11 +8,11 @@
<at-panel-body>
<at-form>
<at-input-text col="4" config="vm.name"></at-input-text>
<at-input-text col="4" config="vm.description"></at-input-text>
<at-input-select col="4" config="vm.kind"></at-input-select>
<at-input-text col="4" tab="1" state="vm.name"></at-input-text>
<at-input-text col="4" tab="2" state="vm.description"></at-input-text>
<at-input-select col="4" tab="3" state="vm.kind"></at-input-select>
<at-dynamic-input-group col="4" config="vm.dynamic"></at-dynamic-input-group>
<at-dynamic-input-group col="4" tab="4" state="vm.dynamic"></at-dynamic-input-group>
<at-action-group col="12" pos="right">
<at-form-action type="cancel"></at-form-action>

1
awx/ui/client/lib/components/_index.less
View File

@ -1,5 +1,6 @@
@import 'action/_index';
@import 'badge/_index';
@import 'dynamic/_index';
@import 'form/_index';
@import 'input/_index';
@import 'panel/_index';

2
awx/ui/client/lib/components/action/action-group.directive.js
View File

@ -1,8 +1,8 @@
function atActionGroup (pathService) {
return {
restrict: 'E',
transclude: true,
replace: true,
transclude: true,
templateUrl: pathService.getPartialPath('components/action/action-group'),
scope: {
col: '@',

2
awx/ui/client/lib/components/action/action-group.partial.html
View File

@ -1,4 +1,4 @@
<div class="col-xs-{{ col }} at-ActionGroup">
<div class="col-sm-{{ col }} at-ActionGroup">
<div class="pull-{{ pos }}">
<ng-transclude></ng-transclude>
</div>

12
awx/ui/client/lib/components/dynamic/_index.less Normal file
View File

@ -0,0 +1,12 @@
.at-DynamicInputGroup {
padding: 0;
margin: @at-space-6x 0 0 0;
}
.at-DynamicInputGroup-inset {
position: absolute;
width: @at-inset-width;
height: 100%;
background: @at-gray;
left: -@at-inset-width;
}

89
awx/ui/client/lib/components/dynamic/input-group.directive.js
View File

@ -1,44 +1,49 @@
function link (scope, el, attrs, controllers) {
let formController = controllers[0];
let dynamicController = controllers[1];
el = el[0];
let dynamicController = controllers[0];
let element = el[0].getElementsByClassName('at-DynamicInputGroup-container')[0];
dynamicController.init(scope, formController, el);
dynamicController.init(scope, element);
}
function atDynamicInputGroupController ($scope, $compile) {
function AtDynamicInputGroupController ($scope, $compile) {
let vm = this || {};
let state;
let scope;
let state;
let source;
let form;
let el;
let element;
vm.init = (_scope_, _form_, _el_) => {
form = _form_;
vm.init = (_scope_, _element_) => {
scope = _scope_;
el = _el_;
element = _element_;
state = scope.state || {};
source = state.source;
scope.config.state = scope.config.state || {};
state = scope.config.state;
source = scope.config.source;
$scope.$watch('state.source.value', vm.update);
};
$scope.$watch('config.source.state.value', vm.update);
vm.isValidSource = () => {
if (!source.value || source.value === state.value) {
return false;
}
return true;
};
vm.update = () => {
if (!source.state.value || source.state.value === state.value) {
if (!vm.isValidSource()) {
return;
}
state.value = source.state.value;
vm.clear();
let inputs = scope.config.getInputs(source.state.value);
state.value = source.value;
let inputs = state.getInputs(source.value);
let components = vm.createComponentConfigs(inputs);
vm.insert(components);
scope.config.components = components;
state.components = components;
vm.compile(components);
};
@ -56,45 +61,61 @@ function atDynamicInputGroupController ($scope, $compile) {
}
}
let html = angular.element(`
<${input.component}
col="${scope.col}"
config="${scope.config.reference}.components[${i}]">
</${input.component}>
`);
components.push({
options: input,
html
element: vm.createElement(input, i)
});
});
return components;
};
vm.createElement = (input, index) => {
let tabindex = Number(scope.tab) + index;
let element =
`<${input.component} col="${scope.col}" tab="${tabindex}"
state="${state.reference}.components[${index}]">
</${input.component}>`;
return angular.element(element);
};
vm.insert = components => {
components.forEach(component => el.appendChild(component.html[0]));
let group = document.createElement('div');
components.forEach(component => {
group.appendChild(component.element[0]);
});
element.appendChild(group);
};
vm.compile = components => {
components.forEach(component => $compile(component.html[0])(scope.$parent));
components.forEach(component => $compile(component.element[0])(scope.$parent));
};
vm.clear = () => {
element.innerHTML = '';
};
}
atDynamicInputGroupController.$inject = ['$scope', '$compile'];
AtDynamicInputGroupController.$inject = ['$scope', '$compile'];
function atDynamicInputGroup (pathService) {
return {
restrict: 'E',
replace: true,
require: ['^^atForm', 'atDynamicInputGroup'],
transclude: true,
require: ['atDynamicInputGroup'],
templateUrl: pathService.getPartialPath('components/dynamic/input-group'),
controller: atDynamicInputGroupController,
controller: AtDynamicInputGroupController,
controllerAs: 'vm',
link,
scope: {
config: '=',
col: '@'
state: '=',
col: '@',
tab: '@'
}
};
}

4
awx/ui/client/lib/components/dynamic/input-group.partial.html
View File

@ -1,2 +1,4 @@
<div>
<div class="col-sm-12 at-DynamicInputGroup">
<div class="at-DynamicInputGroup-inset"></div>
<div class="at-DynamicInputGroup-container"></div>
</div>

17
awx/ui/client/lib/components/form/action.directive.js
View File

@ -10,19 +10,11 @@ function atFormActionController ($state) {
let form;
let scope;
let state;
vm.init = (_form_, _scope_) => {
form = _form_;
scope = _scope_;
scope.config = scope.config || {};
scope.config.state = scope.config.state || {};
state = scope.config.state;
scope.form = form.use('action', state);
switch(scope.type) {
case 'cancel':
vm.setCancelDefaults();
@ -31,8 +23,14 @@ function atFormActionController ($state) {
vm.setSaveDefaults();
break;
default:
// TODO: custom type (when needed)
vm.setCustomDefaults();
}
form.use('action', scope);
};
vm.setCustomDefaults = () => {
};
vm.setCancelDefaults = () => {
@ -62,6 +60,7 @@ function atFormAction (pathService) {
controllerAs: 'vm',
link,
scope: {
state: '=',
type: '@'
}
};

4
awx/ui/client/lib/components/form/action.partial.html
View File

@ -1,5 +1,5 @@
<button class="btn at-Button{{ fill }}--{{ color }}"
ng-disabled="type !== 'cancel' && !form.state.isValid"
ng-class="{ 'at-Button--disabled': form.disabled }" ng-click="action()">
ng-disabled="type !== 'cancel' && !form.isValid"
ng-class="{ 'at-Button--disabled': !form.isValid }" ng-click="action()">
{{::text}}
</button>

42
awx/ui/client/lib/components/form/form.directive.js
View File

@ -11,34 +11,26 @@ function AtFormController () {
return vm.trackComponent(type, component, el);
};
vm.trackComponent = (type, component, el) => {
let meta = {
el,
type,
state: vm.state,
disabled: false,
tabindex: vm.components.length + 1
};
vm.trackComponent = (type, component) => {
component.type = type;
component.form = vm.state;
if (!vm.components.length) {
el.focus();
}
vm.components.push(meta)
return meta;
vm.components.push(component)
};
vm.validate = () => {
let isValid = true;
vm.components
.filter(component => component.type === 'input')
.forEach(input => {
if (input.isValid) {
isValid = false;
for (let i = 0; i < vm.components.length; i++) {
if (vm.components[i].type !== 'input') {
continue;
}
if (!vm.components[i].state.isValid) {
isValid = false;
break;
}
}
});
return isValid;
};
@ -56,20 +48,16 @@ function AtFormController () {
};
}
function link (scope, el, attrs, controller, fn) {
//console.log(fn);
}
function atForm (pathService) {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: pathService.getPartialPath('components/form/form'),
controller: AtFormController,
controllerAs: 'vm',
link,
scope: {
config: '='
state: '='
}
};
}

2
awx/ui/client/lib/components/input/label.directive.js
View File

@ -5,7 +5,7 @@ function atInputLabel (pathService) {
replace: true,
templateUrl: pathService.getPartialPath('components/input/label'),
scope: {
config: '='
state: '='
}
};
}

4
awx/ui/client/lib/components/input/label.partial.html
View File

@ -1,5 +1,5 @@
<label class="at-InputLabel at-u-flat">
<span ng-if="config.options.required" class="pull-left at-InputLabel-required">*</span>
<span class="pull-left">{{::config.options.label}}</span>
<at-popover class="pull-left" config="config"></at-popover>
<span class="pull-left">{{::state.options.label}}</span>
<at-popover class="pull-left" state="state"></at-popover>
</label>

42
awx/ui/client/lib/components/input/select.directive.js
View File

@ -1,10 +1,16 @@
function link (scope, el, attrs, controllers) {
function atInputSelectLink (scope, el, attrs, controllers) {
let formController = controllers[0];
let inputController = controllers[1];
let input = el.find('input')[0];
let select = el.find('select')[0];
let elements = {
input: el.find('input')[0],
select: el.find('select')[0]
};
inputController.init(formController, scope, input, select);
if (scope.tab === '1') {
elements.select.focus();
}
inputController.init(formController, scope, elements);
}
function AtInputSelectController (eventService) {
@ -12,31 +18,29 @@ function AtInputSelectController (eventService) {
let scope;
let state;
let form;
let input;
let select;
let form;
vm.init = (_form_, _scope_, _input_, _select_) => {
vm.init = (_form_, _scope_, elements) => {
form = _form_;
input = elements.input;
select = elements.select;
scope = _scope_;
input = _input_;
select = _select_;
scope.config.state = scope.config.state || {};
state = scope.config.state;
state = scope.state || {};
state.required = state.required || false;
state.isValid = state.isValid || false;
state.message = state.message || '';
state.required = scope.config.options.required || false;
state.disabled = state.disabled || false;
scope.form = form.use('input', state, input);
form.use('input', scope);
vm.setListeners();
vm.check();
};
vm.setListeners = () => {
let listeners = eventService.addListeners(scope, [
let listeners = eventService.addListeners([
[input, 'focus', () => select.focus],
[select, 'mousedown', () => scope.$apply(() => scope.open = !scope.open)],
[select, 'focus', () => input.classList.add('at-Input--focus')],
@ -58,7 +62,9 @@ function AtInputSelectController (eventService) {
if (state.required && !state.value) {
isValid = false;
} else if (state.validate && !state.validate(scope.config.input)) {
}
if (state.validate && !state.validate(state.value)) {
isValid = false;
}
@ -86,9 +92,9 @@ function atInputSelect (pathService) {
templateUrl: pathService.getPartialPath('components/input/select'),
controller: AtInputSelectController,
controllerAs: 'vm',
link,
link: atInputSelectLink,
scope: {
config: '=',
state: '=',
col: '@',
tab: '@'
}

17
awx/ui/client/lib/components/input/select.partial.html
View File

@ -1,17 +1,16 @@
<div class="col-sm-{{ col }}">
<div class="col-sm-{{::col}}">
<div class="form-group at-u-flat">
<at-input-label config="config"></at-input-label>
<at-input-label state="state"></at-input-label>
<div class="at-InputGroup at-InputSelect">
<input type="text" class="form-control at-Input at-InputSelect-input"
placeholder="{{ config.placeholder | uppercase }}"
ng-model="config.state.value" ng-disabled="form.disabled"
placeholder="{{ state.placeholder | uppercase }}"
ng-model="state.value" ng-disabled="state.disabled"
ng-change="vm.check()" />
<select class="form-control at-InputSelect-select" ng-model="config.state.value"
ng-attr-tabindex="{{ form.tabindex || undefined }}"
ng-attr-autofocus="{{ form.autofocus || undefined }}"
ng-disabled="form.disabled">
<optgroup ng-repeat="group in config.data" label="{{::group.category | uppercase }}">
<select class="form-control at-InputSelect-select" ng-model="state.value"
ng-attr-tabindex="{{ tab || undefined }}"
ng-disabled="state.disabled">
<optgroup ng-repeat="group in state.data" label="{{::group.category | uppercase }}">
<option ng-repeat="item in group.data" value="{{ item.name }}">
{{ item.name }}
</option>

34
awx/ui/client/lib/components/input/text.directive.js
View File

@ -1,33 +1,31 @@
function link (scope, el, attrs, controllers) {
function atInputTextLink (scope, el, attrs, controllers) {
let formController = controllers[0];
let inputController = controllers[1];
let input = el.find('input')[0];
inputController.init(formController, scope, input);
if (scope.tab === '1') {
el.find('input')[0].focus();
}
inputController.init(formController, scope);
}
function AtInputTextController () {
let vm = this || {};
let state;
let scope;
let input;
let state;
let form;
vm.init = (_form_, _scope_, _input_) => {
vm.init = (_form_, _scope_) => {
form = _form_;
scope = _scope_;
input = _input_;
state = scope.state || {};
scope.config.state = scope.config.state || {};
state = scope.config.state;
state.required = scope.config.options.required;
state.isValid = state.isValid || false;
state.message = state.message || '';
state.required = state.required || false;
state.isValid = state.isValid || false;
state.disabled = state.disabled || false;
scope.form = form.use('input', state, input);
form.use('input', scope);
vm.check();
};
@ -37,7 +35,9 @@ function AtInputTextController () {
if (state.required && !state.value) {
isValid = false;
} else if (state.validate && !state.validate(scope.config.input)) {
}
if (state.validate && !state.validate(state.value)) {
isValid = false;
}
@ -63,9 +63,9 @@ function atInputText (pathService) {
templateUrl: pathService.getPartialPath('components/input/text'),
controller: AtInputTextController,
controllerAs: 'vm',
link,
link: atInputTextLink,
scope: {
config: '=',
state: '=',
col: '@',
tab: '@'
}

13
awx/ui/client/lib/components/input/text.partial.html
View File

@ -1,11 +1,10 @@
<div class="col-sm-{{::col}}">
<div class="form-group at-u-flat">
<at-input-label config="config"></at-input-label>
<input type="text" class="form-control at-Input" ng-model="config.state.value"
ng-attr-autofocus="{{ form.autofocus || undefined }}"
ng-attr-maxlength="{{ config.options.max_length || undefined }}"
tabindex="{{ form.tabindex || undefined }}"
placeholder="{{::config.placeholder}}"
ng-change="vm.check()" ng-disabled="form.disabled" />
<at-input-label state="state"></at-input-label>
<input type="text" class="form-control at-Input" ng-model="state.value"
ng-attr-maxlength="{{ state.options.max_length || undefined }}"
ng-attr-tabindex="{{ tab || undefined }}"
ng-attr-placeholder="{{::state.placeholder || undefined }}"
ng-change="vm.check()" ng-disabled="state.disabled" />
</div>
</div>

5
awx/ui/client/lib/components/panel/body.directive.js
View File

@ -1,9 +1,12 @@
function atPanelBody (pathService) {
return {
restrict: 'E',
require: '^^atPanel',
replace: true,
transclude: true,
templateUrl: pathService.getPartialPath('components/panel/body'),
scope: {
state: '='
}
};
}

6
awx/ui/client/lib/components/panel/heading.directive.js
View File

@ -6,12 +6,10 @@ function atPanelHeading (pathService) {
return {
restrict: 'E',
require: '^^atPanel',
replace: true,
transclude: true,
templateUrl: pathService.getPartialPath('components/panel/heading'),
link,
scope: {
config: '='
}
link
};
}

2
awx/ui/client/lib/components/panel/heading.partial.html
View File

@ -1,7 +1,7 @@
<div class="row">
<div class="col-xs-10">
<h3 class="at-Panel-headingTitle">
{{ config.text }}
<ng-transclude></ng-transclude>
</h3>
</div>
<div class="col-xs-2">

9
awx/ui/client/lib/components/panel/panel.directive.js
View File

@ -6,24 +6,25 @@ function dismiss ($state) {
$state.go('^');
}
function controller ($state) {
function AtPanelController ($state) {
let vm = this;
vm.dismiss = dismiss.bind(vm, $state);
vm.use = use;
}
controller.$inject = ['$state'];
AtPanelController.$inject = ['$state'];
function atPanel (pathService) {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: pathService.getPartialPath('components/panel/panel'),
controller,
controller: AtPanelController,
controllerAs: 'vm',
scope: {
config: '='
state: '='
}
};
}

2
awx/ui/client/lib/components/popover/popover.directive.js
View File

@ -60,7 +60,7 @@ function atPopover (_pathService_) {
templateUrl: pathService.getPartialPath('components/popover/popover'),
link,
scope: {
config: '='
state: '='
}
};
}

4
awx/ui/client/lib/components/popover/popover.partial.html
View File

@ -1,4 +1,4 @@
<div ng-show="config.options.help_text" class="at-Popover">
<div ng-show="state.options.help_text" class="at-Popover">
<span class="at-Popover-icon">
<i class="fa fa-question-circle"></i>
</span>
@ -6,6 +6,6 @@
<div class="at-Popover-arrow">
<i class="fa fa-caret-left fa-2x"></i>
</div>
<div class="at-Popover-content">{{::config.options.help_text}}</div>
<div class="at-Popover-content">{{::state.options.help_text}}</div>
</div>
</div>

36
awx/ui/client/lib/models/Base.js
View File

@ -1,5 +1,12 @@
let $resource;
function get() {
return $resource(this.path).get().$promise
.then(response => {
this.model.data = response;
});
}
function options () {
let actions = {
options: {
@ -13,13 +20,6 @@ function options () {
});
}
function get () {
return $resource(this.path).get().$promise
.then(response => {
this.model.data = response;
});
}
function getPostOptions (name) {
return this.model.options.actions.POST[name];
}
@ -30,18 +30,20 @@ function normalizePath (resource) {
return `${version}${resource}/`;
}
function Base (_$resource_) {
function BaseModel (_$resource_) {
$resource = _$resource_;
return () => ({
model: {},
get,
options,
getPostOptions,
normalizePath
});
return function extend (path) {
this.get = get;
this.options = options;
this.getPostOptions = getPostOptions;
this.normalizePath = normalizePath;
this.model = {};
this.path = this.normalizePath(path);
};
}
Base.$inject = ['$resource'];
BaseModel.$inject = ['$resource'];
export default Base;
export default BaseModel;

10
awx/ui/client/lib/models/Credential.js
View File

@ -1,9 +1,7 @@
function Credential (BaseModel) {
Object.assign(this, BaseModel());
this.path = this.normalizePath('credentials');
function CredentialModel (BaseModel) {
BaseModel.call(this, 'credentials');
}
Credential.$inject = ['BaseModel'];
CredentialModel.$inject = ['BaseModel'];
export default Credential;
export default CredentialModel;

10
awx/ui/client/lib/models/CredentialType.js
View File

@ -1,7 +1,5 @@
function CredentialType (BaseModel) {
Object.assign(this, BaseModel());
this.path = this.normalizePath('credential_types');
function CredentialTypeModel (BaseModel) {
BaseModel.call(this, 'credential_types');
this.categorizeByKind = () => {
let group = {};
@ -40,6 +38,6 @@ function CredentialType (BaseModel) {
};
}
CredentialType.$inject = ['BaseModel'];
CredentialTypeModel.$inject = ['BaseModel'];
export default CredentialType;
export default CredentialTypeModel;

21
awx/ui/client/lib/services/event.service.js
View File

@ -1,14 +1,13 @@
function addListeners (scope, list) {
function EventService () {
this.addListeners = list => {
let listeners = [];
list.forEach(args => {
listeners.push(addListener.call(null, scope, ...args));
});
list.forEach(args => listeners.push(this.addListener(...args)));
return listeners;
}
};
function addListener (scope, el, name, fn) {
this.addListener = (el, name, fn) => {
let listener = {
fn,
name,
@ -18,18 +17,12 @@ function addListener (scope, el, name, fn) {
listener.el.addEventListener(listener.name, listener.fn);
return listener;
}
};
function remove (listeners) {
this.remove = listeners => {
listeners.forEach(listener => {
listener.el.removeEventListener(listener.name, listener.fn);
});
}
function EventService () {
return {
addListeners,
remove
};
}

4
awx/ui/client/lib/services/index.js
View File

@ -3,5 +3,5 @@ import PathService from './path.service';
angular
.module('at.lib.services', [])
.factory('EventService', EventService)
.factory('PathService', PathService);
.service('EventService', EventService)
.service('PathService', PathService);

13
awx/ui/client/lib/services/path.service.js
View File

@ -1,16 +1,11 @@
function getPartialPath (path) {
function PathService () {
this.getPartialPath = path => {
return `/static/partials/${path}.partial.html`;
}
};
function getViewPath (path) {
this.getViewPath = path => {
return `/static/views/${path}.view.html`;
}
function PathService () {
return {
getPartialPath,
getViewPath
};
}
export default PathService;

5
awx/ui/client/lib/theme/_utility.less
View File

@ -1,3 +1,8 @@
.at-u-noSpace {
margin: 0;
padding: 0;
}
.at-u-flat {
padding-top: 0;
padding-bottom: 0;

1
awx/ui/client/lib/theme/_variables.less
View File

@ -63,3 +63,4 @@
@at-border-radius: 5px;
@at-input-height: 34px;
@at-popover-width: 320px;
@at-inset-width: 5px;

0
echo Normal file
View File