$payload
+ */
+ protected function normalizeKeyValueFieldsInPayload(array &$payload): ?string
+ {
+ $keyValueFields = $this->getProductKeyValueFields();
+ if ($keyValueFields === []) {
+ return null;
+ }
+
+ $keyValueService = $this->getKeyValueFieldService();
+ $this->modx->lexicon->load('minishop3:default');
+
+ foreach ($keyValueFields as $fieldKey => $config) {
+ if (!array_key_exists($fieldKey, $payload)) {
+ continue;
+ }
+
+ try {
+ $payload[$fieldKey] = $keyValueService->processValue($payload[$fieldKey], $config);
+ } catch (\InvalidArgumentException $e) {
+ return $this->modx->lexicon('ms3_key_value_validation_error', [
+ 'field' => $fieldKey,
+ 'error' => $e->getMessage(),
+ ]);
+ }
+ }
+
+ return null;
+ }
}
diff --git a/vueManager/src/components/DynamicField.vue b/vueManager/src/components/DynamicField.vue
index 41533117..43941e40 100644
--- a/vueManager/src/components/DynamicField.vue
+++ b/vueManager/src/components/DynamicField.vue
@@ -198,6 +198,17 @@
/>
+
+
+
+
+
+
+
@@ -238,9 +249,11 @@ import Textarea from 'primevue/textarea'
import ToggleSwitch from 'primevue/toggleswitch'
import { computed, ref, watch } from 'vue'
+import { getKeyValueConfigFromField, parseKeyValueModelValue, serializeKeyValueForPost } from '../utils/keyValueField.js'
import { getRepeaterConfigFromField, parseRepeaterModelValue } from '../utils/repeaterField.js'
import AutocompleteCombo from './AutocompleteCombo.vue'
import FileBrowser from './FileBrowser.vue'
+import KeyValueField from './KeyValueField.vue'
import OptionsChips from './OptionsChips.vue'
import RepeaterField from './RepeaterField.vue'
import VendorCombo from './VendorCombo.vue'
@@ -311,7 +324,7 @@ const isFileBrowserXtype = computed(() => {
* Determine if field is complex type (requires hidden field with JSON)
*/
const isComplexField = computed(() => {
- const complexTypes = ['combobox', 'datefield', 'colorpicker', 'chips', 'multiselect', 'ms3-repeater']
+ const complexTypes = ['combobox', 'datefield', 'colorpicker', 'chips', 'multiselect']
return complexTypes.includes(props.fieldConfig.xtype)
})
@@ -346,11 +359,15 @@ const selectOptions = computed(() => {
})
const repeaterConfig = computed(() => getRepeaterConfigFromField(props.fieldConfig))
+const keyValueConfig = computed(() => getKeyValueConfigFromField(props.fieldConfig))
function normalizeIncomingValue(value) {
if (props.fieldConfig.xtype === 'ms3-repeater') {
return parseRepeaterModelValue(value)
}
+ if (props.fieldConfig.xtype === 'ms3-key-value') {
+ return parseKeyValueModelValue(value)
+ }
return value
}
diff --git a/vueManager/src/components/ExtraFieldsManager.vue b/vueManager/src/components/ExtraFieldsManager.vue
index 48cf3df3..d457bc7d 100644
--- a/vueManager/src/components/ExtraFieldsManager.vue
+++ b/vueManager/src/components/ExtraFieldsManager.vue
@@ -18,11 +18,17 @@ import { useToast } from 'primevue/usetoast'
import { computed, onMounted, ref, watch } from 'vue'
import request from '../request.js'
+import {
+ defaultKeyValueConfig,
+ KEY_VALUE_XTYPE,
+ parseKeyValueConfig,
+} from '../utils/keyValueField.js'
import {
defaultRepeaterConfig,
parseRepeaterConfig,
REPEATER_XTYPE,
} from '../utils/repeaterField.js'
+import KeyValueSchemaEditor from './KeyValueSchemaEditor.vue'
import RepeaterSchemaEditor from './RepeaterSchemaEditor.vue'
const toast = useToast()
@@ -58,6 +64,7 @@ const fieldForm = ref({
active: true,
select_options: '',
repeater_config: defaultRepeaterConfig(),
+ key_value_config: defaultKeyValueConfig(),
})
/**
@@ -94,6 +101,7 @@ const xtypeOptions = computed(() => [
{ label: _('ms3_vue_xtype_xcheckbox'), value: 'xcheckbox' },
{ label: _('ms3_vue_xtype_combo_select'), value: 'ms3-combo-select' },
{ label: _('ms3_vue_xtype_repeater'), value: REPEATER_XTYPE },
+ { label: _('ms3_vue_xtype_key_value'), value: KEY_VALUE_XTYPE },
{ label: _('ms3_vue_xtype_combo_vendor'), value: 'ms3-combo-vendor' },
{ label: _('ms3_vue_xtype_combo_autocomplete'), value: 'ms3-combo-autocomplete' },
{ label: _('ms3_vue_xtype_combo_options'), value: 'ms3-combo-options' },
@@ -147,20 +155,27 @@ const indexTypeOptions = computed(() => [
])
const isRepeaterField = computed(() => fieldForm.value.xtype === REPEATER_XTYPE)
+const isKeyValueField = computed(() => fieldForm.value.xtype === KEY_VALUE_XTYPE)
watch(
() => fieldForm.value.xtype,
xtype => {
- if (xtype !== REPEATER_XTYPE) {
- return
- }
-
- fieldForm.value.dbtype = 'json'
- fieldForm.value.phptype = 'json'
- fieldForm.value.precision = ''
- fieldForm.value.null = true
- if (!fieldForm.value.repeater_config?.columns?.length) {
- fieldForm.value.repeater_config = defaultRepeaterConfig()
+ if (xtype === REPEATER_XTYPE) {
+ fieldForm.value.dbtype = 'json'
+ fieldForm.value.phptype = 'json'
+ fieldForm.value.precision = ''
+ fieldForm.value.null = true
+ if (!fieldForm.value.repeater_config?.columns?.length) {
+ fieldForm.value.repeater_config = defaultRepeaterConfig()
+ }
+ } else if (xtype === KEY_VALUE_XTYPE) {
+ fieldForm.value.dbtype = 'json'
+ fieldForm.value.phptype = 'json'
+ fieldForm.value.precision = ''
+ fieldForm.value.null = true
+ if (!fieldForm.value.key_value_config?.mode) {
+ fieldForm.value.key_value_config = defaultKeyValueConfig()
+ }
}
}
)
@@ -169,6 +184,10 @@ function buildRepeaterConfigPayload() {
return JSON.stringify(parseRepeaterConfig(fieldForm.value.repeater_config))
}
+function buildKeyValueConfigPayload() {
+ return JSON.stringify(parseKeyValueConfig(fieldForm.value.key_value_config))
+}
+
/**
* Load fields list
*/
@@ -223,6 +242,7 @@ function openCreateDialog() {
active: true,
select_options: '',
repeater_config: defaultRepeaterConfig(),
+ key_value_config: defaultKeyValueConfig(),
}
dialogVisible.value = true
@@ -254,6 +274,7 @@ function openEditDialog(field) {
active: field.active,
select_options: field.select_options || '',
repeater_config: parseRepeaterConfig(field.repeater_config),
+ key_value_config: parseKeyValueConfig(field.key_value_config),
}
dialogVisible.value = true
@@ -316,6 +337,7 @@ async function createField() {
fieldForm.value.active === 'true' ||
fieldForm.value.active === 1,
repeater_config: isRepeaterField.value ? buildRepeaterConfigPayload() : '',
+ key_value_config: isKeyValueField.value ? buildKeyValueConfigPayload() : '',
}
delete payload.id
@@ -367,6 +389,7 @@ async function updateField() {
select_options:
fieldForm.value.xtype === 'ms3-combo-select' ? fieldForm.value.select_options : '',
repeater_config: isRepeaterField.value ? buildRepeaterConfigPayload() : '',
+ key_value_config: isKeyValueField.value ? buildKeyValueConfigPayload() : '',
}
const response = await request.put(`/api/mgr/extra-fields/${fieldForm.value.id}`, payload)
@@ -720,6 +743,13 @@ onMounted(() => {
{{ _('ms3_vue_repeater_schema_help') }}
+
+
+
+
+
+ {{ _('ms3_vue_key_value_schema_help') }}
+
@@ -737,7 +767,7 @@ onMounted(() => {
option-value="value"
:placeholder="_('ms3_vue_dialog_xtype_select')"
class="w-full"
- :disabled="isEditMode || isRepeaterField"
+ :disabled="isEditMode || isRepeaterField || isKeyValueField"
/>
@@ -764,7 +794,7 @@ onMounted(() => {
option-value="value"
:placeholder="_('ms3_vue_dialog_xtype_select')"
class="w-full"
- :disabled="isEditMode || isRepeaterField"
+ :disabled="isEditMode || isRepeaterField || isKeyValueField"
/>
diff --git a/vueManager/src/components/KeyValueField.vue b/vueManager/src/components/KeyValueField.vue
new file mode 100644
index 00000000..b483ff93
--- /dev/null
+++ b/vueManager/src/components/KeyValueField.vue
@@ -0,0 +1,263 @@
+
+
+
+
+
+
+
+ {{ _('ms3_vue_key_value_no_keys') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ _('ms3_vue_key_value_no_keys') }}
+
+
+