Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 1 | // TODO clean this mess |
| 2 | |
| 3 | import * as _ from 'lodash'; |
| 4 | import {IXosFormHelpersService} from './form-helpers'; |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 5 | |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 6 | export interface IXosFormAction { |
| 7 | label: string; |
| 8 | icon: string; |
| 9 | class: string; |
| 10 | cb(item: any, form: any): void; |
| 11 | } |
| 12 | |
| 13 | export interface IXosFeedback { |
| 14 | show: boolean; |
| 15 | message: string; |
| 16 | type: string; // NOTE is possible to enumerate success, error, warning, info? |
Matteo Scandolo | 6f45e26 | 2017-01-09 14:47:26 -0800 | [diff] [blame] | 17 | autoHide?: number; |
| 18 | closeBtn?: boolean; |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 19 | } |
| 20 | |
| 21 | export interface IXosFormInputValidator { |
| 22 | minlength?: number; |
| 23 | maxlength?: number; |
| 24 | required?: boolean; |
| 25 | min?: number; |
| 26 | max?: number; |
| 27 | custom?(value: any): any; |
| 28 | // do your validation here and return true | false |
| 29 | // alternatively you can return an array [errorName, true|false] |
| 30 | } |
| 31 | |
Matteo Scandolo | 07e2f62 | 2017-01-09 10:54:13 -0800 | [diff] [blame] | 32 | export interface IXosFormInputOptions { |
| 33 | id: number; |
| 34 | label: string; |
| 35 | } |
| 36 | |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 37 | export interface IXosFormInput { |
| 38 | name: string; |
| 39 | label: string; |
| 40 | type: string; // options are: [date, boolean, number, email, string, select], |
Matteo Scandolo | 6f45e26 | 2017-01-09 14:47:26 -0800 | [diff] [blame] | 41 | hint?: string; |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 42 | validators: IXosFormInputValidator; |
Matteo Scandolo | 07e2f62 | 2017-01-09 10:54:13 -0800 | [diff] [blame] | 43 | options?: IXosFormInputOptions[]; |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 44 | } |
| 45 | |
Matteo Scandolo | 1aee198 | 2017-02-17 08:33:23 -0800 | [diff] [blame] | 46 | export interface IXosFormCfg { |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 47 | exclude?: string[]; |
| 48 | actions: IXosFormAction[]; |
| 49 | feedback?: IXosFeedback; |
| 50 | inputs: IXosFormInput[]; |
| 51 | formName: string; |
| 52 | } |
| 53 | |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 54 | class FormCtrl { |
Matteo Scandolo | b2225a0 | 2017-04-11 15:23:04 -0700 | [diff] [blame] | 55 | $inject = ['$onInit', '$scope', 'XosFormHelpers']; |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 56 | |
| 57 | public ngModel: any; |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 58 | public formField: any; |
| 59 | private config: any; |
| 60 | |
| 61 | constructor ( |
| 62 | private $scope: ng.IScope, |
Matteo Scandolo | b2225a0 | 2017-04-11 15:23:04 -0700 | [diff] [blame] | 63 | private XosFormHelpers: IXosFormHelpersService |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 64 | ) { |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 65 | } |
| 66 | |
| 67 | $onInit() { |
| 68 | if (!this.config) { |
| 69 | throw new Error('[xosForm] Please provide a configuration via the "config" attribute'); |
| 70 | } |
| 71 | |
| 72 | if (!this.config.actions) { |
| 73 | throw new Error('[xosForm] Please provide an action list in the configuration'); |
| 74 | } |
| 75 | |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 76 | if (!this.config.formName) { |
| 77 | throw new Error('[xosForm] Please provide a formName property in the config'); |
| 78 | } |
| 79 | |
Matteo Scandolo | 6f45e26 | 2017-01-09 14:47:26 -0800 | [diff] [blame] | 80 | // NOTE needed to avoid xosAlert throw an error |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 81 | if (!this.config.feedback) { |
| 82 | this.config.feedback = { |
| 83 | show: false, |
| 84 | message: 'Form submitted successfully !!!', |
Matteo Scandolo | 6f45e26 | 2017-01-09 14:47:26 -0800 | [diff] [blame] | 85 | type: 'success', |
| 86 | closeBtn: true |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 87 | }; |
| 88 | } |
| 89 | |
Matteo Scandolo | 80c3a65 | 2017-01-06 10:48:31 -0800 | [diff] [blame] | 90 | // remove excluded inputs |
Matteo Scandolo | b2225a0 | 2017-04-11 15:23:04 -0700 | [diff] [blame] | 91 | if (angular.isDefined(this.config.exclude) && this.config.exclude.leading > 0) { |
| 92 | _.remove(this.config.inputs, i => this.config.exclude.indexOf(i.name) > -1); |
| 93 | } |
Matteo Scandolo | ee655a1 | 2016-12-19 15:38:43 -0800 | [diff] [blame] | 94 | } |
| 95 | } |
| 96 | |
| 97 | export const xosForm: angular.IComponentOptions = { |
| 98 | template: require('./form.html'), |
| 99 | controllerAs: 'vm', |
| 100 | controller: FormCtrl, |
| 101 | bindings: { |
| 102 | ngModel: '=', |
| 103 | config: '=' |
| 104 | } |
| 105 | }; |