Add models and select component

.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
 

awx/ui/.eslintignore

@@ -13,4 +13,5 @@ tests
 client/**/*.js
 test
 
-!client/components/**/*.js
+!client/component/**/*.js
+!client/model/**/*.js

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)

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;
+    }
+}

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;

awx/ui/client/components/input/select.partial.html

@@ -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>

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;

awx/ui/client/components/input/text.partial.html

@@ -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>

awx/ui/client/components/panel/heading.partial.html

@@ -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>
 

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

awx/ui/client/lib/credentials.factory.js

@@ -1,7 +0,0 @@
-function credentials($resource) {
-
-}
-
-credentials.$inject = ['$resource'];
-
-angular.module('at.lib');

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;

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;

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);
+

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'
 ])
 

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;

awx/ui/client/src/credentials/add-credentials.view.html

@@ -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>

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 '<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);

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';

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;