|
Lines 1-198
Link Here
|
| 1 |
<template> |
1 |
<template> |
| 2 |
<label |
2 |
<template v-if="display"> |
| 3 |
v-if="attr.label" |
3 |
<label |
| 4 |
:for="getElementId" |
4 |
v-if="attr.label" |
| 5 |
:class="{ required: attr.required }" |
5 |
:for="getElementId" |
| 6 |
:style="{ ...attr.style }" |
6 |
:class="{ required: attr.required }" |
| 7 |
>{{ attr.label }}:</label |
7 |
:style="{ ...attr.style }" |
| 8 |
> |
8 |
>{{ attr.label }}:</label |
| 9 |
<template v-if="attr.type == 'number'"> |
|
|
| 10 |
<InputNumber |
| 11 |
:id="getElementId" |
| 12 |
v-model="resource[attr.name]" |
| 13 |
:placeholder="attr.placeholder || attr.label" |
| 14 |
:required="attr.required ? true : false" |
| 15 |
:size="attr.size" |
| 16 |
:maxlength="attr.maxlength" |
| 17 |
:disabled="disabled" |
| 18 |
@update:modelValue="checkForInputError()" |
| 19 |
/> |
| 20 |
</template> |
| 21 |
<template v-else-if="attr.type == 'text'"> |
| 22 |
<InputText |
| 23 |
:id="getElementId" |
| 24 |
v-model="resource[attr.name]" |
| 25 |
:placeholder="attr.placeholder || attr.label" |
| 26 |
:required="attr.required ? true : false" |
| 27 |
:disabled="disabled" |
| 28 |
@update:modelValue="checkForInputError()" |
| 29 |
/> |
| 30 |
</template> |
| 31 |
<template v-else-if="attr.type == 'textarea'"> |
| 32 |
<TextArea |
| 33 |
:id="getElementId" |
| 34 |
v-model="resource[attr.name]" |
| 35 |
:rows="attr.textAreaRows" |
| 36 |
:cols="attr.textAreaCols" |
| 37 |
:placeholder="attr.placeholder || attr.label" |
| 38 |
:required="attr.required ? true : false" |
| 39 |
:disabled="disabled" |
| 40 |
@update:modelValue="checkForInputError()" |
| 41 |
/> |
| 42 |
</template> |
| 43 |
<template v-else-if="attr.type == 'checkbox'"> |
| 44 |
<InputCheckbox |
| 45 |
:id="getElementId" |
| 46 |
type="checkbox" |
| 47 |
v-model="resource[attr.name]" |
| 48 |
:changeMethod="attr.onChange && attr.onChange.bind(this, resource)" |
| 49 |
:disabled="disabled" |
| 50 |
/> |
| 51 |
</template> |
| 52 |
<template v-else-if="attr.type == 'radio'"> |
| 53 |
<template |
| 54 |
v-for="(option, index) in attr.options" |
| 55 |
:key="`radio-option-${index}`" |
| 56 |
> |
9 |
> |
| 57 |
<label |
10 |
<template v-if="attr.type == 'number'"> |
| 58 |
v-if="option.description" |
11 |
<InputNumber |
| 59 |
:for="attr.name + '_' + option.value" |
12 |
:id="getElementId" |
| 60 |
>{{ option.description }}: |
13 |
v-model="resource[attr.name]" |
|
|
14 |
:placeholder="attr.placeholder || attr.label" |
| 15 |
:required="attr.required ? true : false" |
| 16 |
:size="attr.size" |
| 17 |
:maxlength="attr.maxlength" |
| 18 |
:disabled="disabled" |
| 19 |
@update:modelValue="checkForInputError()" |
| 20 |
/> |
| 21 |
</template> |
| 22 |
<template v-else-if="attr.type == 'text'"> |
| 23 |
<InputText |
| 24 |
:id="getElementId" |
| 25 |
v-model="resource[attr.name]" |
| 26 |
:placeholder="attr.placeholder || attr.label" |
| 27 |
:required="attr.required ? true : false" |
| 28 |
:disabled="disabled" |
| 29 |
@update:modelValue="checkForInputError()" |
| 30 |
/> |
| 31 |
</template> |
| 32 |
<template v-else-if="attr.type == 'textarea'"> |
| 33 |
<TextArea |
| 34 |
:id="getElementId" |
| 35 |
v-model="resource[attr.name]" |
| 36 |
:rows="attr.textAreaRows" |
| 37 |
:cols="attr.textAreaCols" |
| 38 |
:placeholder="attr.placeholder || attr.label" |
| 39 |
:required="attr.required ? true : false" |
| 40 |
:disabled="disabled" |
| 41 |
@update:modelValue="checkForInputError()" |
| 42 |
/> |
| 43 |
</template> |
| 44 |
<template v-else-if="attr.type == 'checkbox'"> |
| 45 |
<InputCheckbox |
| 46 |
:id="getElementId" |
| 47 |
type="checkbox" |
| 48 |
v-model="resource[attr.name]" |
| 49 |
:changeMethod=" |
| 50 |
attr.onChange && attr.onChange.bind(this, resource) |
| 51 |
" |
| 52 |
:disabled="disabled" |
| 53 |
/> |
| 54 |
</template> |
| 55 |
<template v-else-if="attr.type == 'radio'"> |
| 56 |
<template |
| 57 |
v-for="(option, index) in attr.options" |
| 58 |
:key="`radio-option-${index}`" |
| 59 |
> |
| 60 |
<label |
| 61 |
v-if="option.description" |
| 62 |
:for="attr.name + '_' + option.value" |
| 63 |
>{{ option.description }}: |
| 64 |
<InputRadio |
| 65 |
:name="attr.name" |
| 66 |
:id="attr.name + '_' + option.value" |
| 67 |
:value="option.value" |
| 68 |
:checked=" |
| 69 |
(!Object.keys(resource).includes(attr.name) && |
| 70 |
attr.default == option.value) || |
| 71 |
(Object.keys(resource).includes(attr.name) && |
| 72 |
option.value == resource[attr.name]) |
| 73 |
" |
| 74 |
v-model="resource[attr.name]" |
| 75 |
@change=" |
| 76 |
attr.onChange && attr.onChange.bind(this, resource) |
| 77 |
" |
| 78 |
/> |
| 79 |
</label> |
| 80 |
</template> |
| 81 |
</template> |
| 82 |
<template v-else-if="attr.type == 'boolean'"> |
| 83 |
<label class="radio" :for="getElementId + '_yes'" |
| 84 |
>{{ $__("Yes") }}: |
| 85 |
<InputRadio |
| 86 |
type="radio" |
| 87 |
:name="attr.name" |
| 88 |
:id="attr.name + '_yes'" |
| 89 |
:value="true" |
| 90 |
:checked="resource[attr.name] == true" |
| 91 |
v-model="resource[attr.name]" |
| 92 |
/> |
| 93 |
</label> |
| 94 |
<label class="radio" :for="getElementId + '_no'" |
| 95 |
>{{ $__("No") }}: |
| 61 |
<InputRadio |
96 |
<InputRadio |
|
|
97 |
type="radio" |
| 62 |
:name="attr.name" |
98 |
:name="attr.name" |
| 63 |
:id="attr.name + '_' + option.value" |
99 |
:id="attr.name + '_no'" |
| 64 |
:value="option.value" |
100 |
:checked="resource[attr.name] == false" |
| 65 |
:checked=" |
101 |
:value="false" |
| 66 |
(!Object.keys(resource).includes(attr.name) && |
|
|
| 67 |
attr.default == option.value) || |
| 68 |
(Object.keys(resource).includes(attr.name) && |
| 69 |
option.value == resource[attr.name]) |
| 70 |
" |
| 71 |
v-model="resource[attr.name]" |
102 |
v-model="resource[attr.name]" |
| 72 |
@change=" |
|
|
| 73 |
attr.onChange && attr.onChange.bind(this, resource) |
| 74 |
" |
| 75 |
/> |
103 |
/> |
| 76 |
</label> |
104 |
</label> |
| 77 |
</template> |
105 |
</template> |
| 78 |
</template> |
106 |
<template v-else-if="attr.type == 'select'"> |
| 79 |
<template v-else-if="attr.type == 'boolean'"> |
107 |
<v-select |
| 80 |
<label class="radio" :for="getElementId + '_yes'" |
108 |
:id="getElementId" |
| 81 |
>{{ $__("Yes") }}: |
|
|
| 82 |
<InputRadio |
| 83 |
type="radio" |
| 84 |
:name="attr.name" |
| 85 |
:id="attr.name + '_yes'" |
| 86 |
:value="true" |
| 87 |
:checked="resource[attr.name] == true" |
| 88 |
v-model="resource[attr.name]" |
109 |
v-model="resource[attr.name]" |
| 89 |
/> |
110 |
:label="attr.selectLabel" |
| 90 |
</label> |
111 |
:reduce="av => selectRequiredKey(av)" |
| 91 |
<label class="radio" :for="getElementId + '_no'" |
112 |
:options="selectOptions" |
| 92 |
>{{ $__("No") }}: |
113 |
:required="!resource[attr.name] && attr.required" |
| 93 |
<InputRadio |
114 |
:disabled="disabled" |
| 94 |
type="radio" |
115 |
:multiple="attr.allowMultipleChoices" |
| 95 |
:name="attr.name" |
116 |
@option:selected="attr.onSelected && attr.onSelected(resource)" |
| 96 |
:id="attr.name + '_no'" |
117 |
> |
| 97 |
:checked="resource[attr.name] == false" |
118 |
<template v-if="attr.required" #search="{ attributes, events }"> |
| 98 |
:value="false" |
119 |
<input |
|
|
120 |
:required="!resource[attr.name]" |
| 121 |
class="vs__search" |
| 122 |
v-bind="attributes" |
| 123 |
v-on="events" |
| 124 |
/> |
| 125 |
</template> |
| 126 |
</v-select> |
| 127 |
</template> |
| 128 |
<template v-else-if="attr.type == 'vendor'"> |
| 129 |
<component |
| 130 |
:is="requiredComponent" |
| 131 |
:id="getElementId" |
| 132 |
v-bind="getComponentProps()" |
| 133 |
v-on="getEventHandlers()" |
| 99 |
v-model="resource[attr.name]" |
134 |
v-model="resource[attr.name]" |
| 100 |
/> |
135 |
></component> |
| 101 |
</label> |
136 |
</template> |
| 102 |
</template> |
137 |
<template v-else-if="attr.type == 'date'"> |
| 103 |
<template v-else-if="attr.type == 'select'"> |
138 |
<component |
| 104 |
<v-select |
139 |
:is="requiredComponent" |
| 105 |
:id="getElementId" |
140 |
:id="getElementId" |
| 106 |
v-model="resource[attr.name]" |
141 |
v-bind="getComponentProps()" |
| 107 |
:label="attr.selectLabel" |
142 |
v-on="getEventHandlers()" |
| 108 |
:reduce="av => selectRequiredKey(av)" |
143 |
v-model="resource[attr.name]" |
| 109 |
:options="selectOptions" |
144 |
></component> |
| 110 |
:required="!resource[attr.name] && attr.required" |
145 |
</template> |
| 111 |
:disabled="disabled" |
146 |
<template v-else-if="attr.type == 'component' && attr.componentPath"> |
| 112 |
:multiple="attr.allowMultipleChoices" |
147 |
<component |
| 113 |
@option:selected="attr.onSelected && attr.onSelected(resource)" |
148 |
v-if="isVModelRequired(attr.componentPath)" |
|
|
149 |
:is="requiredComponent" |
| 150 |
v-bind="getComponentProps()" |
| 151 |
v-model="resource[attr.name]" |
| 152 |
v-on="getEventHandlers()" |
| 153 |
></component> |
| 154 |
<component |
| 155 |
v-else |
| 156 |
:is="requiredComponent" |
| 157 |
v-bind="getComponentProps()" |
| 158 |
v-on="getEventHandlers()" |
| 159 |
></component> |
| 160 |
</template> |
| 161 |
<template |
| 162 |
v-else-if="attr.type == 'relationshipWidget' && attr.componentProps" |
| 114 |
> |
163 |
> |
| 115 |
<template v-if="attr.required" #search="{ attributes, events }"> |
164 |
<component |
| 116 |
<input |
165 |
:is="requiredComponent" |
| 117 |
:required="!resource[attr.name]" |
166 |
:title="attr.group ? null : attr.label" |
| 118 |
class="vs__search" |
167 |
:apiClient="attr.apiClient" |
| 119 |
v-bind="attributes" |
168 |
:name="attr.name" |
| 120 |
v-on="events" |
169 |
v-bind="getComponentProps()" |
| 121 |
/> |
170 |
v-on="getEventHandlers()" |
| 122 |
</template> |
171 |
></component> |
| 123 |
</v-select> |
172 |
</template> |
| 124 |
</template> |
173 |
<template v-else-if="attr.type == 'relationshipSelect'"> |
| 125 |
<template v-else-if="attr.type == 'vendor'"> |
174 |
<FormRelationshipSelect |
| 126 |
<component |
175 |
v-bind="attr" |
| 127 |
:is="requiredComponent" |
176 |
:resource="resource" |
| 128 |
:id="getElementId" |
177 |
></FormRelationshipSelect> |
| 129 |
v-bind="getComponentProps()" |
178 |
</template> |
| 130 |
v-on="getEventHandlers()" |
179 |
<template v-else-if="attr.type == 'additional_fields'"> |
| 131 |
v-model="resource[attr.name]" |
180 |
<AdditionalFieldsEntry |
| 132 |
></component> |
181 |
:resource="resource" |
| 133 |
</template> |
182 |
:additional_field_values="resource.extended_attributes" |
| 134 |
<template v-else-if="attr.type == 'date'"> |
183 |
:extended_attributes_resource_type=" |
| 135 |
<component |
184 |
attr.extended_attributes_resource_type |
| 136 |
:is="requiredComponent" |
185 |
" |
| 137 |
:id="getElementId" |
186 |
@additional-fields-changed="additionalFieldsChanged" |
| 138 |
v-bind="getComponentProps()" |
187 |
></AdditionalFieldsEntry> |
| 139 |
v-on="getEventHandlers()" |
188 |
</template> |
| 140 |
v-model="resource[attr.name]" |
189 |
<template v-else> |
| 141 |
></component> |
190 |
<span>{{ |
| 142 |
</template> |
191 |
$__("Programming error: unknown type %s").format(attr.type) |
| 143 |
<template v-else-if="attr.type == 'component' && attr.componentPath"> |
192 |
}}</span> |
| 144 |
<component |
193 |
</template> |
| 145 |
v-if="isVModelRequired(attr.componentPath)" |
194 |
<ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip> |
| 146 |
:is="requiredComponent" |
195 |
<span v-if="attr.required" class="required">{{ $__("Required") }}</span> |
| 147 |
v-bind="getComponentProps()" |
196 |
<span style="margin-left: 5px" class="error" v-if="fieldInputError"> |
| 148 |
v-model="resource[attr.name]" |
197 |
{{ attr.formErrorMessage }} |
| 149 |
v-on="getEventHandlers()" |
198 |
</span> |
| 150 |
></component> |
|
|
| 151 |
<component |
| 152 |
v-else |
| 153 |
:is="requiredComponent" |
| 154 |
v-bind="getComponentProps()" |
| 155 |
v-on="getEventHandlers()" |
| 156 |
></component> |
| 157 |
</template> |
| 158 |
<template |
| 159 |
v-else-if="attr.type == 'relationshipWidget' && attr.componentProps" |
| 160 |
> |
| 161 |
<component |
| 162 |
:is="requiredComponent" |
| 163 |
:title="attr.group ? null : attr.label" |
| 164 |
:apiClient="attr.apiClient" |
| 165 |
:name="attr.name" |
| 166 |
v-bind="getComponentProps()" |
| 167 |
v-on="getEventHandlers()" |
| 168 |
></component> |
| 169 |
</template> |
| 170 |
<template v-else-if="attr.type == 'relationshipSelect'"> |
| 171 |
<FormRelationshipSelect |
| 172 |
v-bind="attr" |
| 173 |
:resource="resource" |
| 174 |
></FormRelationshipSelect> |
| 175 |
</template> |
| 176 |
<template v-else-if="attr.type == 'additional_fields'"> |
| 177 |
<AdditionalFieldsEntry |
| 178 |
:resource="resource" |
| 179 |
:additional_field_values="resource.extended_attributes" |
| 180 |
:extended_attributes_resource_type=" |
| 181 |
attr.extended_attributes_resource_type |
| 182 |
" |
| 183 |
@additional-fields-changed="additionalFieldsChanged" |
| 184 |
></AdditionalFieldsEntry> |
| 185 |
</template> |
| 186 |
<template v-else> |
| 187 |
<span>{{ |
| 188 |
$__("Programming error: unknown type %s").format(attr.type) |
| 189 |
}}</span> |
| 190 |
</template> |
199 |
</template> |
| 191 |
<ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip> |
|
|
| 192 |
<span v-if="attr.required" class="required">{{ $__("Required") }}</span> |
| 193 |
<span style="margin-left: 5px" class="error" v-if="fieldInputError"> |
| 194 |
{{ attr.formErrorMessage }} |
| 195 |
</span> |
| 196 |
</template> |
200 |
</template> |
| 197 |
|
201 |
|
| 198 |
<script> |
202 |
<script> |
|
Lines 273-279
export default {
Link Here
|
| 273 |
return disabledAttr || false; |
277 |
return disabledAttr || false; |
| 274 |
} |
278 |
} |
| 275 |
}); |
279 |
}); |
| 276 |
|
280 |
const display = computed(() => { |
|
|
281 |
const displayAttr = props.display ?? props.attr.display ?? true; |
| 282 |
if (typeof displayAttr === "function") { |
| 283 |
return displayAttr(props.resource); |
| 284 |
} else { |
| 285 |
return displayAttr || false; |
| 286 |
} |
| 287 |
}); |
| 277 |
const fieldInputError = ref(false); |
288 |
const fieldInputError = ref(false); |
| 278 |
const checkForInputError = () => { |
289 |
const checkForInputError = () => { |
| 279 |
if (props.attr.formErrorHandler) { |
290 |
if (props.attr.formErrorHandler) { |
|
Lines 292-297
export default {
Link Here
|
| 292 |
requiredComponent, |
303 |
requiredComponent, |
| 293 |
selectOptions, |
304 |
selectOptions, |
| 294 |
disabled, |
305 |
disabled, |
|
|
306 |
display, |
| 295 |
fieldInputError, |
307 |
fieldInputError, |
| 296 |
checkForInputError, |
308 |
checkForInputError, |
| 297 |
}; |
309 |
}; |