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

Revert chages to shared inline editing component [SCI-9412]

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2023-10-27 10:59:28 +02:00
parent c22d1e226b
commit a7c587ca1c
1 changed files with 40 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<template> <template>
<div class="w-full relative flex"> <div class="w-full relative flex">
<template v-if="editing"> <template v-if="editing">
<input v-if="singleLine" <input type="text"
type="text" v-if="singleLine"
ref="input" ref="input"
class="inline-block leading-5 outline-none pl-0 py-1 border-0 border-solid border-y w-full border-t-transparent" class="inline-block leading-5 outline-none pl-0 py-1 border-0 border-solid border-y w-full border-t-transparent"
:class="{ :class="{
'inline-edit-placeholder text-sn-grey caret-black': isBlank, 'inline-edit-placeholder text-sn-grey caret-black': isBlank,
'border-b-sn-delete-red': error, 'border-b-sn-delete-red': error,
'border-b-sn-science-blue': !error 'border-b-sn-science-blue': !error,
}" }"
v-model="newValue" v-model="newValue"
@keydown="handleKeypress" @keydown="handleKeypress"
@ -17,46 +17,29 @@
@focus="setCaretAtEnd"/> @focus="setCaretAtEnd"/>
<textarea v-else <textarea v-else
ref="input" ref="input"
class="leading-5 inline-block outline-none border-solid w-full" class="overflow-hidden leading-5 inline-block outline-none px-0 py-1 border-0 border-solid border-y w-full border-t-transparent mb-0.5"
:class="{ :class="{
'border-0 inline-edit-placeholder text-sn-grey caret-black': isBlank, 'inline-edit-placeholder text-sn-grey caret-black': isBlank,
'border-sn-delete-red': error, 'border-sn-delete-red': error,
'border-sn-science-blue': !error, 'border-sn-science-blue': !error,
'overflow-hidden px-0 py-1 border-0 border-y border-t-transparent': !expandable,
'font-normal border-[1px] box-content overflow-x-hidden overflow-y-auto resize-none rounded px-4 py-2': expandable,
'max-h-[4rem]': expandable && collapsed,
'max-h-[40rem]': expandable && !collapsed
}" }"
:placeholder="placeholder" :placeholder="placeholder"
v-model="newValue" v-model="newValue"
@keydown="handleKeypress" @keydown="handleKeypress"
@blur="handleBlur" @blur="handleBlur"
@keyup.escape="cancelEdit" @keyup.escape="cancelEdit"
@focus="setCaretAtEnd" /> @focus="setCaretAtEnd"/>
</template> </template>
<template v-else> <div
<div v-if="singleLine" v-else
ref="view" ref="view"
class="grid sci-cursor-edit leading-5 border-0 py-1 outline-none border-solid border-y border-transparent" class="grid sci-cursor-edit leading-5 border-0 py-1 outline-none border-solid border-y border-transparent"
:class="{ 'text-sn-grey font-normal': isBlank }" :class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line': !singleLine }"
@click="enableEdit($event)" @click="enableEdit($event)"
> >
<span class="truncate" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span> <span :class="{'truncate': singleLine }" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>
<span class="truncate" v-else>{{newValue || placeholder}}</span> <span :class="{'truncate': singleLine}" v-else>{{newValue || placeholder}}</span>
</div> </div>
<div v-else
ref="view"
class="grid w-full box-content sci-cursor-edit font-normal leading-5 border outline-none border-solid px-4 py-2 border-sn-light-grey
hover:border-sn-sleepy-grey rounded overflow-y-auto whitespace-pre-line"
:class="{ 'text-sn-grey font-normal': isBlank,
'max-h-[4rem]': expandable && collapsed,
'max-h-[40rem]': expandable && !collapsed, }"
@click="enableEdit($event)"
>
<span v-if="smartAnnotation" v-html="sa_value || noContentPlaceholder ||placeholder" ></span>
<span v-else>{{ newValue || noContentPlaceholder || placeholder }}</span>
</div>
</template>
<div <div
class="mt-2 whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full" class="mt-2 whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full"
@ -82,7 +65,6 @@
characterMinLimit: { type: Number }, characterMinLimit: { type: Number },
timestamp: { type: String}, timestamp: { type: String},
placeholder: { type: String }, placeholder: { type: String },
noContentPlaceholder: { type: String, default: '' },
autofocus: { type: Boolean, default: false }, autofocus: { type: Boolean, default: false },
saveOnEnter: { type: Boolean, default: true }, saveOnEnter: { type: Boolean, default: true },
allowNewLine: { type: Boolean, default: false }, allowNewLine: { type: Boolean, default: false },
@ -90,9 +72,7 @@
smartAnnotation: { type: Boolean, default: false }, smartAnnotation: { type: Boolean, default: false },
editOnload: { type: Boolean, default: false }, editOnload: { type: Boolean, default: false },
defaultValue: { type: String, default: '' }, defaultValue: { type: String, default: '' },
singleLine: { type: Boolean, default: true }, singleLine: { type: Boolean, default: true }
expandable: { type: Boolean, default: false },
collapsed: { type: Boolean, default: true }
}, },
data() { data() {
return { return {
@ -113,10 +93,7 @@
}, },
watch: { watch: {
editing() { editing() {
this.refreshTexareaHeight(); this.refreshTexareaHeight()
},
value() {
this.newValue = this.value || '';
}, },
newValue() { newValue() {
if (this.newValue.length === 0 && this.editing) { if (this.newValue.length === 0 && this.editing) {