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

Revert (fix) Item card behavior in cases of error states vol. 2 [SCI-9792] (#6953)

Browse source
This commit is contained in:
Alex Kriuchykhin 2024-01-16 11:41:20 +01:00 • committed by GitHub
parent 967950468d
commit 393e624c16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
app/javascript/vue/repository_item_sidebar/repository_values/date_time_component.vue
View file

@ -1,7 +1,4 @@
<template> <template>
<div ref="dateTimeRangeOverlay"
class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[99] hidden">
</div>
<div class="flex gap-1"> <div class="flex gap-1">
<div class="text-sm font-bold truncate" :title="colName"> <div class="text-sm font-bold truncate" :title="colName">
{{ colName }} {{ colName }}
@ -30,11 +27,11 @@
<template v-else> <template v-else>
<div> <div>
<span class="text-xs capitalize" v-if="range">{{ i18n.t('general.from') }}</span> <span class="text-xs capitalize" v-if="range">{{ i18n.t('general.from') }}</span>
<DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true" ref="dateTimePickerFrom"/> <DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true"/>
</div> </div>
<div> <div>
<span class="text-xs capitalize" v-if="range">{{ i18n.t('general.to') }}</span> <span class="text-xs capitalize" v-if="range">{{ i18n.t('general.to') }}</span>
<DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true" ref="dateTimePickerTo"/> <DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true"/>
</div> </div>
<div class="text-xs text-sn-delete-red" v-if="error">{{ error }}</div> <div class="text-xs text-sn-delete-red" v-if="error">{{ error }}</div>
</template> </template>
@ -57,9 +54,7 @@ export default {
endDate: null, endDate: null,
error: null, error: null,
defaultStartDate: null, defaultStartDate: null,
defaultEndDate: null, defaultEndDate: null
fromPicker: null,
toPicker: null
}; };
}, },
inject: ['reloadRepoItemSidebar'], inject: ['reloadRepoItemSidebar'],
@ -81,18 +76,6 @@ export default {
this.defaultStartDate = this.startDate; this.defaultStartDate = this.startDate;
this.defaultEndDate = this.endDate; this.defaultEndDate = this.endDate;
}, },
mounted() {
this.fromPicker = this.$refs.dateTimePickerFrom;
this.toPicker = this.$refs.dateTimePickerTo;
document.addEventListener('click', this.logClick);
document.addEventListener('keydown', this.handleKeyDown);
},
beforeUnmount() {
this.fromPicker = null;
this.toPicker = null;
document.removeEventListener('click', this.logClick);
document.removeEventListener('keydown', this.handleKeyDown);
},
computed: { computed: {
value: { value: {
get() { get() {
@ -202,71 +185,6 @@ export default {
const hours = date.getHours(); const hours = date.getHours();
const mins = date.getMinutes(); const mins = date.getMinutes();
return `${y}/${m}/${d} ${hours}:${mins}`; return `${y}/${m}/${d} ${hours}:${mins}`;
},
showOverlay() {
const overlay = this.$refs.dateTimeRangeOverlay;
overlay.classList.remove('hidden');
},
hideOverlay() {
const overlay = this.$refs.dateTimeRangeOverlay;
overlay.classList.add('hidden');
},
preventBodyScrolling() {
document.body.classList.add('overflow-hidden');
document.body.classList.remove('overflow-auto');
},
allowBodyScrolling() {
document.body.classList.remove('overflow-hidden');
document.body.classList.add('overflow-auto');
},
bringCalendarToFront() {
const calendarEl = document.querySelector('.dp__instance_calendar');
calendarEl.classList.add('z-[9999]');
},
focusClearedInput() {
if (!this.fromPicker.datetime) {
const fromInput = this.fromPicker.$el.querySelector('input');
fromInput.focus();
fromInput.click();
}
if (!this.toPicker.datetime) {
const toInput = this.toPicker.$el.querySelector('input');
toInput.focus();
toInput.click();
}
this.preventBodyScrolling();
this.showOverlay();
this.$nextTick(() => {
this.bringCalendarToFront();
});
},
logClick() {
if (this.error) this.focusClearedInput();
},
handleKeyDown(event) {
if (event.key === 'Escape' || (event.ctrlKey && event.key === 'z')) {
if (this.startDate === null && this.fromPicker) {
this.startDate = this.defaultStartDate;
this.fromPicker.datetime = this.defaultStartDate;
this.error = null;
}
if (this.endDate === null && this.toPicker) {
this.endDate = this.defaultEndDate;
this.toPicker.datetime = this.defaultEndDate;
this.error = null;
}
}
}
},
watch: {
error(newVal) {
if (newVal !== null) {
this.focusClearedInput();
} else {
this.hideOverlay();
this.allowBodyScrolling();
}
} }
} }
}; };