From 5d01340f1860bd8d0cce53a0480c7152deae813e Mon Sep 17 00:00:00 2001 From: gconsidine Date: Tue, 2 May 2017 17:04:25 -0400 Subject: [PATCH] Add models and select component --- .editorconfig | 2 +- awx/ui/.eslintignore | 3 +- awx/ui/client/components/index.js | 4 +++ awx/ui/client/components/input/_index.less | 35 +++++++++++++++---- .../components/input/select.directive.js | 19 ++++++++++ .../components/input/select.partial.html | 18 ++++++++++ .../client/components/input/text.directive.js | 14 ++++++++ .../client/components/input/text.partial.html | 8 +++++ .../components/panel/heading.partial.html | 9 ++--- .../components/toggle/content.directive.js | 2 +- awx/ui/client/lib/credentials.factory.js | 7 ---- awx/ui/client/models/Base.js | 30 ++++++++++++++++ awx/ui/client/models/Credential.js | 0 awx/ui/client/models/CredentialType.js | 25 +++++++++++++ awx/ui/client/models/index.js | 15 ++++++++ awx/ui/client/src/app.js | 7 +++- .../credentials/add-credentials.controller.js | 26 ++++++++++++++ .../src/credentials/add-credentials.view.html | 26 ++++++++++++++ awx/ui/client/src/credentials/index.js | 21 +++++++---- awx/ui/client/test/index.js | 4 +-- awx/ui/client/theme/_variables.less | 15 ++++---- 21 files changed, 251 insertions(+), 39 deletions(-) create mode 100644 awx/ui/client/components/input/select.directive.js create mode 100644 awx/ui/client/components/input/select.partial.html create mode 100644 awx/ui/client/components/input/text.directive.js create mode 100644 awx/ui/client/components/input/text.partial.html delete mode 100644 awx/ui/client/lib/credentials.factory.js create mode 100644 awx/ui/client/models/Base.js create mode 100644 awx/ui/client/models/Credential.js create mode 100644 awx/ui/client/models/CredentialType.js create mode 100644 awx/ui/client/models/index.js create mode 100644 awx/ui/client/src/credentials/add-credentials.controller.js create mode 100644 awx/ui/client/src/credentials/add-credentials.view.html diff --git a/.editorconfig b/.editorconfig index efe5869a73..ed45b0d432 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,7 +11,7 @@ indent_style = tab indent_style = space indent_size = 4 -[**.{js,less}] +[**.{js,less,html}] indent_style = space indent_size = 4 diff --git a/awx/ui/.eslintignore b/awx/ui/.eslintignore index f2caf7483e..44869da7c0 100644 --- a/awx/ui/.eslintignore +++ b/awx/ui/.eslintignore @@ -13,4 +13,5 @@ tests client/**/*.js test -!client/components/**/*.js +!client/component/**/*.js +!client/model/**/*.js diff --git a/awx/ui/client/components/index.js b/awx/ui/client/components/index.js index 47b7fd8141..3841db9070 100644 --- a/awx/ui/client/components/index.js +++ b/awx/ui/client/components/index.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) diff --git a/awx/ui/client/components/input/_index.less b/awx/ui/client/components/input/_index.less index 68db7cceb3..4652ef3083 100644 --- a/awx/ui/client/components/input/_index.less +++ b/awx/ui/client/components/input/_index.less @@ -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; + } +} diff --git a/awx/ui/client/components/input/select.directive.js b/awx/ui/client/components/input/select.directive.js new file mode 100644 index 0000000000..dbf0b0375c --- /dev/null +++ b/awx/ui/client/components/input/select.directive.js @@ -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; diff --git a/awx/ui/client/components/input/select.partial.html b/awx/ui/client/components/input/select.partial.html new file mode 100644 index 0000000000..030a1077ad --- /dev/null +++ b/awx/ui/client/components/input/select.partial.html @@ -0,0 +1,18 @@ +
+ + +
diff --git a/awx/ui/client/components/input/text.directive.js b/awx/ui/client/components/input/text.directive.js new file mode 100644 index 0000000000..f6bab7d547 --- /dev/null +++ b/awx/ui/client/components/input/text.directive.js @@ -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; diff --git a/awx/ui/client/components/input/text.partial.html b/awx/ui/client/components/input/text.partial.html new file mode 100644 index 0000000000..91dbe26542 --- /dev/null +++ b/awx/ui/client/components/input/text.partial.html @@ -0,0 +1,8 @@ +
+ + +
diff --git a/awx/ui/client/components/panel/heading.partial.html b/awx/ui/client/components/panel/heading.partial.html index b18ee0a67d..ca88c959ba 100644 --- a/awx/ui/client/components/panel/heading.partial.html +++ b/awx/ui/client/components/panel/heading.partial.html @@ -1,11 +1,8 @@
-
-
- {{ config.title.text }} +
+
+
-
- -
diff --git a/awx/ui/client/components/toggle/content.directive.js b/awx/ui/client/components/toggle/content.directive.js index f8b3358201..3e54e07594 100644 --- a/awx/ui/client/components/toggle/content.directive.js +++ b/awx/ui/client/components/toggle/content.directive.js @@ -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: '=' } diff --git a/awx/ui/client/lib/credentials.factory.js b/awx/ui/client/lib/credentials.factory.js deleted file mode 100644 index 4148d6ca1b..0000000000 --- a/awx/ui/client/lib/credentials.factory.js +++ /dev/null @@ -1,7 +0,0 @@ -function credentials($resource) { - -} - -credentials.$inject = ['$resource']; - -angular.module('at.lib'); diff --git a/awx/ui/client/models/Base.js b/awx/ui/client/models/Base.js new file mode 100644 index 0000000000..62354abf22 --- /dev/null +++ b/awx/ui/client/models/Base.js @@ -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; diff --git a/awx/ui/client/models/Credential.js b/awx/ui/client/models/Credential.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/awx/ui/client/models/CredentialType.js b/awx/ui/client/models/CredentialType.js new file mode 100644 index 0000000000..838924b2be --- /dev/null +++ b/awx/ui/client/models/CredentialType.js @@ -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; diff --git a/awx/ui/client/models/index.js b/awx/ui/client/models/index.js new file mode 100644 index 0000000000..845b2bb628 --- /dev/null +++ b/awx/ui/client/models/index.js @@ -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); + diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js index 46733e7d68..93bd8ac586 100644 --- a/awx/ui/client/src/app.js +++ b/awx/ui/client/src/app.js @@ -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' ]) diff --git a/awx/ui/client/src/credentials/add-credentials.controller.js b/awx/ui/client/src/credentials/add-credentials.controller.js new file mode 100644 index 0000000000..ea8fa34903 --- /dev/null +++ b/awx/ui/client/src/credentials/add-credentials.controller.js @@ -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; diff --git a/awx/ui/client/src/credentials/add-credentials.view.html b/awx/ui/client/src/credentials/add-credentials.view.html new file mode 100644 index 0000000000..242052bf68 --- /dev/null +++ b/awx/ui/client/src/credentials/add-credentials.view.html @@ -0,0 +1,26 @@ + + + Create Credentials + + + + + Details + Permissions + + +
+
+ +
+ +
+ +
+ +
+ +
+
+ + diff --git a/awx/ui/client/src/credentials/index.js b/awx/ui/client/src/credentials/index.js index f17464eb86..ceb3e14619 100644 --- a/awx/ui/client/src/credentials/index.js +++ b/awx/ui/client/src/credentials/index.js @@ -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 'test-add'; - } + 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); diff --git a/awx/ui/client/test/index.js b/awx/ui/client/test/index.js index fc5eb8400d..f54a6bef6a 100644 --- a/awx/ui/client/test/index.js +++ b/awx/ui/client/test/index.js @@ -1,5 +1,5 @@ import 'angular'; import 'angular-mocks'; -import '../components/index.js'; -import './panel.spec.js'; +import '../components'; +import './panel.spec'; diff --git a/awx/ui/client/theme/_variables.less b/awx/ui/client/theme/_variables.less index 27f49a3749..4e09ca6a45 100644 --- a/awx/ui/client/theme/_variables.less +++ b/awx/ui/client/theme/_variables.less @@ -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;