Rob Cresswell 0e957dd41a Add Angular Schema Form
This patch adds Angular Schema Form[1] and its requirements to Horizon.
There are a number of advantages to this over the current methods of
defining forms and workflows:

- All fields have an individual template, making theming improvements,
  bug fixes, and bootstrap conformity easier.
- The file and line count, especially for workflows, is dramatically
  reduced. The Create Net workflow, for example, goes from 12+ files to
  2, with a big reduction in boilerplate HTML.
- All field validation messages are standardised, so we can match them
  across Horizon and plugins

What this patch contains:
- Many common form fields, including things like the themable checkboxes
  and selects.
- A basic modal template that can be passed with ui-bootstraps $modal
  service to take advantage of schema-form

Next steps:
- Remove the other modal templates so we can standardise. A single
  template opened from the $modal service is fine, and we shouldn't need
  several directives. In this case, we should deprecate them, as the
  modal forms will be used elsewhere.
- Map commonly used form items, like transfer tables, to a schema form
  type like array (they serve similar purposes, so maybe thats what
  should be replaced)
- Use themable selects instead of regular ones

1. http://schemaform.io/

Co-Authored-By: Tyr Johanson <tyr@hpe.com>
Implements: blueprint angular-schema-form
Change-Id: Ib22b2d0db2c4d4775fdef62a180cc994e8ae6280
2016-08-04 16:53:41 +00:00

159 lines
4.0 KiB
JavaScript

/*
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*global horizonPlugInModules*/
(function () {
'use strict';
/**
* Library modules - modules defined in third-party libraries, including
* angular's extensions.
*/
var libraryModules = [
'gettext',
'lrDragNDrop',
'ngCookies',
'ngSanitize',
'schemaForm',
'smart-table',
'ngFileUpload',
'ui.bootstrap'
];
/**
* Horizon's built-in modules, including modules from `framework` components
* and modules from `openstack_dashboard` application core components.
*/
var horizonBuiltInModules = [
'horizon.app.core',
'horizon.app.resources',
'horizon.app.tech-debt',
'horizon.auth',
'horizon.framework'
];
/**
* @ngdoc overview
* @name horizon.app
* @description
*
* # horizon.app
*
* Horizon's application level module depends on modules from three
* sources:
*
* 1) Library modules.
* 2) Horizon's built-in modules.
* 3) Horizon's plug-in modules.
*/
angular
.module('horizon.app', ['ngRoute']
.concat(libraryModules)
.concat(horizonBuiltInModules)
.concat(horizonPlugInModules)
)
.config(configHorizon)
.run(updateHorizon);
configHorizon.$inject = [
'$locationProvider',
'$routeProvider'
];
/**
* Configure the Horizon Angular Application.
* This sets up the $locationProvider Service to use HTML5 Mode and
* the Hash Prefix to use when it is not supported.
*
* It also sets the default Angular route which will apply if
* a link is clicked that doesn't match any current Angular route.
*
*/
function configHorizon($locationProvider, $routeProvider) {
if (angular.element('base').length === 1) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.otherwise({
template: '',
controller: 'RedirectController'
});
}
}
updateHorizon.$inject = [
'gettextCatalog',
'horizon.framework.conf.spinner_options',
'horizon.framework.util.tech-debt.helper-functions',
'$cookieStore',
'$http',
'$cookies',
'$route'
];
function updateHorizon(
gettextCatalog,
spinnerOptions,
hzUtils,
$cookieStore,
$http,
$cookies,
$route
) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
// expose the legacy utils module
horizon.utils = hzUtils;
horizon.conf.spinner_options = spinnerOptions;
if (angular.version.major === 1 && angular.version.minor < 4) {
horizon.cookies = angular.extend({}, $cookieStore, {
getObject: $cookieStore.get,
put: put,
putObject: put,
getRaw: getRaw
});
} else {
horizon.cookies = $cookies;
}
// rewire the angular-gettext catalog to use django catalog
gettextCatalog.setCurrentLanguage(horizon.languageCode);
gettextCatalog.setStrings(horizon.languageCode, django.catalog);
// because of angular startup, and our use of ng-include with
// embedded ng-view, we need to re-kick ngRoute after everything's
// resolved
$route.reload();
/*
* cookies are updated at the end of current $eval, so for the horizon
* namespace we need to wrap it in a $apply function.
*/
function put(key, value) {
angular.element('body').scope().$apply(function () {
$cookieStore.put(key, value);
});
}
function getRaw(key) {
return $cookies[key];
}
}
}());