Matteo Scandolo | 974c0e4 | 2016-05-25 16:02:16 -0700 | [diff] [blame^] | 1 | /** |
| 2 | * © OpenCORD |
| 3 | * |
| 4 | * Visit http://guide.xosproject.org/devguide/addview/ for more information |
| 5 | * |
| 6 | * Created by teone on 5/25/16. |
| 7 | */ |
| 8 | |
| 9 | (function () { |
| 10 | 'use strict'; |
| 11 | |
| 12 | angular.module('xos.uiComponents') |
| 13 | /** |
| 14 | * @ngdoc directive |
| 15 | * @name xos.uiComponents.directive:xosField |
| 16 | * @restrict E |
| 17 | * @description The xos-field directive. |
| 18 | * This component decide, give a field wich kind of input it need to print. |
| 19 | * @param {string} name The field name |
| 20 | * @param {object} field The field configuration: |
| 21 | * ``` |
| 22 | * { |
| 23 | * label: 'Label', |
| 24 | * type: 'number', //typeof field |
| 25 | * validators: {} // see xosForm for more details |
| 26 | * } |
| 27 | * ``` |
| 28 | * @param {mixed} ngModel The field value |
| 29 | */ |
| 30 | .directive('xosField', function(){ |
| 31 | return { |
| 32 | restrict: 'E', |
| 33 | scope: { |
| 34 | name: '=', |
| 35 | field: '=', |
| 36 | ngModel: '=' |
| 37 | }, |
| 38 | template: ` |
| 39 | <label>{{vm.field.label}}</label> |
| 40 | <input |
| 41 | ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object'" |
| 42 | type="{{vm.field.type}}" |
| 43 | name="{{vm.name}}" |
| 44 | class="form-control" |
| 45 | ng-model="vm.ngModel" |
| 46 | ng-minlength="vm.field.validators.minlength || 0" |
| 47 | ng-maxlength="vm.field.validators.maxlength || 2000" |
| 48 | ng-required="vm.field.validators.required || false" /> |
| 49 | <span class="boolean-field" ng-if="vm.field.type === 'boolean'"> |
| 50 | <button |
| 51 | class="btn btn-success" |
| 52 | ng-show="vm.ngModel" |
| 53 | ng-click="vm.ngModel = false"> |
| 54 | <i class="glyphicon glyphicon-ok"></i> |
| 55 | </button> |
| 56 | <button |
| 57 | class="btn btn-danger" |
| 58 | ng-show="!vm.ngModel" |
| 59 | ng-click="vm.ngModel = true"> |
| 60 | <i class="glyphicon glyphicon-remove"></i> |
| 61 | </button> |
| 62 | </span> |
| 63 | <div |
| 64 | class="panel panel-default object-field" |
| 65 | ng-if="vm.field.type == 'object' " |
| 66 | > |
| 67 | <div class="panel-heading">Panel heading without title</div> |
| 68 | <div class="panel-body"> |
| 69 | Panel content |
| 70 | </div> |
| 71 | </div> |
| 72 | `, |
| 73 | bindToController: true, |
| 74 | controllerAs: 'vm', |
| 75 | controller: function(){ |
| 76 | // console.log('Field: ', this.name, this.field.type, this.ngModel); |
| 77 | if(!this.name){ |
| 78 | throw new Error('[xosField] Please provide a field name'); |
| 79 | } |
| 80 | if(!this.field){ |
| 81 | throw new Error('[xosField] Please provide a field definition'); |
| 82 | } |
| 83 | if(!this.ngModel){ |
| 84 | throw new Error('[xosField] Please provide an ng-model'); |
| 85 | } |
| 86 | } |
| 87 | } |
| 88 | }); |
| 89 | })(); |