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

Small form fixes [SCI-11423][SCI-11433]

Browse source
This commit is contained in:
Anton 2025-01-09 14:45:21 +01:00
parent 3bbbeb7b35
commit cd8ec80b8a
10 changed files with 62 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -91,6 +91,12 @@
@apply border-sn-science-blue;
}
.sci-input-container-v2 textarea:disabled {
background-color: var(--sn-super-light-grey);
color: var(--sn-grey);
border: 1px solid var(--sn-light-grey);
}
.sci-input-container-v2 .history-flyout li:hover {
@apply bg-sn-super-light-grey;
}

10
app/javascript/vue/forms/field.vue
View file

@ -17,9 +17,15 @@
<button class="btn btn-secondary mb-0.5"
:disabled="disabled"
v-if="field.attributes.allow_not_applicable"
:class="{'!bg-sn-super-light-blue !border-sn-blue': markAsNa}"
:class="{'!bg-sn-super-light-blue !border-sn-blue': markAsNa && !disabled }"
@click="markAsNa = !markAsNa">
<div class="w-4 h-4 !border-sn-blue border rounded-sm flex items-center justify-center" :class="{'bg-sn-blue': markAsNa}">
<div class="w-4 h-4 border rounded-sm flex items-center justify-center"
:class="{
'bg-sn-blue': markAsNa && !disabled,
'bg-sn-grey-500': markAsNa && disabled,
'!border-sn-blue': !disabled,
'border-sn-grey-500': disabled
}">
<i class="sn-icon sn-icon-check text-white" style="font-size: 16px !important;"></i>
</div>
{{ i18n.t('forms.fields.mark_as_na') }}

49
app/javascript/vue/forms/fields/datetime.vue
View file

@ -1,25 +1,30 @@
<template>
<div>
<div v-if="range" class="flex items-center gap-4">
<DateTimePicker
@change="updateFromDate"
:mode="mode"
:defaultValue="fromValue"
:clearable="true"
:disabled="fieldDisabled"
:placeholder="i18n.t('forms.fields.from')"
:class="{'error': !validValue}"
/>
<DateTimePicker
@change="updateToDate"
:defaultValue="toValue"
:mode="mode"
:disabled="fieldDisabled"
:clearable="true"
:placeholder="i18n.t('forms.fields.to')"
:class="{'error': !validValue}"
/>
</div>
<div class='relative'>
<template v-if="range">
<div class="flex items-center gap-4">
<DateTimePicker
@change="updateFromDate"
:mode="mode"
:defaultValue="fromValue"
:clearable="true"
:disabled="fieldDisabled"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.from')"
:class="{'error': !validValue}"
/>
<DateTimePicker
@change="updateToDate"
:defaultValue="toValue"
:mode="mode"
:disabled="fieldDisabled"
:clearable="true"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.to')"
:class="{'error': !validValue}"
/>
</div>
<span v-if="!validValue" class="text-xs text-sn-delete-red block absolute -bottom-3.5">
{{ i18n.t('forms.fields.not_valid_range') }}
</span>
</template>
<DateTimePicker
v-else
@change="updateDate"
@ -27,7 +32,7 @@
:mode="mode"
:disabled="fieldDisabled"
:clearable="true"
:placeholder="i18n.t(`forms.fields.add_${mode}`)"
:placeholder="fieldDisabled ? '' : i18n.t(`forms.fields.add_${mode}`)"
/>
</div>
</template>

1
app/javascript/vue/forms/fields/multiple_choice.vue
View file

@ -8,6 +8,7 @@
:multiple="true"
:withCheckboxes="true"
:clearable="true"
:placeholder="fieldDisabled ? ' ' : null"
/>
</div>
</template>

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

@ -1,6 +1,7 @@
<template>
<div class="sci-input-container-v2 mb-2" :class="{'error': !isValidValue}" :data-error="errorMessage">
<input type="number" v-model="value" class="sci-input" :disabled="fieldDisabled" @change="saveValue" :placeholder="i18n.t('forms.fields.add_number')"></input>
<input type="number" v-model="value" class="sci-input" :disabled="fieldDisabled" @change="saveValue"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_number')"></input>
</div>
</template>
@ -23,7 +24,7 @@ export default {
return true;
}
if (validations.response_validation.type === 'between' && validations.response_validation.enabled) {
if (validations.response_validation.type === 'between' && validations.response_validation.enabled && this.value) {
return this.value >= validations.response_validation.min
&& this.value <= validations.response_validation.max;
}

1
app/javascript/vue/forms/fields/single_choice.vue
View file

@ -6,6 +6,7 @@
:value="value"
@change="saveValue"
:clearable="true"
:placeholder="fieldDisabled ? ' ' : null"
/>
</div>
</template>

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

@ -1,6 +1,11 @@
<template>
<div class="sci-input-container-v2 h-24">
<textarea class="sci-input" :value="value" :disabled="fieldDisabled" @change="saveValue" :placeholder="i18n.t('forms.fields.add_text')"></textarea>
<textarea
class="sci-input"
:value="value"
:disabled="fieldDisabled"
@change="saveValue"
:placeholder="fieldDisabled ? '' : i18n.t('forms.fields.add_text')"></textarea>
</div>
</template>

7
app/javascript/vue/shared/content/modal/form_select.vue
View file

@ -5,7 +5,12 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
<h4 class="modal-title" id="modal-move-result-element">
{{ i18n.t(`protocols.steps.modals.form_modal.title`) }}
<template v-if="anyForms">
{{ i18n.t(`protocols.steps.modals.form_modal.title`) }}
</template>
<template v-else>
{{ i18n.t(`protocols.steps.modals.form_modal.no_forms_title`) }}
</template>
</h4>
</div>
<div class="modal-body">

4
app/javascript/vue/shared/inline_edit.vue
View file

@ -43,8 +43,8 @@
:data-e2e="`e2e-TX-${dataE2e}`"
@click="enableEdit($event)"
>
<span :class="{'truncate': singleLine }" :title="sa_value || placeholder" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
<span :class="{'truncate': singleLine}" :title="newValue || placeholder" v-else>{{newValue || placeholder}}</span>
<span :class="{'truncate': singleLine }" class="py-1" :title="sa_value || placeholder" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
<span :class="{'truncate': singleLine}" class="py-1" :title="newValue || placeholder" v-else>{{newValue || placeholder}}</span>
</div>
<div

2
config/locales/en.yml
View file

@ -1088,6 +1088,7 @@ en:
to: "To"
add_date: "Add date"
add_datetime: "Add date & time"
not_valid_range: "Range is not valid"
index:
head_title: "Forms"
toolbar:
@ -3887,6 +3888,7 @@ en:
confirm: 'Delete forever'
form_modal:
title: "Insert form"
no_forms_title: "No available forms found"
description: "Select a form you want to add to your protocol"
label: "Form"
placeholder: "Select a form"