scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-17 22:42:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add character limit to step form fields [SCI-11453]

Browse source
This commit is contained in:
Anton 2025-01-14 11:51:01 +01:00
parent 6d7b81869e
commit 0971302336
6 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/tailwind/inputs.css
View file

@ -101,7 +101,8 @@
@apply bg-sn-super-light-grey;
}
.sci-input-container-v2.error input {
.sci-input-container-v2.error input,
.sci-input-container-v2.error textarea{
@apply border-sn-alert-passion;
}

4
app/javascript/vue/forms/edit_field.vue
View file

@ -115,14 +115,14 @@ export default {
}
if (this.editField.attributes.name.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
return this.i18n.t('forms.show.title_too_long_error');
return this.i18n.t('forms.show.title_too_long_error', { limit: GLOBAL_CONSTANTS.NAME_MAX_LENGTH });
}
return '';
},
descriptionFieldError() {
if (this.editField.attributes.description.length > GLOBAL_CONSTANTS.TEXT_MAX_LENGTH) {
return this.i18n.t('forms.show.description_too_long_error');
return this.i18n.t('forms.show.description_too_long_error', { limit: GLOBAL_CONSTANTS.TEXT_MAX_LENGTH });
}
return '';

4
app/javascript/vue/forms/edit_fields/number.vue
View file

@ -96,8 +96,8 @@ export default {
return !this.editField.attributes.data.unit || this.editField.attributes.data.unit.length <= GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
},
unitFieldError() {
if (this.editField.attributes.data.unit.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
return this.i18n.t('forms.show.field_too_long_error');
if (this.editField.attributes.data.unit && this.editField.attributes.data.unit.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
return this.i18n.t('forms.show.field_too_long_error', { limit: GLOBAL_CONSTANTS.NAME_MAX_LENGTH });
}
return '';

2
app/javascript/vue/forms/edit_fields/options_mixin.js
View file

@ -12,7 +12,7 @@ export default {
},
optionFieldErrors() {
if (!this.validField) {
return this.i18n.t('forms.show.options_too_many_error');
return this.i18n.t('forms.show.options_too_many_error', { limit: GLOBAL_CONSTANTS.NAME_MAX_LENGTH });
}
return '';

28
app/javascript/vue/forms/fields/text.vue
View file

@ -1,8 +1,9 @@
<template>
<div class="sci-input-container-v2 h-24">
<div class="sci-input-container-v2 h-24 mb-1" :class="{'error': !validValue}" :data-error="valueFieldError">
<textarea
class="sci-input"
:value="value"
ref="input"
:disabled="fieldDisabled"
@change="saveValue"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_text')"></textarea>
@ -10,19 +11,38 @@
</template>
<script>
/* global GLOBAL_CONSTANTS */
import fieldMixin from './field_mixin';
export default {
name: 'TextField',
mixins: [fieldMixin],
data() {
return {
value: this.field.field_value?.value
};
},
methods: {
saveValue(event) {
this.$emit('save', event.target.value);
this.value = event.target.value;
if (this.validValue) {
this.$emit('save', this.value);
}
}
},
computed: {
value() {
return this.field.field_value?.value;
validValue() {
if (!this.value) {
return true;
}
return this.value.length <= GLOBAL_CONSTANTS.TEXT_MAX_LENGTH;
},
valueFieldError() {
if (this.value && this.value.length > GLOBAL_CONSTANTS.TEXT_MAX_LENGTH) {
return this.i18n.t('forms.show.field_too_long_error', { limit: GLOBAL_CONSTANTS.TEXT_MAX_LENGTH });
}
return '';
}
}
};

8
config/locales/en.yml
View file

@ -1111,10 +1111,10 @@ en:
title_label: Title (required)
title_placeholder: 'Add a title'
title_empty_error: 'Title cannot be empty'
title_too_long_error: 'Title is too long'
title_too_long_error: 'Title is too long (maximum number is %{limit} characters)'
description_label: Description
description_placeholder: 'Add a description'
description_too_long_error: 'Description is too long'
description_too_long_error: 'Description is too long (maximum number is %{limit} characters)'
required_label: 'Required'
mark_as_na: 'Mark as N/A'
mark_as_na_explanation: 'Allow user to mark the field as Not-applicable.'
@ -1130,8 +1130,8 @@ en:
time_label: 'Include time'
range_label: 'Include range'
no_block: 'Add your first form block'
field_too_long_error: 'Field is too long'
options_too_many_error: 'Too many options'
field_too_long_error: 'Field is too long (maximum number is %{limit} characters)'
options_too_many_error: 'Too many options (maximum number is %{limit} options)'
validations:
response_validation:
title: 'Response validation'