ComboEntryFactory.js
3.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
'use strict';
var assign = require('lodash/assign'),
find = require('lodash/find');
var domQuery = require('min-dom').query;
var escapeHTML = require('../Utils').escapeHTML;
var selectEntryFactory = require('./SelectEntryFactory'),
entryFieldDescription = require('./EntryFieldDescription');
/**
* The combo box is a special implementation of the select entry and adds the option 'custom' to the
* select box. If 'custom' is selected, an additional text input field is shown which allows to define
* a custom value.
*
* @param {Object} options
* @param {string} options.id
* @param {string} options.label
* @param {Array<Object>} options.selectOptions list of name/value pairs
* @param {string} options.modelProperty
* @param {function} options.get
* @param {function} options.set
* @param {string} [options.customValue] custom select option value (default: 'custom')
* @param {string} [options.customName] custom select option name visible in the select box (default: 'custom')
*
* @return {Object}
*/
var comboBox = function(options) {
var selectOptions = options.selectOptions,
modelProperty = options.modelProperty,
customValue = options.customValue || 'custom',
customName = options.customName || 'custom ' + modelProperty,
description = options.description;
// check if a value is not a built in value
var isCustomValue = function(value) {
if (typeof value[modelProperty] === 'undefined') {
return false;
}
var isCustom = !find(selectOptions, function(option) {
return value[modelProperty] === option.value;
});
return isCustom;
};
var comboOptions = assign({}, options);
// true if the selected value in the select box is customValue
comboOptions.showCustomInput = function(element, node) {
var selectBox = domQuery('[data-entry="'+ options.id +'"] select', node.parentNode);
if (selectBox) {
return selectBox.value === customValue;
}
return false;
};
comboOptions.get = function(element, node) {
var value = options.get(element, node);
var modifiedValues = {};
if (!isCustomValue(value)) {
modifiedValues[modelProperty] = value[modelProperty] || '';
return modifiedValues;
}
modifiedValues[modelProperty] = customValue;
modifiedValues['custom-'+modelProperty] = value[modelProperty];
return modifiedValues;
};
comboOptions.set = function(element, values, node) {
var modifiedValues = {};
// if the custom select option has been selected
// take the value from the text input field
if (values[modelProperty] === customValue) {
modifiedValues[modelProperty] = values['custom-' + modelProperty] || '';
}
else if (options.emptyParameter && values[modelProperty] === '') {
modifiedValues[modelProperty] = undefined;
} else {
modifiedValues[modelProperty] = values[modelProperty];
}
return options.set(element, modifiedValues, node);
};
comboOptions.selectOptions.push({ name: customName, value: customValue });
var comboBoxEntry = assign({}, selectEntryFactory(comboOptions, comboOptions));
comboBoxEntry.html += '<div class="bpp-field-wrapper bpp-combo-input" ' +
'data-show="showCustomInput"' +
'>' +
'<input id="activiti-' + escapeHTML(options.id) + '-input" type="text" name="custom-' +
escapeHTML(modelProperty) + '" ' +
' />' +
'</div>';
// add description below combo box entry field
if (description) {
comboBoxEntry.html += entryFieldDescription(description);
}
return comboBoxEntry;
};
module.exports = comboBox;