diff --git a/adminforth/documentation/docs/tutorial/001-gettingStarted.md b/adminforth/documentation/docs/tutorial/001-gettingStarted.md index 4b5b45ff2..8c2d83335 100644 --- a/adminforth/documentation/docs/tutorial/001-gettingStarted.md +++ b/adminforth/documentation/docs/tutorial/001-gettingStarted.md @@ -224,6 +224,7 @@ export default { }, { name: 'price', + inputSuffix: 'USD', // you can add a suffix to an input field that will be displayed when creating or editing records allowMinMaxQuery: true, // use better experience for filtering e.g. date range, set it only if you have index on this column or if you sure there will be low number of rows editingNote: 'Price is in USD', // you can put a note near field on editing or creating page }, diff --git a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md index f0ca34755..4947256c7 100644 --- a/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md +++ b/adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md @@ -370,6 +370,28 @@ export default { > `validation` checks are enforced both on frontend and backend. +### Input prefix and suffix + +You can add prefix or suffix to inputs by adding `inputPrefix` or `inputSuffix` fields to a column. + +```typescript title="./resources/users.ts" +export default { + name: 'users', + columns: [ + ... + { + name: "price", + inputSuffix: "USD", + allowMinMaxQuery: true, + }, + ], + }, + ... + ], +``` + +These fields can only be used with following `AdminForthDataTypes`: `DECIMAL`, `FLOAT`, `INTEGER`, `STRING` and `JSON` (only if `JSON` column is an array with appropriate `itemType`). + ### Editing note You can add `editingNote` to a column to show a note below the input field. diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts index d74769cef..e35609a49 100644 --- a/adminforth/modules/configValidator.ts +++ b/adminforth/modules/configValidator.ts @@ -461,6 +461,26 @@ export default class ConfigValidator implements IConfigValidator { } } + if (inCol.inputPrefix || inCol.inputSuffix) { + if (![AdminForthDataTypes.DECIMAL, AdminForthDataTypes.FLOAT, AdminForthDataTypes.INTEGER, AdminForthDataTypes.STRING, undefined].includes(col.type)) { + if (inCol.type === AdminForthDataTypes.JSON) { + if (inCol.isArray && inCol.isArray.enabled && ![AdminForthDataTypes.DECIMAL, AdminForthDataTypes.FLOAT, AdminForthDataTypes.INTEGER, AdminForthDataTypes.STRING].includes(inCol.isArray.itemType)) { + errors.push(`Resource "${res.resourceId}" column "${col.name}" has input${inCol.inputPrefix ? 'Prefix': 'Suffix'} but it is not supported for array columns item type: ${inCol.isArray.itemType}`); + } else if (!inCol.isArray || !inCol.isArray.enabled) { + errors.push(`Resource "${res.resourceId}" column "${col.name}" has input${inCol.inputPrefix ? 'Prefix' : 'Suffix'} but it is not supported for this column type: ${col.type}`); + } + } else { + errors.push(`Resource "${res.resourceId}" column "${col.name}" has input${inCol.inputPrefix ? 'Prefix' : 'Suffix'} but it is not supported for this column type: ${col.type}`); + } + } + if (inCol.enum) { + errors.push(`Resource "${res.resourceId}" column "${col.name}" has input${inCol.inputPrefix ? 'Prefix' : 'Suffix'} but it is not supported for enum columns`); + } + if (inCol.foreignResource) { + errors.push(`Resource "${res.resourceId}" column "${col.name}" has input${inCol.inputPrefix ? 'Prefix' : 'Suffix'} but it is not supported for foreignResource columns`); + } + } + // check is all custom components files exists if (col.components) { for (const [key, comp] of Object.entries(col.components as Record)) { diff --git a/adminforth/spa/src/afcl/Input.vue b/adminforth/spa/src/afcl/Input.vue index 302ecaff5..568b55fd8 100644 --- a/adminforth/spa/src/afcl/Input.vue +++ b/adminforth/spa/src/afcl/Input.vue @@ -2,9 +2,9 @@
- + v-if="$slots.prefix || prefix" + class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"> + {{ prefix }} @@ -16,14 +16,14 @@ aria-describedby="helper-text-explanation" class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white translate-y-0" - :class="{'rounded-l-md': !$slots.prefix, 'rounded-r-md': !$slots.suffix, 'w-full': fullWidth}" + :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}" > - + {{ suffix }}
@@ -35,6 +35,8 @@ const props = defineProps({ type: String, fullWidth: Boolean, modelValue: String, + suffix: String, + prefix: String, }) diff --git a/adminforth/spa/src/components/ColumnValueInput.vue b/adminforth/spa/src/components/ColumnValueInput.vue index 98f458b07..d119250e0 100644 --- a/adminforth/spa/src/components/ColumnValueInput.vue +++ b/adminforth/spa/src/components/ColumnValueInput.vue @@ -39,17 +39,19 @@ :readonly="column.editReadonly && source === 'edit'" @update:modelValue="$emit('update:modelValue', $event)" /> - + :modelValue="value" + @update:modelValue="$emit('update:modelValue', $event)" + /> -