mirror of
https://github.com/ansible/awx.git
synced 2024-10-27 00:55:06 +03:00
Add models and select component
This commit is contained in:
parent
06deb0d7a7
commit
5d01340f18
@ -11,7 +11,7 @@ indent_style = tab
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[**.{js,less}]
|
||||
[**.{js,less,html}]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
|
@ -13,4 +13,5 @@ tests
|
||||
client/**/*.js
|
||||
test
|
||||
|
||||
!client/components/**/*.js
|
||||
!client/component/**/*.js
|
||||
!client/model/**/*.js
|
||||
|
@ -1,5 +1,7 @@
|
||||
import badge from './badge/badge.directive';
|
||||
import inputSearch from './input/search.directive';
|
||||
import inputSelect from './input/select.directive';
|
||||
import inputText from './input/text.directive';
|
||||
import panel from './panel/panel.directive';
|
||||
import panelHeading from './panel/heading.directive';
|
||||
import panelBody from './panel/body.directive';
|
||||
@ -10,6 +12,8 @@ angular
|
||||
.module('at.components', [])
|
||||
.directive('atBadge', badge)
|
||||
.directive('atInputSearch', inputSearch)
|
||||
.directive('atInputSelect', inputSelect)
|
||||
.directive('atInputText', inputText)
|
||||
.directive('atPanel', panel)
|
||||
.directive('atPanelHeading', panelHeading)
|
||||
.directive('atPanelBody', panelBody)
|
||||
|
@ -1,12 +1,35 @@
|
||||
.at-InputSearch-field {
|
||||
.at-Input {
|
||||
.at-placeholder(@at-gray-dark);
|
||||
|
||||
border-color: @at-gray-light;
|
||||
background-color: @at-white;
|
||||
font-size: @at-font-md;
|
||||
background: @at-white;
|
||||
border-radius: @at-border-radius-md;
|
||||
color: @at-gray-darkest;
|
||||
|
||||
&, &:focus, &:active {
|
||||
border-color: @at-gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
.at-InputSearch-field:focus {
|
||||
border-color: @at-gray-light;
|
||||
.at-Input-label {
|
||||
color: @at-gray-dark;
|
||||
font-size: small;
|
||||
font-weight: @at-font-weight-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.at-Input-label--required {
|
||||
color: @at-danger;
|
||||
font-weight: @at-font-weight-lg;
|
||||
font-size: @at-font-lg;
|
||||
line-height: 0.7;
|
||||
}
|
||||
|
||||
.at-Input--placeholder {
|
||||
color: @at-gray;
|
||||
}
|
||||
|
||||
.at-Dropdown-option--placeholder {
|
||||
&[value=""] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
19
awx/ui/client/components/input/select.directive.js
Normal file
19
awx/ui/client/components/input/select.directive.js
Normal file
@ -0,0 +1,19 @@
|
||||
// TODO: i18n
|
||||
|
||||
function atInputSelect () {
|
||||
function link (scope, element, attrs) {
|
||||
scope.active = false;
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
templateUrl: 'static/partials/components/input/select.partial.html',
|
||||
link,
|
||||
scope: {
|
||||
config: '='
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default atInputSelect;
|
18
awx/ui/client/components/input/select.partial.html
Normal file
18
awx/ui/client/components/input/select.partial.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div class="form-group">
|
||||
<label class="at-Input-label">
|
||||
<span ng-if="config.required" class="at-Input-label--required">*</span>
|
||||
<span>{{ config.label }}</span>
|
||||
</label>
|
||||
<select class="form-control at-Input at-Dropdown" ng-model="config.input"
|
||||
ng-mousedown="opened = opened || true"
|
||||
ng-class="{ 'at-Input--placeholder': input === undefined && !opened }">
|
||||
<option class="at-Dropdown-option--placeholder" value="" disabled selected>
|
||||
SELECT A TYPE
|
||||
</option>
|
||||
<optgroup ng-repeat="group in config.data" label="{{ group.category | uppercase }}">
|
||||
<option ng-repeat="item in group.data" value="{{ item.id }}">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
14
awx/ui/client/components/input/text.directive.js
Normal file
14
awx/ui/client/components/input/text.directive.js
Normal file
@ -0,0 +1,14 @@
|
||||
// TODO: i18n
|
||||
|
||||
function atInputText () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
templateUrl: 'static/partials/components/input/text.partial.html',
|
||||
scope: {
|
||||
config: '='
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default atInputText;
|
8
awx/ui/client/components/input/text.partial.html
Normal file
8
awx/ui/client/components/input/text.partial.html
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="form-group">
|
||||
<label class="at-Input-label">
|
||||
<span ng-if="config.required" class="at-Input-label--required">*</span>
|
||||
<span>{{ config.label | uppercase }}</span>
|
||||
</label>
|
||||
<input type="text" class="form-control at-Input" ng-model="config.input"
|
||||
placeholder="{{ config.placeholder }}" />
|
||||
</div>
|
@ -1,11 +1,8 @@
|
||||
<div class="panel-heading at-Panel-heading">
|
||||
<div ng-if="config" class="at-Title-row">
|
||||
<div ng-if="config.title.text" class="at-Title-text">
|
||||
{{ config.title.text }}
|
||||
<div class="at-Title-row">
|
||||
<div class="at-Title-text">
|
||||
<ng-transclude></ng-transclude>
|
||||
</div>
|
||||
<at-badge config="config.badge"></at-badge>
|
||||
</div>
|
||||
|
||||
<ng-if="!config" ng-transclude></ng-transclude>
|
||||
</div>
|
||||
|
||||
|
@ -2,7 +2,7 @@ function atToggleContent () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
templateUrl: 'static/partials/components/toggle/content.partial.html',
|
||||
templateUrl: 'static/partials/component/toggle/content.partial.html',
|
||||
scope: {
|
||||
config: '='
|
||||
}
|
||||
|
@ -1,7 +0,0 @@
|
||||
function credentials($resource) {
|
||||
|
||||
}
|
||||
|
||||
credentials.$inject = ['$resource'];
|
||||
|
||||
angular.module('at.lib');
|
30
awx/ui/client/models/Base.js
Normal file
30
awx/ui/client/models/Base.js
Normal file
@ -0,0 +1,30 @@
|
||||
function get () {
|
||||
return this.model.get().$promise
|
||||
.then(response => {
|
||||
this.response = response;
|
||||
this.data = this.response.results;
|
||||
});
|
||||
}
|
||||
|
||||
function normalizePath (resource) {
|
||||
let version = '/api/v2/';
|
||||
|
||||
return `${version}${resource}/`;
|
||||
}
|
||||
|
||||
function Base ($resource) {
|
||||
return (resource, params, actions) => {
|
||||
let path = normalizePath(resource);
|
||||
|
||||
return {
|
||||
data: null,
|
||||
response: null,
|
||||
model: $resource(path, params, actions),
|
||||
get
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
Base.$inject = ['$resource'];
|
||||
|
||||
export default Base;
|
0
awx/ui/client/models/Credential.js
Normal file
0
awx/ui/client/models/Credential.js
Normal file
25
awx/ui/client/models/CredentialType.js
Normal file
25
awx/ui/client/models/CredentialType.js
Normal file
@ -0,0 +1,25 @@
|
||||
function categorizeByKind () {
|
||||
let group = {};
|
||||
|
||||
this.data.forEach(result => {
|
||||
group[result.kind] = group[result.kind] || [];
|
||||
group[result.kind].push(result);
|
||||
});
|
||||
|
||||
return Object.keys(group).map(category => ({
|
||||
data: group[category],
|
||||
category
|
||||
}));
|
||||
}
|
||||
|
||||
function CredentialType (Base) {
|
||||
let base = Base('credential_types');
|
||||
|
||||
return Object.assign(base, {
|
||||
categorizeByKind
|
||||
});
|
||||
}
|
||||
|
||||
CredentialType.$inject = ['Base'];
|
||||
|
||||
export default CredentialType;
|
15
awx/ui/client/models/index.js
Normal file
15
awx/ui/client/models/index.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Base from './Base';
|
||||
import CredentialType from './CredentialType';
|
||||
|
||||
function config ($resourceProvider) {
|
||||
$resourceProvider.defaults.stripTrailingSlashes = false;
|
||||
}
|
||||
|
||||
config.$inject = ['$resourceProvider'];
|
||||
|
||||
angular
|
||||
.module('at.models', [])
|
||||
.config(config)
|
||||
.factory('Base', Base)
|
||||
.factory('CredentialType', CredentialType);
|
||||
|
@ -7,6 +7,7 @@
|
||||
// Vendor dependencies
|
||||
import 'jquery';
|
||||
import 'angular';
|
||||
import 'angular-resource';
|
||||
import 'angular-gettext';
|
||||
import 'bootstrap';
|
||||
import 'jquery-ui';
|
||||
@ -72,6 +73,7 @@ import scheduler from './scheduler/main';
|
||||
import instanceGroups from './instance-groups/main';
|
||||
|
||||
import '../components';
|
||||
import '../models';
|
||||
import './credentials';
|
||||
|
||||
var tower = angular.module('Tower', [
|
||||
@ -132,7 +134,10 @@ var tower = angular.module('Tower', [
|
||||
'PromptDialog',
|
||||
'AWDirectives',
|
||||
'features',
|
||||
'at.components',
|
||||
|
||||
'ngResource',
|
||||
'at.component',
|
||||
'at.model',
|
||||
'at.feature.credentials'
|
||||
])
|
||||
|
||||
|
26
awx/ui/client/src/credentials/add-credentials.controller.js
Normal file
26
awx/ui/client/src/credentials/add-credentials.controller.js
Normal file
@ -0,0 +1,26 @@
|
||||
function AddCredentialsController (credentialType) {
|
||||
let vm = this || {};
|
||||
|
||||
vm.name = {
|
||||
label: 'Name',
|
||||
required: true
|
||||
};
|
||||
|
||||
vm.description = {
|
||||
label: 'Description'
|
||||
};
|
||||
|
||||
vm.kind = {
|
||||
label: 'Type',
|
||||
required: true,
|
||||
text: 'kind',
|
||||
value: 'id',
|
||||
data: credentialType.categorizeByKind()
|
||||
};
|
||||
}
|
||||
|
||||
AddCredentialsController.$inject = [
|
||||
'credentialType'
|
||||
];
|
||||
|
||||
export default AddCredentialsController;
|
26
awx/ui/client/src/credentials/add-credentials.view.html
Normal file
26
awx/ui/client/src/credentials/add-credentials.view.html
Normal file
@ -0,0 +1,26 @@
|
||||
<at-panel>
|
||||
<at-panel-heading>
|
||||
Create Credentials
|
||||
</at-panel-heading>
|
||||
|
||||
<at-panel-body>
|
||||
<at-tab-navigation>
|
||||
<at-tab>Details</at-tab>
|
||||
<at-tab>Permissions</at-tab>
|
||||
</at-tab-navigation>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<at-input-text config="vm.name"></at-input-text>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<at-input-text config="vm.description"></at-input-text>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<at-input-select config="vm.kind"></at-input-select>
|
||||
</div>
|
||||
</div>
|
||||
</at-panel-body>
|
||||
</at-panel>
|
@ -1,8 +1,9 @@
|
||||
import CredentialList from './credentials.list.js';
|
||||
import ListController from './list/credentials-list.controller';
|
||||
import AddController from './add-credentials.controller.js';
|
||||
import { N_ } from '../i18n';
|
||||
|
||||
function routes ($stateExtenderProvider) {
|
||||
function config ($stateExtenderProvider) {
|
||||
let stateExtender = $stateExtenderProvider.$get();
|
||||
|
||||
stateExtender.addState({
|
||||
@ -46,10 +47,15 @@ function routes ($stateExtenderProvider) {
|
||||
},
|
||||
views: {
|
||||
'add@credentials': {
|
||||
templateProvider: function() {
|
||||
return '<span>test-add</span>';
|
||||
}
|
||||
templateUrl: '/static/views/credentials/add-credentials.view.html',
|
||||
controller: AddController,
|
||||
controllerAs: 'vm'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
credentialType: ['CredentialType', CredentialType => {
|
||||
return CredentialType.get().then(() => CredentialType);
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
@ -69,12 +75,13 @@ function routes ($stateExtenderProvider) {
|
||||
});
|
||||
}
|
||||
|
||||
routes.$inject = [
|
||||
config.$inject = [
|
||||
'$stateExtenderProvider'
|
||||
];
|
||||
|
||||
angular
|
||||
.module('at.feature.credentials', [])
|
||||
.config(routes)
|
||||
.config(config)
|
||||
.factory('CredentialList', CredentialList)
|
||||
.controller('ListController', ListController);
|
||||
.controller('ListController', ListController)
|
||||
.controller('AddController', AddController);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import 'angular';
|
||||
import 'angular-mocks';
|
||||
|
||||
import '../components/index.js';
|
||||
import './panel.spec.js';
|
||||
import '../components';
|
||||
import './panel.spec';
|
||||
|
@ -1,23 +1,24 @@
|
||||
@at-white: #ffffff;
|
||||
|
||||
@at-gray-lightest: #fafafa;
|
||||
@at-gray-lighter: #f6f6f6;
|
||||
@at-gray-light: #b7b7b7;
|
||||
@at-gray: #848992;
|
||||
@at-gray-dark: #707070;
|
||||
|
||||
@at-link: #337AB7;
|
||||
@at-gray-darkest: #161b1f;
|
||||
@at-link: #337ab7;
|
||||
@at-link-dark: #286090;
|
||||
|
||||
@at-success: #5CB85C;
|
||||
@at-success: #5cb85c;
|
||||
@at-success-dark: #449D44;
|
||||
|
||||
@at-danger: #449D44;
|
||||
@at-danger: #d9534f;
|
||||
|
||||
@at-font-sm: 12px;
|
||||
@at-font-md: 14px;
|
||||
@at-font-lg: 16px;
|
||||
|
||||
@at-font-weight-sm: 400;
|
||||
@at-font-weight-md: 700;
|
||||
@at-font-weight-lg: 900;
|
||||
|
||||
@at-padding-xxs: 5px;
|
||||
@at-padding-xs: 6px;
|
||||
@at-padding-sm: 10px;
|
||||
|
Loading…
Reference in New Issue
Block a user