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

Merge branch 'features/inventory-item-card-edit' into develop

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2023-11-23 11:39:08 +01:00
commit 9adad3139c
5 changed files with 105 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/vue/repository_item_sidebar/Title.vue
View file

@ -1,6 +1,7 @@
<template>
<inline-edit v-if="editable" class="item-name my-auto text-xl font-semibold" :value="name" :characterLimit="255"
:characterMinLimit="0" :allowBlank="false" :smartAnnotation="false"
:preventLeavingUntilFilled="true"
:attributeName="`${i18n.t('repositories.item_card.header_title')}`" :singleLine="true"
@editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName" @delete="handleDelete"></inline-edit>
<h4 v-else class="item-name my-auto truncate text-xl" :title="name">

10
app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
View file

@ -6,7 +6,7 @@ export default {
},
computed: {
borderColor() {
if (this.errorMessage) return 'border-sn-delete-red';
if (this.errorMessage) return 'border-sn-delete-red';
if (this.isEditing) return 'border-sn-science-blue';
return 'border-sn-light-grey hover:border-sn-sleepy-grey';
},
@ -91,7 +91,6 @@ export default {
default:
break;
}
this.params = defaultParams;
},
formatDateTime(date, field = null) {
@ -121,6 +120,11 @@ export default {
this.params = params;
},
dateValue(date) {
const typesThatCantBeEmpty = ['dateRange', 'dateTimeRange'];
if (date && (date.currentTarget === null) && typesThatCantBeEmpty.includes(this.dateType)) {
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.select_valid_value');
return;
}
if(date) return new Date(date)
return new Date()
},
@ -165,4 +169,4 @@ export default {
this.saveChange();
}
},
};
};

80
app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
View file

@ -1,11 +1,15 @@
<template>
<div>
<div ref="dateTimeRangeOverlay"
class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[999] hidden">
</div>
<div
@click="enableEdit"
v-click-outside="validateAndSave"
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative"
:class="editableClassName"
>
<!-- DATE -->
<div v-if="dateType === 'date'">
<div v-if="isEditing || values?.datetime" ref="edit">
<DateTimePicker
@ -21,6 +25,8 @@
{{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
</div>
</div>
<!-- DATE RANGE -->
<div v-else-if="dateType === 'dateRange'">
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
<div>
@ -38,12 +44,12 @@
<div>
<DateTimePicker
:disabled="!canEdit"
@change="formatDateTime($event, 'end_time')"
:selectorId="`DatePickerEnd${colId}`"
:dateOnly="true"
:defaultValue="dateValue(timeTo?.datetime)"
:standAlone="true"
:dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
@change="formatDateTime($event, 'end_time')"
:selectorId="`DatePickerEnd${colId}`"
:dateOnly="true"
:defaultValue="dateValue(timeTo?.datetime)"
:standAlone="true"
:dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
/>
</div>
</div>
@ -51,6 +57,8 @@
{{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
</div>
</div>
<!-- DATE-TIME -->
<div v-if="dateType === 'dateTime'">
<div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
<DateTimePicker
@ -67,6 +75,8 @@
{{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
</div>
</div>
<!-- DATE-TIME RANGE -->
<div v-else-if="dateType === 'dateTimeRange'">
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
<div>
@ -101,6 +111,8 @@
{{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
</div>
</div>
<!-- TIME -->
<div v-else-if="dateType === 'time'">
<div v-if="isEditing || values?.datetime" ref="edit">
<DateTimePicker
@ -117,6 +129,8 @@
{{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
</div>
</div>
<!-- TIME RANGE -->
<div v-else-if="dateType === 'timeRange'">
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
<div>
@ -207,6 +221,47 @@
return ''
}
},
methods: {
showOverlay() {
const overlay = this.$refs.dateTimeRangeOverlay;
overlay.classList.remove('hidden');
},
hideOverlay() {
const overlay = this.$refs.dateTimeRangeOverlay;
overlay.classList.add('hidden');
},
bringCalendarToFront() {
const calendarEl = document.querySelector('.dp__instance_calendar');
calendarEl.classList.add('z-[9999]');
},
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');
},
focusClearedInput() {
const firstInput = $(this.$refs.edit)?.find('input')[0];
const secondInput = $(this.$refs.edit)?.find('input')[1];
// first is empty
if (!firstInput.value) {
firstInput.focus();
firstInput.click();
}
// second is empty
if (!secondInput.value) {
secondInput.focus();
secondInput.click();
}
this.preventBodyScrolling();
this.showOverlay();
this.bringCalendarToFront();
},
},
mounted() {
this.cellUpdatePath = this.updatePath;
this.values = this.colVal || {};
@ -225,7 +280,18 @@
this.$nextTick(() => {
$(this.$refs.edit)?.find('input')[0]?.focus();
})
}
},
errorMessage(newVal) {
if (newVal !== null) {
this.$nextTick(() => {
this.focusClearedInput();
});
}
if (newVal === null) {
this.hideOverlay();
this.allowBodyScrolling();
}
},
}
}
</script>

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

@ -73,7 +73,8 @@
smartAnnotation: { type: Boolean, default: false },
editOnload: { type: Boolean, default: false },
defaultValue: { type: String, default: '' },
singleLine: { type: Boolean, default: true }
singleLine: { type: Boolean, default: true },
preventLeavingUntilFilled: { type: Boolean, default: false }
},
data() {
return {
@ -122,7 +123,11 @@
return this.newValue === this.defaultValue;
},
error() {
if(!this.allowBlank && this.isBlank) {
if (!this.allowBlank && this.isBlank) {
if (this.preventLeavingUntilFilled) {
this.addPreventFromLeaving(document.body);
}
return this.i18n.t('inline_edit.errors.blank', { attribute: this.attributeName })
}
if(this.characterLimit && this.newValue.length > this.characterLimit) {
@ -146,10 +151,25 @@
)
}
this.removePreventFromLeaving(document.body);
return false
}
},
methods: {
removePreventFromLeaving(domEl) {
domEl.removeEventListener('click', this.preventClicks, true);
domEl.removeEventListener('mousedown', this.preventClicks, true);
domEl.removeEventListener('mouseup', this.preventClicks, true);
},
addPreventFromLeaving(domEl) {
domEl.addEventListener('click', this.preventClicks, true);
domEl.addEventListener('mousedown', this.preventClicks, true);
domEl.addEventListener('mouseup', this.preventClicks, true);
},
preventClicks(event) {
event.stopPropagation();
event.preventDefault();
},
handleAutofocus() {
if (this.autofocus || !this.placeholder && this.isBlank || this.editOnload && this.isBlank) {
this.enableEdit();

2
config/locales/en.yml
View file

@ -2308,6 +2308,8 @@ en:
errors:
set_all_or_none: 'Needs to set both or none'
not_valid_range: 'Range is not valid.'
select_valid_value: 'Select a valid date or date-time value'
browser_alert_message: 'You have made some changes, are you sure you want to leave this page?'
highlight_component:
information_label: 'Information'
custom_columns_label: 'Custom columns'