mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 15:36:22 +08:00
Merge pull request #6566 from aignatov-bio/ai-sci-9631-update-datetime-picker-table
Replace datepicker in task table [SCI-9631]
This commit is contained in:
aignatov-bio
GitHub
commit
aa5dcb9cb0
|
|
@ -43,7 +43,7 @@ var ExperimnetTable = {
|
|||
return `<a href="${data.url}">${data.count}</a>`;
|
||||
},
|
||||
status: function(data) {
|
||||
return `<div class="my-module-status ${data.light_color ? 'status-light' : ''}"
|
||||
return `<div class="my-module-status ${data.light_color ? 'status-light' : ''}"
|
||||
style="background-color: ${data.color}">${data.name}</div>`;
|
||||
},
|
||||
assigned: function(data) {
|
||||
|
|
@ -141,43 +141,32 @@ var ExperimnetTable = {
|
|||
let dateText = $(element).closest('.date-text');
|
||||
let clearDate = $(element).closest('.datetime-container').find('.clear-date');
|
||||
|
||||
$(element).on('dp.change', function() {
|
||||
$.ajax({
|
||||
url: dueDateContainer.data('update-url'),
|
||||
type: 'PATCH',
|
||||
dataType: 'json',
|
||||
data: { my_module: { due_date: $(element).val() } },
|
||||
success: function(result) {
|
||||
dueDateContainer.find('#dueDateLabelContainer').html(result.table_due_date_label.html);
|
||||
dateText.data('due-status', result.table_due_date_label.due_status);
|
||||
$(`#calendarDueDateContainer${row.id}`).parent().on('dp:ready', () => {
|
||||
$(element).data('dateTimePicker').onChange = () => {
|
||||
$.ajax({
|
||||
url: dueDateContainer.data('update-url'),
|
||||
type: 'PATCH',
|
||||
dataType: 'json',
|
||||
data: { my_module: { due_date: $(element).val() } },
|
||||
success: function(result) {
|
||||
dueDateContainer.find('#dueDateLabelContainer').html(result.table_due_date_label.html);
|
||||
dateText.data('due-status', result.table_due_date_label.due_status);
|
||||
|
||||
if ($(result.table_due_date_label.html).data('due-date')) {
|
||||
clearDate.addClass('open');
|
||||
if ($(result.table_due_date_label.html).data('due-date')) {
|
||||
clearDate.removeClass('tw-hidden');
|
||||
} else {
|
||||
clearDate.addClass('tw-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
clearDate.on('click', () => {
|
||||
$(element).data('dateTimePicker').clearDate();
|
||||
});
|
||||
});
|
||||
|
||||
$(element).on('dp.hide', function() {
|
||||
dateText.attr('data-original-title', dateText.data('due-status'));
|
||||
clearDate.removeClass('open');
|
||||
});
|
||||
|
||||
$(element).on('dp.show', function() {
|
||||
var datePicker = $('.bootstrap-datetimepicker-widget.dropdown-menu')[0];
|
||||
|
||||
// show full datepicker menu for due date
|
||||
if (datePicker.getBoundingClientRect().bottom > window.innerHeight) {
|
||||
datePicker.scrollIntoView(false);
|
||||
} else if (datePicker.getBoundingClientRect().top < 0) {
|
||||
datePicker.scrollIntoView();
|
||||
}
|
||||
|
||||
dateText.attr('data-original-title', '').tooltip('hide');
|
||||
if (dueDateContainer.find('.due-date-label').data('due-date')) {
|
||||
clearDate.addClass('open');
|
||||
}
|
||||
});
|
||||
window.initDateTimePickerComponent(`#calendarDueDateContainer${row.id}`);
|
||||
});
|
||||
},
|
||||
initMyModuleActions: function() {
|
||||
|
|
|
|||
|
|
@ -467,11 +467,8 @@
|
|||
.clear-date {
|
||||
cursor: pointer;
|
||||
left: calc(100% - 16px);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: 16px;
|
||||
width: 24px;
|
||||
|
||||
&.open {
|
||||
visibility: visible;
|
||||
|
|
@ -479,9 +476,6 @@
|
|||
}
|
||||
|
||||
.date-text {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.alert-yellow {
|
||||
color: $brand-warning;
|
||||
margin-left: 4px;
|
||||
|
|
@ -497,7 +491,7 @@
|
|||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(100% - 16px);
|
||||
width: calc(100% - 24px);
|
||||
|
||||
.calendar-due-date {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -3,28 +3,18 @@
|
|||
|
||||
<div id="dueDateContainer" class="datetime-container"
|
||||
data-update-url="<%= my_module_path(my_module, user, format: :json) %>">
|
||||
<span class="date-text" data-editable="<%= due_date_editable %>"
|
||||
<span class="date-text relative flex items-center" data-editable="<%= due_date_editable %>"
|
||||
data-toggle="tooltip" data-placement="top" title="<%= due_status %>" data-due-status="<%= due_status %>">
|
||||
<span id="dueDateLabelContainer" class="view-block" >
|
||||
<%= render partial: "experiments/table_due_date_label" ,
|
||||
locals: { my_module: my_module, user: user } %>
|
||||
</span>
|
||||
<% if due_date_editable %>
|
||||
<div class="datetime-picker-container" id="due-date">
|
||||
<input id="calendarDueDate<%= my_module.id %>"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input calendar-due-date "
|
||||
readonly
|
||||
placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
data-positioning-vertical="bottom"
|
||||
value="<%= my_module.due_date ? l(my_module.due_date, format: :full) : '' %>"/>
|
||||
<div class="datetime-picker-container vue-date-time-picker h-full" id="calendarDueDateContainer<%= my_module.id %>">
|
||||
<input ref="input" type="hidden" v-model="date" id="calendarDueDate<%= my_module.id %>" data-default="<%= my_module.due_date %>" />
|
||||
<date-time-picker class="opacity-0" ref="vueDateTime" @change="updateDate" mode="date" placeholder="<%= t('my_modules.details.no_due_date_placeholder') %>"></date-time-picker>
|
||||
</div>
|
||||
<div class="sn-icon sn-icon-close clear-date"
|
||||
<div class="sn-icon sn-icon-close clear-date <%= 'tw-hidden' if !my_module.due_date %>"
|
||||
data-toggle='clear-date-time-picker'
|
||||
data-target='calendarDueDate<%= my_module.id %>'>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue