2016-12-13 22:01:05 -05:00
|
|
|
/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, prefer-const, padded-blocks, no-unused-vars, no-underscore-dangle, no-new, max-len, semi, no-sequences, no-unused-expressions, no-param-reassign */
|
|
|
|
|
2016-10-11 04:19:18 -04:00
|
|
|
(function(global) {
|
|
|
|
class DueDateSelect {
|
2017-01-02 15:35:33 -05:00
|
|
|
constructor({ $dropdown, $loading } = {}) {
|
2016-10-11 04:19:18 -04:00
|
|
|
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: () => {
|
2016-10-20 03:54:33 -04:00
|
|
|
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
|
2016-10-25 08:16:22 -04:00
|
|
|
gl.issueBoards.BoardsStore.detail.issue.dueDate = $(`input[name='${this.fieldName}']`).val();
|
2016-10-20 03:54:33 -04:00
|
|
|
this.updateIssueBoardIssue();
|
|
|
|
} else {
|
|
|
|
return this.saveDueDate(true);
|
|
|
|
}
|
2016-10-11 04:19:18 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
initRemoveDueDate() {
|
|
|
|
this.$block.on('click', '.js-remove-due-date', (e) => {
|
|
|
|
e.preventDefault();
|
2016-10-20 03:54:33 -04:00
|
|
|
|
|
|
|
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
|
|
|
|
gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
|
|
|
|
this.updateIssueBoardIssue();
|
|
|
|
} else {
|
|
|
|
$("input[name='" + this.fieldName + "']").val('');
|
|
|
|
return this.saveDueDate(false);
|
|
|
|
}
|
2016-10-11 04:19:18 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
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() {
|
2017-01-02 15:35:33 -05:00
|
|
|
this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val();
|
2016-11-11 07:57:51 -05:00
|
|
|
|
2016-10-11 04:19:18 -04:00
|
|
|
if (this.rawSelectedDate.length) {
|
2017-01-02 16:03:16 -05:00
|
|
|
// Construct Date object manually to avoid buggy dateString support within Date constructor
|
2017-01-02 15:48:58 -05:00
|
|
|
const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10));
|
|
|
|
const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
|
2016-10-11 04:19:18 -04:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2016-10-20 03:54:33 -04:00
|
|
|
updateIssueBoardIssue () {
|
|
|
|
this.$loading.fadeIn();
|
|
|
|
this.$dropdown.trigger('loading.gl.dropdown');
|
|
|
|
this.$selectbox.hide();
|
|
|
|
this.$value.css('display', '');
|
|
|
|
|
|
|
|
gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update'))
|
|
|
|
.then(() => {
|
|
|
|
this.$loading.fadeOut();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-10-11 04:19:18 -04:00
|
|
|
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() {
|
2016-11-15 12:48:30 -05:00
|
|
|
this.initMilestoneDatePicker();
|
2016-10-11 04:19:18 -04:00
|
|
|
this.initIssuableSelect();
|
|
|
|
}
|
|
|
|
|
2016-11-15 12:48:30 -05:00
|
|
|
initMilestoneDatePicker() {
|
|
|
|
$('.datepicker').datepicker({
|
|
|
|
dateFormat: 'yy-mm-dd'
|
|
|
|
});
|
2016-10-11 04:19:18 -04:00
|
|
|
|
2016-11-15 12:48:30 -05:00
|
|
|
$('.js-clear-due-date,.js-clear-start-date').on('click', (e) => {
|
2016-10-11 04:19:18 -04:00
|
|
|
e.preventDefault();
|
2016-11-15 12:48:30 -05:00
|
|
|
const datepicker = $(e.target).siblings('.datepicker');
|
|
|
|
$.datepicker._clearDate(datepicker);
|
2016-10-11 04:19:18 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
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 = {}));
|