scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 21:36:44 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add new field component to number form [SCI-11494]

Browse source
This commit is contained in:
Anton 2025-03-20 15:03:53 +01:00
parent 06e85947f3
commit ac6684d76c
2 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/javascript/vue/forms/fields/number.vue
View file

@ -1,16 +1,27 @@
<template> <template>
<div class="sci-input-container-v2" :class="{'error': !isValidValue}" :data-error="errorMessage"> <div class="w-full">
<input type="number" v-model="value" class="sci-input" :disabled="fieldDisabled" @change="saveValue" <InputField
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_number')"></input> type="number"
v-model="value"
:disabled="fieldDisabled"
@change="saveValue"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_number')"
:warning="!isValidValue"
:warningMessage="warningMessage"
></InputField>
</div> </div>
</template> </template>
<script> <script>
import fieldMixin from './field_mixin'; import fieldMixin from './field_mixin';
import InputField from '../../shared/input_field.vue';
export default { export default {
name: 'NumberField', name: 'NumberField',
mixins: [fieldMixin], mixins: [fieldMixin],
components: {
InputField
},
data() { data() {
return { return {
value: this.field.field_value?.value value: this.field.field_value?.value
@ -39,7 +50,7 @@ export default {
return true; return true;
}, },
errorMessage() { warningMessage() {
const { validations } = this.field.attributes.data; const { validations } = this.field.attributes.data;
if (!validations || !validations.response_validation) { if (!validations || !validations.response_validation) {
@ -55,9 +66,7 @@ export default {
}, },
methods: { methods: {
saveValue() { saveValue() {
if (this.isValidValue) { this.$emit('save', this.value);
this.$emit('save', this.value);
}
} }
} }
}; };

12
app/javascript/vue/shared/input_field.vue
View file

@ -35,6 +35,7 @@
:class="{ :class="{
'!bg-sn-super-light-grey !border-sn-grey': disabled, '!bg-sn-super-light-grey !border-sn-grey': disabled,
'!border-sn-alert-passion': error, '!border-sn-alert-passion': error,
'!border-sn-alert-brittlebush': warning,
'pl-9': leftIcon, 'pl-9': leftIcon,
'pr-10': rightIcon 'pr-10': rightIcon
}" }"
@ -43,7 +44,8 @@
<i :class="rightIcon" class="sn-icon"></i> <i :class="rightIcon" class="sn-icon"></i>
</div> </div>
</div> </div>
<div v-if="errorMessage" class="text-xs text-sn-alert-passion">{{ errorMessage }}</div> <div v-if="error && errorMessage" class="text-xs text-sn-alert-passion">{{ errorMessage }}</div>
<div v-if="warning && warningMessage" class="text-xs text-sn-alert-brittlebush">{{ warningMessage }}</div>
</div> </div>
</template> </template>
@ -103,6 +105,14 @@ export default {
errorMessage: { errorMessage: {
type: String, type: String,
default: null default: null
},
warning: {
type: Boolean,
default: null
},
warningMessage: {
type: String,
default: null
} }
} }
}; };