/
form-field.js
166 lines (148 loc) · 4.65 KB
/
form-field.js
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
import { or } from '@ember/object/computed';
import Component from '@ember/component';
import { computed } from '@ember/object';
import { capitalize } from 'vault/helpers/capitalize';
import { humanize } from 'vault/helpers/humanize';
import { dasherize } from 'vault/helpers/dasherize';
import layout from '../templates/components/form-field';
/**
* @module FormField
* `FormField` components are field elements associated with a particular model.
*
* @example
* ```js
* {{#each @model.fields as |attr|}}
* <FormField data-test-field @attr={{attr}} @model={{this.model}} />
* {{/each}}
* ```
*
* @param [onChange=null] {Func} - Called whenever a value on the model changes via the component.
* @param [onKeyUp=null] {Func} - A function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp.
* @param attr=null {Object} - This is usually derived from ember model `attributes` lookup, and all members of `attr.options` are optional.
* @param model=null {DS.Model} - The Ember Data model that `attr` is defined on
* @param [disabled=false] {Boolean} - whether the field is disabled
* @param [showHelpText=true] {Boolean} - whether to show the tooltip with help text from OpenAPI
* @param [subText] {String} - Text to be displayed below the label
* @param [validationMessages] {Object} - Object of errors. If attr.name is in object and has error message display in AlertInline.
*
*/
export default Component.extend({
layout,
'data-test-field': true,
classNames: ['field'],
disabled: false,
showHelpText: true,
subText: '',
// This is only used internally for `optional-text` editType
showInput: false,
init() {
this._super(...arguments);
const valuePath = this.attr.options?.fieldValue || this.attr.name;
const modelValue = this.model[valuePath];
this.set('showInput', !!modelValue);
},
onChange() {},
/*
* @public
* @param Object
* in the form of
* {
* name: "foo",
* options: {
* label: "Foo",
* defaultValue: "",
* editType: "ttl",
* helpText: "This will be in a tooltip"
* },
* type: "boolean"
* }
*
*/
attr: null,
mode: null,
/*
* @private
* @param string
* Computed property used in the label element next to the form element
*
*/
labelString: computed('attr.{name,options.label}', function() {
const label = this.attr.options ? this.attr.options.label : '';
const name = this.attr.name;
if (label) {
return label;
}
if (name) {
return capitalize([humanize([dasherize([name])])]);
}
return '';
}),
// both the path to mutate on the model, and the path to read the value from
/*
* @private
* @param string
*
* Computed property used to set values on the passed model
*
*/
valuePath: or('attr.options.fieldValue', 'attr.name'),
isReadOnly: computed('attr.options.readOnly', 'mode', function() {
let readonly = this.attr.options?.readOnly || false;
return readonly && this.mode === 'edit';
}),
model: null,
/*
* @private
* @param object
*
* Used by the pgp-file component when an attr is editType of 'file'
*/
file: computed(function() {
return { value: '' };
}),
emptyData: '{\n}',
actions: {
setFile(_, keyFile) {
const path = this.valuePath;
const { value } = keyFile;
this.model.set(path, value);
this.onChange(path, value);
this.set('file', keyFile);
},
setAndBroadcast(path, value) {
this.model.set(path, value);
this.onChange(path, value);
},
setAndBroadcastBool(path, trueVal, falseVal, value) {
let valueToSet = value === true ? trueVal : falseVal;
this.send('setAndBroadcast', path, valueToSet);
},
setAndBroadcastTtl(path, value) {
const alwaysSendValue = path === 'expiry' || path === 'safetyBuffer';
let valueToSet = value.enabled === true || alwaysSendValue ? `${value.seconds}s` : 0;
this.send('setAndBroadcast', path, `${valueToSet}`);
},
codemirrorUpdated(path, isString, value, codemirror) {
codemirror.performLint();
const hasErrors = codemirror.state.lint.marked.length > 0;
let valToSet = isString ? value : JSON.parse(value);
if (!hasErrors) {
this.model.set(path, valToSet);
this.onChange(path, valToSet);
}
},
toggleShow(path) {
const value = !this.showInput;
this.set('showInput', value);
if (!value) {
this.send('setAndBroadcast', path, null);
}
},
handleKeyUp(name, value) {
if (!this.onKeyUp) {
return;
}
this.onKeyUp(name, value);
},
},
});