mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-19 11:34:36 +08:00
This reverts commit eaa0989c77.
This commit is contained in:
Alex Kriuchykhin
GitHub
parent
3b165ba92d
commit
39f4637351
4 changed files with 375 additions and 504 deletions
|
|
@ -11,61 +11,46 @@ export default {
|
|||
return 'border-sn-light-grey hover:border-sn-sleepy-grey';
|
||||
},
|
||||
isEditable() {
|
||||
return this.isEditing && this.editingField === this.dateType;
|
||||
},
|
||||
return this.isEditing && this.editingField === this.dateType
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enableEdit() {
|
||||
this.isEditing = true;
|
||||
this.$emit('setEditingField', this.dateType);
|
||||
this.isEditing = true
|
||||
this.$emit('setEditingField', this.dateType)
|
||||
},
|
||||
saveChange() {
|
||||
if (
|
||||
!this.isEditing
|
||||
|| this.isSaving
|
||||
|| !this.params
|
||||
|| (this.params && !Object.keys(this.params).includes(this.colId?.toString()))
|
||||
) {
|
||||
Object.assign(this.$data, {
|
||||
isEditing: false,
|
||||
isSaving: false,
|
||||
errorMessage: null,
|
||||
});
|
||||
if (!this.isEditing ||
|
||||
this.isSaving ||
|
||||
!this.params ||
|
||||
(this.params && !Object.keys(this.params).includes(this.colId?.toString()))) {
|
||||
Object.assign(this.$data, { isEditing: false, isSaving: false, errorMessage: null });
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Don't submit unless values changed
|
||||
switch (true) {
|
||||
case ['date', 'dateTime', 'time'].includes(this.dateType):
|
||||
if (this.equalDates(this.params[this.colId], this.initDate)) {
|
||||
if(this.equalDates(this.params[this.colId], this.initDate)) {
|
||||
Object.assign(this.$data, { isEditing: false, isSaving: false });
|
||||
return;
|
||||
}
|
||||
if (
|
||||
this.dateType === 'time'
|
||||
&& this.equalTimes(this.params[this.colId], this.initDate)
|
||||
) {
|
||||
if(this.dateType === 'time' && this.equalTimes(this.params[this.colId], this.initDate)) {
|
||||
Object.assign(this.$data, { isEditing: false, isSaving: false });
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
|
||||
if (
|
||||
this.equalDates(this.timeFrom?.datetime, this.initStartDate)
|
||||
&& this.equalDates(this.timeTo?.datetime, this.initEndDate)
|
||||
) {
|
||||
if (this.equalDates(this.timeFrom?.datetime, this.initStartDate) &&
|
||||
this.equalDates(this.timeTo?.datetime, this.initEndDate)) {
|
||||
Object.assign(this.$data, { isEditing: false, isSaving: false });
|
||||
return;
|
||||
}
|
||||
if (
|
||||
this.dateType === 'timeRange'
|
||||
&& this.equalTimes(this.timeFrom?.datetime, this.initStartDate)
|
||||
&& this.equalTimes(this.timeTo?.datetime, this.initEndDate)
|
||||
) {
|
||||
if (this.dateType === 'timeRange' &&
|
||||
this.equalTimes(this.timeFrom?.datetime, this.initStartDate) &&
|
||||
this.equalTimes(this.timeTo?.datetime, this.initEndDate)) {
|
||||
Object.assign(this.$data, { isEditing: false, isSaving: false });
|
||||
return;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -80,34 +65,28 @@ export default {
|
|||
const cellValue = result?.value;
|
||||
switch (true) {
|
||||
case ['date', 'dateTime', 'time'].includes(this.dateType):
|
||||
this.values = cellValue;
|
||||
this.initDate = cellValue?.datetime;
|
||||
break;
|
||||
this.values = cellValue
|
||||
this.initDate = cellValue?.datetime
|
||||
case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
|
||||
this.initStartDate = cellValue?.start_time?.datetime;
|
||||
this.initEndDate = cellValue?.end_time?.datetime;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
Object.assign($this.$data, {
|
||||
isEditing: false,
|
||||
isSaving: false,
|
||||
values: result?.value,
|
||||
});
|
||||
Object.assign($this.$data, { isEditing: false, isSaving: false, values: result?.value });
|
||||
if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
setParams() {
|
||||
const defaultParams = this.params ? this.params : { [this.colId]: {} };
|
||||
let defaultParams = this.params ? this.params : { [this.colId]: {} };
|
||||
switch (true) {
|
||||
case ['date', 'dateTime', 'time'].includes(this.dateType):
|
||||
defaultParams[this.colId] = this.values?.datetime;
|
||||
break;
|
||||
case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
|
||||
defaultParams[this.colId].start_time = this.timeFrom?.datetime;
|
||||
defaultParams[this.colId].end_time = this.timeTo?.datetime;
|
||||
defaultParams[this.colId]['start_time'] = this.timeFrom?.datetime;
|
||||
defaultParams[this.colId]['end_time'] = this.timeTo?.datetime;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -115,23 +94,21 @@ export default {
|
|||
this.params = defaultParams;
|
||||
},
|
||||
formatDateTime(date, field = null) {
|
||||
this.values = this.values ? this.values : { [this.colId]: {} };
|
||||
const params = this.params && this.params[this.colId]
|
||||
? this.params
|
||||
: { [this.colId]: {} };
|
||||
const timeFrom = this.timeFrom || {};
|
||||
const timeTo = this.timeTo || {};
|
||||
this.values = this.values ? this.values : { [this.colId]: {} }
|
||||
let params = this.params && this.params[this.colId] ? this.params : { [this.colId]: {} };
|
||||
let timeFrom = this.timeFrom || {};
|
||||
let timeTo = this.timeTo || {};
|
||||
switch (true) {
|
||||
case ['date', 'dateTime', 'time'].includes(this.dateType):
|
||||
params[this.colId] = date;
|
||||
this.values.datetime = date;
|
||||
this.values['datetime'] = date;
|
||||
break;
|
||||
case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
|
||||
if (field === 'start_time') {
|
||||
timeFrom.datetime = date;
|
||||
timeFrom['datetime'] = date;
|
||||
}
|
||||
if (field === 'end_time') {
|
||||
timeTo.datetime = date;
|
||||
if (field === 'end_time'){
|
||||
timeTo['datetime'] = date;
|
||||
}
|
||||
params[this.colId][field] = date;
|
||||
break;
|
||||
|
|
@ -144,30 +121,22 @@ export default {
|
|||
},
|
||||
dateValue(date) {
|
||||
const typesThatCantBeEmpty = ['dateRange', 'dateTimeRange'];
|
||||
if (
|
||||
date
|
||||
&& date.currentTarget === null
|
||||
&& typesThatCantBeEmpty.includes(this.dateType)
|
||||
) {
|
||||
if (date && (date.currentTarget === null) && typesThatCantBeEmpty.includes(this.dateType)) {
|
||||
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.select_valid_value');
|
||||
return null;
|
||||
return;
|
||||
}
|
||||
if (date) return new Date(date);
|
||||
return null;
|
||||
if(date) return new Date(date)
|
||||
return new Date()
|
||||
},
|
||||
hasMonthText() {
|
||||
$('body')
|
||||
.data('datetime-picker-format')
|
||||
?.match(/MMM/);
|
||||
hasMonthText(){
|
||||
$('body').data('datetime-picker-format')?.match(/MMM/)
|
||||
},
|
||||
equalDates(date1, date2) {
|
||||
equalDates(date1, date2){
|
||||
return new Date(date1).getTime() === new Date(date2).getTime();
|
||||
},
|
||||
equalTimes(date1, date2) {
|
||||
return (
|
||||
new Date(date1).getHours() === new Date(date2).getHours()
|
||||
&& new Date(date1).getMinutes() === new Date(date2).getMinutes()
|
||||
);
|
||||
equalTimes(date1, date2){
|
||||
return new Date(date1).getHours() === new Date(date2).getHours() &&
|
||||
new Date(date1).getMinutes() == new Date(date2).getMinutes()
|
||||
},
|
||||
validateAndSave() {
|
||||
this.errorMessage = null;
|
||||
|
|
@ -176,38 +145,28 @@ export default {
|
|||
// To do
|
||||
break;
|
||||
case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
|
||||
if (!this.params?.[this.colId]) return;
|
||||
|
||||
// start_time and end_time must be both present or both absent
|
||||
if (
|
||||
!!this.params[this.colId]?.start_time?.getTime?.()
|
||||
^ !!this.params[this.colId]?.end_time?.getTime?.()
|
||||
) {
|
||||
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
|
||||
return;
|
||||
}
|
||||
|
||||
// start_time should always be lesser then end_time
|
||||
if (
|
||||
this.params[this.colId]?.start_time?.getTime?.()
|
||||
&& this.params[this.colId].start_time.getTime() > this.params[this.colId].end_time.getTime()
|
||||
) {
|
||||
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
|
||||
return;
|
||||
}
|
||||
|
||||
// start_time and end_time both are absent
|
||||
if (
|
||||
!this.params[this.colId]?.start_time
|
||||
&& !this.params[this.colId]?.end_time
|
||||
) {
|
||||
this.params = { [this.colId]: null };
|
||||
if(this.params && this.params[this.colId]) {
|
||||
if((!this.params[this.colId].start_time && this.params[this.colId].end_time) ||
|
||||
(this.params[this.colId].start_time && !this.params[this.colId].end_time)) {
|
||||
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
|
||||
return;
|
||||
}
|
||||
if (this.params[this.colId].start_time && this.params[this.colId].end_time &&
|
||||
this.params[this.colId].start_time.getTime() && this.params[this.colId].end_time.getTime()) {
|
||||
if(this.params[this.colId].start_time.getTime() > this.params[this.colId].end_time.getTime()) {
|
||||
this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!this.params[this.colId].start_time && !this.params[this.colId].end_time) {
|
||||
this.params = { [this.colId]: null }
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.saveChange();
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,385 +1,297 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="dateTimeRangeOverlay"
|
||||
class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[999] hidden"
|
||||
></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 !px-2 !py-0
|
||||
min-h-[32px] flex items-center
|
||||
[&_.dp\_\_input]:border-0 [&_.dp\_\_input]:p-0"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative"
|
||||
:class="editableClassName"
|
||||
>
|
||||
<template v-if="dateType === 'date'">
|
||||
<div
|
||||
v-if="isEditing || values?.datetime"
|
||||
ref="edit"
|
||||
class="[&_.dp\_\_input]:!w-20"
|
||||
>
|
||||
<!-- DATE -->
|
||||
<div v-if="dateType === 'date'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit">
|
||||
<DateTimePicker
|
||||
:mode="'date'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event)"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:dateOnly="true"
|
||||
:defaultValue="dateValue(values?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t('repositories.item_card.repository_date_value.placeholder')
|
||||
"
|
||||
:standAlone="true"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_date_value.${
|
||||
canEdit ? "placeholder" : "no_date"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="dateType === 'dateRange'">
|
||||
<div
|
||||
v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
|
||||
ref="edit"
|
||||
class="w-full flex align-center [&_.dp\_\_input]:!w-20"
|
||||
>
|
||||
</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>
|
||||
<DateTimePicker
|
||||
:mode="'date'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:dateOnly="true"
|
||||
:defaultValue="dateValue(timeFrom?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_date_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
:dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex items-center mx-1">-</span>
|
||||
<span class="mr-3">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:mode="'date'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:dateOnly="true"
|
||||
:defaultValue="dateValue(timeTo?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_date_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
:dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_date_range_value.${
|
||||
canEdit ? "placeholder" : "no_date_range"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="dateType === 'dateTime'">
|
||||
<div
|
||||
v-if="isEditing || values?.datetime"
|
||||
ref="edit"
|
||||
class="w-full [&_.dp\_\_input]:!w-[7.125rem]"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- DATE-TIME -->
|
||||
<div v-if="dateType === 'dateTime'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
|
||||
<DateTimePicker
|
||||
:mode="'datetime'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:defaultValue="dateValue(values?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_date_time_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
:dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
|
||||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_date_time_value.${
|
||||
canEdit ? "placeholder" : "no_date_time"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="dateType === 'dateTimeRange'">
|
||||
<div
|
||||
v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
|
||||
ref="edit"
|
||||
class="w-full flex [&_.dp\_\_input]:!w-[7.125rem]"
|
||||
>
|
||||
</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>
|
||||
<DateTimePicker
|
||||
:mode="'datetime'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:defaultValue="dateValue(timeFrom?.datetime)"
|
||||
:timeOnly="false"
|
||||
:dateOnly="false"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_date_time_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
:dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
|
||||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex items-center mx-1">-</span>
|
||||
<span class="mx-1">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:mode="'datetime'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:defaultValue="dateValue(timeTo?.datetime)"
|
||||
:timeOnly="false"
|
||||
:dateOnly="false"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_date_time_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
:dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
|
||||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_date_time_range_value.${
|
||||
canEdit ? "placeholder" : "no_date_time_range"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
|
||||
{{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="dateType === 'time'">
|
||||
<div
|
||||
v-if="isEditing || values?.datetime"
|
||||
ref="edit"
|
||||
class="[&_.dp\_\_input]:!w-10"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- TIME -->
|
||||
<div v-else-if="dateType === 'time'">
|
||||
<div v-if="isEditing || values?.datetime" ref="edit">
|
||||
<DateTimePicker
|
||||
:mode="'time'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePicker${colId}`"
|
||||
:timeOnly="true"
|
||||
:defaultValue="dateValue(values?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t('repositories.item_card.repository_time_value.placeholder')
|
||||
"
|
||||
:standAlone="true"
|
||||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_time_value.${
|
||||
canEdit ? "placeholder" : "no_time"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="dateType === 'timeRange'">
|
||||
<div
|
||||
v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)"
|
||||
ref="edit"
|
||||
class="w-full flex [&_.dp\_\_input]:!w-10"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- TIME RANGE -->
|
||||
<div v-else-if="dateType === 'timeRange'">
|
||||
<div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:mode="'time'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'start_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerStart${colId}`"
|
||||
:timeOnly="true"
|
||||
:defaultValue="dateValue(timeFrom?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_time_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
timeClassName="w-11"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex items-center mx-1">-</span>
|
||||
<span class="mx-1">-</span>
|
||||
<div>
|
||||
<DateTimePicker
|
||||
:mode="'time'"
|
||||
:disabled="!canEdit"
|
||||
@change="formatDateTime($event, 'end_time')"
|
||||
@open="enableEdit"
|
||||
@close="validateAndSave"
|
||||
:inputIconHidden="true"
|
||||
inputClassName="sci-cursor-edit"
|
||||
:selectorId="`DatePickerEnd${colId}`"
|
||||
:timeOnly="true"
|
||||
:defaultValue="dateValue(timeTo?.datetime)"
|
||||
:placeholder="
|
||||
i18n.t(
|
||||
'repositories.item_card.repository_time_range_value.placeholder'
|
||||
)
|
||||
"
|
||||
:standAlone="true"
|
||||
timeClassName="ml-2 w-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
ref="view"
|
||||
:class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }"
|
||||
>
|
||||
{{
|
||||
i18n.t(
|
||||
`repositories.item_card.repository_time_range_value.${
|
||||
canEdit ? "placeholder" : "no_time_range"
|
||||
}`
|
||||
)
|
||||
}}
|
||||
<div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
|
||||
{{ i18n.t(`repositories.item_card.repository_time_range_value.${canEdit ? 'placeholder' : 'no_time_range'}`) }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<span class="absolute right-2 top-1.5" v-if="values?.reminder">
|
||||
<Reminder :value="values" />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="text-sn-delete-red text-xs w-full "
|
||||
:class="{ visible: errorMessage, invisible: !errorMessage }"
|
||||
>
|
||||
<div class="text-sn-delete-red text-xs w-full " :class="{ visible: errorMessage, invisible: !errorMessage }">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import dateTimeRange from '../mixins/date_time_range';
|
||||
import DateTimePicker from '../../shared/date_time_picker.vue';
|
||||
import Reminder from '../reminder.vue';
|
||||
import { vOnClickOutside } from '@vueuse/components'
|
||||
import date_time_range from './../mixins/date_time_range';
|
||||
import DateTimePicker from '../../shared/date_time_picker.vue';
|
||||
import Reminder from './../reminder.vue';
|
||||
|
||||
export default {
|
||||
name: 'DateTimeRange',
|
||||
mixins: [dateTimeRange],
|
||||
components: {
|
||||
DateTimePicker,
|
||||
Reminder,
|
||||
},
|
||||
directives: {
|
||||
'click-outside': vOnClickOutside,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: {},
|
||||
errorMessage: null,
|
||||
params: null,
|
||||
cellUpdatePath: null,
|
||||
timeFrom: null,
|
||||
timeTo: null,
|
||||
isEditing: false,
|
||||
initValue: null,
|
||||
initStartDate: null,
|
||||
initEndDate: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
dateType: String,
|
||||
colVal: null,
|
||||
colId: null,
|
||||
updatePath: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
editingField: false,
|
||||
canEdit: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
editableClassName() {
|
||||
const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit';
|
||||
if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
|
||||
if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
|
||||
if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
|
||||
return '';
|
||||
export default {
|
||||
name: 'DateTimeRange',
|
||||
mixins: [date_time_range],
|
||||
components: {
|
||||
DateTimePicker,
|
||||
Reminder
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.cellUpdatePath = this.updatePath;
|
||||
this.values = this.colVal || {};
|
||||
this.timeFrom = this.startTime;
|
||||
this.timeTo = this.endTime;
|
||||
this.errorMessage = null;
|
||||
this.setParams();
|
||||
this.initDate = this.colVal?.datetime;
|
||||
this.initStartDate = this.startTime?.datetime;
|
||||
this.initEndDate = this.endTime?.datetime;
|
||||
},
|
||||
watch: {
|
||||
isEditing(newValue) {
|
||||
if (!newValue) return;
|
||||
// Focus input field to open date picker
|
||||
this.$nextTick(() => {
|
||||
$(this.$refs.edit)
|
||||
?.find('input')[0]
|
||||
?.focus();
|
||||
});
|
||||
directives: {
|
||||
'click-outside': vOnClickOutside
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
values: {},
|
||||
errorMessage: null,
|
||||
params: null,
|
||||
cellUpdatePath: null,
|
||||
timeFrom: null,
|
||||
timeTo: null,
|
||||
isEditing: false,
|
||||
initValue: null,
|
||||
initStartDate: null,
|
||||
initEndDate: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dateType: String,
|
||||
colVal: null,
|
||||
colId: null,
|
||||
updatePath: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
editingField: false,
|
||||
canEdit: { type: Boolean, default: false }
|
||||
|
||||
},
|
||||
computed: {
|
||||
editableClassName() {
|
||||
const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit'
|
||||
if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
|
||||
if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
|
||||
if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
|
||||
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 || {};
|
||||
this.timeFrom = this.startTime
|
||||
this.timeTo = this.endTime
|
||||
this.errorMessage = null;
|
||||
this.setParams();
|
||||
this.initDate = this.colVal?.datetime;
|
||||
this.initStartDate = this.startTime?.datetime;
|
||||
this.initEndDate = this.endTime?.datetime;
|
||||
},
|
||||
watch: {
|
||||
isEditing(newValue) {
|
||||
if (!newValue) return;
|
||||
// Focus input field to open date picker
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
console.log('mounted');
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.initializeComponent();
|
||||
this.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@
|
|||
week-start="0"
|
||||
:enable-time-picker="mode == 'datetime'"
|
||||
:time-picker="mode == 'time'"
|
||||
:hide-input-icon="inputIconHidden"
|
||||
:input-class-name="inputClassName"
|
||||
@open="this.$emit('open')"
|
||||
@close="this.$emit('close')"
|
||||
:placeholder="placeholder" >
|
||||
<template #arrow-right>
|
||||
<img class="slot-icon" src="/images/calendar/navigate_next.svg"/>
|
||||
|
|
@ -52,141 +48,144 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
|
||||
export default {
|
||||
name: 'DateTimePicker',
|
||||
props: {
|
||||
mode: { type: String, default: 'datetime' },
|
||||
clearable: { type: Boolean, default: false },
|
||||
teleport: { type: Boolean, default: true },
|
||||
defaultValue: { type: Date, required: false },
|
||||
placeholder: { type: String },
|
||||
inputIconHidden: { type: Boolean, default: false },
|
||||
inputClassName: { type: String, default: null },
|
||||
disabled: { type: Boolean, default: false },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
manualUpdate: false,
|
||||
datetime: this.defaultValue,
|
||||
time: null,
|
||||
markers: [
|
||||
{
|
||||
date: new Date(),
|
||||
type: 'dot',
|
||||
color: '#3B99FD',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.defaultValue) {
|
||||
this.time = {
|
||||
hours: this.defaultValue.getHours(),
|
||||
minutes: this.defaultValue.getMinutes(),
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueDatePicker,
|
||||
},
|
||||
watch: {
|
||||
defaultValue() {
|
||||
this.datetime = this.defaultValue;
|
||||
export default {
|
||||
name: 'DateTimePicker',
|
||||
props: {
|
||||
mode: { type: String, default: 'datetime' },
|
||||
clearable: { type: Boolean, default: false },
|
||||
teleport: { type: Boolean, default: true },
|
||||
defaultValue: { type: Date, required: false },
|
||||
placeholder: { type: String },
|
||||
standAlone: { type: Boolean, default: false, required: false },
|
||||
dateClassName: { type: String, default: '' },
|
||||
timeClassName: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
manualUpdate: false,
|
||||
datetime: this.defaultValue,
|
||||
time: null,
|
||||
markers: [
|
||||
{
|
||||
date: new Date(),
|
||||
type: 'dot',
|
||||
color: '#3B99FD',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.defaultValue) {
|
||||
this.time = {
|
||||
hours: this.defaultValue.getHours(),
|
||||
minutes: this.defaultValue.getMinutes(),
|
||||
};
|
||||
hours: this.defaultValue.getHours(),
|
||||
minutes:this.defaultValue.getMinutes(),
|
||||
}
|
||||
}
|
||||
},
|
||||
datetime() {
|
||||
if (this.mode === 'time') {
|
||||
this.time = null;
|
||||
components: {
|
||||
VueDatePicker
|
||||
},
|
||||
watch: {
|
||||
defaultValue: function () {
|
||||
this.datetime = this.defaultValue;
|
||||
if (this.defaultValue) {
|
||||
this.time = {
|
||||
hours: this.defaultValue.getHours(),
|
||||
minutes: this.defaultValue.getMinutes()
|
||||
}
|
||||
}
|
||||
},
|
||||
datetime: function () {
|
||||
if (this.mode == 'time') {
|
||||
|
||||
if (this.datetime) {
|
||||
this.time = null;
|
||||
|
||||
if (this.datetime) {
|
||||
this.time = {
|
||||
hours: this.datetime.getHours(),
|
||||
minutes: this.datetime.getMinutes(),
|
||||
};
|
||||
minutes: this.datetime.getMinutes()
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.manualUpdate) {
|
||||
this.manualUpdate = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.datetime === null) {
|
||||
this.$emit('cleared');
|
||||
}
|
||||
|
||||
if (this.defaultValue !== this.datetime) {
|
||||
this.$emit('change', this.datetime);
|
||||
}
|
||||
},
|
||||
time() {
|
||||
if (this.manualUpdate) {
|
||||
this.manualUpdate = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.mode !== 'time') return;
|
||||
|
||||
let newDate;
|
||||
|
||||
if (this.time) {
|
||||
newDate = new Date();
|
||||
newDate.setHours(this.time.hours);
|
||||
newDate.setMinutes(this.time.minutes);
|
||||
} else {
|
||||
newDate = {
|
||||
hours: null,
|
||||
minutes: null,
|
||||
};
|
||||
this.$emit('cleared');
|
||||
}
|
||||
|
||||
if (this.defaultValue !== newDate) {
|
||||
this.$emit('change', newDate);
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
compDatetime: {
|
||||
get() {
|
||||
if (this.mode === 'time') {
|
||||
return this.time;
|
||||
return
|
||||
}
|
||||
|
||||
if (this.manualUpdate) {
|
||||
this.manualUpdate = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if ( this.datetime == null) {
|
||||
this.$emit('cleared');
|
||||
}
|
||||
|
||||
if (this.defaultValue != this.datetime) {
|
||||
this.$emit('change', this.datetime);
|
||||
}
|
||||
return this.datetime;
|
||||
},
|
||||
set(val) {
|
||||
if (this.mode === 'time') {
|
||||
this.time = val;
|
||||
time: function () {
|
||||
if (this.manualUpdate) {
|
||||
this.manualUpdate = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.mode != 'time') return;
|
||||
|
||||
let newDate;
|
||||
|
||||
if (this.time) {
|
||||
newDate = new Date();
|
||||
newDate.setHours(this.time.hours);
|
||||
newDate.setMinutes(this.time.minutes);
|
||||
} else {
|
||||
this.datetime = val;
|
||||
newDate = {
|
||||
hours: null,
|
||||
minutes: null
|
||||
};
|
||||
this.$emit('cleared');
|
||||
}
|
||||
|
||||
if (this.defaultValue != newDate) {
|
||||
this.$emit('change', newDate);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
compDatetime: {
|
||||
get () {
|
||||
if (this.mode == 'time') {
|
||||
return this.time
|
||||
} else {
|
||||
return this.datetime
|
||||
}
|
||||
},
|
||||
set (val) {
|
||||
if (this.mode == 'time') {
|
||||
this.time = val
|
||||
} else {
|
||||
this.datetime = val
|
||||
}
|
||||
}
|
||||
},
|
||||
format() {
|
||||
if (this.mode == 'time') return 'HH:mm'
|
||||
if (this.mode == 'date') return document.body.dataset.datetimePickerFormatVue
|
||||
return `${document.body.dataset.datetimePickerFormatVue} HH:mm`
|
||||
}
|
||||
},
|
||||
format() {
|
||||
if (this.mode === 'time') return 'HH:mm';
|
||||
if (this.mode === 'date') return document.body.dataset.datetimePickerFormatVue;
|
||||
return `${document.body.dataset.datetimePickerFormatVue} HH:mm`;
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.close);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.close);
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener('resize', this.close);
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$refs.datetimePicker.closeMenu();
|
||||
unmounted() {
|
||||
window.removeEventListener('resize', this.close);
|
||||
},
|
||||
},
|
||||
};
|
||||
methods: {
|
||||
close() {
|
||||
this.$refs.datetimePicker.closeMenu();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue