mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
Merge pull request #6708 from aignatov-bio/ai-sci-9741-fix-datetime-field
Item card datetime picker final version [SCI-9741]
This commit is contained in:
commit
8a3be86bde
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<DateTimePicker :defaultValue="defaultStartDate" @change="updateStartDate" :mode="mode" :clearable="true"/>
|
||||
<DateTimePicker :defaultValue="defaultEndDate" v-if="range" @change="updateEndDate" :mode="mode" :clearable="true"/>
|
||||
<DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true"/>
|
||||
<div v-if="range" class="w-0.5 h-3 bg-sn-grey mx-auto"></div> <!-- divider -->
|
||||
<DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true"/>
|
||||
<div class="text-xs text-sn-delete-red" v-if="error">{{ error }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -19,6 +21,9 @@
|
|||
return {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
error: null,
|
||||
defaultStartDate: null,
|
||||
defaultEndDate: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
@ -36,51 +41,76 @@
|
|||
} else {
|
||||
if (this.colVal.datetime) this.startDate = new Date(this.colVal.datetime)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
this.defaultStartDate = this.startDate;
|
||||
this.defaultEndDate = this.endDate;
|
||||
},
|
||||
computed: {
|
||||
defaultStartDate() {
|
||||
if (this.range && this.colVal.start_time) {
|
||||
return new Date(this.colVal.start_time.datetime)
|
||||
} else if (this.colVal.datetime) {
|
||||
return new Date(this.colVal.datetime)
|
||||
}
|
||||
},
|
||||
defaultEndDate() {
|
||||
if (this.range && this.colVal.end_time) {
|
||||
return new Date(this.colVal.end_time.datetime)
|
||||
}
|
||||
},
|
||||
value: {
|
||||
get () {
|
||||
if (this.range) {
|
||||
if (!this.startDate && !this.endDate) return null;
|
||||
if (!(this.startDate instanceof Date)) return null;
|
||||
if (!(this.endDate instanceof Date)) return null;
|
||||
if (!(this.startDate instanceof Date) && !(this.endDate instanceof Date)) return null;
|
||||
|
||||
return {
|
||||
start_time: this.formatDate(this.startDate),
|
||||
end_time: this.formatDate(this.endDate)
|
||||
}
|
||||
};
|
||||
} else {
|
||||
if (!(this.startDate instanceof Date)) return null;
|
||||
return this.formatDate(this.startDate)
|
||||
|
||||
return this.formatDate(this.startDate);
|
||||
}
|
||||
},
|
||||
},
|
||||
placeholder() {
|
||||
switch (this.mode) {
|
||||
case 'date':
|
||||
return this.i18n.t('repositories.item_card.repository_date_value.placeholder');
|
||||
case 'time':
|
||||
return this.i18n.t('repositories.item_card.repository_time_value.placeholder');
|
||||
case 'datetime':
|
||||
return this.i18n.t('repositories.item_card.repository_date_time_value.placeholder');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateStartDate(date) {
|
||||
this.startDate = date
|
||||
this.update()
|
||||
this.startDate = date;
|
||||
if (!(this.startDate instanceof Date)) this.update();
|
||||
},
|
||||
updateEndDate(date) {
|
||||
this.endDate = date
|
||||
this.update()
|
||||
this.endDate = date;
|
||||
if (!(this.endDate instanceof Date)) this.update();
|
||||
},
|
||||
validateValue() {
|
||||
this.error = null;
|
||||
// Date is not changed
|
||||
if (this.defaultStartDate == this.startDate && this.defaultEndDate == this.endDate) return false;
|
||||
|
||||
if (this.range) {
|
||||
// Both empty
|
||||
if (!(this.startDate instanceof Date) && !(this.endDate instanceof Date)) return true;
|
||||
|
||||
// One empty
|
||||
if (!(this.startDate instanceof Date) || !(this.endDate instanceof Date)) {
|
||||
this.error = this.i18n.t('repositories.item_card.date_time.errors.not_valid_range')
|
||||
return false;
|
||||
}
|
||||
|
||||
// Start date is after end date
|
||||
if (this.startDate > this.endDate) {
|
||||
this.error = this.i18n.t('repositories.item_card.date_time.errors.not_valid_range')
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
update() {
|
||||
const params = {}
|
||||
|
||||
if (!this.validateValue()) return;
|
||||
|
||||
params[this.colId] = this.value
|
||||
$.ajax({
|
||||
method: 'PUT',
|
||||
|
@ -88,6 +118,8 @@
|
|||
dataType: 'json',
|
||||
data: { repository_cells: params },
|
||||
success: () => {
|
||||
this.defaultStartDate = this.startDate;
|
||||
this.defaultEndDate = this.endDate;
|
||||
if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -5,6 +5,8 @@
|
|||
:class="{
|
||||
'only-time': mode == 'time',
|
||||
}"
|
||||
@closed="closedHandler"
|
||||
@cleared="clearedHandler"
|
||||
v-model="compDatetime"
|
||||
:teleport="teleport"
|
||||
:no-today="true"
|
||||
|
@ -91,7 +93,7 @@
|
|||
watch: {
|
||||
defaultValue: function () {
|
||||
this.datetime = this.defaultValue;
|
||||
if (this.defaultValue) {
|
||||
if (this.defaultValue instanceof Date) {
|
||||
this.time = {
|
||||
hours: this.defaultValue.getHours(),
|
||||
minutes: this.defaultValue.getMinutes()
|
||||
|
@ -103,7 +105,7 @@
|
|||
|
||||
this.time = null;
|
||||
|
||||
if (this.datetime) {
|
||||
if (this.datetime instanceof Date) {
|
||||
this.time = {
|
||||
hours: this.datetime.getHours(),
|
||||
minutes: this.datetime.getMinutes()
|
||||
|
@ -186,6 +188,12 @@
|
|||
close() {
|
||||
this.$refs.datetimePicker.closeMenu();
|
||||
},
|
||||
closedHandler() {
|
||||
this.$emit('closed');
|
||||
},
|
||||
clearedHandler() {
|
||||
this.$emit('cleared');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue