Convert due_date_select.js filetype to es6.
This commit is contained in:
parent
89bb889c45
commit
039ccc169a
|
@ -116,6 +116,7 @@ Please view this file on the master branch, on stable branches it's out of date.
|
|||
- Grouped pipeline dropdown is a scrollable container
|
||||
- Cleanup Ci::ApplicationController. !6757 (Takuya Noguchi)
|
||||
- Fixes padding in all clipboard icons that have .btn class
|
||||
- Fix due date being displayed as NaN in Safari
|
||||
- Fix a typo in doc/api/labels.md
|
||||
- API: all unknown routing will be handled with 404 Not Found
|
||||
- Add docs for request profiling
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
case 'projects:milestones:new':
|
||||
case 'projects:milestones:edit':
|
||||
new ZenMode();
|
||||
new DueDateSelect();
|
||||
new gl.DueDateSelectors();
|
||||
new GLForm($('.milestone-form'));
|
||||
break;
|
||||
case 'groups:milestones:new':
|
||||
|
|
|
@ -1,107 +0,0 @@
|
|||
(function() {
|
||||
this.DueDateSelect = (function() {
|
||||
function DueDateSelect() {
|
||||
var $datePicker, $dueDate, $loading;
|
||||
// Milestone edit/new form
|
||||
$datePicker = $('.datepicker');
|
||||
if ($datePicker.length) {
|
||||
$dueDate = $('#milestone_due_date');
|
||||
$datePicker.datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
onSelect: function(dateText, inst) {
|
||||
return $dueDate.val(dateText);
|
||||
}
|
||||
}).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $dueDate.val()));
|
||||
}
|
||||
$('.js-clear-due-date').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return $.datepicker._clearDate($datePicker);
|
||||
});
|
||||
// Issuable sidebar
|
||||
$loading = $('.js-issuable-update .due_date').find('.block-loading').hide();
|
||||
$('.js-due-date-select').each(function(i, dropdown) {
|
||||
var $block, $dropdown, $dropdownParent, $selectbox, $sidebarValue, $value, $valueContent, abilityName, addDueDate, fieldName, issueUpdateURL;
|
||||
$dropdown = $(dropdown);
|
||||
$dropdownParent = $dropdown.closest('.dropdown');
|
||||
$datePicker = $dropdownParent.find('.js-due-date-calendar');
|
||||
$block = $dropdown.closest('.block');
|
||||
$selectbox = $dropdown.closest('.selectbox');
|
||||
$value = $block.find('.value');
|
||||
$valueContent = $block.find('.value-content');
|
||||
$sidebarValue = $('.js-due-date-sidebar-value', $block);
|
||||
fieldName = $dropdown.data('field-name');
|
||||
abilityName = $dropdown.data('ability-name');
|
||||
issueUpdateURL = $dropdown.data('issue-update');
|
||||
$dropdown.glDropdown({
|
||||
hidden: function() {
|
||||
$selectbox.hide();
|
||||
return $value.css('display', '');
|
||||
}
|
||||
});
|
||||
addDueDate = function(isDropdown) {
|
||||
var data, date, mediumDate, value;
|
||||
// Create the post date
|
||||
value = $("input[name='" + fieldName + "']").val();
|
||||
if (value !== '') {
|
||||
date = new Date(value);
|
||||
mediumDate = $.datepicker.formatDate('M d, yy', date);
|
||||
} else {
|
||||
mediumDate = 'No due date';
|
||||
}
|
||||
data = {};
|
||||
data[abilityName] = {};
|
||||
data[abilityName].due_date = value;
|
||||
return $.ajax({
|
||||
type: 'PUT',
|
||||
url: issueUpdateURL,
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
beforeSend: function() {
|
||||
var cssClass;
|
||||
$loading.fadeIn();
|
||||
if (isDropdown) {
|
||||
$dropdown.trigger('loading.gl.dropdown');
|
||||
$selectbox.hide();
|
||||
}
|
||||
$value.css('display', '');
|
||||
cssClass = new Date(mediumDate) ? 'bold' : 'no-value';
|
||||
$valueContent.html("<span class='" + cssClass + "'>" + mediumDate + "</span>");
|
||||
$sidebarValue.html(mediumDate);
|
||||
if (value !== '') {
|
||||
return $('.js-remove-due-date-holder').removeClass('hidden');
|
||||
} else {
|
||||
return $('.js-remove-due-date-holder').addClass('hidden');
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
if (isDropdown) {
|
||||
$dropdown.trigger('loaded.gl.dropdown');
|
||||
$dropdown.dropdown('toggle');
|
||||
}
|
||||
return $loading.fadeOut();
|
||||
});
|
||||
};
|
||||
$block.on('click', '.js-remove-due-date', function(e) {
|
||||
e.preventDefault();
|
||||
$("input[name='" + fieldName + "']").val('');
|
||||
return addDueDate(false);
|
||||
});
|
||||
return $datePicker.datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
defaultDate: $("input[name='" + fieldName + "']").val(),
|
||||
altField: "input[name='" + fieldName + "']",
|
||||
onSelect: function() {
|
||||
return addDueDate(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
$(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', function(e) {
|
||||
return e.stopImmediatePropagation();
|
||||
});
|
||||
}
|
||||
|
||||
return DueDateSelect;
|
||||
|
||||
})();
|
||||
|
||||
}).call(this);
|
|
@ -0,0 +1,161 @@
|
|||
(function(global) {
|
||||
class DueDateSelect {
|
||||
constructor({ $dropdown, $loading } = {}) {
|
||||
const $dropdownParent = $dropdown.closest('.dropdown');
|
||||
const $block = $dropdown.closest('.block');
|
||||
this.$loading = $loading;
|
||||
this.$dropdown = $dropdown;
|
||||
this.$dropdownParent = $dropdownParent;
|
||||
this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
|
||||
this.$block = $block;
|
||||
this.$selectbox = $dropdown.closest('.selectbox');
|
||||
this.$value = $block.find('.value');
|
||||
this.$valueContent = $block.find('.value-content');
|
||||
this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
|
||||
this.fieldName = $dropdown.data('field-name'),
|
||||
this.abilityName = $dropdown.data('ability-name'),
|
||||
this.issueUpdateURL = $dropdown.data('issue-update')
|
||||
|
||||
this.rawSelectedDate = null;
|
||||
this.displayedDate = null;
|
||||
this.datePayload = null;
|
||||
|
||||
this.initGlDropdown();
|
||||
this.initRemoveDueDate();
|
||||
this.initDatePicker();
|
||||
this.initStopPropagation();
|
||||
}
|
||||
|
||||
initGlDropdown() {
|
||||
this.$dropdown.glDropdown({
|
||||
hidden: () => {
|
||||
this.$selectbox.hide();
|
||||
this.$value.css('display', '');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initDatePicker() {
|
||||
this.$datePicker.datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
defaultDate: $("input[name='" + this.fieldName + "']").val(),
|
||||
altField: "input[name='" + this.fieldName + "']",
|
||||
onSelect: () => {
|
||||
return this.saveDueDate(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initRemoveDueDate() {
|
||||
this.$block.on('click', '.js-remove-due-date', (e) => {
|
||||
e.preventDefault();
|
||||
$("input[name='" + this.fieldName + "']").val('');
|
||||
return this.saveDueDate(false);
|
||||
});
|
||||
}
|
||||
|
||||
initStopPropagation() {
|
||||
$(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', (e) => {
|
||||
return e.stopImmediatePropagation();
|
||||
});
|
||||
}
|
||||
|
||||
saveDueDate(isDropdown) {
|
||||
this.parseSelectedDate();
|
||||
this.prepSelectedDate();
|
||||
this.submitSelectedDate(isDropdown);
|
||||
}
|
||||
|
||||
parseSelectedDate() {
|
||||
this.rawSelectedDate = $("input[name='" + this.fieldName + "']").val();
|
||||
if (this.rawSelectedDate.length) {
|
||||
let dateObj = new Date(this.rawSelectedDate);
|
||||
this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj);
|
||||
} else {
|
||||
this.displayedDate = 'No due date';
|
||||
}
|
||||
}
|
||||
|
||||
prepSelectedDate() {
|
||||
const datePayload = {};
|
||||
datePayload[this.abilityName] = {};
|
||||
datePayload[this.abilityName].due_date = this.rawSelectedDate;
|
||||
this.datePayload = datePayload;
|
||||
}
|
||||
|
||||
submitSelectedDate(isDropdown) {
|
||||
return $.ajax({
|
||||
type: 'PUT',
|
||||
url: this.issueUpdateURL,
|
||||
data: this.datePayload,
|
||||
dataType: 'json',
|
||||
beforeSend: () => {
|
||||
const selectedDateValue = this.datePayload[this.abilityName].due_date;
|
||||
const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
|
||||
|
||||
this.$loading.fadeIn();
|
||||
|
||||
if (isDropdown) {
|
||||
this.$dropdown.trigger('loading.gl.dropdown');
|
||||
this.$selectbox.hide();
|
||||
}
|
||||
|
||||
this.$value.css('display', '');
|
||||
this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
|
||||
this.$sidebarValue.html(this.displayedDate);
|
||||
|
||||
return selectedDateValue.length ?
|
||||
$('.js-remove-due-date-holder').removeClass('hidden') :
|
||||
$('.js-remove-due-date-holder').addClass('hidden');
|
||||
|
||||
}
|
||||
}).done((data) => {
|
||||
if (isDropdown) {
|
||||
this.$dropdown.trigger('loaded.gl.dropdown');
|
||||
this.$dropdown.dropdown('toggle');
|
||||
}
|
||||
return this.$loading.fadeOut();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class DueDateSelectors {
|
||||
constructor() {
|
||||
this.initMilestoneDueDate();
|
||||
this.initIssuableSelect();
|
||||
}
|
||||
|
||||
initMilestoneDueDate() {
|
||||
const $datePicker = $('.datepicker');
|
||||
|
||||
if ($datePicker.length) {
|
||||
const $dueDate = $('#milestone_due_date');
|
||||
$datePicker.datepicker({
|
||||
dateFormat: 'yy-mm-dd',
|
||||
onSelect: (dateText, inst) => {
|
||||
$dueDate.val(dateText);
|
||||
}
|
||||
}).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $dueDate.val()));
|
||||
}
|
||||
$('.js-clear-due-date').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
$.datepicker._clearDate($datePicker);
|
||||
});
|
||||
}
|
||||
|
||||
initIssuableSelect() {
|
||||
const $loading = $('.js-issuable-update .due_date').find('.block-loading').hide();
|
||||
|
||||
$('.js-due-date-select').each((i, dropdown) => {
|
||||
const $dropdown = $(dropdown);
|
||||
new DueDateSelect({
|
||||
$dropdown,
|
||||
$loading
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
global.DueDateSelectors = DueDateSelectors;
|
||||
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -171,5 +171,5 @@
|
|||
new LabelsSelect();
|
||||
new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
|
||||
new Subscription('.subscription')
|
||||
new DueDateSelect();
|
||||
new gl.DueDateSelectors();
|
||||
sidebar = new Sidebar();
|
||||
|
|
Loading…
Reference in New Issue