Basic form
Change-Id: I7ee858b208730b110b355d3f72037f0975aaa356
diff --git a/src/app/core/field/field.html b/src/app/core/field/field.html
new file mode 100644
index 0000000..e472939
--- /dev/null
+++ b/src/app/core/field/field.html
@@ -0,0 +1,96 @@
+<label ng-if="vm.field.type !== 'object' && vm.field.type !== 'array'">{{vm.field.label}}</label>
+<input
+ xos-custom-validator custom-validator="vm.field.validators.custom || null"
+ ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select' && vm.field.type !== 'array'"
+ type="{{vm.field.type}}"
+ name="{{vm.name}}"
+ class="form-control"
+ ng-model="vm.ngModel"
+ ng-minlength="vm.field.validators.minlength || 0"
+ ng-maxlength="vm.field.validators.maxlength || 2000"
+ ng-required="vm.field.validators.required || false" />
+<select class="form-control" ng-if ="vm.field.type === 'select'"
+ name = "{{vm.name}}"
+ ng-options="item.id as item.label for item in vm.field.options"
+ ng-model="vm.ngModel"
+ ng-required="vm.field.validators.required || false">
+</select>
+<span class="boolean-field" ng-if="vm.field.type === 'boolean'">
+ <a
+ class="btn btn-success"
+ ng-show="vm.ngModel"
+ ng-click="vm.ngModel = false">
+ <i class="fa fa-check"></i>
+ </a>
+ <a
+ class="btn btn-danger"
+ ng-show="!vm.ngModel"
+ ng-click="vm.ngModel = true">
+ <i class="fa fa-remove"></i>
+ </a>
+ </span>
+<div
+ class="panel panel-default object-field"
+ ng-if="vm.field.type == 'object' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"
+>
+ <div class="panel-heading">{{vm.field.label}}</div>
+ <div class="panel-body">
+ <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">
+ <xos-field
+ name="k"
+ field="{label: vm.formatLabel(k), type: vm.getType(v)}"
+ ng-model="v">
+ </xos-field>
+ </div>
+ <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">
+ <xos-field
+ name="k"
+ field="{
+ label: v.label || vm.formatLabel(k),
+ type: v.type,
+ validators: v.validators
+ }"
+ ng-model="vm.ngModel[k]">
+ </xos-field>
+ </div>
+ </div>
+</div>
+<div
+ class="panel panel-default array-field"
+ ng-if="vm.field.type == 'array'">
+ <div class="panel-heading">{{vm.field.label}}</div>
+ <div class="panel-body selected">
+ <ul class="draggable" dnd-list="vm.ngModel">
+ <li
+ class="array-element"
+ ng-repeat="item in vm.ngModel"
+ dnd-draggable="item"
+ dnd-moved="vm.ngModel.splice($index, 1)"
+ dnd-effect-allowed="move"
+ dnd-selected="models.selected = item"
+ >
+ <div class="well well-sm text-center">
+ {{item}}
+ </div>
+ </li>
+ <div class="clearfix"></div>
+ </ul>
+ </div>
+ <div class="panel-body unselected">
+ <ul class="draggable" dnd-list="vm.field.availableOptions">
+ <li
+ class="array-element"
+ ng-repeat="item in vm.field.availableOptions"
+ dnd-draggable="item"
+ dnd-moved="vm.field.availableOptions.splice($index, 1)"
+ dnd-effect-allowed="move"
+ dnd-selected="models.selected = item"
+ >
+ <div class="well well-sm text-center">
+ {{item}}
+ </div>
+ </li>
+ <div class="clearfix"></div>
+ </ul>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/core/field/field.ts b/src/app/core/field/field.ts
new file mode 100644
index 0000000..ad36473
--- /dev/null
+++ b/src/app/core/field/field.ts
@@ -0,0 +1,59 @@
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+import {IXosFormHelpersService} from '../form/form-helpers';
+import * as _ from 'lodash';
+
+class FieldCtrl {
+ static $inject = ['$attrs', '$scope', 'ConfigHelpers', 'XosFormHelpers'];
+ // $inject = ['$onInit'];
+
+ public field: any;
+ public name: string;
+ public ngModel: any;
+ public getType = this.XosFormHelpers._getFieldFormat;
+ public formatLabel = this.ConfigHelpers.toLabel;
+
+ constructor(
+ private $attrs: ng.IAttributes,
+ private $scope: ng.IScope,
+ private ConfigHelpers: IXosConfigHelpersService,
+ private XosFormHelpers: IXosFormHelpersService
+ ) {
+
+ }
+
+ public isEmptyObject = (o: any) => o ? Object.keys(o).length === 0 : true;
+
+ $onInit() {
+ if (!this.name) {
+ throw new Error('[xosField] Please provide a field name');
+ }
+ if (!this.field) {
+ throw new Error('[xosField] Please provide a field definition');
+ }
+ if (!this.field.type) {
+ throw new Error('[xosField] Please provide a type in the field definition');
+ }
+ if (!this.$attrs['ngModel']) {
+ throw new Error('[xosField] Please provide an ng-model');
+ }
+
+
+ if (this.field.type === 'array') {
+ this.$scope.$watch(() => this.ngModel.length, () => {
+ this.field.availableOptions = _.difference(this.field.options, this.ngModel);
+ });
+ }
+
+ }
+}
+
+export const xosField: angular.IComponentOptions = {
+ template: require('./field.html'),
+ controllerAs: 'vm',
+ controller: FieldCtrl,
+ bindings: {
+ ngModel: '=',
+ name: '=',
+ field: '='
+ }
+};
diff --git a/src/app/core/form/form-helpers.ts b/src/app/core/form/form-helpers.ts
new file mode 100644
index 0000000..0677cbd
--- /dev/null
+++ b/src/app/core/form/form-helpers.ts
@@ -0,0 +1,106 @@
+import * as _ from 'lodash';
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+
+export interface IXosFormHelpersService {
+ _getFieldFormat(value: any): string;
+ parseModelField(fields: any): any[];
+ buildFormStructure(modelField: any[], customField: any[], model: any, order: string[]): any;
+}
+
+export class XosFormHelpers {
+ static $inject = ['ConfigHelpers'];
+
+ constructor (
+ private ConfigHelpers: IXosConfigHelpersService
+ ) {
+
+ }
+
+ public _isEmail = (text) => {
+ const re = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+ return re.test(text);
+ };
+
+ public _getFieldFormat = (value) => {
+ if (angular.isArray(value)) {
+ return 'array';
+ }
+
+ // check if is date
+ if (
+ angular.isDate(value) ||
+ (
+ !Number.isNaN(Date.parse(value)) && // Date.parse is a number
+ /^\d+-\d+-\d+\D\d+:\d+:\d+\.\d+\D/.test(value) // the format match ISO dates
+ )) {
+ return 'date';
+ }
+
+ // check if is boolean
+ // isNaN(false) = false, false is a number (0), true is a number (1)
+ if (typeof value === 'boolean') {
+ return 'boolean';
+ }
+
+ // check if a string is an email
+ if (this._isEmail(value)) {
+ return 'email';
+ }
+
+ // if null return string
+ if (angular.isString(value) || value === null) {
+ return 'text';
+ }
+
+ return typeof value;
+ };
+
+ public buildFormStructure = (modelField, customField, model, order) => {
+ // TODO take an array as input
+ // NOTE do we want to support auto-generated forms??
+ // We can take that out of this component and autogenerate the config somewhere else
+ const orderedForm = {};
+
+ modelField = angular.extend(modelField, customField);
+ customField = customField || {};
+
+ if (order) {
+ _.each(order, function (key: string) {
+ orderedForm[key] = {};
+ });
+ }
+
+ _.each(Object.keys(modelField), (f) => {
+
+ orderedForm[f] = {
+ label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : this.ConfigHelpers.toLabel(f),
+ type: (customField[f] && customField[f].type) ? customField[f].type : this._getFieldFormat(model[f]),
+ validators: (customField[f] && customField[f].validators) ? customField[f].validators : {},
+ hint: (customField[f] && customField[f].hint) ? customField[f].hint : '',
+ };
+
+ if (customField[f] && customField[f].options) {
+ orderedForm[f].options = customField[f].options;
+ }
+ if (customField[f] && customField[f].properties) {
+ orderedForm[f].properties = customField[f].properties;
+ }
+ if (orderedForm[f].type === 'date') {
+ model[f] = new Date(model[f]);
+ }
+
+ if (orderedForm[f].type === 'number') {
+ model[f] = parseInt(model[f], 10);
+ }
+ });
+
+ return orderedForm;
+ };
+
+ public parseModelField = (fields) => {
+ return _.reduce(fields, (form, f) => {
+ form[f] = {};
+ return form;
+ }, {});
+}
+}
diff --git a/src/app/core/form/form.html b/src/app/core/form/form.html
new file mode 100644
index 0000000..a583269
--- /dev/null
+++ b/src/app/core/form/form.html
@@ -0,0 +1,18 @@
+<form name="vm.{{vm.config.formName || 'form'}}" novalidate>
+ <div class="form-group" ng-repeat="(name, field) in vm.formField">
+ <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>
+ <xos-validation field="vm[vm.config.formName || 'form'][name]" form = "vm[vm.config.formName || 'form']"></xos-validation>
+ <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>
+ </div>
+ <div class="form-group" ng-if="vm.config.actions">
+ <!--<xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>-->
+ <button role="button" href=""
+ ng-repeat="action in vm.config.actions"
+ ng-click="action.cb(vm.ngModel, vm[vm.config.formName || 'form'])"
+ class="btn btn-{{action.class}}"
+ title="{{action.label}}">
+ <i class="fa fa-{{action.icon}}"></i>
+ {{action.label}}
+ </button>
+ </div>
+</form>
\ No newline at end of file
diff --git a/src/app/core/form/form.ts b/src/app/core/form/form.ts
new file mode 100644
index 0000000..a5cfa67
--- /dev/null
+++ b/src/app/core/form/form.ts
@@ -0,0 +1,81 @@
+// TODO clean this mess
+
+import * as _ from 'lodash';
+import {IXosFormHelpersService} from './form-helpers';
+import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+
+class FormCtrl {
+ $inject = ['$onInit', '$scope', 'XosFormHelpers', 'ConfigHelpers'];
+
+ public ngModel: any;
+ public excludedField: string[];
+ public formField: any;
+ private config: any;
+
+ constructor (
+ private $scope: ng.IScope,
+ private XosFormHelpers: IXosFormHelpersService,
+ private ConfigHelpers: IXosConfigHelpersService
+ ) {
+
+ }
+
+ $onInit() {
+ if (!this.config) {
+ throw new Error('[xosForm] Please provide a configuration via the "config" attribute');
+ }
+
+ if (!this.config.actions) {
+ throw new Error('[xosForm] Please provide an action list in the configuration');
+ }
+
+ if (!this.config.feedback) {
+ this.config.feedback = {
+ show: false,
+ message: 'Form submitted successfully !!!',
+ type: 'success'
+ };
+ }
+
+ // TODO Define this list in a service (eg: ConfigHelper)
+ this.excludedField = this.ConfigHelpers.excluded_fields;
+ if (this.config && this.config.exclude) {
+ this.excludedField = this.excludedField.concat(this.config.exclude);
+ }
+
+ this.formField = [];
+
+ this.$scope.$watch(() => this.config, () => {
+ if (!this.ngModel) {
+ return;
+ }
+ let diff = _.difference(Object.keys(this.ngModel), this.excludedField);
+ let modelField = this.XosFormHelpers.parseModelField(diff);
+ this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, this.ngModel, this.config.order);
+ }, true);
+
+ this.$scope.$watch(() => this.ngModel, (model) => {
+ console.log(this.ngModel);
+ // empty from old stuff
+ this.formField = {};
+ if (!model) {
+ return;
+ }
+ let diff = _.difference(Object.keys(model), this.excludedField);
+ let modelField = this.XosFormHelpers.parseModelField(diff);
+ this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, model, this.config.order);
+ console.log(this.formField);
+ });
+
+ }
+}
+
+export const xosForm: angular.IComponentOptions = {
+ template: require('./form.html'),
+ controllerAs: 'vm',
+ controller: FormCtrl,
+ bindings: {
+ ngModel: '=',
+ config: '='
+ }
+};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 2a9603c..a89edf5 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -8,6 +8,10 @@
import {NavigationService} from './services/navigation';
import {PageTitle} from './services/page-title';
import {ConfigHelpers} from './services/helpers/config.helpers';
+import {xosLinkWrapper} from './link-wrapper/link-wrapper';
+import {XosFormHelpers} from './form/form-helpers';
+import {xosForm} from './form/form';
+import {xosField} from './field/field';
export const xosCore = 'xosCore';
@@ -17,9 +21,13 @@
.provider('RuntimeStates', RuntimeStates)
.service('NavigationService', NavigationService)
.service('PageTitle', PageTitle)
+ .service('XosFormHelpers', XosFormHelpers)
.service('ConfigHelpers', ConfigHelpers)
+ .directive('xosLinkWrapper', xosLinkWrapper)
.component('xosHeader', xosHeader)
.component('xosFooter', xosFooter)
.component('xosNav', xosNav)
.component('xosLogin', xosLogin)
- .component('xosTable', xosTable);
+ .component('xosTable', xosTable)
+ .component('xosForm', xosForm)
+ .component('xosField', xosField);
diff --git a/src/app/core/link-wrapper/link-wrapper.ts b/src/app/core/link-wrapper/link-wrapper.ts
new file mode 100644
index 0000000..add8d48
--- /dev/null
+++ b/src/app/core/link-wrapper/link-wrapper.ts
@@ -0,0 +1,13 @@
+import IDirective = angular.IDirective;
+export function xosLinkWrapper(): IDirective {
+ return {
+ template: `
+ <a ng-if="col.link" href="{{col.link(item)}}">
+ <div ng-transclude></div>
+ </a>
+ <div ng-transclude ng-if="!col.link"></div>
+ `,
+ restrict: 'A',
+ transclude: true
+ };
+};
diff --git a/src/app/core/nav/nav.html b/src/app/core/nav/nav.html
index a1292b8..8420839 100644
--- a/src/app/core/nav/nav.html
+++ b/src/app/core/nav/nav.html
@@ -13,7 +13,7 @@
{{route.label}}
</a>
<ul class="child-routes" ng-if="route.children" ng-class="{opened: route.opened}">
- <li ng-repeat="childRoute in route.children" ui-sref-active="active">
+ <li ng-repeat="childRoute in route.children | orderBy:'label'" ui-sref-active="active">
<a ng-if="childRoute.state" ui-sref="{{childRoute.state}}">{{childRoute.label}}</a>
<a ng-if="childRoute.url" href="#/{{childRoute.url}}">{{childRoute.label}}</a>
</li>
diff --git a/src/app/core/nav/nav.ts b/src/app/core/nav/nav.ts
index cd249b9..6c6537e 100644
--- a/src/app/core/nav/nav.ts
+++ b/src/app/core/nav/nav.ts
@@ -14,7 +14,7 @@
// - Base routes (defined from configuration based on BRAND)
// - Autogenerated routes (nested somewhere)
// - Service Routes (dynamically added)
-
+ this.routes = [];
this.$scope.$watch(() => this.navigationService.query(), (routes) => {
this.routes = routes;
});
diff --git a/src/app/core/services/helpers/config.helpers.ts b/src/app/core/services/helpers/config.helpers.ts
index 3e0af96..9d0c191 100644
--- a/src/app/core/services/helpers/config.helpers.ts
+++ b/src/app/core/services/helpers/config.helpers.ts
@@ -8,7 +8,8 @@
}
export interface IXosConfigHelpersService {
- modeldefToTableCfg(fields: IXosModelDefsField[]): any[]; // TODO use a proper interface
+ excluded_fields: string[];
+ modeldefToTableCfg(fields: IXosModelDefsField[], baseUrl: string): any[]; // TODO use a proper interface
pluralize(string: string, quantity?: number, count?: boolean): string;
toLabel(string: string, pluralize?: boolean): string;
toLabels(string: string[], pluralize?: boolean): string[];
@@ -16,6 +17,22 @@
export class ConfigHelpers {
+ excluded_fields = [
+ 'created',
+ 'updated',
+ 'enacted',
+ 'policed',
+ 'backend_register',
+ 'deleted',
+ 'write_protect',
+ 'lazy_blocked',
+ 'no_sync',
+ 'no_policy',
+ 'omf_friendly',
+ 'enabled',
+ 'validators'
+ ];
+
constructor() {
pluralize.addIrregularRule('xos', 'xosses');
pluralize.addPluralRule(/slice$/i, 'slices');
@@ -46,23 +63,10 @@
return this.capitalizeFirst(string);
}
- modeldefToTableCfg(fields: IXosModelDefsField[]): IXosTableColumn[] {
- const excluded_fields = [
- 'created',
- 'updated',
- 'enacted',
- 'policed',
- 'backend_register',
- 'deleted',
- 'write_protect',
- 'lazy_blocked',
- 'no_sync',
- 'no_policy',
- 'omf_friendly',
- 'enabled'
- ];
+ modeldefToTableCfg(fields: IXosModelDefsField[], baseUrl: string): IXosTableColumn[] {
+
const cfg = _.map(fields, (f) => {
- if (excluded_fields.indexOf(f.name) > -1) {
+ if (this.excluded_fields.indexOf(f.name) > -1) {
return;
}
const col: IXosTableColumn = {
@@ -70,6 +74,11 @@
prop: f.name
};
+ if (f.name === 'id') {
+ // NOTE can we find a better method to generalize?
+ col.link = item => `#/core${baseUrl.replace(':id?', item.id)}`;
+ }
+
if (f.name === 'backend_status') {
col.type = 'icon';
col.formatter = (item) => {
diff --git a/src/app/core/services/page-title.spec.ts b/src/app/core/services/page-title.spec.ts
index 4ff2be6..0959e57 100644
--- a/src/app/core/services/page-title.spec.ts
+++ b/src/app/core/services/page-title.spec.ts
@@ -28,4 +28,9 @@
service.set('sample');
expect($window.document.title).toEqual(`${StyleConfig.projectName} - sample`);
});
+
+ it('should convert dots to >', () => {
+ service.set('core.sample.bread.crumb');
+ expect($window.document.title).toEqual(`${StyleConfig.projectName} - core > sample > bread > crumb`);
+ });
});
diff --git a/src/app/core/services/page-title.ts b/src/app/core/services/page-title.ts
index fb1e5a7..865149d 100644
--- a/src/app/core/services/page-title.ts
+++ b/src/app/core/services/page-title.ts
@@ -12,7 +12,7 @@
private $transitions: any // missing definition
) {
this.$transitions.onSuccess({ to: '**' }, (transtion) => {
- this.set(this.formatStateName(transtion.$to().name));
+ this.set(transtion.$to().name);
});
}
@@ -21,12 +21,12 @@
}
set(title: string) {
- this.$window.document.title = `${StyleConfig.projectName} - ${title}`;
+ this.$window.document.title = `${StyleConfig.projectName} - ${this.formatStateName(title)}`;
}
private formatStateName(stateName: string): string {
// TODO pluralize and capitalize first letter only
- return stateName.replace('xos.', '').toUpperCase();
+ return stateName.replace('xos.', '').split('.').join(' > ');
}
}
diff --git a/src/app/core/table/table.html b/src/app/core/table/table.html
index f425c0b..23b5a2f 100644
--- a/src/app/core/table/table.html
+++ b/src/app/core/table/table.html
@@ -26,29 +26,29 @@
</tr>
</thead>
<tbody ng-if="vm.config.filter == 'field'">
- <tr>
- <td ng-repeat="col in vm.columns">
- <input
- ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
- class="form-control"
- placeholder="Type to search by {{col.label}}"
- type="text"
- ng-model="vm.query[col.prop]"/>
- <select
- ng-if="col.type === 'boolean'"
- class="form-control"
- ng-model="vm.query[col.prop]">
- <option value="">-</option>
- <option value="true">True</option>
- <option value="false">False</option>
- </select>
- </td>
- <td ng-if="vm.config.actions"></td>
- </tr>
+ <tr>
+ <td ng-repeat="col in vm.columns">
+ <input
+ ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
+ class="form-control"
+ placeholder="Type to search by {{col.label}}"
+ type="text"
+ ng-model="vm.query[col.prop]"/>
+ <select
+ ng-if="col.type === 'boolean'"
+ class="form-control"
+ ng-model="vm.query[col.prop]">
+ <option value="">-</option>
+ <option value="true">True</option>
+ <option value="false">False</option>
+ </select>
+ </td>
+ <td ng-if="vm.config.actions"></td>
+ </tr>
</tbody>
<tbody>
<tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
- <td ng-repeat="col in vm.columns">
+ <td ng-repeat="col in vm.columns" xos-link-wrapper>
<span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
<span ng-if="col.type === 'boolean'">
<i class="fa"